aboutsummaryrefslogtreecommitdiff
path: root/fe
diff options
context:
space:
mode:
authorZach Berwaldt <zberwaldt@tutamail.com>2024-03-21 11:23:42 -0400
committerZach Berwaldt <zberwaldt@tutamail.com>2024-03-21 11:23:42 -0400
commitfd6f6f169f9ff9a1247228fb34dc9654a9584915 (patch)
tree4241792d4b41bc025807cab001a18a2d355e7ea3 /fe
parent655aeaac60c7dec09276f469904752c7dc58c8c5 (diff)
fix bugs, redo layout, reorg.
Diffstat (limited to 'fe')
-rw-r--r--fe/src/App.svelte2
-rw-r--r--fe/src/app.css53
-rw-r--r--fe/src/lib/Card.svelte5
-rw-r--r--fe/src/lib/Column.svelte8
-rw-r--r--fe/src/lib/DataView.svelte8
-rw-r--r--fe/src/lib/Layout.svelte51
-rw-r--r--fe/src/lib/Table.svelte10
-rw-r--r--fe/src/lib/forms/AddForm.svelte25
-rw-r--r--fe/src/lib/forms/LoginForm.svelte (renamed from fe/src/lib/LoginForm.svelte)6
-rw-r--r--fe/src/lib/forms/PreferencesForm.svelte (renamed from fe/src/lib/PreferencesForm.svelte)10
-rw-r--r--fe/src/lib/forms/index.ts10
-rw-r--r--fe/src/types.ts2
12 files changed, 100 insertions, 90 deletions
diff --git a/fe/src/App.svelte b/fe/src/App.svelte
index 25d53dc..11eb217 100644
--- a/fe/src/App.svelte
+++ b/fe/src/App.svelte
@@ -1,6 +1,6 @@
1<script lang="ts"> 1<script lang="ts">
2 import Layout from "./lib/Layout.svelte"; 2 import Layout from "./lib/Layout.svelte";
3 import LoginForm from "./lib/LoginForm.svelte"; 3 import { LoginForm } from './lib/forms';
4 import DataView from "./lib/DataView.svelte"; 4 import DataView from "./lib/DataView.svelte";
5 import { authenticated } from "./stores/auth"; 5 import { authenticated } from "./stores/auth";
6</script> 6</script>
diff --git a/fe/src/app.css b/fe/src/app.css
index c24c713..be7d15c 100644
--- a/fe/src/app.css
+++ b/fe/src/app.css
@@ -5,48 +5,34 @@
5 5
6 color-scheme: light dark; 6 color-scheme: light dark;
7 color: rgba(255, 255, 255, 0.87); 7 color: rgba(255, 255, 255, 0.87);
8 background-color: #242424; 8 background-color: var(--background);
9 width: 100vw;
9 10
10 font-synthesis: none; 11 font-synthesis: none;
11 text-rendering: optimizeLegibility; 12 text-rendering: optimizeLegibility;
12 -webkit-font-smoothing: antialiased; 13 -webkit-font-smoothing: antialiased;
13 -moz-osx-font-smoothing: grayscale; 14 -moz-osx-font-smoothing: grayscale;
14 15
15 --submit: #28a745; 16 --background: #242424;
16} 17}
17 18
18a { 19@media (min-width: 916px) {
19 font-weight: 500; 20 :root {
20 color: #646cff; 21 width: unset;
21 text-decoration: inherit; 22 }
22}
23 23
24a:hover { 24 #content div.column:first-child {
25 color: #535bf2; 25 flex-direction: row;
26 height: 300px;
27 }
26} 28}
27 29
28body { 30body {
29 margin: 0; 31 margin: 0;
30 display: flex; 32 padding: 0 2em 2em;
31 place-items: center;
32 min-width: 320px;
33 min-height: 100vh;
34} 33}
35 34
36h1 {
37 font-size: 3.2em;
38 line-height: 1.1;
39}
40 35
41.card {
42 padding: 2em;
43}
44
45#app {
46 flex-grow: 2;
47 max-width: 1280px;
48 margin: 0 auto;
49}
50 36
51button { 37button {
52 border-radius: 8px; 38 border-radius: 8px;
@@ -56,6 +42,7 @@ button {
56 font-weight: 500; 42 font-weight: 500;
57 font-family: inherit; 43 font-family: inherit;
58 background-color: #1a1a1a; 44 background-color: #1a1a1a;
45 color: inherit;
59 cursor: pointer; 46 cursor: pointer;
60 transition: border-color 0.25s; 47 transition: border-color 0.25s;
61} 48}
@@ -64,10 +51,6 @@ button:hover {
64 border-color: #646cff; 51 border-color: #646cff;
65} 52}
66 53
67button:focus,
68button:focus-visible {
69 outline: 4px auto -webkit-focus-ring-color;
70}
71 54
72@media (prefers-color-scheme: light) { 55@media (prefers-color-scheme: light) {
73 :root { 56 :root {
@@ -84,12 +67,6 @@ button:focus-visible {
84 } 67 }
85} 68}
86 69
87@media (prefers-color-scheme: dark) {
88 :root {
89 color: #000;
90 }
91}
92
93.form { 70.form {
94 display: flex; 71 display: flex;
95 flex-direction: column; 72 flex-direction: column;
@@ -118,3 +95,7 @@ button:focus-visible {
118 background: var(--submit); 95 background: var(--submit);
119 color: #fff; 96 color: #fff;
120} 97}
98
99dialog {
100 top: 8em;
101}
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index cd1e02c..0f29279 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -11,13 +11,12 @@
11 11
12<style> 12<style>
13 .card { 13 .card {
14 background: #fff;
15 display: flex; 14 display: flex;
16 flex-direction: column; 15 flex-direction: column;
17 align-items: flex-start; 16 align-items: flex-start;
18 border: solid 2px #00000066; 17 border: solid 2px #00000066;
19 border-radius: 0.25em; 18 border-radius: 0.25em;
20 height: var(--height, fit-content); 19 height: var(--height, inherit);
21 overflow-y: var(--overflow, initial); 20 flex-grow: 2;
22 } 21 }
23</style> 22</style>
diff --git a/fe/src/lib/Column.svelte b/fe/src/lib/Column.svelte
index f036073..6902edf 100644
--- a/fe/src/lib/Column.svelte
+++ b/fe/src/lib/Column.svelte
@@ -7,7 +7,13 @@
7 display: flex; 7 display: flex;
8 flex-direction: column; 8 flex-direction: column;
9 height: 100%; 9 height: 100%;
10 gap: var(--gap, 32px); 10 gap: var(--gap, 2em);
11 width: var(--width, initial); 11 width: var(--width, initial);
12 } 12 }
13
14 @media (min-width: 916px) {
15 .column {
16 flex-direction: column;
17 }
18 }
13</style> \ No newline at end of file 19</style> \ No newline at end of file
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index ffc2fe8..1496239 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -205,12 +205,11 @@
205 }); 205 });
206</script> 206</script>
207 207
208<Column --width="500px"> 208<Column>
209 <Card --height="300px"> 209 <Card>
210 <!--<Chart />-->
211 <canvas bind:this={barCanvasRef} /> 210 <canvas bind:this={barCanvasRef} />
212 </Card> 211 </Card>
213 <Card --height="300px"> 212 <Card>
214 <canvas bind:this={lineCanvasRef} /> 213 <canvas bind:this={lineCanvasRef} />
215 </Card> 214 </Card>
216</Column> 215</Column>
@@ -225,4 +224,3 @@
225 {/await} 224 {/await}
226 </Card> 225 </Card>
227</Column> 226</Column>
228<!-- <Chart /> -->
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index 2728dd3..26630d2 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,6 +1,6 @@
1<script> 1<script>
2 import { authenticated, token, user, preferences } from "../stores/auth"; 2 import { authenticated, token, user, preferences } from "../stores/auth";
3 import PreferencesForm from "./PreferencesForm.svelte"; 3 import { PreferencesForm, AddForm } from "./forms";
4 import { addFormOpen } from "../stores/forms"; 4 import { addFormOpen } from "../stores/forms";
5 5
6 const logout = () => { 6 const logout = () => {
@@ -30,9 +30,18 @@
30 <h1>Water</h1> 30 <h1>Water</h1>
31 </div> 31 </div>
32 <div> 32 <div>
33 <button on:click={showAddDialog}>Log Water</button> 33 <button on:click={showAddDialog}>
34 <button on:click={showPreferencesDialog}>Preference</button> 34 <span class="btn-icon">➕</span>
35 <button on:click={logout}>Logout</button> 35 <span class="btn-content">Log Water</span>
36 </button>
37 <button on:click={showPreferencesDialog}>
38 <span class="btn-icon">⚙</span>
39 <span class="btn-content">Preference</span>
40 </button>
41 <button on:click={logout}>
42 <span class="btn-icon">🔒</span>
43 <span class="btn-content">Logout</span>
44 </button>
36 </div> 45 </div>
37 </nav> 46 </nav>
38 <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} /> 47 <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
@@ -43,17 +52,30 @@
43</div> 52</div>
44 53
45<style> 54<style>
46 .layout {
47 height: 100vh;
48 }
49
50 nav { 55 nav {
51 display: flex; 56 display: flex;
52 flex-direction: row; 57 flex-direction: row;
53 align-items: center; 58 align-items: center;
54 justify-content: space-between; 59 justify-content: space-between;
55 height: 64px; 60 height: 64px;
56 padding: 0 2em; 61 padding: 1em 0;
62 }
63
64 nav div button {
65 margin: 0 .5em;
66 }
67
68 nav div button:first-child {
69 margin-left: 0;
70 }
71
72 nav div button:last-child {
73 margin-right: 0;
74 }
75
76
77 nav .btn-content {
78 display: none;
57 } 79 }
58 80
59 nav div { 81 nav div {
@@ -66,9 +88,16 @@
66 88
67 #content { 89 #content {
68 display: flex; 90 display: flex;
69 flex-direction: row; 91 flex-direction: column;
70 justify-content: center; 92 justify-content: center;
71 gap: 2em; 93 gap: 2em;
72 margin-top: 4em; 94 margin-top: 1em;
95 }
96
97 @media (min-width: 916px) {
98 nav .btn-content {
99 display: inline;
100 margin-left: 1em;
101 }
73 } 102 }
74</style> 103</style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 621157e..3ce3331 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -7,7 +7,7 @@
7 7
8 export let sortBy: string = 'date'; 8 export let sortBy: string = 'date';
9 9
10 type SortComparator = (a, b) => number 10 type SortComparator = (a:any , b:any) => number
11 11
12 function getDataKeys(data: any[]): string[] { 12 function getDataKeys(data: any[]): string[] {
13 if (!data || data.length === 0) return []; 13 if (!data || data.length === 0) return [];
@@ -20,7 +20,7 @@
20 return Object.entries(row).filter((r) => !omit.includes(r[0])); 20 return Object.entries(row).filter((r) => !omit.includes(r[0]));
21 } 21 }
22 22
23 function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => new Date(b[sortBy]) - new Date(a[sortBy])) { 23 function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => Date.parse(b[sortBy]) - Date.parse(a[sortBy])) {
24 return arr.sort(fn) 24 return arr.sort(fn)
25 } 25 }
26 26
@@ -92,10 +92,7 @@
92 border: solid 1px black; 92 border: solid 1px black;
93 border-collapse: collapse; 93 border-collapse: collapse;
94 overflow-y: hidden; 94 overflow-y: hidden;
95 } 95 width: calc(100% - 16px);
96
97 th {
98 text-transform: capitalize;
99 } 96 }
100 97
101 thead tr { 98 thead tr {
@@ -108,6 +105,7 @@
108 105
109 th, 106 th,
110 td { 107 td {
108 text-transform: capitalize;
111 padding: 1em; 109 padding: 1em;
112 border: 1px solid rgba(0, 0, 0, 1); 110 border: 1px solid rgba(0, 0, 0, 1);
113 } 111 }
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
index f85cce6..bbc8356 100644
--- a/fe/src/lib/forms/AddForm.svelte
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -11,21 +11,10 @@
11 const statistic: Statistic = newStatistic(); 11 const statistic: Statistic = newStatistic();
12 12
13 function newStatistic(): Statistic { 13 function newStatistic(): Statistic {
14 let now = new Date(), 14 let date = new Date().toString();
15 month,
16 day,
17 year;
18
19 month = `${now.getMonth() + 1}`;
20 day = `${now.getDate()}`;
21 year = now.getFullYear();
22 if (month.length < 2) month = "0" + month;
23 if (day.length < 2) day = "0" + day;
24
25 const date = [year, month, day].join("-");
26 15
27 return { 16 return {
28 user_id: $user!.uuid, 17 user_id: $user!.id,
29 date, 18 date,
30 quantity: 1 19 quantity: 1
31 }; 20 };
@@ -37,7 +26,7 @@
37 26
38 async function handleSubmitStat() 27 async function handleSubmitStat()
39 { 28 {
40 const { date, quantity } = statistic; 29 const { user_id, date, quantity } = statistic;
41 await fetch(apiURL("stats"), { 30 await fetch(apiURL("stats"), {
42 method: "POST", 31 method: "POST",
43 headers: { 32 headers: {
@@ -45,7 +34,7 @@
45 }, 34 },
46 body: JSON.stringify({ 35 body: JSON.stringify({
47 date: new Date(date), 36 date: new Date(date),
48 user_id: 2, 37 user_id,
49 quantity 38 quantity
50 }) 39 })
51 }); 40 });
@@ -54,12 +43,12 @@
54 43
55</script> 44</script>
56 45
57<dialog {open} on:submit={handleSubmitStat}> 46<dialog id="addForm" {open} on:submit={handleSubmitStat}>
58 <h2>Add Water</h2> 47 <h2>Add Water</h2>
59 <form method="dialog"> 48 <form method="dialog">
60 <div class="form input group"> 49 <div class="form input group">
61 <label for="date">Date:</label> 50 <label for="date">Date:</label>
62 <input bind:value={statistic.date} id="date" name="date" type="date" /> 51 <input bind:value={statistic.date} id="date" name="date" type="datetime-local" />
63 </div> 52 </div>
64 <div class="form input group"> 53 <div class="form input group">
65 <label for="quantity">Quantity:</label> 54 <label for="quantity">Quantity:</label>
@@ -75,4 +64,4 @@
75 <button on:click={closeDialog}>Cancel</button> 64 <button on:click={closeDialog}>Cancel</button>
76 <button type="submit">Submit</button> 65 <button type="submit">Submit</button>
77 </form> 66 </form>
78</dialog> \ No newline at end of file 67</dialog>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte
index cf5febf..88d4479 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/forms/LoginForm.svelte
@@ -1,7 +1,7 @@
1<script lang="ts"> 1<script lang="ts">
2 import { token, user, preferences } from "../stores/auth"; 2 import { token, user, preferences } from "../../stores/auth";
3 import Card from "./Card.svelte"; 3 import Card from "../Card.svelte";
4 import { apiURL } from "../utils"; 4 import { apiURL } from "../../utils";
5 5
6 let credentials: CredentialObject = { 6 let credentials: CredentialObject = {
7 username: "", 7 username: "",
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/forms/PreferencesForm.svelte
index 74b8a63..79663d1 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/forms/PreferencesForm.svelte
@@ -1,8 +1,8 @@
1<script lang="ts"> 1<script lang="ts">
2 import { user, preferences, token } from "../stores/auth"; 2 import { user, preferences, token } from "../../stores/auth";
3 import { createEventDispatcher, onDestroy, onMount } from "svelte"; 3 import { createEventDispatcher, onDestroy, onMount } from "svelte";
4 import type { User } from "../types"; 4 import type { User } from "../../types";
5 import { apiURL } from "../utils"; 5 import { apiURL } from "../../utils";
6 6
7 export let open: boolean; 7 export let open: boolean;
8 8
@@ -107,7 +107,7 @@
107</dialog> 107</dialog>
108 108
109<style> 109<style>
110 dialog { 110 /* dialog {
111 background: white; 111 background: white;
112 color: black; 112 color: black;
113 } 113 }
@@ -115,5 +115,5 @@
115 input[type="color"] { 115 input[type="color"] {
116 width: 4em; 116 width: 4em;
117 height: 4em; 117 height: 4em;
118 } 118 } */
119</style> 119</style>
diff --git a/fe/src/lib/forms/index.ts b/fe/src/lib/forms/index.ts
new file mode 100644
index 0000000..ac4e63b
--- /dev/null
+++ b/fe/src/lib/forms/index.ts
@@ -0,0 +1,10 @@
1import AddForm from "./AddForm.svelte";
2import LoginForm from "./LoginForm.svelte";
3import PreferencesForm from "./PreferencesForm.svelte";
4
5
6export {
7 AddForm,
8 LoginForm,
9 PreferencesForm
10}; \ No newline at end of file
diff --git a/fe/src/types.ts b/fe/src/types.ts
index c8f2f00..e06e789 100644
--- a/fe/src/types.ts
+++ b/fe/src/types.ts
@@ -19,7 +19,7 @@ export interface User {
19} 19}
20 20
21export interface Statistic { 21export interface Statistic {
22 user_id: string; 22 user_id: number;
23 date: string; 23 date: string;
24 quantity: number; 24 quantity: number;
25} 25}