fair-web/views/submissions.ejs

<% this.title = '提交记录' %>
<% include header %>
<% include util %>
<script src="/textFit.js"></script>
<div class="padding">
  <form action="<%= syzoj.utils.makeUrl(['submissions']) %>" class="ui mini form" method="get" role="form" id="form">
    <div class="inline fields" style="margin-bottom: 25px; white-space: nowrap; ">
      <label style="font-size: 1.2em; margin-right: 1px; ">题目：</label>
      <div class="field"><input name="problem_id" style="width: 50px; " type="text" value="<%= form.problem_id %>"></div>
      <label style="font-size: 1.2em; margin-right: 1px; ">提交者：</label>
      <div class="field"><input name="submitter" style="width: 100px; " type="text" value="<%= form.submitter %>"></div>
      <label style="font-size: 1.2em; margin-right: 1px; ">分数：</label>
      <div class="field" style="padding-right: 6px; "><input name="min_score" style="width: 45px; " type="text" value="<%= form.min_score || 0 %>"></div>
      <label style="font-size: 1.2em; margin-right: 7px; ">～</label>
      <div class="field"><input name="max_score" style="width: 45px; " type="text" value="<%= form.max_score || 100 %>"></div>
      <label style="font-size: 1.2em; margin-right: 1px; ">语言：</label>
      <div class="field">
        <div class="ui fluid selection dropdown" id="select_language" style="width: 110px; ">
          <input type="hidden" name="language" value="<%= form.language %>">
          <i class="dropdown icon"></i>
          <div class="default text"></div>
          <div class="menu">
            <div class="item" data-value="">不限</div>
            <div class="item" data-value="submit-answer">提交答案</div>
            <% for (let lang in syzoj.config.languages) { %>
              <div class="item" data-value="<%= lang %>"><%= syzoj.config.languages[lang].show %></div>
            <% } %>
          </div>
        </div>
      </div>
      <label style="font-size: 1.2em; margin-right: 1px; ">状态：</label>
      <div class="field">
        <div class="ui fluid selection dropdown" id="select_status" style="width: 210px; ">
          <input type="hidden" name="status" value="<%= form.status %>">
          <i class="dropdown icon"></i>
          <div class="default text"></div>
          <div class="menu">
            <div class="item" data-value="">不限<i class="dropdown icon" style="visibility: hidden; "></i></div>
            <% for (let status in this.icon) { %>
              <% if (this.iconHidden.includes(status)) continue; %>
              <div class="item" data-value="<%= status %>"><span class="status <%= status.toLowerCase().split(' ').join('_') %>"><i class="<%= this.icon[status] %> icon"></i> <%= status %></div>
            <% } %>
          </div>
        </div>
      </div>
      <button class="ui labeled icon mini button" type="submit">
        <i class="search icon"></i>
        搜索
      </button>
      <% if (user) { %>
      <a class="ui mini labeled icon blue button" style="margin-left: auto; " id="my_submit">
        <i class="user icon"></i>
        我的提交
      </a>
      <script>
      $(function () {
        $('#my_submit').click(function () {
          $('[name=submitter]').val(<%- JSON.stringify(user.username) %>);
          $('#form').submit();
        });
      });
      </script>
      <% } %>
    </div>
  </form>
  <table id="vueApp" class="ui very basic center aligned table" style="white-space: nowrap; " id="table">
    <thead>
      <tr>
        <th>编号</th>
        <th>题目</th>
        <th>状态</th>
        <th>分数</th>
        <th>总时间</th>
        <th>内存</th>
        <th>代码 / 答案文件</th>
        <th>提交者</th>
        <th>提交时间</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" is='submission-item' v-bind:data="item">
      <fake a/> <%# <-- a temporary workaround for a syntaxing bug by Visual Studio Code ejs plugin %>
      </tr>
    </tbody>
  </table>
  <script>
  // document.getElementById('table').style.visibility = '';
  </script>
  <br>
  <% include page %>
</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>

<% include submissions_item %>
<script>
$(function () {
  $('#select_language').dropdown();
  $('#select_status').dropdown();
});
const itemList = <%- JSON.stringify(items) %>;

const socketUrl = <%- syzoj.utils.judgeServer('rough') %>;
const vueApp = new Vue({
  el: '#vueApp',
  data: {
    items: itemList
  },
});

if (itemList.some(t => t.token != null)) {
  const socket = io(socketUrl);
  socket.on('connect', () => {
    for (let x of itemList.filter(x => x.token != null)){
      socket.emit('join', x.token, (data) => {
        if (data && data.ok) {
          if (data.running) {
            x.running = true;
          } else if (data.finished) {
            x.running = false;
            x.result = data.result;
          }
        } else {
          alert("ERROR: " + JSON.stringify(data));
        }
      });

      const getItem = (id) => itemList.find(x => x.taskId === id);
      socket.on('start', (data) => {
        getItem(data.taskId).running = true;
      });

      socket.on('finish', (data) => {
        getItem(data.taskId).running = false;
        getItem(data.taskId).result = data.result;
        if (itemList.every(x => x.result)) {
          socket.close();
        }
      });
    }
  })
}
</script>
<% include footer %>