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',
  '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() {
      if (this.status in iconList) {
        return iconList[this.status];
      } else {
        return 'man';
      }
    },
    colorClass() {
      return (this.indetail ? 'status_detail ' : '') + this.status.toLowerCase().split(' ').join('_');
    }
  }
})
</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(status) && progress && progress.total">
      <span style="text-align: left; display: inline-block; width: 58px; ">{{ status }}</span>{{ progress.finished }}/{{ progress.total }}
    </template>
    <template v-else>
      {{ status }}
    </template>
  </span>
</script>