[WIP]Contest page

src/api/index.js

@@ -60,6 +60,10 @@ export default {
     const res = await axios.get(`${API_ENDPOINT}/contests/${contestID}/statuses`, getConfig(sessionID));
     return res;
   },
+  async getContestStandings(sessionID, contestID) {
+    const res = await axios.get(`${API_ENDPOINT}/contests/${contestID}/standings`, getConfig(sessionID));
+    return res;
+  },
   async enterContest(sessionID, contestID) {
     const res = await axios.post(`${API_ENDPOINT}/contests/${contestID}/enter`, {}, getConfig(sessionID));
     return res;

src/components/common/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal" :class="{ 'is-active': isActive }">
     <div class="modal-background" @click="$emit('close')"></div>
-    <div class="modal-card">
+    <div class="modal-card" :class="{wide: isWide}">
       <header class="modal-card-head">
         <p class="modal-card-title">{{title}}</p>
         <button class="delete" aria-label="close" @click="$emit('close')"></button>
@@ -20,6 +20,12 @@ export default {
   props: {
     title: String,
     isActive: Boolean,
+    isWide: Boolean,
   },
 };
 </script>
+<style scoped>
+  .wide{
+    width: 90%;
+  }
+</style>

src/components/contest/Contest.vue

@@ -20,7 +20,7 @@
             </div>
             <div class="navbar-end">
               <span v-if="canEnter && !isEntered && problems === null" class="navbar-item">
-                <button @click.once="enter()" class="button is-large is-outlined">
+                <button @click="enter" class="button is-large is-outlined">
                   コンテストに参加する
                 </button>
               </span>
@@ -33,7 +33,7 @@
                   提出一覧
                 </button>
                 <button
-                  @click="showRanking"
+                  @click="showStandings"
                   class="button is-outlined"
                   :disabled="problems === null || problems.length === 0"
                 >
@@ -82,8 +82,44 @@
           <div class="column">
             <Problem :problem="problems[activeTab]"/>
           </div>
-          <Modal :isActive="showRankingModal" @close="showRankingModal = false" title="順位">
-            <h1>aaa</h1>
+          <Modal
+            :isActive="showStandingsModal"
+            @close="showStandingsModal = false"
+            isWide
+            title="順位"
+          >
+            <table class="table is-fullwidth fixed-table">
+              <thead>
+                <tr>
+                  <th>順位</th>
+                  <th>名前</th>
+                  <th v-for="(_, i) in problems" :key="i">
+                    {{num2alpha(i).toUpperCase()}}
+                  </th>
+                  <th>合計</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(column, i) in standings" :key="i">
+                  <td>{{i + 1}}</td>
+                  <td>{{column.displayName}}</td>
+                  <td
+                    v-for="(detail, j) in column.details"
+                    :key="j"
+                    v-if="detail"
+                    :class="{'is-success': detail.accepted}"
+                  >
+                    {{detail.point}}<br>
+                    <template v-if="detail.accepted">
+                      {{formatDate(detail.updatedAt, 'HH:mm:ss')}}<br>
+                    </template>
+                    {{detail.wrongCount}} WA
+                  </td>
+                  <td v-else>-</td>
+                  <td>{{column.totalPoint}}</td>
+                </tr>
+              </tbody>
+            </table>
           </Modal>
           <Modal :isActive="showSubmitListModal" @close="showSubmitListModal = false" title="提出一覧">
             <h1>bbb</h1>
@@ -136,7 +172,7 @@ export default {
   data() {
     return {
       showDescription: false,
-      showRankingModal: false,
+      showStandingsModal: false,
       showSubmitListModal: false,
       activeTab: 0,
       diff: 300000,
@@ -152,6 +188,7 @@ export default {
       'endAt',
       'writers',
       'problems',
+      'standings',
       'participants',
       'id',
       'error',
@@ -180,11 +217,16 @@ export default {
     const intervalId = setInterval(() => {
       const serverTime = moment().add(this.timeDiff);
       this.diff = moment(this.startAt).diff(serverTime);
+      if (this.problems !== null) {
+        clearInterval(intervalId);
+        return false;
+      }
       if (this.diff <= 0 && this.isEntered) {
         this.getProblems();
         clearInterval(intervalId);
+        return false;
       }
-      if (this.problems !== null) clearInterval(intervalId);
+      return false;
     }, 1000);
   },
   beforeDestroy() {
@@ -196,6 +238,7 @@ export default {
       'statusesWatcher',
       'updateContest',
       'getProblems',
+      'getStandings',
       'enter',
     ]),
     ...mapMutations('koneko/contests', [
@@ -207,16 +250,17 @@ export default {
     showSubmitList() {
       this.showSubmitListModal = true;
     },
-    showRanking() {
-      this.showRankingModal = true;
+    showStandings() {
+      this.showStandingsModal = true;
+      this.getStandings();
     },
     num2alpha(num) {
       return String.fromCharCode(97 + num);
     },
-    formatDate(date) {
+    formatDate(date, format) {
       return moment(date)
         .locale('ja')
-        .format('YYYY/MM/DD(ddd) HH:mm')
+        .format(format || 'YYYY/MM/DD(ddd) HH:mm')
       ;
     },
   },
@@ -251,4 +295,7 @@ export default {
   .margin-bottom{
     margin-bottom: 20px;
   }
+  .fixed-table{
+    table-layout: fixed;
+  }
 </style>

src/store/modules/contests.js

@@ -13,6 +13,7 @@ export default {
     writers: [],
     problems: null,
     participants: [],
+    standings: [],
     statusesWatcherFlag: false,
     requiredWatching: false,
     isWaitingJudge: false,
@@ -58,6 +59,9 @@ export default {
     setProblems(state, problems) {
       state.problems = problems.map(v => ({ ...v, status: -1 }));
     },
+    setStandings(state, standings) {
+      state.standings = standings;
+    },
     setStatuses(state, statuses) {
       statuses.forEach((statusElem) => {
         for (let i = 0; i < state.problems.length; i += 1) {
@@ -134,5 +138,32 @@ export default {
         commit('setError', e);
       }
     },
+    async getStandings({ commit, rootState, state }) {
+      const getDetailsArray = (details, problemsMap, length) => {
+        const detailsArray = [];
+        detailsArray.length = length;
+        detailsArray.fill(null);
+        details.forEach((v) => {
+          detailsArray[problemsMap.get(v.problemID)] = v;
+        });
+        return detailsArray;
+      };
+      try {
+        const users = (await api.getUsers(rootState.koneko.sessionID)).data;
+        // dispatch('koneko/users/fetchUsers', null, { root: true })にしたらエラーハンドリングどうするって思ったから
+        const usersMap = new Map(users.map(v => [v.id, v.displayName]));
+        const problemsMap = new Map(state.problems.map((v, index) => [v.id, index]));
+        const standings = (await api.getContestStandings(rootState.koneko.sessionID, state.id)).data
+          .map(v => ({
+            totalPoint: v.point,
+            displayName: usersMap.get(v.userID),
+            details: getDetailsArray(v.details, problemsMap, state.problems.length),
+          }))
+        ;
+        commit('setStandings', standings);
+      } catch (e) {
+        commit('setError', e);
+      }
+    },
   },
 };