fair-web/views/submissions_item.ejs

<% include util %>
<% include status_label %>

<script>
  function formatSize(x, precision) {
    if (typeof x !== 'number') return '0 B';
    var unit = 'B', units = ['K', 'M', 'G', 'T'];
    for (var i in units) if (x > 1024) x /= 1024, unit = units[i];
    var fixed = x === Math.round(x) ? x.toString() : x.toFixed(precision);
    return fixed + ' ' + unit;
  }

  const submissionUrl = <%- serializejs(displayConfig.inContest ?
    syzoj.utils.makeUrl(['contest', 'submission', '20000528']) :
    syzoj.utils.makeUrl(['submission', '20000528'])) %>;
  const problemUrl = <%- serializejs(displayConfig.inContest ?
    syzoj.utils.makeUrl(['contest', contest.id, 'problem', '20000528']) :
    syzoj.utils.makeUrl(['problem', '20000528'])) %>;
  const userUrl = <%- serializejs(syzoj.utils.makeUrl(['user', '20000528'])) %>;

  Vue.component('submission-item', {
    template: '#submissionItemTemplate',
    props: ['data', 'config', 'showRejudge', 'showShare', 'progress', 'compiling', 'rough'],
    computed: {
      statusString() {
        const data = this.data;

        if (data.result) {
          return data.result.result;
        } else if (data.running) {
          if (this.rough) return 'Judging';
          if (this.compiling) return 'Compiling';
          return 'Running';
        } else return 'Waiting';
      },
      submissionLink() {
        if (this.data.info.c_id && this.data.info.isPractice) {
          const practiceUrl = `practice/${this.data.info.submissionId}/${this.data.info.problemId}/${this.data.info.c_id}`
          return submissionUrl.replace('20000528', practiceUrl);
        }
        return submissionUrl.replace('20000528', this.data.info.submissionId);
      },
      problemLink() {
        if (this.data.info.c_id && this.data.info.isPractice) {
          return `practice/classify/${this.data.info.c_id}/problem/${this.data.info.problemId}`
        }
        return problemUrl.replace('20000528', this.data.info.problemId);
      },
      userLink() {
        return userUrl.replace('20000528', this.data.info.userId);
      },
      scoreClass() {
        return "score_" + (parseInt(this.data.result.score / 10) || 0).toString();
      }
    },
    methods: {
      alpha(number) {
        if (number && parseInt(number) == number && parseInt(number) > 0) return String.fromCharCode('A'.charCodeAt(0) + parseInt(number) - 1);
      }
    },
    mounted() {
      textFit(this.$refs.problemLabelTextFit, {maxFontSize: 14});
    }
  });
</script>
<style>
    .success{
        color: #498E2B;
    }
</style>

<script id="submissionItemTemplate" type="text/x-template">
  <tr>
    <td><i class="icon" :class="data.info.is_share ? 'smile outline success': 'meh outline'" style="font-size: 1.5em"></i></td>
    <% if (active === 'submissions') { %>
      <td><a :href="submissionLink"><b>#{{ data.info.submissionId }}</b></a></td>
    <% } else { %>
      <td><b>#{{ data.info.submissionId }}</b></td>
    <% } %>
    <td ref="problemLabel"><a ref="problemLabelTextFit"
                              style="width: 230px; height: 22px; display: block; margin: 0 auto; line-height: 22px;"
                              :href="problemLink"><b>#{{ config.inContest ? alpha(data.info.problemId) :
          data.info.problemId }}.</b> {{ data.info.problemName }}</a></td>
    <% if (active === 'submissions') { %>
      <td><a :href="submissionLink"><b>
            <status-label :status="statusString" :progress="progress"></status-label>
          </b></a></td>
    <% } else { %>
      <td><b>
          <status-label :status="statusString" :progress="progress"></status-label>
        </b></td>
    <% } %>

    <template v-if="data.result">
      <% if (active === 'submissions') { %>
        <td v-if="config.showScore"><a :href="submissionLink"><span class="score" :class="scoreClass">{{ Math.floor(data.result.score || 0) }}</span></a>
        </td>
      <% } else { %>
        <td v-if="config.showScore"><span class="score"
                                          :class="scoreClass">{{ Math.floor(data.result.score || 0) }}</span></td>
      <% } %>
      <td v-if="config.showUsage">{{ (data.result.time || 0).toString() + ' ms' }}</td>

      <td v-if="config.showUsage">{{ (data.result.maxItemTime || 0).toString() + ' ms' }}</td>

      <% if (active === 'submissions') { %>
        <td v-if="config.showUsage">{{ formatSize(data.result.memory * 1024, 2) }}</td>
      <% } else { %>
        <td v-if="config.showUsage">{{ (data.result.memory || 0).toString() + ' K'}}</td>
      <% } %>

    </template>
    <template v-else>
      <td v-if="config.showScore"><a :href="submissionLink"><span class="score score_0">0</span></a></td>
      <td v-if="config.showUsage">0 ms</td>
      <td v-if="config.showUsage">0 B</td>
    </template>

    <td v-if="config.showCode">
      <% if (active === 'submissions') { %>
        <span v-if="data.info.language"><a :href="submissionLink"><b>{{ data.info.language }}</b></a> / </span>
      <% } else { %>
        <span v-if="data.info.language"><b>{{ data.info.language }}</b> / </span>
      <% } %>
      {{ formatSize(data.info.codeSize, 1) }}
    </td>
    <td><a :href="userLink">{{ data.info.user }}</a></td>
    <td>{{ data.info.submitTime }}</td>
    <td v-if="showRejudge">
      <a id="rejudge-button"
         :onclick="'check_rejudge(' + (statusString === 'Waiting' || statusString.startsWith('Running')).toString() + ')'"
         style="color: #000; " href="#"><i class="repeat icon"></i></a>
      <% if (active === 'submission') { %>
        <div class="ui basic modal" id="modal-rejudge">
          <div class="ui icon header">
            <i class="retweet icon"></i>
            <p style="margin-top: 15px; ">重新评测</p>
          </div>
          <div class="content" style="text-align: center; ">
            <p>确认重新评测该提交记录吗？</p>
            <p id="warning_pending"><strong>警告：只有管理员可以重新评测一个未评测完成的记录，<br>这种情况一般发生在评测服务中断后，如果一个提交正在被评测，<br>则将其重新评测会导致系统错乱！</strong>
            </p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              否
            </div>
            <a class="ui green ok inverted button" :href-post="submissionLink + '/rejudge'">
              <i class="checkmark icon"></i>
              是
            </a>
          </div>
        </div>
      <% } %>
    </td>
    <td v-if="showShare">
      <a id="share-button"
         :onclick="'check_share()'"
         style="color: #000; " href="#"><i class="share icon"></i></a>
      <% if (active === 'submission') { %>
        <div class="ui basic modal" id="modal-share">
          <div class="ui icon header">
            <i class="share icon"></i>
            <p style="margin-top: 15px; ">分享</p>
          </div>
          <div class="content" style="text-align: center; ">
            <p>确认分享该提交记录吗？</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              否
            </div>
            <a class="ui green ok inverted button" :href-post="submissionLink + '/share'">
              <i class="checkmark icon"></i>
              是
            </a>
          </div>
        </div>
      <% } %>
    </td>
  </tr>
</script>
<% if (active === 'submission') { %>
  <script>
    function check_rejudge(pending) {
      if (pending) {
        $('#warning_pending').css('display', '');
      } else {
        $('#warning_pending').css('display', 'none');
      }
      $('#modal-rejudge').modal('show');
    }

    function check_share() {
      $('#modal-share').modal('show');
    }
  </script>
<% } %>