Add NewTrackView

client/src/components/NavBar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+</script>
+<template>
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <h1 class="title navbar-item">Kalkutago</h1>
+        </div>
+        <div class="navbar-menu"></div>
+        <div class="navbar-end">
+            <div class="navbar-item">
+                <div class="buttons">
+                    <RouterLink to="/" v-if="$route.path === '/new-track'">
+                        <button class="button is-info">
+                            Go Back
+                        </button>
+                    </RouterLink>
+
+                    <RouterLink to="/new-track" v-else>
+                        <button class="button is-primary">
+                            Add Track
+                        </button>
+                    </RouterLink>
+                </div>
+            </div>
+        </div>
+    </nav>
+</template>

client/src/components/Table.vue

@@ -2,7 +2,9 @@
     <table class="table">
         <thead>
             <th>Date</th>
-            <th v-for="track in state.tracks" :key="track.id">{{ track.icon }}</th>
+            <th v-for="track in state.tracks" :key="track.id">
+                <TrackIcon :icon="track.icon" :id="track.id" />
+            </th>
         </thead>
         <tbody>
             <tr v-for="date in dates" :key="date.valueOf()">
@@ -18,6 +20,7 @@
 <script setup lang="ts">
 import TickComponent from "./TickComponent.vue";
 import { state } from "../state";
+import TrackIcon from "./TrackIcon.vue";
 
 const today = new Date()
 const ONE_DAY_MS = 86_400_000

client/src/components/TrackIcon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { state } from '../state';
+
+const props = defineProps<{icon: String, id: number|undefined}>()
+
+const del = () => {
+    if(props.id)
+        if(confirm("are you sure you want to delete this track?"))
+            state.removeTrack(props.id)
+}
+</script>
+<template>
+    <div @click=del>
+        {{props.icon}}
+    </div>
+</template>