UI laid out and started

client/src/components/Table.vue

@@ -0,0 +1,40 @@
+<template>
+    <table class="table">
+        <thead>
+            <th>Date</th>
+            <th v-for="track in 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>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Track } from '../track'
+import TickComponent from "./TickComponent.vue";
+
+const tracks = ref(new Array<Track>())
+
+const today = new Date()
+const ONE_DAY_MS = 86_400_000
+// A list of the past 60 days
+const dates = [...Array(60).keys()]
+    .map(n => new Date(today.valueOf() - (n * ONE_DAY_MS)))
+
+console.log(dates)
+
+// The date as a string like 2023-06-11
+function dateString(date: Date) {
+    return date.toISOString().substring(0, 10)
+}
+
+Track.fetchAll().then(result => tracks.value = result)
+
+</script>

client/src/components/TableRow.vue

@@ -0,0 +1,18 @@
+<template>
+    <tr>
+        <td>{{dateString()}}</td>
+        <td v-for="tick in ticks" :key="tick.id">{{tick.name}}</td>
+    </tr>   
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps<{date: Date}>();
+
+const ticks = [{id: 1, name: 'test'}]
+
+// The date as a string like 2023-06-11
+function dateString() {
+    return props.date.toISOString().substring(0, 10)
+}
+</script>

client/src/components/TickComponent.vue

@@ -0,0 +1,9 @@
+<template>
+    <button :class="className()">{{ props.isSet ? "x" : "\u{A0}" }}</button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ isSet: boolean }>()
+
+const className = () => props.isSet ? "is-rounded is-info" : "is-rounded"
+</script>