From b495c02ad7fb820b7dd9bd8ac602f7b44d58babf Mon Sep 17 00:00:00 2001
From: ZnPdCo <poiuytreertyuiop@outlook.com>
Date: Wed, 25 Dec 2024 19:42:06 +0800
Subject: [PATCH] fix: #22

---
 frontend/src/components/ShowVotesModal.vue |  51 +++++----
 frontend/src/components/VoteModal.vue      |  64 +++++------
 frontend/src/views/ProblemsView.vue        | 126 +++++++++++----------
 3 files changed, 127 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/ShowVotesModal.vue b/frontend/src/components/ShowVotesModal.vue
index 0e450ca..bcba342 100644
--- a/frontend/src/components/ShowVotesModal.vue
+++ b/frontend/src/components/ShowVotesModal.vue
@@ -1,14 +1,16 @@
 <script setup>
 import axios from 'axios'
-import { SuiModal } from 'vue-fomantic-ui'
+import { SuiModal, SuiLoader, SuiSegment } from 'vue-fomantic-ui'
 import { ref, watch } from 'vue'
 import DifficultyValue from './DifficultyValue.vue'
 import QualityValue from './QualityValue.vue'
 const show = defineModel('show')
 const pid = defineModel('pid')
 const votesData = ref([])
+const loader = ref(false)
 
 function report(id) {
+  loader.value = true
   axios('/backend/report/', {
     method: 'POST',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
@@ -16,11 +18,14 @@ function report(id) {
       id: id,
     },
   }).then(function () {
+    loader.value = false
     alert('举报成功！管理员将会进行审核。')
   })
 }
 watch(show, async (value) => {
   if (value != true) return
+  loader.value = true
+  votesData.value = []
 
   axios('/backend/get_votes/', {
     method: 'POST',
@@ -30,6 +35,7 @@ watch(show, async (value) => {
     },
   }).then(function (response) {
     votesData.value = response.data
+    loader.value = false
   })
 })
 </script>
@@ -38,24 +44,31 @@ watch(show, async (value) => {
   <SuiModal v-model="show">
     <div class="header">显示投票</div>
     <div class="content">
-      <table class="ui left aligned table unstackable scrolling" id="vote-table">
-        <thead>
-          <tr>
-            <th>难度</th>
-            <th>质量</th>
-            <th>评论</th>
-            <th>举报</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, index) in votesData" :key="index">
-            <td><DifficultyValue :difficulty="item.difficulty" /></td>
-            <td><QualityValue :quality="item.quality" /></td>
-            <td style="overflow: hidden">{{ item.comment }}</td>
-            <td><a @click="report(item.id)">举报</a></td>
-          </tr>
-        </tbody>
-      </table>
+      <SuiSegment basic>
+        <SuiLoader :active="loader" />
+        <table class="ui left aligned table unstackable scrolling" id="vote-table">
+          <thead>
+            <tr>
+              <th>难度</th>
+              <th>质量</th>
+              <th>评论</th>
+              <th>举报</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in votesData" :key="index">
+              <td>
+                <DifficultyValue :difficulty="item.difficulty" />
+              </td>
+              <td>
+                <QualityValue :quality="item.quality" />
+              </td>
+              <td style="overflow: hidden">{{ item.comment }}</td>
+              <td><a @click="report(item.id)">举报</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </SuiSegment>
     </div>
     <div class="actions">
       <div class="ui positive button" @click="show = false">OK</div>
diff --git a/frontend/src/components/VoteModal.vue b/frontend/src/components/VoteModal.vue
index 889e681..ea55787 100644
--- a/frontend/src/components/VoteModal.vue
+++ b/frontend/src/components/VoteModal.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios'
-import { SuiModal, SuiButton, Rating } from 'vue-fomantic-ui'
+import { SuiModal, SuiButton, Rating, SuiLoader, SuiSegment } from 'vue-fomantic-ui'
 import { ref, watch } from 'vue'
 const show = defineModel('show')
 const pid = defineModel('pid')
@@ -9,8 +9,10 @@ const qualityValue = ref(0)
 const reloadKey = ref(0) // for reloading the rating when the modal is closed and reopened or the rating is zero
 const difficulty = ref(0)
 const comment = ref('')
+const loader = ref(false)
 
 function SendVote() {
+  loader.value = true
   if (difficulty.value < 800 || difficulty.value > 3500) {
     difficulty.value = ''
   }
@@ -24,6 +26,8 @@ function SendVote() {
       comment: comment.value,
     },
   }).then(function (response) {
+    loader.value = false
+    show.value = false
     if (response.data == -1) {
       alert('您暂无投票权限，请联系管理员')
       return
@@ -33,6 +37,9 @@ function SendVote() {
 }
 watch(show, async (value) => {
   if (value != true) return
+  loader.value = true
+    ; (difficulty.value = ''), (qualityValue.value = 0), (comment.value = ''), reloadKey.value++
+
   axios('/backend/get_vote/', {
     method: 'POST',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
@@ -44,6 +51,7 @@ watch(show, async (value) => {
     qualityValue.value = parseInt(response.data['quality']) + 1
     reloadKey.value++
     comment.value = response.data['comment']
+    loader.value = false
   })
 })
 function cancleQuality() {
@@ -56,42 +64,28 @@ function cancleQuality() {
   <SuiModal v-model="show">
     <div class="header">投票</div>
     <div class="content">
-      <div class="ui labeled input" style="margin-right: 10px">
-        <div class="ui label">难度(800-3500)</div>
-        <input
-          type="number"
-          placeholder="难度"
-          data-tribute="true"
-          v-model="difficulty"
-          oninput="this.value = this.value.replace(/[^0-9]/g, '');"
-        />
-      </div>
-      <div class="ui labeled input">
-        <div class="ui label">质量(0-5)</div>
-        <Rating
-          :key="reloadKey"
-          size="massive"
-          v-model="qualityValue"
-          :maxRating="6"
-          color="yellow"
-        />
-        <SuiButton @click="cancleQuality()">取消</SuiButton>
-      </div>
-      <br />
-      <div class="ui labeled input" style="margin-top: 10px">
-        <div class="ui label">评论</div>
-        <textarea
-          type="text"
-          placeholder="评论"
-          data-tribute="true"
-          v-model="comment"
-          maxlength="255"
-        ></textarea>
-      </div>
+      <SuiSegment basic>
+        <SuiLoader :active="loader" />
+        <div class="ui labeled input" style="margin-right: 10px">
+          <div class="ui label">难度(800-3500)</div>
+          <input type="number" placeholder="难度" data-tribute="true" v-model="difficulty"
+            oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
+        </div>
+        <div class="ui labeled input">
+          <div class="ui label">质量(0-5)</div>
+          <Rating :key="reloadKey" size="massive" v-model="qualityValue" :maxRating="6" color="yellow" />
+          <SuiButton @click="cancleQuality()">取消</SuiButton>
+        </div>
+        <br />
+        <div class="ui labeled input" style="margin-top: 10px">
+          <div class="ui label">评论</div>
+          <textarea type="text" placeholder="评论" data-tribute="true" v-model="comment" maxlength="255"></textarea>
+        </div>
+      </SuiSegment>
     </div>
     <div class="actions">
-      <SuiButton black @click="show = false">取消</SuiButton>
-      <SuiButton positive @click="SendVote(), (show = false)">保存</SuiButton>
+      <SuiButton black @click="show = false" :disabled="loader">取消</SuiButton>
+      <SuiButton positive @click="SendVote()" :disabled="loader">保存</SuiButton>
     </div>
   </SuiModal>
 </template>
diff --git a/frontend/src/views/ProblemsView.vue b/frontend/src/views/ProblemsView.vue
index 777e3a8..b353249 100644
--- a/frontend/src/views/ProblemsView.vue
+++ b/frontend/src/views/ProblemsView.vue
@@ -1,7 +1,7 @@
 <script setup>
 import $ from 'jquery'
 import { ref, watch } from 'vue'
-import { Dropdown } from 'vue-fomantic-ui'
+import { Dropdown, SuiLoader, SuiSegment } from 'vue-fomantic-ui'
 import { useRouter } from 'vue-router'
 import VoteModal from '../components/VoteModal.vue'
 import ShowVotesModal from '../components/ShowVotesModal.vue'
@@ -18,6 +18,7 @@ const detailsModal = ref(false)
 const selected = ref()
 const options = ref([])
 const loggedIn = window.loggedIn
+const loader = ref(false)
 
 watch(selected, () => {
   showTable()
@@ -172,40 +173,40 @@ function showTable() {
     })
     if (selected.value != undefined && !type.includes(selected.value.value)) continue
     let row = $('<tr>')
-    ;(function (data) {
-      row.append($('<td>').text(data['pid']))
-      row.append($('<td>').text(data['contest']))
-      row.append(
-        name2Str(data['pid'], data['name'], function () {
-          detailsModal.value = true
-          details.value = data
-        }).click(function (e) {
-          if ($(e.target).prop('tagName') == 'TD' && !window.autoStatus) changeStatus(data['pid'])
-        }),
-      )
-      row.append(difficulty2Str(data['difficulty'], data['cnt1']))
-      row.append(quality2Str(data['quality'], data['cnt2']))
-      row.append(
-        $('<td>')
-          .html('<a>投票</a>')
-          .click(function () {
-            pid.value = data['pid']
-            if (!loggedIn) {
-              router.push('/login')
-            }
-            voteModal.value = true
+      ; (function (data) {
+        row.append($('<td>').text(data['pid']))
+        row.append($('<td>').text(data['contest']))
+        row.append(
+          name2Str(data['pid'], data['name'], function () {
+            detailsModal.value = true
+            details.value = data
+          }).click(function (e) {
+            if ($(e.target).prop('tagName') == 'TD' && !window.autoStatus) changeStatus(data['pid'])
           }),
-      )
-      row.append(
-        $('<td>')
-          .html('<a>显示投票</a>')
-          .click(function () {
-            pid.value = data['pid']
-            window.pid = data['pid']
-            showVotesModal.value = true
-          }),
-      )
-    })(problemsData[i])
+        )
+        row.append(difficulty2Str(data['difficulty'], data['cnt1']))
+        row.append(quality2Str(data['quality'], data['cnt2']))
+        row.append(
+          $('<td>')
+            .html('<a>投票</a>')
+            .click(function () {
+              pid.value = data['pid']
+              if (!loggedIn) {
+                router.push('/login')
+              }
+              voteModal.value = true
+            }),
+        )
+        row.append(
+          $('<td>')
+            .html('<a>显示投票</a>')
+            .click(function () {
+              pid.value = data['pid']
+              window.pid = data['pid']
+              showVotesModal.value = true
+            }),
+        )
+      })(problemsData[i])
     table.append(row)
   }
 }
@@ -258,6 +259,7 @@ function sortData(sortBy) {
 }
 
 $(document).ready(function () {
+  loader.value = true
   if (localStorage.getItem('status') == null) {
     localStorage.setItem('status', JSON.stringify('{}'))
   }
@@ -268,6 +270,7 @@ $(document).ready(function () {
       problemsData = data
       sortData('contest')
       showTable()
+      loader.value = false
     },
   })
   $.ajax({
@@ -315,10 +318,10 @@ $(document).ready(function () {
         problemsData[i]['difficulty2'],
         problemsData[i]['difficulty'],
       ]
-      ;[problemsData[i]['quality'], problemsData[i]['quality2']] = [
-        problemsData[i]['quality2'],
-        problemsData[i]['quality'],
-      ]
+        ;[problemsData[i]['quality'], problemsData[i]['quality2']] = [
+          problemsData[i]['quality2'],
+          problemsData[i]['quality'],
+        ]
     }
     showTable()
   })
@@ -361,29 +364,32 @@ table {
 </style>
 
 <template>
-  <div class="ui bottom attached warning message" style="display: none" id="announcement"></div>
-  <div class="ui toggle checkbox" style="margin-top: 20px; margin-right: 20px">
-    <input type="checkbox" id="use-median" />
-    <label>显示中位数数据</label>
-  </div>
-  <Dropdown v-model="selected" :options="options" clearable selection placeholder="选择分类" />
+  <SuiSegment basic>
+    <SuiLoader :active="loader" />
+    <div class="ui bottom attached warning message" style="display: none" id="announcement"></div>
+    <div class="ui toggle checkbox" style="margin-top: 20px; margin-right: 20px">
+      <input type="checkbox" id="use-median" />
+      <label>显示中位数数据</label>
+    </div>
+    <Dropdown v-model="selected" :options="options" clearable selection placeholder="选择分类" />
 
-  <div class="column" style="margin-top: 20px">
-    <table class="ui left aligned table" id="problems-table">
-      <thead>
-        <tr>
-          <th>Pid</th>
-          <th id="contest-header">比赛 ▾</th>
-          <th>题目名</th>
-          <th id="difficulty-header">难度 ▴</th>
-          <th id="quality-header">质量 ▴</th>
-          <th>投票</th>
-          <th>显示投票</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </div>
+    <div class="column" style="margin-top: 20px">
+      <table class="ui left aligned table" id="problems-table">
+        <thead>
+          <tr>
+            <th>Pid</th>
+            <th id="contest-header">比赛 ▾</th>
+            <th>题目名</th>
+            <th id="difficulty-header">难度 ▴</th>
+            <th id="quality-header">质量 ▴</th>
+            <th>投票</th>
+            <th>显示投票</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+  </SuiSegment>
   <VoteModal v-model:show="voteModal" v-model:pid="pid" @rating-change="updateProblemsData()" />
   <ShowVotesModal v-model:show="showVotesModal" v-model:pid="pid" />
   <DetailsModal v-model:show="detailsModal" v-model:details="details" />