✨ Now can alert limit per day

pages/index.vue

@@ -1,7 +1,45 @@
 <script setup>
 import data from "~/assets/json/data.json";
 
+const viewed = useCookie("viewed", {
+  default: () => ({}),
+  expires: getNextDays(),
+});
+
+const alert = ref([]);
+const viewedKey = ref("");
+const viewedLink = ref("");
+
 const categories = Object.keys(data.category);
+
+const isViewed = (category) => {
+  if (
+    Object.keys(viewed.value).includes(category) &&
+    viewed.value[category].viewed &&
+    !viewed.value[category].accept
+  ) {
+    alert.value.push({
+      status: "warning",
+      text: "คุณดูดวงในหมวดหมู่นี้ไปแล้ว แน่ใจหรือไม่ที่จะดูต่อ?",
+      PBtext: "ดูต่อไป",
+      PBclass: "btn-ghost",
+      PBonclick: () => {
+        if (alert.value.length) alert.value.shift();
+        viewed.value[viewedKey.value].accept = true;
+
+        navigateTo(viewedLink.value);
+      },
+    });
+    viewedKey.value = category;
+    viewedLink.value = `/predict/${category}`;
+
+    setTimeout(() => {
+      if (alert.value.length) alert.value.shift();
+    }, 5000);
+  } else {
+    navigateTo(`/predict/${category}`);
+  }
+};
 </script>
 
 <template>
@@ -11,8 +49,8 @@ const categories = Object.keys(data.category);
       <NuxtLink
         v-for="category in categories.length"
         :key="category"
-        :to="`/predict/${categories[category - 1]}`"
-        class="flex basis-1/4 flex-col items-center justify-center transition hover:scale-105 hover:underline"
+        class="flex basis-1/4 cursor-pointer flex-col items-center justify-center transition hover:scale-105 hover:underline"
+        @click="isViewed(categories[category - 1])"
       >
         <div class="stack">
           <CardTarot
@@ -28,5 +66,16 @@ const categories = Object.keys(data.category);
         <h3>{{ data.category[categories[category - 1]].title }}</h3>
       </NuxtLink>
     </div>
+    <ToastFeedback class="toast-center z-50">
+      <AlertFeedback
+        v-for="index in alert.length"
+        :key="index"
+        :status="alert[index - 1].status"
+        :text="alert[index - 1].text"
+        :primary-button-text="alert[index - 1].PBtext"
+        :primary-button-class="alert[index - 1].PBclass"
+        :primary-button-on-click="alert[index - 1].PBonclick"
+      />
+    </ToastFeedback>
   </section>
 </template>

pages/predict/[category]/[id]/index.vue

@@ -2,6 +2,14 @@
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import data from "~/assets/json/data.json";
 
+const route = useRoute();
+const params = route.params;
+
+const viewed = useCookie("viewed", {
+  default: () => ({}),
+  expires: getNextDays(),
+});
+
 const selected = ref("png");
 const options = ref([
   { text: "PNG", value: "png" },
@@ -11,9 +19,6 @@ const options = ref([
 const ranged = ref("100");
 const isLoading = ref(false);
 
-const route = useRoute();
-const params = route.params;
-
 if (
   params &&
   params.id &&
@@ -23,6 +28,7 @@ if (
   parseInt(params.id) > 0 &&
   parseInt(params.id) <= Object.keys(data.tarot).length
 ) {
+  viewed.value[params.category] = { viewed: true, accept: false };
   useSeoMeta({
     title: `Hamtarot - ${data.tarot[parseInt(params.id) - 1].alias}`,
   });