feat (frontend): Update Status Cards

CalvoM · CalvoM · commit 4aae905dd47e · 2025-07-31T22:56:12.000+03:00
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -8,7 +8,9 @@ import { RouterView, RouterLink } from 'vue-router'
       <div class="mx-auto flex flex-col gap-8 items-center">
         <div class="text-center flex flex-col gap-4">
           <router-link to="/">
-            <h1 class="text-4xl font-bold text-foreground">My Chess Style</h1></router-link
+            <h1 class="text-4xl font-bold text-foreground hover:underline hover:decoration-sky-400">
+              My Chess Style
+            </h1></router-link
           >
           <p class="text-xl text-muted-foreground">
             Analyze your chess games and discover your playing style
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -5,6 +5,7 @@
 
 @theme {
   --color-muted: var(--color-gray-100);
+  --color-muted: hsl(210 40% 96.1%);
   --color-muted-foreground: hsl(215.4 16.3% 46.9%);
 }
 
diff --git a/frontend/src/components/HomeCardWithOptions.vue b/frontend/src/components/HomeCardWithOptions.vue
@@ -3,6 +3,9 @@ import { ref, type Ref } from 'vue'
 import { useFetch } from '@vueuse/core'
 import { useUIStore } from '@/stores/ui'
 import type { PlatformOptions } from '@/types'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const uploadFile = ref()
 const pgnUsername: Ref<string> = ref('')
@@ -24,51 +27,56 @@ async function uploadPGNFile() {
   formData.append('pgn_file', uploadFile.value.files[0])
   formData.append('usernames', pgnUsername.value)
   formData.append('include_roast', includeRoast.value)
-  const { data, pending, error, refresh } = await useFetch('/server/pgn/upload', {
-    method: 'POST',
-    body: formData,
-  }).json()
-  if (error.value) {
-    toastClass.value = ui.showMessage('error', 'Error', error.value)
-  } else {
-    await navigator.clipboard.writeText(data.value.status_id)
-    toastClass.value = ui.showMessage(
-      'success',
-      'Upload successful',
-      `Tracking ID copied to clipboard!`,
-    )
+  try {
+    const response = await fetch('/server/pgn/upload', {
+      method: 'POST',
+      body: formData,
+    })
+    const data = await response.json()
+    if (!response.ok) {
+      ui.showMessage('error', 'Error', data.message)
+    } else {
+      await navigator.clipboard.writeText(data.status_id)
+      toastClass.value = ui.showMessage(
+        'success',
+        'Upload successful',
+        `Tracking ID copied to clipboard!`,
+      )
+    }
+  } catch (error) {
+    ui.showMessage('error', 'Error', error)
   }
 }
 
 async function uploadPlatformUsernames() {
-  const { data, pending, error, refresh } = await useFetch('/server/pgn/external_user/')
-    .post({
-      username: platformUsername.value,
-      platform: externalPlatform.value.code,
-      include_roast: includeRoast.value,
+  try {
+    const response = await fetch('/server/pgn/external_user/', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: platformUsername.value,
+        platform: externalPlatform.value.code,
+        include_roast: includeRoast.value,
+      }),
     })
-    .json()
-  if (error.value) {
-    toastClass.value = ui.showMessage('error', 'Error', error.value)
-  } else {
-    await navigator.clipboard.writeText(data.value.status_id)
-    toastClass.value = ui.showMessage(
-      'success',
-      'Upload successful',
-      `Tracking ID copied to clipboard!`,
-    )
+    const data = await response.json()
+    if (!response.ok) {
+      ui.showMessage('error', 'Error', data.message)
+    } else {
+      await navigator.clipboard.writeText(data.status_id)
+      toastClass.value = ui.showMessage(
+        'success',
+        'Upload successful',
+        `Tracking ID copied to clipboard!`,
+      )
+    }
+  } catch (error) {
+    ui.showMessage('error', 'Error', error)
   }
 }
 
 async function checkStatusByTransactionID() {
-  const { data, pending, error, refresh } = await useFetch(
-    `/server/analysis/status/${trackingID.value}`,
-  ).json()
-  if (error.value) {
-    toastClass.value = ui.showMessage('error', 'Error', error.value)
-  } else {
-    toastClass.value = ui.showMessage('success', 'Upload successful', `Tracking ID: ${data.value}`)
-  }
+  router.push(`/status/${trackingID.value}`)
 }
 </script>
 
diff --git a/frontend/src/components/StatusCardWithBasicInformation.vue b/frontend/src/components/StatusCardWithBasicInformation.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type FileUploadData } from '@/types'
+const props = defineProps<{
+  informationObject: FileUploadData
+}>()
+const sources = ['Chess.com', 'Lichess', 'PGN file']
+const source = sources[props.informationObject.source - 1]
+</script>
+<template>
+  <div>
+    <Card>
+      <template #title>Basic Information</template>
+      <template #content>
+        <div class="grid grid-cols-2 gap-7">
+          <div class="text-center p-4 bg-muted rounded-lg">
+            <div class="text-xl font-black text-black">
+              {{ props.informationObject.usernames }}
+            </div>
+            <div class="text-sm text-muted-foreground">Username</div>
+          </div>
+          <div class="text-center p-4 bg-muted rounded-lg">
+            <div class="text-xl font-black text-black">
+              {{ source }}
+            </div>
+            <div class="text-sm text-muted-foreground">Source</div>
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
diff --git a/frontend/src/components/StatusCardWithGamesAnalysis.vue b/frontend/src/components/StatusCardWithGamesAnalysis.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
   <div>
-    <Card>
+    <Card v-if="gameObjects.count">
       <template #title>Preliminary Game Analysis</template>
       <template #content>
         <div class="grid grid-cols-1 gap-4">
@@ -71,6 +71,35 @@ const props = defineProps<{
               </div>
             </div>
           </div>
+          <div class="mt-4">
+            <h4 class="font-black text-xl my-8">Top Openings</h4>
+            <div class="flex flex-col gap-3">
+              <div
+                v-for="([opening, data], idx) in props.gameObjects.openings"
+                :key="idx"
+                class="flex items-center justify-between p-3 bg-muted rounded-lg"
+              >
+                <div class="flex-1">
+                  <div class="font-medium text-sm">{{ opening }}</div>
+                  <div class="text-xs text-muted-foreground">
+                    ECO: {{ data.eco_codes.join(', ') }}
+                  </div>
+                </div>
+                <div class="text-right">
+                  <div class="text-lg font-bold text-primary">{{ data.total }}</div>
+                  <div class="text-xs text-muted-foreground">games</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Card>
+    <Card v-else>
+      <template #title>Preliminary Game Analysis</template>
+      <template #content>
+        <div class="grid grid-cols-1 gap-4">
+          <h2 class="text-primary">No games played by user</h2>
         </div>
       </template>
     </Card>
diff --git a/frontend/src/components/StatusCardWithRoast.vue b/frontend/src/components/StatusCardWithRoast.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type RoastingUserData } from '@/types'
 const props = defineProps<{
-  roastData: RoastingUserData
+  roastObjects: RoastingUserData
 }>()
 </script>
 <template>
@@ -15,20 +15,20 @@ const props = defineProps<{
         <div class="grid grid-cols-1 gap-6">
           <div class="p-4 bg-red-50 border-l-4 border-red-500 rounded-lg">
             <h4 class="font-semibold text-red-800 mb-2">The Roast</h4>
-            <p class="text-red-700 whitespace-pre-line">{{ props.roastData.roast }}</p>
+            <p class="text-red-700 whitespace-pre-line">{{ props.roastObjects.roast }}</p>
           </div>
 
           <div class="p-4 bg-blue-50 border-l-4 border-blue-500 rounded-lg">
             <h4 class="font-semibold text-blue-800 mb-2">Encouragement</h4>
             <p class="text-blue-700 whitespace-pre-line">
-              {{ props.roastData.encouragement }}
+              {{ props.roastObjects.encouragement }}
             </p>
           </div>
 
           <div class="p-4 bg-green-50 border-l-4 border-green-500 rounded-lg">
             <h4 class="font-semibold text-green-800 mb-3">Tips for Improvement</h4>
             <p class="text-green-600 whitespace-pre-line">
-              {{ props.roastData.tip }}
+              {{ props.roastObjects.tip }}
             </p>
           </div>
         </div>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -23,6 +23,7 @@ import Toast from 'primevue/toast'
 import ToastService from 'primevue/toastservice'
 import Select from 'primevue/select'
 import ProgressBar from 'primevue/progressbar'
+import Skeleton from 'primevue/skeleton'
 
 const app = createApp(App)
 
@@ -40,6 +41,7 @@ app.component('FileUpload', FileUpload)
 app.component('Toast', Toast)
 app.component('Select', Select)
 app.component('ProgressBar', ProgressBar)
+app.component('Skeleton', Skeleton)
 
 app.use(createPinia())
 app.use(router)
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -23,11 +23,16 @@ export interface RoastingUserData {
   roast: string
   encouragement: string
 }
+export interface FileUploadData {
+  source?: number
+  status?: string
+  usernames?: string
+}
 export interface AnalysisDataResult {
-  file_upload?: string
+  file_upload?: FileUploadData
   game?: GameData
   roasting_user?: RoastingUserData
-  chess_style?: Object
+  chess_style?: object
 }
 export interface AnalysisData {
   result?: AnalysisDataResult
diff --git a/frontend/src/views/StatusView.vue b/frontend/src/views/StatusView.vue
@@ -3,48 +3,57 @@ import { Brain, ChartColumn, CircleCheckBig, Flame } from 'lucide-vue-next'
 import { reactive, ref, type Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useUIStore } from '@/stores/ui'
-import { useFetch } from '@vueuse/core'
-import { type AnalysisData, type GameData, type RoastingUserData } from '@/types'
+import {
+  type AnalysisData,
+  type GameData,
+  type RoastingUserData,
+  type FileUploadData,
+} from '@/types'
 import StatusCardWithGamesAnalysis from '@/components/StatusCardWithGamesAnalysis.vue'
 import StatusCardWithRoast from '@/components/StatusCardWithRoast.vue'
+import StatusCardWithBasicInformation from '@/components/StatusCardWithBasicInformation.vue'
 
 const route = useRoute()
 const ui = useUIStore()
-const analysisData: Ref<AnalysisData> = reactive({})
 const defaultSummaryCls: Ref<string> = ref('flex items-center gap-2 p-3 rounded-lg')
 const categoryPresentCls: Ref<string> = ref('bg-green-100 text-green-700')
 const defaultIconCls: Ref<string> = ref('h-4 w-4')
-const fileUploadData: Ref<string> = ref('')
-const gameData: Ref<GameData> = ref({})
-const roastData: Ref<RoastingUserData> = ref({})
-const chessStyleData: Ref<Object> = ref({})
-const progressBarData: Ref<number> = ref(0)
 
+const analysisData = reactive<AnalysisData>({
+  result: null,
+})
+const fileUploadData: Ref<FileUploadData | null> = ref(null)
+const gameData: Ref<GameData | null> = ref(null)
+const roastData: Ref<RoastingUserData | null> = ref(null)
+const chessStyleData: Ref<object | null> = ref(null)
+const progressBarData: Ref<number> = ref(0)
 watch(analysisData, (_newData, _oldData) => {
-  progressBarData.value = (Object.keys(analysisData.value.result).length * 100) / 4
-  console.log(progressBarData.value)
+  progressBarData.value = (Object.keys(analysisData.result).length * 100) / 4
 })
 
 getAnalysisData()
 
 async function getAnalysisData() {
-  const { data, pending, error, refresh } = await useFetch(
-    `/server/analysis/status/${route.params.statusId}`,
-  )
-  if (error.value) {
-    ui.showMessage('error', 'Error', error.value)
-  } else {
-    analysisData.value = JSON.parse(data.value)
-    console.log(analysisData.value)
-    fileUploadData.value = analysisData.value.result?.file_upload
-    gameData.value = analysisData.value.result?.game
-    roastData.value = analysisData.value.result?.roasting_user
-    chessStyleData.value = analysisData.value.result?.chess_style
+  try {
+    const response = await fetch(`/server/analysis/status/${route.params.statusId}`)
+    const data = await response.json()
+    if (!response.ok) {
+      ui.showMessage('error', 'Error', data.detail)
+    } else {
+      analysisData.result = data.result
+      fileUploadData.value = analysisData.result?.file_upload
+      gameData.value = analysisData.result?.game
+      roastData.value = analysisData.result?.roasting_user
+      chessStyleData.value = analysisData.result?.chess_style
+    }
+  } catch (error) {
+    ui.showMessage('error', 'Error', error)
   }
 }
 </script>
 <template>
-  <div class="grid grid-cols-1 gap-6 w-2/3 mx-auto">
+  <Toast />
+  <div v-if="analysisData.result" class="grid grid-cols-1 gap-6 w-2/3 mx-auto">
     <Card class="w-full">
       <template #title>
         <div class="flex items-center gap-2">
@@ -96,7 +105,15 @@ async function getAnalysisData() {
         </div>
       </template>
     </Card>
-    <StatusCardWithGamesAnalysis :gameObjects="gameData" v-if="gameData" />
-    <StatusCardWithRoast :roastData="roastData" v-if="roastData" />
+    <StatusCardWithBasicInformation v-if="fileUploadData" :informationObject="fileUploadData" />
+    <StatusCardWithGamesAnalysis v-if="gameData" :gameObjects="gameData" />
+    <StatusCardWithRoast v-if="roastData" :roastObjects="roastData" />
+  </div>
+  <div v-else class="grid grid-cols-1 gap-6 w-2/3 mx-auto">
+    <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+    <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+    <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+    <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+    <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
   </div>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`
`6`	`6`	`@theme {`
`7`	`7`	`--color-muted: var(--color-gray-100);`
	`8`	`+ --color-muted: hsl(210 40% 96.1%);`
`8`	`9`	`--color-muted-foreground: hsl(215.4 16.3% 46.9%);`
`9`	`10`	`}`
`10`	`11`