Add end time and time label.

Remove outdated contests.
dreamerblue · Aug 11, 2019 · daa67ca · daa67ca
1 parent d3ceadc
commit daa67ca
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 26 deletions.
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
@@ -1,16 +1,16 @@
-declare interface IPlatformUpdateStatus {
+interface IPlatformUpdateStatus {
   source: string;
   updated_at: string;
 }
 
-declare interface IApiResponseStatus {
+interface IApiResponseStatus {
   GitHub: string;
   message: string;
   contests_link: string;
   updated_at: IPlatformUpdateStatus[];
 }
 
-declare interface IContest {
+interface IContest {
   hash: string;
   id?: string | number;
   source: string;
@@ -26,4 +26,4 @@ declare interface IContest {
   register_end_time?: string;
 }
 
-declare type ApiResponseContests = IContest[];
+type ApiResponseContests = IContest[];
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
@@ -1,38 +1,61 @@
 <template>
   <div class="container">
     <div style="min-height: 108px;">
-      <a-table :dataSource="contests"
-               rowKey="hash"
-               :loading="loading"
-               :pagination="false"
-               @change="handleTableChange"
+      <a-table
+        :dataSource="contests"
+        rowKey="hash"
+        :loading="loading"
+        :pagination="false"
+        @change="handleTableChange"
       >
-        <a-table-column title="Platform"
-                        dataIndex="source"
-                        key="source"
-                        :width="140"
-                        :filters="availableFilters"
-                        :filteredValue="filtered"
+        <a-table-column
+          title="Platform"
+          dataIndex="source"
+          key="source"
+          :width="140"
+          :filters="availableFilters"
+          :filteredValue="filtered"
         />
-        <a-table-column title="Name"
-                        dataIndex="name"
-                        key="name"
+
+        <a-table-column
+          title="Name"
+          dataIndex="name"
+          key="name"
         >
           <template slot-scope="text, record">
             <span>
-              <a :href="record.link" target="_blank">{{record.name}}</a>
+              <a v-if="isComingSoon(record)" :href="record.link" target="_blank">
+                {{record.name}} <a-tag color="blue">{{getStartTimeToNow(record)}}</a-tag>
+              </a>
+              <a v-else-if="getTimeStatus(record) === 'Running'" :href="record.link" target="_blank">
+                {{record.name}} <a-icon type="clock-circle" />
+              </a>
+              <a v-else :href="record.link" target="_blank">{{record.name}}</a>
             </span>
           </template>
         </a-table-column>
-        <a-table-column title="Start"
-                        dataIndex="start_time"
-                        key="start_time"
-                        :width="160"
+
+        <a-table-column
+          title="Start"
+          dataIndex="start_time"
+          key="start_time"
+          :width="160"
         >
           <template slot-scope="start_time">
             <span>{{formatTime(start_time)}}</span>
           </template>
         </a-table-column>
+
+        <a-table-column
+          title="End"
+          dataIndex="end_time"
+          key="end_time"
+          :width="160"
+        >
+          <template slot-scope="end_time">
+            <span>{{formatTime(end_time)}}</span>
+          </template>
+        </a-table-column>
       </a-table>
     </div>
 
@@ -107,8 +130,8 @@
         this.loading = true;
         try {
           const contestsData: ApiResponseContests = await get(api.contests, { include: this.filtered });
-          this.contests = contestsData;
           console.log('[fetch] contests:', contestsData);
+          this.contests = contestsData.filter(c => moment().subtract(3, 'd').isBefore(c.start_time));
         } catch (err) {
           console.error(err);
           this.$message.error(err.toString());
@@ -137,13 +160,27 @@
       formatTime(time: string): string {
         return moment(time).format('YYYY-MM-DD HH:mm');
       },
+      getTimeStatus(contest: IContest) {
+        if (moment().isBefore(contest.start_time)) {
+          return 'Pending';
+        } else if (moment().isBefore(contest.end_time)) {
+          return 'Running';
+        }
+        return 'Ended';
+      },
+      isComingSoon(contest: IContest) {
+        return this.getTimeStatus(contest) === 'Pending' && moment().add(3, 'd').isAfter(contest.start_time);
+      },
+      getStartTimeToNow(contest: IContest) {
+        return moment(contest.start_time).toNow(true);
+      },
     },
   });
 </script>
 
 <style lang="less" scoped>
   .container {
-    width: 720px;
+    width: 800px;
   }
 
   .text-center {

diff --git a/src/popup/popup.ts b/src/popup/popup.ts
@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import Popup from './Popup.vue';
-import { Button, Table, message } from 'ant-design-vue';
+import { Button, Table, Tag, Icon, message } from 'ant-design-vue';
 
 Vue.config.productionTip = false;
 
 Vue.use(Button);
 Vue.use(Table);
+Vue.use(Tag);
+Vue.use(Icon);
 
 Vue.prototype.$message = message;