✨ Challenges

application/pages/problems/[id].vue

@@ -31,22 +31,90 @@
         </div>
         <n-empty v-else description="本题无公开样例" />
       </section>
+
+      <template #action>
+        <div class="w-full flex justify-end">
+          <n-button v-if="!answering" type="primary" :loading="submitting" @click="doChallenge">试答该题</n-button>
+          <div v-else>
+            <n-button type="primary" disabled>
+              <template #icon>
+                <n-icon :component="Checkmark" />
+              </template>
+              正在作答
+            </n-button>
+          </div>
+        </div>
+      </template>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NCard, NTag, NPageHeader, NDivider, NEmpty } from "naive-ui";
+import { NCard, NTag, NPageHeader, NDivider, NEmpty, NButton, NIcon, useMessage } from "naive-ui";
+import { Checkmark } from "@vicons/carbon";
 import "prismjs/themes/prism.css";
 import "prismjs/prism";
 
+const user = useSupabaseUser();
 const client = useSupabaseClient();
+const message = useMessage();
 const route = useRoute();
 
-const { data: problem } = await client.from("problems").select<any, any>("*").eq("id", route.params.id).single();
+const submitting = ref(false);
+const answering = ref(false);
+
+const { data: problem } = await client
+  .from("problems")
+  .select<any, any>("*")
+  .eq("id", route.params.id)
+  .single();
 const { data: example } = await client
   .from("problem_cases")
   .select<any, any>("*")
   .eq("problem", route.params.id)
   .single();
+
+useHead({
+  title: problem?.title ?? "未知题目"
+});
+
+async function doChallenge() {
+  if (problem == null) return;
+
+  submitting.value = true;
+
+  let { data } = await client
+    .from("challenges")
+    .select<any, any>("id")
+    .eq("problem", problem?.id)
+    .eq("status", "in-progress")
+    .single();
+
+  if (data == null) {
+    const res = await client
+      .from("challenges")
+      // @ts-ignore
+      .insert<any>({
+        answers: {},
+        details: {},
+        status: "in-progress",
+        problem: problem.id,
+        author: user.value?.id
+      })
+      .select<any, any>()
+      .single();
+
+    if (res.error != null) {
+      message.error(`Something went wrong... ${res.error.message}`);
+      return;
+    } else {
+      data = res.data;
+    }
+  }
+
+  submitting.value = false;
+  answering.value = true;
+  navigateTo(`/challenges/${data.id}`, { open: { target: "_blank" } });
+  setTimeout(() => answering.value = false, 3000);
+}
 </script>