use global state and add code for toggling task completeness

client/src/components/Table.vue

@@ -2,13 +2,13 @@
     <table class="table">
         <thead>
             <th>Date</th>
-            <th v-for="track in tracks" :key="track.id">{{ track.icon }}</th>
+            <th v-for="track in state.tracks" :key="track.id">{{ track.icon }}</th>
         </thead>
         <tbody>
             <tr v-for="date in dates" :key="date.valueOf()">
                 <th>{{ dateString(date) }}</th>
-                <td v-for="track in tracks" :key="track.id">
-                    <TickComponent :isSet="track.isSetOn(date)" />
+                <td v-for="track in state.tracks" :key="track.id">
+                    <TickComponent :isSet="track.isSetOn(date)" :trackID="track.id" />
                 </td>
             </tr>
         </tbody>
@@ -16,11 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Track } from '../track'
 import TickComponent from "./TickComponent.vue";
-
-const tracks = ref(new Array<Track>())
+import { state } from "../state";
 
 const today = new Date()
 const ONE_DAY_MS = 86_400_000
@@ -33,6 +30,4 @@ function dateString(date: Date) {
     return date.toISOString().substring(0, 10)
 }
 
-Track.fetchAll().then(result => tracks.value = result)
-
 </script>

client/src/components/TickComponent.vue

@@ -1,9 +1,23 @@
 <template>
-    <button :class="className()"></button>
+    <button :class="className()" @click="toggle"></button>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ isSet: boolean }>()
+import { Ref, ref } from 'vue';
+import { state } from '../state';
+import { Track } from '../track';
+
+const tick: Ref<Tick | undefined> = ref()
+const props = defineProps<{ isSet: boolean, track: Track }>()
 
 const className = () => props.isSet ? "button is-rounded is-info" : "button is-rounded"
+
+async function toggle() {
+    const $tick = tick.value
+    if ($tick) {
+        await state.taskMarkedIncomplete($tick)
+        tick.value = undefined
+    } else
+        tick.value = await state.taskCompleted(props.track)
+}
 </script>