CodingSouls团队项目第二阶段冲刺(3)-个人概况

团队项目第二阶段冲刺第三天：

　　评测页面设计：

<% 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', '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() {
      return submissionUrl.replace('20000528', this.data.info.submissionId);
    },
    problemLink() {
      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>

<script id="submissionItemTemplate" type="text/x-template">
<tr>
  <% 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>

  <% 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>
      </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>
</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');
}
</script>
<% } %>