fair-web/views/status_label.ejs

<script>
const iconList = {
  'Accepted': 'checkmark',
  'Wrong Answer': 'remove',
  'Runtime Error': 'bomb',
  'Invalid Interaction': 'ban',
  'Time Limit Exceeded': 'clock',
  'Memory Limit Exceeded': 'microchip',
  'Output Limit Exceeded': 'print',
  'File Error': 'file outline',
  'Waiting': 'hourglass half',
  'Running': 'spinner',
  'Compiling': 'spinner',
  'Judging': 'spinner',
  'Compile Error': 'code',
  'Submitted': 'checkmark', // NOI contests
  'System Error': 'server',
  'No Testdata': 'folder open outline',
  'Partially Correct': 'minus',
  'Judgement Failed': 'server',
  'Skipped': 'fast forward'
};
Vue.component('status-label', {
  template: '#statusIconTemplate',
  props: ['status', 'indetail', 'progress'],
  computed: {
    icon() {
      var x = this.status.startsWith('Running') ? 'Running' : this.status;
      if (x in iconList) {
        return iconList[x];
      } else {
        return 'question circle';
      }
    },
    colorClass() {
      var x = this.status.startsWith('Running') ? 'Running' : this.status;
      return (this.indetail ? 'status_detail ' : '') + x.toLowerCase().split(' ').join('_');
    },
    displayStatus() {
      return this.status.startsWith('Running') ? 'Running' : this.status;
    },
    getProgress() {
      if (this.status.startsWith('Running ')) {
        var tmp = this.status.split(' ')[1].trim().split('/');
        return { total: tmp[1], finished: tmp[0] };
      }
      return this.progress;
    }
  }
})
</script>
<script type="text/x-template" id="statusIconTemplate">
  <span class="status" :class="colorClass">
    <i class="icon" :class="icon"></i>
    <template v-if="['Running', 'Waiting'].includes(displayStatus) && getProgress && getProgress.total">
      <span style="text-align: left; display: inline-block; width: 58px; ">{{ displayStatus }}</span>{{getProgress.finished }}/{{ getProgress.total }}
    </template>
    <template v-else>
      {{ displayStatus }}
    </template>
  </span>
</script>