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.svelte67
1 files changed, 63 insertions, 4 deletions
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 @@
1<script lang='ts'> 1<script lang='ts'>
2import { onMount } from 'svelte'; 2import { onMount } from 'svelte';
3import { token } from '../stores/auth' 3import type { Preference } from '../types';
4import { token, user, preferences } from '../stores/auth'
4import Table from './Table.svelte'; 5import Table from './Table.svelte';
6import PreferencesForm from './PreferencesForm.svelte';
7
8const formatter = new Intl.DateTimeFormat(
9 'en',
10 {
11 year: 'numeric',
12 month: '2-digit',
13 day: '2-digit'
14 }
15);
5 16
6let json; 17let json;
7let showAddForm: boolean = false; 18let showAddForm: boolean = false;
8 19
20let statistic: Statistic = newStatistic();
21
9async function fetchData() { 22async function fetchData() {
10 const res = await fetch('http://localhost:8080/api/v1/stats/', { 23 const res = await fetch('http://localhost:8080/api/v1/stats/', {
11 method: "GET", 24 method: "GET",
@@ -40,7 +53,32 @@ function handleClick() {
40} 53}
41 54
42function handleAddDialogSubmit (e) { 55function handleAddDialogSubmit (e) {
43 console.log(e.keyCode) 56 console.log(statistic);
57 showAddForm = false;
58}
59
60function closeDialog () {
61 showAddForm = false;
62}
63
64function newStatistic (): Statistic {
65 let now = new Date(), month, day, year;
66
67 month = `${now.getMonth() + 1}`;
68 day = `${now.getDate()}`;
69 year = now.getFullYear();
70 if (month.length < 2)
71 month = '0' + month;
72 if (day.length < 2)
73 day = '0' + day;
74
75 const date = [year, month, day].join('-');
76
77 return {
78 user_id: $user.uuid,
79 date,
80 quantity: 1
81 }
44} 82}
45 83
46onMount(() => { 84onMount(() => {
@@ -50,10 +88,19 @@ onMount(() => {
50</script> 88</script>
51<div> 89<div>
52 <button on:click={submitStat}>Add Stat Test</button> 90 <button on:click={submitStat}>Add Stat Test</button>
91 <PreferencesForm />
53 <dialog open={showAddForm} on:submit={handleAddDialogSubmit}> 92 <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
93 <h2>Add Water</h2>
54 <form method="dialog"> 94 <form method="dialog">
55 <input name="date" type="date" /> 95 <div class='form input group'>
56 <input name="quantity" type="number" min="0" autocomplete="off"/> 96 <label for="date">Date:</label>
97 <input bind:value={statistic.date} id="date" name="date" type="date" />
98 </div>
99 <div class='form input group'>
100 <label for="quantity">Quantity:</label>
101 <input bind:value={statistic.quantity} id="quantity" name="quantity" type="number" min="0" autocomplete="off"/>
102 </div>
103 <button on:click={closeDialog}>Cancel</button>
57 <button type="submit">Submit</button> 104 <button type="submit">Submit</button>
58 </form> 105 </form>
59 </dialog> 106 </dialog>
@@ -65,3 +112,15 @@ onMount(() => {
65 {/await} 112 {/await}
66 <!-- <Chart /> --> 113 <!-- <Chart /> -->
67</div> 114</div>
115
116<style>
117dialog {
118 background: red;
119 box-shadow: 0 20px 5em 10px rgba(0,0,0,0.8);
120}
121dialog::backdrop {
122 padding: 20px;
123 box-shadow: 20px 20px rgba(0,0,0,0.8);
124 background-color: red;
125}
126</style>