From 3bff75d37d6af54e0a57d5452d0bf5da3a014e23 Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Fri, 6 Jun 2025 21:12:26 +0100 Subject: [PATCH 1/6] feat(components): :lipstick: create basic UI structure --- src/app.css | 44 +++++++++++++++++-------- src/app.html | 1 + src/lib/components/header.svelte | 6 ++++ src/lib/components/logic/dev.svelte.ts | 19 +++++++++++ src/lib/components/logic/view.svelte.ts | 11 +++++++ src/lib/components/main.svelte | 19 +++++++++++ src/lib/components/view/dash.svelte | 29 ++++++++++++++++ src/lib/components/view/detail.svelte | 15 +++++++++ src/lib/components/view/list.svelte | 30 +++++++++++++++++ src/lib/types/ui.ts | 1 + src/lib/utils/random.ts | 3 ++ src/routes/+page.svelte | 11 ++++--- vite.config.ts | 5 ++- 13 files changed, 176 insertions(+), 18 deletions(-) create mode 100644 src/lib/components/header.svelte create mode 100644 src/lib/components/logic/dev.svelte.ts create mode 100644 src/lib/components/logic/view.svelte.ts create mode 100644 src/lib/components/main.svelte create mode 100644 src/lib/components/view/dash.svelte create mode 100644 src/lib/components/view/detail.svelte create mode 100644 src/lib/components/view/list.svelte create mode 100644 src/lib/types/ui.ts create mode 100644 src/lib/utils/random.ts diff --git a/src/app.css b/src/app.css index 55ed15e..851d538 100644 --- a/src/app.css +++ b/src/app.css @@ -2,22 +2,40 @@ @import '@fontsource/metropolis'; @theme { - --pink: #d600a8; - --black: #000000; - --white: #ffffff; - --light-pink: #ff2ed2; - --teal: #00a7a8; - --yellow: #ffcb00; - --orange: #ec5d2a; - --green: #29e2a3; - --purple: #7900d6; - --bright-blue: #2235e2; - --dark-purple: #4d1b9b; + --color-black: #000000; + --color-blue-bright: #2235e2; + --color-green: #29e2a3; + --color-orange: #ec5d2a; + --color-pink: #d600a8; + --color-pink-light: #ff2ed2; + --color-purple: #7900d6; + --color-purple-dark: #4d1b9b; + --color-teal: #00a7a8; + --color-white: #ffffff; + --color-yellow: #ffcb00; --font-family-sans: Metropolis, Arial; } body { - background-color: var(--white); - color: var(--black); + background-color: var(--color-white); + color: var(--color-black); font-family: var(--font-family-sans); } + +.dev { + margin: 1rem; + outline: 2px dashed var(--color-purple-dark); + padding: 1rem; +} + +.tile { + outline: 3px dashed var(--color-purple); +} + +.list { + outline: 1px dashed var(--color-pink); +} + +.button { + outline: 2px dashed var(--color-pink-light); +} diff --git a/src/app.html b/src/app.html index 77a5ff5..ae678f9 100644 --- a/src/app.html +++ b/src/app.html @@ -6,6 +6,7 @@ %sveltekit.head% +
%sveltekit.body%
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte new file mode 100644 index 0000000..3203585 --- /dev/null +++ b/src/lib/components/header.svelte @@ -0,0 +1,6 @@ + + +
+

header

+
\ No newline at end of file diff --git a/src/lib/components/logic/dev.svelte.ts b/src/lib/components/logic/dev.svelte.ts new file mode 100644 index 0000000..073d7d0 --- /dev/null +++ b/src/lib/components/logic/dev.svelte.ts @@ -0,0 +1,19 @@ +let tileNum = $state(0); + +export function setTileNum(num: number) { + tileNum = num; +} + +export function getTileNum(): number { + return tileNum; +} + +let listNum = $state(0); + +export function setListNum(num: number) { + listNum = num; +} + +export function getListNum(): number { + return listNum; +} \ No newline at end of file diff --git a/src/lib/components/logic/view.svelte.ts b/src/lib/components/logic/view.svelte.ts new file mode 100644 index 0000000..c66ae19 --- /dev/null +++ b/src/lib/components/logic/view.svelte.ts @@ -0,0 +1,11 @@ +import type { View } from "$lib/types/ui"; + +let view = $state("dash"); + +export function setView(newView: View) { + view = newView; +}; + +export function getView(): View { + return view; +} \ No newline at end of file diff --git a/src/lib/components/main.svelte b/src/lib/components/main.svelte new file mode 100644 index 0000000..0132e90 --- /dev/null +++ b/src/lib/components/main.svelte @@ -0,0 +1,19 @@ + + +
+

main

+ + {#if getView() === "dash"} + + {:else if getView() === "list"} + + {:else if getView() === "detail"} + + {/if} +
\ No newline at end of file diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte new file mode 100644 index 0000000..ec64363 --- /dev/null +++ b/src/lib/components/view/dash.svelte @@ -0,0 +1,29 @@ + + +
+

view/dash

+ +

There should be {tileCountNum} {tileCountText}

+ + {#each [...Array(tileCountNum)] as _, i} + {@const thisList = randomNum()} + + {/each} +
\ No newline at end of file diff --git a/src/lib/components/view/detail.svelte b/src/lib/components/view/detail.svelte new file mode 100644 index 0000000..9d11a98 --- /dev/null +++ b/src/lib/components/view/detail.svelte @@ -0,0 +1,15 @@ + + +
+

view/detail

+ + +
\ No newline at end of file diff --git a/src/lib/components/view/list.svelte b/src/lib/components/view/list.svelte new file mode 100644 index 0000000..f341f14 --- /dev/null +++ b/src/lib/components/view/list.svelte @@ -0,0 +1,30 @@ + + +
+

view/list

+ + + +

There should be {entries} List Items

+ + {#each [...Array(entries)] as _, i} + + {/each} +
\ No newline at end of file diff --git a/src/lib/types/ui.ts b/src/lib/types/ui.ts new file mode 100644 index 0000000..7b55944 --- /dev/null +++ b/src/lib/types/ui.ts @@ -0,0 +1 @@ +export type View = "dash" | "list" | "detail"; \ No newline at end of file diff --git a/src/lib/utils/random.ts b/src/lib/utils/random.ts new file mode 100644 index 0000000..29d745c --- /dev/null +++ b/src/lib/utils/random.ts @@ -0,0 +1,3 @@ +export function randomNum() { + return Math.ceil(Math.random() * 10); +} \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c65b0ee..3350d16 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,4 +1,7 @@ -

Welcome to SvelteKit

-

- Visit svelte.dev/docs/kit to read the documentation -

+ + +
+
\ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index d2258dd..05c4998 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,7 +4,10 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ - plugins: [tailwindcss(), sveltekit()], + plugins: [ + tailwindcss(), + sveltekit() + ], test: { workspace: [ { From 81bf8c3466f447efe2013ed42730ecc768657210 Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Sat, 7 Jun 2025 16:09:59 +0100 Subject: [PATCH 2/6] feat(components): :building_construction: move header from page to layout --- src/routes/+layout.svelte | 3 +++ src/routes/+page.svelte | 2 -- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b93e9ba..edb4470 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,10 @@ +
+ {@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3350d16..6796c77 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,7 +1,5 @@ -
\ No newline at end of file From d889126e5270d1c6e07c8eb5384955506c12680a Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Sat, 7 Jun 2025 16:23:07 +0100 Subject: [PATCH 3/6] style: :lipstick: dev move style tweaks --- src/app.css | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/app.css b/src/app.css index 851d538..897a8f1 100644 --- a/src/app.css +++ b/src/app.css @@ -24,18 +24,12 @@ body { .dev { margin: 1rem; - outline: 2px dashed var(--color-purple-dark); + outline: 2px dashed var(--color-teal); padding: 1rem; } -.tile { - outline: 3px dashed var(--color-purple); -} +.tile { outline-color: var(--color-blue-bright); } -.list { - outline: 1px dashed var(--color-pink); -} +.list { outline-color: var(--color-purple); } -.button { - outline: 2px dashed var(--color-pink-light); -} +.button { outline-color: var(--color-pink); } From fa30fe9adb43d536706862226103301d4de41754 Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Sat, 7 Jun 2025 17:42:03 +0100 Subject: [PATCH 4/6] feat(data): :monocle_face: render a dash tile for every category --- src/lib/components/view/dash.svelte | 54 +++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 14 deletions(-) diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte index ec64363..047c3dd 100644 --- a/src/lib/components/view/dash.svelte +++ b/src/lib/components/view/dash.svelte @@ -1,12 +1,32 @@
-

view/dash

+
+

view/dash

+ + +
- {#await query} -

Loading...

- {:then data} - {#if data.data} - {#each getCategories(data.data) as category} +
+

Dev Mode: {devMode}

+

Profile ID: {profileId}

+
+ +
+ {#await queryActions} +

Loading...

+ {:then result} + {#if result && result.data} + {:else} + - {/each} - {:else} -

No categories found

- {/if} - {:catch error} -

Error: {error.message}

- {/await} + {/if} + {:catch error} +

Error Getting Actions: {error.message}

+ {/await} + + {#await queryQuestions} +

Loading...

+ {:then result} + {#if result.data} + {#each getCategories(result.data) as category} + + {/each} + {:else} +

No categories found

+ {/if} + {:catch error} +

Error Getting Questions: {error.message}

+ {/await} +
\ No newline at end of file diff --git a/src/lib/types/ui.ts b/src/lib/types/ui.ts index 7b55944..ab50f4f 100644 --- a/src/lib/types/ui.ts +++ b/src/lib/types/ui.ts @@ -1 +1,7 @@ +export interface ActionCheck { + isError: boolean; + exist: boolean; + count: number; +} + export type View = "dash" | "list" | "detail"; \ No newline at end of file From ccee1431019f46a0ed3e941d9834e5838564087a Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Sun, 8 Jun 2025 15:44:23 +0100 Subject: [PATCH 6/6] feat: :lipstick: viewframe navigation & data context --- src/lib/components/footer.svelte | 17 +++++++ src/lib/components/header.svelte | 16 +++++-- src/lib/components/logic/dev.svelte.ts | 4 -- src/lib/components/logic/view.svelte.ts | 11 ----- src/lib/components/main.svelte | 19 -------- src/lib/components/view/dash.svelte | 59 +++++-------------------- src/lib/components/view/detail.svelte | 22 +++++---- src/lib/components/view/list.svelte | 38 ++++++++-------- src/routes/+layout.svelte | 23 ++++++++++ src/routes/+page.svelte | 18 +++++++- 10 files changed, 114 insertions(+), 113 deletions(-) create mode 100644 src/lib/components/footer.svelte delete mode 100644 src/lib/components/logic/view.svelte.ts delete mode 100644 src/lib/components/main.svelte diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte new file mode 100644 index 0000000..f7f4f2f --- /dev/null +++ b/src/lib/components/footer.svelte @@ -0,0 +1,17 @@ + + +
+
+ {#if profileId} +

Profile ID: {profileId}

+ {:else} +

Not Logged In

+ {/if} +
+ +
+

Dev Mode: {devMode}

+
+
\ No newline at end of file diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte index 3203585..6f0d479 100644 --- a/src/lib/components/header.svelte +++ b/src/lib/components/header.svelte @@ -1,6 +1,16 @@ -
-

header

-
\ No newline at end of file +
+

+ Beacons Questionnaire +

+ + +
\ No newline at end of file diff --git a/src/lib/components/logic/dev.svelte.ts b/src/lib/components/logic/dev.svelte.ts index 073d7d0..3922845 100644 --- a/src/lib/components/logic/dev.svelte.ts +++ b/src/lib/components/logic/dev.svelte.ts @@ -1,19 +1,15 @@ let tileNum = $state(0); - export function setTileNum(num: number) { tileNum = num; } - export function getTileNum(): number { return tileNum; } let listNum = $state(0); - export function setListNum(num: number) { listNum = num; } - export function getListNum(): number { return listNum; } \ No newline at end of file diff --git a/src/lib/components/logic/view.svelte.ts b/src/lib/components/logic/view.svelte.ts deleted file mode 100644 index c66ae19..0000000 --- a/src/lib/components/logic/view.svelte.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { View } from "$lib/types/ui"; - -let view = $state("dash"); - -export function setView(newView: View) { - view = newView; -}; - -export function getView(): View { - return view; -} \ No newline at end of file diff --git a/src/lib/components/main.svelte b/src/lib/components/main.svelte deleted file mode 100644 index 0132e90..0000000 --- a/src/lib/components/main.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - -
-

main

- - {#if getView() === "dash"} - - {:else if getView() === "list"} - - {:else if getView() === "detail"} - - {/if} -
\ No newline at end of file diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte index cf034c9..2773642 100644 --- a/src/lib/components/view/dash.svelte +++ b/src/lib/components/view/dash.svelte @@ -1,41 +1,18 @@
-
-

view/dash

- - -
- -
-

Dev Mode: {devMode}

-

Profile ID: {profileId}

+
+

Dashboard View

@@ -87,11 +52,11 @@

Loading...

{:then result} {#if result && result.data} - {:else} - {/if} @@ -104,7 +69,7 @@ {:then result} {#if result.data} {#each getCategories(result.data) as category} - {/each} diff --git a/src/lib/components/view/detail.svelte b/src/lib/components/view/detail.svelte index 9d11a98..63b66a8 100644 --- a/src/lib/components/view/detail.svelte +++ b/src/lib/components/view/detail.svelte @@ -1,15 +1,21 @@
-

view/detail

+
+

Detail View

+ + +
- +
+
\ No newline at end of file diff --git a/src/lib/components/view/list.svelte b/src/lib/components/view/list.svelte index f341f14..95e84b9 100644 --- a/src/lib/components/view/list.svelte +++ b/src/lib/components/view/list.svelte @@ -1,30 +1,30 @@
-

view/list

- - +
+

List View

-

There should be {entries} List Items

- - {#each [...Array(entries)] as _, i} - - {/each} +
+ +
+ {#each [...Array(entries)] as _, i} + + {/each} +
\ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index edb4470..d84e25e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,23 @@ @@ -8,3 +25,9 @@
{@render children()} + +