From 9f9a33cbf55d38987a66b709284d2bb4ffea0fe9 Mon Sep 17 00:00:00 2001 From: Doog <157747121+doogongithub@users.noreply.github.com> Date: Thu, 29 Feb 2024 20:13:48 -0500 Subject: modify api, build additional FE components, add types --- fe/src/lib/DataView.svelte | 67 ++++++++++++++++++++++++++++++++++++--- fe/src/lib/LoginForm.svelte | 16 ++++++---- fe/src/lib/PreferencesForm.svelte | 45 ++++++++++++++++++++++++++ fe/src/lib/Table.svelte | 19 +++++++++++ fe/src/stores/auth.ts | 57 ++++++++++++++++++++++++++++++++- fe/src/types.ts | 14 ++++++++ 6 files changed, 206 insertions(+), 12 deletions(-) create mode 100644 fe/src/lib/PreferencesForm.svelte create mode 100644 fe/src/types.ts (limited to 'fe') diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index cd7b042..dc8acae 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte @@ -1,11 +1,24 @@
+ +

Add Water

- - +
+ + +
+
+ + +
+
@@ -65,3 +112,15 @@ onMount(() => { {/await}
+ + diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte index 22c0faf..499a457 100644 --- a/fe/src/lib/LoginForm.svelte +++ b/fe/src/lib/LoginForm.svelte @@ -1,8 +1,8 @@ + +

User Preferences

+
+
+ + +
+
+ + +
+ +
+
+ diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte index 5572280..4b81800 100644 --- a/fe/src/lib/Table.svelte +++ b/fe/src/lib/Table.svelte @@ -30,6 +30,11 @@ function formatDatum([key, value]: any[]) { const parsedDate = new Date(value); return formatter.format(parsedDate); } + + if (key === 'user') { + return value['name']; + } + return value; } @@ -78,9 +83,23 @@ table { padding: 16px; margin: 8px; border: solid 1px black; + border-collapse: collapse; } th { text-transform: capitalize; } + +thead tr { + background: rgba(0,0,23, 0.34); +} + +tbody tr:nth-child(odd) { + background: rgba(0,0,23,0.14); +} + +th, td { + padding: 1em; + border: 1px solid rgba(0,0,0, 1); +} diff --git a/fe/src/stores/auth.ts b/fe/src/stores/auth.ts index 7e70cda..10e6bd3 100644 --- a/fe/src/stores/auth.ts +++ b/fe/src/stores/auth.ts @@ -1,4 +1,5 @@ import type { Invalidator, Subscriber, Unsubscriber } from 'svelte/store'; +import type { Preference } from '../types'; import { writable, derived } from 'svelte/store'; type Nullable = T | null; @@ -14,6 +15,18 @@ interface TokenStore { unauthenticate: () => void } + +interface UserStore { + subscribe: (run: Subscriber>, invalidate: Invalidator>) => Unsubscriber, + setUser: (user: User) => void, + reset: () => void +} + +interface PreferenceStore { + subscribe: (run: Subscriber>, invalidate: Invalidator>) => Unsubscriber, + set: (this: void, value: Nullable) => void +} + function createTokenStore(): TokenStore { const storedToken = localStorage.getItem("token"); const { subscribe, set } = writable(storedToken); @@ -43,6 +56,48 @@ function onTokenChange ($token: Nullable): boolean { return $token ? true : false; } +function createUserStore(): UserStore { + const user = localStorage.getItem('user'); + const userObj: Nullable = user ? JSON.parse(user) : null; + const { subscribe, set } = writable(userObj); + + const setUser = (user: User) => { + localStorage.setItem('user', JSON.stringify(user)); + set(user); + } + + const reset = () => { + localStorage.removeItem('user'); + set(null); + } + + return { + subscribe, + setUser, + reset + } +} + + +function createPreferenceStore(): PreferenceStore { + const preferences = localStorage.getItem('preferences'); + const preferenceObj: Preference = preferences ? JSON.parse(preferences) : { + color: "#FF0000", + size: { + size: 16, + unit: 'oz' + } + }; + + const { subscribe, set } = writable>(preferenceObj); + + return { + subscribe, + set + } +} + export const token = createTokenStore(); export const authenticated = derived(token, onTokenChange); -export const user = writable(null); +export const user = createUserStore(); +export const preferences = createPreferenceStore(); diff --git a/fe/src/types.ts b/fe/src/types.ts new file mode 100644 index 0000000..03d613d --- /dev/null +++ b/fe/src/types.ts @@ -0,0 +1,14 @@ +export interface Size { + size: number; + unit: string; +} + +export interface Preference { + color: string; + size: Size; +} + +export interface User { + name: string; + uuid: string; +} -- cgit v1.1