aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/DataView.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r--fe/src/lib/DataView.svelte177
1 files changed, 87 insertions, 90 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index dc8acae..1458c9a 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,126 +1,123 @@
1<script lang='ts'> 1<script lang="ts">
2import { onMount } from 'svelte'; 2 import { onMount } from "svelte";
3import type { Preference } from '../types'; 3 import type { Statistic } from "../types";
4import { token, user, preferences } from '../stores/auth' 4 import { token, user } from "../stores/auth";
5import Table from './Table.svelte'; 5 import Table from "./Table.svelte";
6import PreferencesForm from './PreferencesForm.svelte';
7 6
8const formatter = new Intl.DateTimeFormat( 7 let json: Promise<any>;
9 'en', 8 let showAddForm: boolean = false;
10 {
11 year: 'numeric',
12 month: '2-digit',
13 day: '2-digit'
14 }
15);
16
17let json;
18let showAddForm: boolean = false;
19 9
20let statistic: Statistic = newStatistic(); 10 let statistic: Statistic = newStatistic();
21 11
22async function fetchData() { 12 async function fetchData() {
23 const res = await fetch('http://localhost:8080/api/v1/stats/', { 13 const res = await fetch("http://localhost:8080/api/v1/stats/", {
24 method: "GET", 14 method: "GET",
25 headers: { 15 headers: {
26 'Authorization': `Bearer ${$token}` 16 Authorization: `Bearer ${$token}`,
27 } 17 },
28 }); 18 });
29 if (res.ok) { 19 if (res.ok) {
30 json = res.json(); 20 json = res.json();
31 } else { 21 } else {
32 throw new Error('There was a problem with your request'); 22 throw new Error("There was a problem with your request");
33 } 23 }
34} 24 }
35 25
36async function submitStat() { 26 async function submitStat() {
37 const response = await fetch('http://localhost:8080/api/v1/stats/', { 27 const response = await fetch("http://localhost:8080/api/v1/stats/", {
38 method: "POST", 28 method: "POST",
39 headers: { 29 headers: {
40 'Authorization': `Bearer ${$token}` 30 Authorization: `Bearer ${$token}`,
41 }, 31 },
42 body: JSON.stringify({ 32 body: JSON.stringify({
43 date: new Date, 33 date: new Date(),
44 user_id: 1, 34 user_id: 1,
45 quantity: 3 35 quantity: 3,
46 }) 36 }),
47 }); 37 });
48 fetchData(); 38 fetchData();
49} 39 }
50 40
51function handleClick() { 41 function handleClick() {
52 showAddForm = true; 42 showAddForm = true;
53} 43 }
54 44
55function handleAddDialogSubmit (e) { 45 function handleAddDialogSubmit(e: Event) {
56 console.log(statistic); 46 console.log(statistic);
57 showAddForm = false; 47 showAddForm = false;
58} 48 }
59 49
60function closeDialog () { 50 function closeDialog() {
61 showAddForm = false; 51 showAddForm = false;
62} 52 }
63 53
64function newStatistic (): Statistic { 54 function newStatistic(): Statistic {
65 let now = new Date(), month, day, year; 55 let now = new Date(),
56 month,
57 day,
58 year;
66 59
67 month = `${now.getMonth() + 1}`; 60 month = `${now.getMonth() + 1}`;
68 day = `${now.getDate()}`; 61 day = `${now.getDate()}`;
69 year = now.getFullYear(); 62 year = now.getFullYear();
70 if (month.length < 2) 63 if (month.length < 2) month = "0" + month;
71 month = '0' + month; 64 if (day.length < 2) day = "0" + day;
72 if (day.length < 2)
73 day = '0' + day;
74 65
75 const date = [year, month, day].join('-'); 66 const date = [year, month, day].join("-");
76 67
77 return { 68 return {
78 user_id: $user.uuid, 69 user_id: $user!.uuid,
79 date, 70 date,
80 quantity: 1 71 quantity: 1,
81 } 72 };
82} 73 }
83 74
84onMount(() => { 75 onMount(() => {
85 fetchData(); 76 fetchData();
86}); 77 });
87
88</script> 78</script>
79
89<div> 80<div>
90 <button on:click={submitStat}>Add Stat Test</button> 81 <button on:click={submitStat}>Add Stat Test</button>
91 <PreferencesForm /> 82 <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
92 <dialog open={showAddForm} on:submit={handleAddDialogSubmit}> 83 <h2>Add Water</h2>
93 <h2>Add Water</h2> 84 <form method="dialog">
94 <form method="dialog"> 85 <div class="form input group">
95 <div class='form input group'> 86 <label for="date">Date:</label>
96 <label for="date">Date:</label> 87 <input bind:value={statistic.date} id="date" name="date" type="date" />
97 <input bind:value={statistic.date} id="date" name="date" type="date" /> 88 </div>
98 </div> 89 <div class="form input group">
99 <div class='form input group'> 90 <label for="quantity">Quantity:</label>
100 <label for="quantity">Quantity:</label> 91 <input
101 <input bind:value={statistic.quantity} id="quantity" name="quantity" type="number" min="0" autocomplete="off"/> 92 bind:value={statistic.quantity}
102 </div> 93 id="quantity"
103 <button on:click={closeDialog}>Cancel</button> 94 name="quantity"
104 <button type="submit">Submit</button> 95 type="number"
105 </form> 96 min="0"
106 </dialog> 97 autocomplete="off"
107 <button on:click={handleClick}>Add</button> 98 />
108 {#await json then data} 99 </div>
109 <Table {data} nofooter /> 100 <button on:click={closeDialog}>Cancel</button>
110 {:catch error} 101 <button type="submit">Submit</button>
111 <p>{error}</p> 102 </form>
112 {/await} 103 </dialog>
113 <!-- <Chart /> --> 104 <button on:click={handleClick}>Add</button>
105 {#await json then data}
106 <Table {data} nofooter />
107 {:catch error}
108 <p>{error}</p>
109 {/await}
110 <!-- <Chart /> -->
114</div> 111</div>
115 112
116<style> 113<style>
117dialog { 114 dialog {
118 background: red; 115 background: red;
119 box-shadow: 0 20px 5em 10px rgba(0,0,0,0.8); 116 box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8);
120} 117 }
121dialog::backdrop { 118 dialog::backdrop {
122 padding: 20px; 119 padding: 20px;
123 box-shadow: 20px 20px rgba(0,0,0,0.8); 120 box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
124 background-color: red; 121 background-color: red;
125} 122 }
126</style> 123</style>