From a8147ecfa12a5c133cecb200d9eb3471a7f136b0 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 1 Sep 2023 15:15:12 +0800
Subject: [PATCH] feat: display tasks

---
 app/src/App.vue                  |  3 +++
 app/src/components/QuestPart.vue | 36 +++++++++++++++++++++++---------
 app/src/utils/session.js         |  4 ++++
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 3c94c4f..7494e8d 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -23,6 +23,9 @@ onMounted(async () => {
   socket.on('graph', (event) => {
     sessionManager.handleGraphUpdate(event)
   })
+  socket.on('tasks', (tasks) => {
+    sessionManager.setTasks(tasks)
+  })
 })
 </script>
 
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 77da551..0733afc 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import api from '../utils/api'
+import sessionManager from '../utils/session'
 
 const questData = ref(null)
 const questErr = ref(null)
 
-api
-  .get('/quests/helloworld')
-  .then((res) => {
-    console.log(res.data)
+onMounted(async () => {
+  try {
+    const res = await api.get('/quests/helloworld')
     questData.value = res.data
-  })
-  .catch((err) => {
+  } catch (err) {
     questErr.value = err
-  })
+  }
+})
 </script>
 
 <template>
@@ -26,8 +26,24 @@ api
     </h1>
     <hr class="border-text-line border-2 my-2" />
     <div>
-      <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
-      <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
+      <div v-if="questData">
+        <p class="text-text">{{ questData.instruction }}</p>
+        <br />
+        <p class="text-text">Tasks:</p>
+        <ul v-if="sessionManager.session.value">
+          <li v-for="task in sessionManager.session.value.tasks" :key="task.id">
+            <p class="text-text">
+              <input
+                type="checkbox"
+                class="form-checkbox"
+                disabled
+                :checked="task.completed"
+              />{{ task.name }}
+            </p>
+          </li>
+        </ul>
+      </div>
+      <p class="text-red-500" v-else-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>
diff --git a/app/src/utils/session.js b/app/src/utils/session.js
index b731d43..1bf5a21 100644
--- a/app/src/utils/session.js
+++ b/app/src/utils/session.js
@@ -35,6 +35,10 @@ class SessionManager {
     }
   }
 
+  setTasks(tasks) {
+    this.session.value.tasks = tasks
+  }
+
   async createSession() {
     console.log('Creating a new session...')
     const res = await api.post('/sessions', { quest_id: this.questId })