wip

src/data/entries.ts

@@ -3,6 +3,10 @@ import { Ref, ref } from "vue";
 
 const localStorageKey = 'entries'
 
+export function getDifferenceToToday(date: Moment) {
+    return Math.abs(date.diff(moment(), 'days'))
+}
+
 export const entries: Ref<Entry[]> = ref(parseFromPossibleString(localStorage.getItem(localStorageKey)))
 
 export interface Entry {

src/main.ts

@@ -11,7 +11,7 @@ const router = createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', component: Home},
-        { path: '/:name', component: Detail}
+        { path: '/:name', component: Detail, props: true}
     ]
 })
 

src/pages/Detail.vue

@@ -1,13 +1,30 @@
 <script setup lang="ts">
+import { Card, CardTitle, CardDescription } from '@/components/ui/card';
+import { entries, getDifferenceToToday } from '@/data/entries';
+import { ref } from 'vue';
+
+const probs = defineProps<{ name: string }>()
+const entry = ref(entries.value.find(entry => entry.name === probs.name))
 
 </script>
 
 <template>
-    <div>
-
+    <div id="container" class="flex w-full justify-center p-10">
+        <main class="">
+            <header>
+                <Card v-if="entry" class="p-10">
+                    <CardTitle>{{ getDifferenceToToday(entry.last_reset) }} days</CardTitle>
+                    <CardDescription v-if="entry.text">
+                        text is defined
+                        {{ entry.text }}
+                    </CardDescription>
+                    <CardDescription v-else>
+                        text is not defined
+                    </CardDescription>
+                </Card>
+            </header>
+        </main>
     </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/pages/Home.vue

@@ -8,11 +8,12 @@ import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { getDifferenceToToday } from '@/data/entries';
 import { toTypedSchema } from '@vee-validate/zod';
 import * as z from 'zod'
-import moment, { Moment } from 'moment';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
+import moment from 'moment';
 
 const router = useRouter()
 const createEntryZodSchema = z.object({
@@ -24,9 +25,6 @@ type CreateEntrySchema = z.infer<typeof createEntryZodSchema>
 
 const createEntrySchema = toTypedSchema(createEntryZodSchema)
 
-function getDifferenceToToday(date: Moment) {
-    return Math.abs(date.diff(moment(), 'days'))
-}
 
 function createEntry(value: CreateEntrySchema) {
     if (entries.value.map(entry => entry.name).includes(value.name)) {
@@ -41,7 +39,8 @@ function createEntry(value: CreateEntrySchema) {
     entries.value.push({
         last_reset: moment(),
         name: value.name,
-        text: value.text
+        text: value.text && value.text.trim() !== '' 
+            ? value.text : undefined
     })
 
     save()