Add NewTrackView

client/src/App.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import NavBar from './components/NavBar.vue'
 </script>
 
 <template>
-    <RouterView />
+    <div >
+        <NavBar />
+        <RouterView />
+    </div>
 </template>

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>

client/src/router.ts

@@ -1,10 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import TableView from './views/TableView.vue'
+import NewTrackView from './views/NewTrackView.vue'
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
-        { path: '/', component: TableView }
+        { path: '/', component: TableView },
+        { path: '/new-track', component: NewTrackView }
         // for other pages:
         // {path: '/', component: import('./views/TableView.vue')}
     ]

client/src/state.ts

@@ -85,5 +85,18 @@ export const state = reactive({
         const { ok, status, statusText } = await fetch(`/api/v1/tracks/${track.id}/all-ticks?${query.toString()}`, { method: 'DELETE' })
         if (!ok)
             error(`error deleting ticks for ${track.id}: ${statusText} (${status})`)
+    },
+    async addTrack(track: Track) {
+        const response = await fetch('/api/v1/tracks', {
+            method: "POST",
+            body: JSON.stringify(track),
+            headers: { "Content-Type": "application/json" }
+        })
+        if (!response.ok)
+            error(`error submitting track: ${track}: ${response.statusText} (${response.status})`)
+    },
+    async removeTrack(trackID: number) {
+        const response = await fetch(`/api/v1/tracks/${trackID}`, { method: "DELETE" })
+        if (!response.ok) error(`error deleting track with ID ${trackID}: ${response.statusText} (${response.status})`)
     }
 })

client/src/track.ts

@@ -1,7 +1,7 @@
 import { error } from "./error"
 
 export interface ITrack {
-    id: number
+    id?: number
     name: String
     description: String
     icon: String
@@ -13,7 +13,7 @@ export interface ITrack {
 }
 
 export class Track implements ITrack {
-    id: number
+    id?: number
     name: String
     description: String
     icon: String
@@ -24,7 +24,7 @@ export class Track implements ITrack {
     ticks?: Array<Tick>
 
     constructor(
-        id: number,
+        id: number | undefined,
         name: String,
         description: String,
         icon: String,

client/src/views/NewTrackView.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { RouterLink, useRouter } from 'vue-router';
+import { Track } from '../track';
+import { computed, ref } from 'vue';
+import { state } from '../state';
+
+const props = defineProps<{initialState?: Track}>()
+const router = useRouter()
+
+const name = ref(props.initialState?.name ?? "")
+const description = ref(props.initialState?.description?.toString() ?? "")
+const icon = ref(props.initialState?.icon ?? "")
+const enabled = ref(props.initialState?.enabled ?? true)
+const multipleEntriesPerDay = ref(props.initialState?.multiple_entries_per_day ?? false)
+const color = ref(props.initialState?.color ?? null)
+const order = ref(props.initialState?.order ?? null)
+
+const submittingNow = ref(false)
+const submitButtonClass = computed(() => 'button is-primary' + (submittingNow.value ? ' is-loading' : ''))
+
+const submit = async () => {
+    submittingNow.value = true
+    const track = new Track(undefined, name.value, description.value,
+        icon.value, Number(enabled.value), Number(multipleEntriesPerDay.value),
+        color.value, order.value)
+    await state.addTrack(track)
+    router.push('/')
+}
+</script>
+<template>
+    <section class="section">
+        <div class="field">
+            <label for="name" class="label">Name</label>
+            <div class="control">
+                <input type="text" name="name" class="input" v-model="name"/>
+            </div>
+        </div>
+        <div class="field">
+            <label for="description" class="label">Description</label>
+            <div class="control">
+                <textarea name="description" cols="30" rows="5" v-model="description"></textarea>
+            </div>
+        </div>
+        <div class="field">
+            <label for="icon" class="label">Icon</label>
+            <div class="control">
+                <input type="text" name="icon" class="input" v-model="icon" />
+            </div>
+        </div>
+        <div class="field is-grouped">
+            <div class="control">
+                <label for="enabled" class="label">
+                    <input type="checkbox" name="enabled" class="checkbox" v-model="enabled" />
+                    Enabled?
+                </label>
+            </div>
+            <div class="control">
+                <label for="multiple-entries" class="label">
+                    <input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay"/>
+                    Multiple Entries per Day?
+                </label>
+            </div>
+        </div>
+        <div class="field">
+            <div class="control">
+                TODO color choice
+            </div>
+        </div>
+        <div class="field">
+            <div class="control">
+                <label for="order" class="label">
+                    <input type="number" name="order" class="input" v-model="order"/>
+                    Order
+                </label>
+            </div>
+        </div>
+        <div class="buttons">
+            <RouterLink to="/">
+                <button class="button is-danger">
+                    Cancel
+                </button>
+            </RouterLink>
+            <button :class="submitButtonClass" @click="submit">
+                Save
+            </button>
+        </div>
+    </section>
+</template>