CodingSouls团队项目冲刺(9)-个人概况
团队冲刺第九天：
题库主页面设计
1 <% this.title = '题库' %> 2 <% include header %> 3 <% 4 let tagIDs = []; 5 if (typeof tags !== 'undefined') tagIDs = tags.map(x => x.id); 6 %> 7 <div class="padding"> 8 <div class="ui grid" style="margin-bottom: 10px; "> 9 <div class="row" style="white-space: nowrap; "> 10 <div class="seven wide column"> 11 <% if (typeof tags !== 'undefined') { %> 12 <% 13 tags.sort((a, b) => { 14 return a.color > b.color ? 1 : -1; 15 }); 16 %> 17 <% for (let tag of tags) { %> 18 <% let tagListRemovedThisTag = tagIDs.filter(x => x != tag.id).sort().join(','); %> 19 <% let url = tagListRemovedThisTag ? syzoj.utils.makeUrl(['problems', 'tag', tagListRemovedThisTag]) : syzoj.utils.makeUrl(['problems']); %> 20 <a href="<%= url %>" class="ui tiny <%= tag.color %> label"> 21 <%= tag.name %> 22 </a> 23 <% } %> 24 <% } else { %> 25 <form action="<%= syzoj.utils.makeUrl(['problems', 'search']) %>" method="get"> 26 <div class="ui search" style="width: 280px; height: 28px; margin-top: -5.3px; "> 27 <div class="ui left icon input" style="width: 100%; "> 28 <input class="prompt" style="width: 100%; " type="text" value="<%= req.query.keyword %>" placeholder="ID / 题目名 …" name="keyword"> 29 <i class="search icon"></i> 30 </div> 31 <div class="results" style="width: 100%; "></div> 32 </div> 33 </form> 34 <% } %> 35 </div> 36 <div class="nine wide right aligned column"> 37 <div class="ui toggle checkbox" id="show_tag"> 38 <style id="show_tag_style"></style> 39 40 41 <script> 42 $(function () { 43 $('#show_tag').checkbox('setting', 'onChange', function () { 44 let checked = $('#show_tag').checkbox('is checked'); 45 localStorage.setItem('show_tag', checked ? '1' : '0'); 46 if (checked) { 47 document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { white-space: nowrap; overflow: hidden; }'; 48 } else { 49 document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { width: 0; white-space: nowrap; overflow: hidden; }'; 50 } 51 }); 52 }); 53 </script> 54 55 </div> 56 <div style="margin-left: 10px; display: inline-block; "> 57 <% if (allowedManageTag) { %> 58 <% if (typeof tags !== 'undefined' && tags.length === 1) { %> 59 60 <% } %> 61 62 <% } %> 63 <div style="margin-left: 10px; " class="ui mini buttons"> 64 <div class="ui labeled icon mini dropdown button" id="add_problem_dropdown"><i class="plus icon"></i> 添加题目 65 <div class="menu"> 66 <a class="item" href="<%= syzoj.utils.makeUrl(['problem', 0, 'edit']) %>"><i class="file icon"></i> 新建题目</a> 67 68 69 </div> 70 </div> 71 </div> 72 </div> 73 </div> 74 </div> 75 </div> 76 77 <% if (problems.length) { %> 78 <div style="margin-bottom: 30px; "> 79 <% include page %> 80 </div> 81 <table class="ui very basic center aligned table"> 82 <thead> 83 <tr> 84 <% if (user) { %> 85 <th class="one wide">提交状态</th> 86 <% } %> 87 <th class="one wide"><%- createSortableTitle('id', '编号', true) %></th> 88 <th class="left aligned"><%- createSortableTitle('title', '题目名称', true) %></th> 89 <th class="one wide"><%- createSortableTitle('ac_num', '通过', false) %></th> 90 <th class="one wide"><%- createSortableTitle('submit_num', '提交', false) %></th> 91 <th class="one wide">通过率</th> 92 </tr> 93 </thead> 94 <tbody> 95 <% for (let problem of problems) { %> 96 <% if (problem.is_public || problem.allowedEdit) { %> 97 <tr style="height: 44px; "> 98 <% if (user) { %> 99 <td> 100 <% if (problem.judge_state) { %> 101 <a href="<%= syzoj.utils.makeUrl(['submission', problem.judge_state.id]) %>"> 102 <span class="status <%= problem.judge_state.status.toLowerCase().split(' ').join('_') %>"> 103 <i class="<%= icon[problem.judge_state.status] || 'remove' %> icon"></i> 104 </span> 105 </a> 106 <% } %> 107 </td> 108 <% } %> 109 <td><b><%= problem.id %></b></td> 110 <td class="left aligned"> 111 <a style="vertical-align: middle; " href="<%= syzoj.utils.makeUrl(['problem', problem.id]) %>"><%= problem.title %> 112 <% if (!problem.is_public) { %><span class="ui header"><span class="ui tiny red label">未公开</span></span><% } %> 113 </a> 114 <div class="show_tag_controled" style="float: right; "> 115 <% 116 if (problem.tags) { 117 for (let tag of problem.tags) { 118 let tagListToggledThisTag; 119 if (!tagIDs.includes(tag.id)) tagListToggledThisTag = tagIDs.concat([tag.id]); 120 else tagListToggledThisTag = tagIDs.filter(x => x != tag.id); 121 tagListToggledThisTag = tagListToggledThisTag.sort().join(','); 122 123 let url = tagListToggledThisTag ? syzoj.utils.makeUrl(['problems', 'tag', tagListToggledThisTag]) : syzoj.utils.makeUrl(['problems']); 124 %> 125 <span class="ui header"> 126 <a href="<%= url %>" class="ui tiny <%= tag.color %> label"> 127 <%= tag.name %> 128 </a> 129 </span> 130 <% 131 } 132 } 133 %> 134 </div> 135 </td> 136 <td><%= problem.ac_num %></td> 137 <td><%= problem.submit_num %></td> 138 <td><%= problem.submit_num != 0 ? (((problem.ac_num / problem.submit_num * 100) || 0).toFixed(2) + '%') : '-' %></td> 139 </tr> 140 <% } %> 141 <% } %> 142 </tbody> 143 </table><br> 144 <% include page %> 145 <% } else { %> 146 <div class="ui placeholder segment"> 147 <div class="ui icon header"> 148 <% if (typeof req.query.keyword !== 'undefined') { %> 149 <i class="search icon" style="margin-bottom: 20px; "></i> 150 找不到符合条件的题目 151 <% } else { %> 152 <i class="list icon" style="margin-bottom: 20px; "></i> 153 暂无题目 154 <% } %> 155 </div> 156 </div> 157 <% } %> 158 <script> 159 document.addEventListener('keydown', function (event) { 160 if (event.keyCode === 39) document.getElementById('page_next').click(); 161 else if (event.keyCode === 37) document.getElementById('page_prev').click(); 162 }); 163 164 $(function () { 165 $('#add_problem_dropdown').dropdown(); 166 }); 167 </script> 168 <script> 169 $(function () { 170 $('.ui.search').search({ 171 debug: true, 172 apiSettings: { 173 url: '/api/v2/search/problems/{query}', 174 cache: false 175 }, 176 fields: { 177 title: 'name' 178 } 179 }); 180 }); 181 </script> 182 </div> 183 <% include footer %>
