From c6771ef74d3869ab7cc164ada2edcdd933c6649c Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Thu, 7 Mar 2024 18:22:31 +0100
Subject: [PATCH] wip

---
 src/data/entries.ts  |  4 ++++
 src/main.ts          |  2 +-
 src/pages/Detail.vue | 27 ++++++++++++++++++++++-----
 src/pages/Home.vue   |  9 ++++-----
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/data/entries.ts b/src/data/entries.ts
index fbfa9a0..cd5ffad 100644
--- a/src/data/entries.ts
+++ b/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 {
diff --git a/src/main.ts b/src/main.ts
index 65e8231..d9b9a28 100644
--- a/src/main.ts
+++ b/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}
     ]
 })
 
diff --git a/src/pages/Detail.vue b/src/pages/Detail.vue
index 5e3acfa..7cfea5d 100644
--- a/src/pages/Detail.vue
+++ b/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>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 5272e06..2dd75f6 100644
--- a/src/pages/Home.vue
+++ b/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()