Add status bandage to watch schedule

minhhikari1994 · Apr 16, 2024 · dd3bfc9 · dd3bfc9
1 parent 9d18abc
commit dd3bfc9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/components/layout/AnimeWatchSchedule.vue b/components/layout/AnimeWatchSchedule.vue
@@ -17,10 +17,14 @@
                 <template #item="{ item }">
                     <ul>
                         <li v-for="anime in item.animeList" :key="anime.malId" class="text-lg">
-                            <NuxtLink :to="`https://myanimelist.net/anime/${anime.malId}`" target="_blank">
-                                {{ anime.name }} ({{ anime.episode }})
-                            </NuxtLink> - {{ anime.status }}
-
+                            <NuxtLink :to="`https://myanimelist.net/anime/${anime.malId}`" target="_blank" class="mr-2">
+                                {{ anime.name }}
+                            </NuxtLink>
+                            <UBadge v-if="anime.status === 'plannedtowatch'" color="gray" variant="solid">{{ $t('plannedToWatch') }}</UBadge>
+                            <UBadge v-if="anime.status === 'watching'" color="green" variant="solid">{{ $t('watching') }} ({{ anime.episode }})</UBadge>
+                            <UBadge v-if="anime.status === 'finished'" color="blue" variant="solid">{{ $t('finished') }} ({{ anime.episode }})</UBadge>
+                            <UBadge v-if="anime.status === 'dropped'" color="red" variant="solid">{{ $t('dropped') }} ({{ anime.episode }})</UBadge>
+
                         </li>
                     </ul>
                 </template>              
@@ -32,44 +36,44 @@
 const animeSchedule = [{
     weekDay: 'monday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
     ]
 }, {
     weekDay: 'tuesday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
     ]
 }, {
     weekDay: 'wednesday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
     ]
 },{
     weekDay: 'thursday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
     ]
 },{
     weekDay: 'friday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
     ]
 },{
     weekDay: 'saturday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'finished' },
     ]
 },{
     weekDay: 'sunday',
     animeList: [
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
-        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'Finished' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'watching' },
+        { name: 'Sousou no Frieren', malId: 52991, episode: '28/28', status: 'plannedtowatch' },
     ]
 }]
 </script>

diff --git a/i18n/en.json b/i18n/en.json
@@ -13,13 +13,18 @@
     "previousPage": "Previous page",
     "nextPage": "Next page",
     "animeWatchSchedule": "Anime watch schedule",
+
     "monday": "Monday",
     "tuesday": "Tuesday",
     "wednesday": "Wednesday",
     "thursday": "Thursday",
     "friday": "Friday",
     "saturday": "Saturday",
     "sunday": "Sunday",
+    "plannedToWatch": "Planned",
+    "watching": "Watching",
+    "finished": "Finished",
+    "dropped": "Dropped",
 
     "studios": "Studios",
     "genres": "Genres",

diff --git a/i18n/vi.json b/i18n/vi.json
@@ -12,6 +12,7 @@
     "continueReading": "Đọc tiếp",
     "previousPage": "Trang trước",
     "nextPage": "Trang sau",
+
     "animeWatchSchedule": "Lịch theo dõi Anime",
     "monday": "Thứ hai",
     "tuesday": "Thứ ba",
@@ -20,6 +21,10 @@
     "friday": "Thứ sáu",
     "saturday": "Thứ bảy",
     "sunday": "Chúa Nhật",
+    "plannedToWatch": "Sắp xem",
+    "watching": "Đang xem",
+    "finished": "Hoàn thành",
+    "dropped": "Bỏ dở",
 
     "studios": "Xưởng phim",
     "genres": "Thể loại",

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -5,8 +5,9 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@nuxt/content', '@nuxt/ui', '@nuxtjs/i18n', '@nuxthq/studio'],
   css: [
-    'primeflex/primeflex.css',
     '~/assets/css/main.css',
+    'primeflex/primeflex.css',
+    'primeflex/themes/primeone-light.css'
   ],
   app: {
     head: {