diff --git a/package-lock.json b/package-lock.json index 8dad062..d767355 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "work-time-tracker", "version": "0.0.1", + "dependencies": { + "@sveltestack/svelte-query": "^1.6.0" + }, "devDependencies": { "@playwright/test": "^1.28.1", "@sveltejs/adapter-auto": "^1.0.0", @@ -584,6 +587,19 @@ "vite": "^4.0.0" } }, + "node_modules/@sveltestack/svelte-query": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@sveltestack/svelte-query/-/svelte-query-1.6.0.tgz", + "integrity": "sha512-C0wWuh6av1zu3Pzwrg6EQmX3BhDZQ4gMAdYu6Tfv4bjbEZTB00uEDz52z92IZdONh+iUKuyo0xRZ2e16k2Xifg==", + "peerDependencies": { + "broadcast-channel": "^4.5.0" + }, + "peerDependenciesMeta": { + "broadcast-channel": { + "optional": true + } + } + }, "node_modules/@types/chai": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz", @@ -3898,6 +3914,12 @@ "vitefu": "^0.2.3" } }, + "@sveltestack/svelte-query": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@sveltestack/svelte-query/-/svelte-query-1.6.0.tgz", + "integrity": "sha512-C0wWuh6av1zu3Pzwrg6EQmX3BhDZQ4gMAdYu6Tfv4bjbEZTB00uEDz52z92IZdONh+iUKuyo0xRZ2e16k2Xifg==", + "requires": {} + }, "@types/chai": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz", diff --git a/package.json b/package.json index 76a2cbd..322d1ce 100644 --- a/package.json +++ b/package.json @@ -34,5 +34,8 @@ "vite": "^4.0.0", "vitest": "^0.25.3" }, - "type": "module" + "type": "module", + "dependencies": { + "@sveltestack/svelte-query": "^1.6.0" + } } diff --git a/src/components/DeleteButton.svelte b/src/components/DeleteButton.svelte new file mode 100644 index 0000000..92f8c87 --- /dev/null +++ b/src/components/DeleteButton.svelte @@ -0,0 +1,27 @@ + + +
+ +
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts new file mode 100644 index 0000000..e1c877d --- /dev/null +++ b/src/routes/+page.server.ts @@ -0,0 +1,14 @@ +import type { PageServerLoad } from './$types'; +import type { Session } from '../types/session'; +// import { useQuery } from '@sveltestack/svelte-query' +import { fetchData } from '../use/fetch'; +export const load = (async () => { + return { sessions: await fetchData('http://localhost:8000/sessions')} +}) satisfies PageServerLoad; + +// export const load = (() => { +// const queryResult = useQuery('sessions', () => { +// return fetch('http://localhost:8000/sessions').then(res => res.json()) +// }) +// return { sessions: queryResult } +// }) satisfies PageServerLoad; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index dfcabdc..3bb618b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,61 @@ -
- {data.text} -
\ No newline at end of file +
+
+ +
+
+ {#if data.sessions.length === 0} +
No sessions found
+ {:else} + {#each data.sessions as session, i} +
+
+ {session.name} +
+
+ + + + + + + + + + + + + + + + + +
Session start Session end Hourly rate Total hours
+ {startTimesFormatted[i]} + {endTimesFormatted[i]} {session.hourlyRate} {totalHours[i]}
+
+ +
+ {/each} + {/if} +
+
diff --git a/src/routes/+page.ts b/src/routes/+page.ts deleted file mode 100644 index 9a28187..0000000 --- a/src/routes/+page.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { PageLoad } from "./$types"; - -export const load = (() => { - return { - text: "No work hours logged yet." - } -}) satisfies PageLoad; \ No newline at end of file diff --git a/src/styles/app.css b/src/styles/app.css index d832a8f..e5e189b 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -26,7 +26,7 @@ } html { - @apply font-opensans; + @apply font-opensans bg-gray-100; } } diff --git a/src/types/greeting.ts b/src/types/greeting.ts new file mode 100644 index 0000000..18816b3 --- /dev/null +++ b/src/types/greeting.ts @@ -0,0 +1,3 @@ +export interface Greeting { + message: string; +} \ No newline at end of file diff --git a/src/types/session.ts b/src/types/session.ts new file mode 100644 index 0000000..4dc78a3 --- /dev/null +++ b/src/types/session.ts @@ -0,0 +1,8 @@ +export interface Session { + _id: string + name: string + hours: number + startTime: Date + endTime: Date + hourlyRate?: number + } \ No newline at end of file diff --git a/src/use/fetch.ts b/src/use/fetch.ts new file mode 100644 index 0000000..cb01ef8 --- /dev/null +++ b/src/use/fetch.ts @@ -0,0 +1,4 @@ +export const fetchData = async (url: string): Promise => { + const response = await fetch(url); + return await response.json() +} \ No newline at end of file diff --git a/src/use/time.ts b/src/use/time.ts new file mode 100644 index 0000000..ce13b25 --- /dev/null +++ b/src/use/time.ts @@ -0,0 +1,21 @@ +export const convertISODate = (timestamp: Date): string => { + const date = new Date(timestamp); + + const month = (date.getMonth() + 1).toString().padStart(2, '0') + const day = date.getDate().toString().padStart(2, '0') + const year = date.getFullYear() + const hours = date.getHours().toString().padStart(2, "0"); + const minutes = date.getMinutes().toString().padStart(2, "0"); + const AMorPM = Number(hours) >= 12 ? 'PM' : 'AM'; + + return `${month}/${day}/${year} ${hours}:${minutes} ${AMorPM}` +} + +export const calculateHours = (startTimestamp: Date, endTimestamp: Date): string => { + const start = new Date(startTimestamp); + const end = new Date(endTimestamp); + const diff = end.getTime() - start.getTime(); + const hours = Math.floor(diff / (1000 * 60 * 60)); + const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); + return `${hours} hours ${minutes} minutes`; +} \ No newline at end of file