From b7f48ccd28fd5b000b8e7d2026b1aea658035b02 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 26 Apr 2023 09:33:59 +0800
Subject: [PATCH] add auto refresh for contest rank.

---
 src/oj/contest/pages/rank.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/oj/contest/pages/rank.vue b/src/oj/contest/pages/rank.vue
index 88a2216..ed8c318 100644
--- a/src/oj/contest/pages/rank.vue
+++ b/src/oj/contest/pages/rank.vue
@@ -19,6 +19,17 @@ const total = ref(0)
 const data = ref<ContestRank[]>([])
 const chart = ref<ContestRank[]>([])
 const problems = ref<ProblemFiltered[]>([])
+const [autoRefresh] = useToggle()
+const { resume, pause } = useIntervalFn(
+  () => {
+    query.page = 1
+    listRanks()
+  },
+  10000,
+  {
+    immediate: false,
+  }
+)
 
 const query = reactive({
   limit: 50,
@@ -168,6 +179,7 @@ watch(
     listRanks()
   }
 )
+watch(autoRefresh, (checked) => (checked ? resume() : pause()))
 
 onMounted(() => {
   listRanks()
@@ -183,11 +195,18 @@ onMounted(() => {
     :columns="columns"
     :data="data"
   />
-  <Pagination
-    :total="total"
-    v-model:page="query.page"
-    v-model:limit="query.limit"
-  />
+  <n-space justify="end" align="center">
+    <n-form label-placement="left" inline :show-feedback="false">
+      <n-form-item label="开启自动刷新">
+        <n-switch v-model:value="autoRefresh" />
+      </n-form-item>
+    </n-form>
+    <Pagination
+      :total="total"
+      v-model:page="query.page"
+      v-model:limit="query.limit"
+    />
+  </n-space>
 </template>
 
 <style scoped></style>