diff options
Diffstat (limited to 'fe/src/lib/Layout.svelte')
-rw-r--r-- | fe/src/lib/Layout.svelte | 116 |
1 files changed, 62 insertions, 54 deletions
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte index 94ce84d..f208f34 100644 --- a/fe/src/lib/Layout.svelte +++ b/fe/src/lib/Layout.svelte | |||
@@ -1,62 +1,70 @@ | |||
1 | <script> | 1 | <script> |
2 | import { authenticated, token } from "../stores/auth"; | 2 | import { authenticated, token } from "../stores/auth"; |
3 | import PreferencesForm from "./PreferencesForm.svelte"; | 3 | import PreferencesForm from "./PreferencesForm.svelte"; |
4 | const logout = () => token.unauthenticate(); | 4 | import { addFormOpen } from "../stores/forms"; |
5 | let open = false; | 5 | |
6 | 6 | const logout = () => token.unauthenticate(); | |
7 | function showSettingsDialog() { | 7 | let preferenceFormOpen = false; |
8 | open = true; | 8 | |
9 | } | 9 | function showPreferencesDialog() { |
10 | 10 | preferenceFormOpen = true; | |
11 | function closeDialog() { | 11 | } |
12 | open = false; | 12 | |
13 | } | 13 | function closePreferenceDialog() { |
14 | preferenceFormOpen = false; | ||
15 | } | ||
16 | |||
17 | function showAddDialog() { | ||
18 | addFormOpen.set(true); | ||
19 | } | ||
14 | </script> | 20 | </script> |
15 | 21 | ||
16 | <div class="layout"> | 22 | <div class="layout"> |
17 | {#if $authenticated} | 23 | {#if $authenticated} |
18 | <nav> | 24 | <nav> |
19 | <div> | 25 | <div> |
20 | <h1>Water</h1> | 26 | <h1>Water</h1> |
21 | </div> | 27 | </div> |
22 | <div> | 28 | <div> |
23 | <button on:click={showSettingsDialog}>Settings</button> | 29 | <button on:click={showAddDialog}>Log Water</button> |
24 | <button on:click={logout}>Logout</button> | 30 | <button on:click={showPreferencesDialog}>Preference</button> |
25 | </div> | 31 | <button on:click={logout}>Logout</button> |
26 | </nav> | 32 | </div> |
27 | <PreferencesForm {open} on:close={closeDialog} /> | 33 | </nav> |
28 | {/if} | 34 | <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} /> |
29 | <div id="content"> | 35 | {/if} |
30 | <slot /> | 36 | <div id="content"> |
31 | </div> | 37 | <slot /> |
38 | </div> | ||
32 | </div> | 39 | </div> |
33 | 40 | ||
34 | <style> | 41 | <style> |
35 | .layout { | 42 | .layout { |
36 | height: 100vh; | 43 | height: 100vh; |
37 | } | 44 | } |
38 | nav { | 45 | |
39 | display: flex; | 46 | nav { |
40 | flex-direction: row; | 47 | display: flex; |
41 | align-items: center; | 48 | flex-direction: row; |
42 | justify-content: space-between; | 49 | align-items: center; |
43 | height: 64px; | 50 | justify-content: space-between; |
44 | padding: 0 2em; | 51 | height: 64px; |
45 | } | 52 | padding: 0 2em; |
46 | 53 | } | |
47 | nav div { | 54 | |
48 | width: fit-content; | 55 | nav div { |
49 | } | 56 | width: fit-content; |
50 | 57 | } | |
51 | nav div h1 { | 58 | |
52 | font-size: 1.75em; | 59 | nav div h1 { |
53 | } | 60 | font-size: 1.75em; |
54 | 61 | } | |
55 | #content { | 62 | |
56 | display: flex; | 63 | #content { |
57 | flex-direction: column; | 64 | display: flex; |
58 | justify-content: center; | 65 | flex-direction: row; |
59 | align-items: center; | 66 | justify-content: center; |
60 | padding: 3em 0; | 67 | gap: 2em; |
61 | } | 68 | margin-top: 4em; |
69 | } | ||
62 | </style> | 70 | </style> |