CodingSouls团队项目冲刺(9)-个人概况

团队冲刺第九天：

　　题库主页面设计

<% this.title = '题库' %>
<% include header %>
<%
let tagIDs = [];
if (typeof tags !== 'undefined') tagIDs = tags.map(x => x.id);
%>
<div class="padding">
  <div class="ui grid" style="margin-bottom: 10px; ">
    <div class="row" style="white-space: nowrap; ">
      <div class="seven wide column">
        <% if (typeof tags !== 'undefined') { %>
          <%
          tags.sort((a, b) => {
            return a.color > b.color ? 1 : -1;
          });
          %>
          <% for (let tag of tags) { %>
              <% let tagListRemovedThisTag = tagIDs.filter(x => x != tag.id).sort().join(','); %>
              <% let url = tagListRemovedThisTag ? syzoj.utils.makeUrl(['problems', 'tag', tagListRemovedThisTag]) : syzoj.utils.makeUrl(['problems']); %>
              <a href="<%= url %>" class="ui tiny <%= tag.color %> label">
                <%= tag.name %>
              </a>
          <% } %>
        <% } else { %>
          <form action="<%= syzoj.utils.makeUrl(['problems', 'search']) %>" method="get">
            <div class="ui search" style=" 280px; height: 28px; margin-top: -5.3px; ">
              <div class="ui left icon input" style=" 100%; ">
                <input class="prompt" style=" 100%; " type="text" value="<%= req.query.keyword %>" placeholder="ID / 题目名 …" name="keyword">
                <i class="search icon"></i>
              </div>
              <div class="results" style=" 100%; "></div>
            </div>
          </form>
        <% } %>
      </div>
      <div class="nine wide right aligned column">
        <div class="ui toggle checkbox" id="show_tag">
          <style id="show_tag_style"></style>
         

          <script>
          $(function () {
            $('#show_tag').checkbox('setting', 'onChange', function () {
              let checked = $('#show_tag').checkbox('is checked');
              localStorage.setItem('show_tag', checked ? '1' : '0');
              if (checked) {
                document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { white-space: nowrap; overflow: hidden; }';
              } else {
                document.getElementById('show_tag_style').innerHTML = '.show_tag_controled {  0; white-space: nowrap; overflow: hidden; }';
              }
            });
          });
          </script>

        </div>
        <div style="margin-left: 10px; display: inline-block; ">
          <% if (allowedManageTag) { %>
            <% if (typeof tags !== 'undefined' && tags.length === 1) { %>
              
            <% } %>
          
          <% } %>
          <div style="margin-left: 10px; " class="ui mini buttons">
            <div class="ui labeled icon mini dropdown button" id="add_problem_dropdown"><i class="plus icon"></i> 添加题目
            <div class="menu">
              <a class="item" href="<%= syzoj.utils.makeUrl(['problem', 0, 'edit']) %>"><i class="file icon"></i> 新建题目</a>
              

            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <% if (problems.length) { %>
  <div style="margin-bottom: 30px; ">
    <% include page %>
  </div>
  <table class="ui very basic center aligned table">
    <thead>
      <tr>
        <% if (user) { %>
        <th class="one wide">提交状态</th>
        <% } %>
        <th class="one wide"><%- createSortableTitle('id', '编号', true) %></th>
        <th class="left aligned"><%- createSortableTitle('title', '题目名称', true) %></th>
        <th class="one wide"><%- createSortableTitle('ac_num', '通过', false) %></th>
        <th class="one wide"><%- createSortableTitle('submit_num', '提交', false) %></th>
        <th class="one wide">通过率</th>
      </tr>
    </thead>
    <tbody>
    <% for (let problem of problems) { %>
        <% if (problem.is_public || problem.allowedEdit) { %>
        <tr style="height: 44px; ">
            <% if (user) { %>
                <td>
                <% if (problem.judge_state) { %>
                  <a href="<%= syzoj.utils.makeUrl(['submission', problem.judge_state.id]) %>">
                    <span class="status <%= problem.judge_state.status.toLowerCase().split(' ').join('_') %>">
                      <i class="<%= icon[problem.judge_state.status] || 'remove' %> icon"></i>
                    </span>
                  </a>
                <% } %>
                </td>
            <% } %>
            <td><b><%= problem.id %></b></td>
            <td class="left aligned">
              <a style="vertical-align: middle; " href="<%= syzoj.utils.makeUrl(['problem', problem.id]) %>"><%= problem.title %>
                <% if (!problem.is_public) { %><span class="ui header"><span class="ui tiny red label">未公开</span></span><% } %>
              </a>
              <div class="show_tag_controled" style="float: right; ">
                <%
                if (problem.tags) {
                  for (let tag of problem.tags) {
                    let tagListToggledThisTag;
                    if (!tagIDs.includes(tag.id)) tagListToggledThisTag = tagIDs.concat([tag.id]);
                    else tagListToggledThisTag = tagIDs.filter(x => x != tag.id);
                    tagListToggledThisTag = tagListToggledThisTag.sort().join(',');

                    let url = tagListToggledThisTag ? syzoj.utils.makeUrl(['problems', 'tag', tagListToggledThisTag]) : syzoj.utils.makeUrl(['problems']);
                  %>
                  <span class="ui header">
                    <a href="<%= url %>" class="ui tiny <%= tag.color %> label">
                      <%= tag.name %>
                    </a>
                  </span>
                  <%
                  }
                }
                %>
              </div>
            </td>
            <td><%= problem.ac_num %></td>
            <td><%= problem.submit_num %></td>
            <td><%= problem.submit_num != 0 ? (((problem.ac_num / problem.submit_num * 100) || 0).toFixed(2) + '%') : '-' %></td>
        </tr>
        <% } %>
    <% } %>
    </tbody>
  </table><br>
  <% include page  %>
  <% } else { %>
  <div class="ui placeholder segment">
    <div class="ui icon header">
      <% if (typeof req.query.keyword !== 'undefined') { %>
      <i class="search icon" style="margin-bottom: 20px; "></i>
      找不到符合条件的题目
      <% } else { %>
      <i class="list icon" style="margin-bottom: 20px; "></i>
      暂无题目
      <% } %>
    </div>
  </div>
  <% } %>
<script>
document.addEventListener('keydown', function (event) {
  if (event.keyCode === 39) document.getElementById('page_next').click();
  else if (event.keyCode === 37) document.getElementById('page_prev').click();
});

$(function () {
  $('#add_problem_dropdown').dropdown();
});
</script>
<script>
$(function () {
  $('.ui.search').search({
    debug: true,
    apiSettings: {
      url: '/api/v2/search/problems/{query}',
      cache: false
    },
    fields: {
      title: 'name'
    }
  });
});
</script>
</div>
<% include footer %>