feat: show other teams' gamebox

vidar-team · Aug 13, 2020 · 5e32579 · 5e32579
1 parent 2ea37d9
commit 5e32579
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 29 deletions.
diff --git a/src/assets/languages/en-US.json b/src/assets/languages/en-US.json
@@ -16,7 +16,11 @@
     "password_empty": "Please input your password"
   },
   "gamebox": {
-    "empty": "No Challenge for Now"
+    "empty": "No Challenge for Now",
+    "list": "GameBox List",
+    "team": "Team",
+    "challenge": "Challenge",
+    "address": "Address"
   },
   "flag": {
     "submit_flag": "Submit Flag",

diff --git a/src/assets/languages/zh-CN.json b/src/assets/languages/zh-CN.json
@@ -16,7 +16,11 @@
     "password_empty": "请输入密码"
   },
   "gamebox": {
-    "empty": "暂时还没有题目哟~"
+    "empty": "暂时还没有题目哟~",
+    "list": "所有靶机",
+    "team": "所属队伍",
+    "challenge": "所属题目",
+    "address": "地址"
   },
   "flag": {
     "submit_flag": "提交 Flag",

diff --git a/src/components/Info.vue b/src/components/Info.vue
@@ -1,28 +1,72 @@
 <template>
-    <v-card v-if="info !== null">
-        <v-list-item two-line>
-            <v-list-item-content>
-                <div>
-                    <v-img v-if="info.Logo !== ''" class="logo" :src="`${utils.baseURL}/uploads/${info.Logo}`"></v-img>
-                    <v-list-item-title class="headline">{{info.Name}}</v-list-item-title>
-                    <v-list-item-subtitle>
-                        Token {{ info.Token }}
-                    </v-list-item-subtitle>
-                </div>
-            </v-list-item-content>
-        </v-list-item>
-
-        <v-card-text>
-            <GameBox/>
-        </v-card-text>
-        <v-divider/>
-        <v-card-actions>
-            <v-list-item>
-                #{{ info.Rank }} / {{ utils.FormatFloat(info.Score) }} {{$t('general.score')}}
+    <div>
+        <v-dialog
+                v-model="showGameBoxesVisible"
+                width="700"
+        >
+            <v-card>
+                <v-card-title class="headline">
+                    {{$t('gamebox.list')}}
+                </v-card-title>
+
+                <v-card-text>
+                    <v-simple-table :dense="true">
+                        <template v-slot:default>
+                            <thead>
+                            <tr>
+                                <th class="text-left">{{$t('gamebox.team')}}</th>
+                                <th class="text-left">{{$t('gamebox.challenge')}}</th>
+                                <th class="text-left">{{$t('gamebox.address')}}</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="(item, index) in allGameBoxes" v-bind:key="index">
+                                <td>{{ item.TeamName }}</td>
+                                <td>{{ item.ChallengeName }}</td>
+                                <td>{{ item.IP }}:{{ item.Port }}</td>
+                            </tr>
+                            </tbody>
+                        </template>
+                    </v-simple-table>
+                </v-card-text>
+
+                <v-divider></v-divider>
+
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" text @click="showGameBoxesVisible = false">
+                        {{$t('general.close')}}
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <v-card v-if="info !== null">
+            <v-list-item two-line>
+                <v-list-item-content>
+                    <div>
+                        <v-img v-if="info.Logo !== ''" class="logo"
+                               :src="`${utils.baseURL}/uploads/${info.Logo}`"></v-img>
+                        <v-list-item-title class="headline">{{info.Name}}</v-list-item-title>
+                        <v-list-item-subtitle>
+                            Token {{ info.Token }}
+                        </v-list-item-subtitle>
+                    </div>
+                </v-list-item-content>
             </v-list-item>
-            <v-btn text/>
-        </v-card-actions>
-    </v-card>
+
+            <v-card-text>
+                <GameBox/>
+            </v-card-text>
+            <v-divider/>
+            <v-card-actions>
+                <v-list-item>
+                    #{{ info.Rank }} / {{ utils.FormatFloat(info.Score) }} {{$t('general.score')}}
+                </v-list-item>
+                <v-btn v-if="allGameBoxes !== null" text @click="showGameBoxesVisible = true">靶机列表</v-btn>
+            </v-card-actions>
+        </v-card>
+    </div>
 </template>
 
 <script>
@@ -32,13 +76,37 @@
         name: "Info",
         data() {
             return {
-                info: null
+                info: null,
+                timer: null,
+                allGameBoxes: null,
+
+                showGameBoxesVisible: false,
             }
         },
         mounted() {
-            this.utils.GET("/team/info").then(res => {
-                this.info = res
-            })
+            this.timer = setInterval(this.getInfo, 5000)
+            this.getInfo()
+            this.getAllGameBoxes()
+        },
+
+        beforeDestroy() {
+            clearInterval(this.timer)
+        },
+
+        methods: {
+            getInfo() {
+                this.utils.GET("/team/info").then(res => {
+                    this.info = res
+                })
+            },
+
+            getAllGameBoxes() {
+                this.utils.GET("/team/gameboxes/all").then(res => {
+                    this.allGameBoxes = res
+                }).catch(() => {
+                    this.allGameBoxes = null
+                })
+            }
         },
         components: {GameBox}
     }