finishing touches

client/src/state.ts

@@ -1,5 +1,6 @@
 import { reactive } from "vue"
 import { Track } from "./track"
+import { Tick } from './ticks'
 import { error } from "./error"
 
 enum State {
@@ -26,7 +27,7 @@ export const state = reactive({
         source.addEventListener('message', event => console.log(event))
         source.addEventListener('TickAdded', event => {
             console.log(event)
-            const tick: Tick = JSON.parse(event.data)
+            const tick: Tick = Tick.fromJSON(JSON.parse(event.data))
             const tracks = this.tracks.map(track => {
                 if (track.id === tick.track_id) {
                     const ticks = track.ticks ?? []
@@ -39,11 +40,11 @@ export const state = reactive({
             this.tracks = tracks
         })
         source.addEventListener('TrackAdded', ({ data }) => {
-            const track: Track = JSON.parse(data)
+            const track: Track = Track.fromJSON(JSON.parse(data))
             this.tracks = [track, ...this.tracks]
         })
         source.addEventListener('TickDropped', event => {
-            const tick: Tick = JSON.parse(event.data)
+            const tick: Tick = Tick.fromJSON(JSON.parse(event.data))
             const tracks = this.tracks.map(track => {
                 if (track.id === tick.track_id) {
                     track.ticks = track.ticks?.filter($tick => $tick.id !== tick.id)
@@ -53,11 +54,11 @@ export const state = reactive({
             this.tracks = tracks
         })
         source.addEventListener('TrackDropped', ({ data }) => {
-            const track: Track = JSON.parse(data)
+            const track: Track = Track.fromJSON(JSON.parse(data))
             this.tracks = this.tracks.filter($track => $track.id !== track.id)
         })
         source.addEventListener('TrackChanged', ({ data }) => {
-            const track: Track = JSON.parse(data)
+            const track: Track = Track.fromJSON(JSON.parse(data))
             this.tracks = this.tracks.map($track => $track.id === track.id ? track : $track)
         })
         source.addEventListener('Lagged', event => {
@@ -97,7 +98,7 @@ export const state = reactive({
         if (!ok)
             error(`error deleting ticks for ${track.id}: ${statusText} (${status})`)
     },
-    async addTrack(track: Track) {
+    async addTrack(track: Track): Promise<boolean> {
         const response = await fetch('/api/v1/tracks', {
             method: "POST",
             body: JSON.stringify(track),
@@ -105,6 +106,7 @@ export const state = reactive({
         })
         if (!response.ok)
             error(`error submitting track: ${track}: ${response.statusText} (${response.status})`)
+        return response.ok
     },
     async removeTrack(trackID: number) {
         const response = await fetch(`/api/v1/tracks/${trackID}`, { method: "DELETE" })

client/src/ticks.ts

@@ -1,4 +1,4 @@
-interface ITick {
+export interface ITick {
     id: number
     track_id?: number
     year?: number
@@ -10,7 +10,7 @@ interface ITick {
     has_time_info?: number
 }
 
-class Tick implements ITick {
+export class Tick implements ITick {
     id: number
     track_id?: number
     year?: number

client/src/views/NewTrackView.vue

@@ -4,7 +4,7 @@ import { Track } from '../track';
 import { computed, ref } from 'vue';
 import { state } from '../state';
 
-const props = defineProps<{initialState?: Track}>()
+const props = defineProps<{ initialState?: Track }>()
 const router = useRouter()
 
 const name = ref(props.initialState?.name ?? "")
@@ -12,19 +12,22 @@ 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 color = ref(props.initialState?.color ?? undefined)
+const order = ref<any>(props.initialState?.order ?? undefined)
 
 const submittingNow = ref(false)
 const submitButtonClass = computed(() => 'button is-primary' + (submittingNow.value ? ' is-loading' : ''))
 
 const submit = async () => {
     submittingNow.value = true
+    // if you make a change to order then erase the value in the box it's ""
+    if (order.value === "") order.value = undefined
+    if (order.value instanceof String || typeof order.value === 'string') order.value = Number(order.value)
     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('/')
+    if (await state.addTrack(track))
+        router.push('/')
 }
 </script>
 <template>
@@ -32,7 +35,7 @@ const submit = async () => {
         <div class="field">
             <label for="name" class="label">Name</label>
             <div class="control">
-                <input type="text" name="name" class="input" v-model="name"/>
+                <input type="text" name="name" class="input" v-model="name" />
             </div>
         </div>
         <div class="field">
@@ -56,7 +59,7 @@ const submit = async () => {
             </div>
             <div class="control">
                 <label for="multiple-entries" class="label">
-                    <input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay"/>
+                    <input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay" />
                     Multiple Entries per Day?
                 </label>
             </div>
@@ -69,7 +72,7 @@ const submit = async () => {
         <div class="field">
             <div class="control">
                 <label for="order" class="label">
-                    <input type="number" name="order" class="input" v-model="order"/>
+                    <input type="number" name="order" class="input" v-model="order" />
                     Order
                 </label>
             </div>