From 284d40c8b90e16a5a58d1c75da005f894f77989b Mon Sep 17 00:00:00 2001 From: "D. Scott Boggs" Date: Sun, 25 Jun 2023 14:57:29 -0400 Subject: [PATCH] finishing touches --- client/src/state.ts | 14 ++++++++------ client/src/ticks.ts | 4 ++-- client/src/views/NewTrackView.vue | 19 +++++++++++-------- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/client/src/state.ts b/client/src/state.ts index eaa8c30..cb842b6 100644 --- a/client/src/state.ts +++ b/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 { @@ -17,7 +18,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 ?? [] @@ -30,11 +31,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) @@ -44,11 +45,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 => { @@ -91,7 +92,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 { const response = await fetch('/api/v1/tracks', { method: "POST", body: JSON.stringify(track), @@ -99,6 +100,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" }) diff --git a/client/src/ticks.ts b/client/src/ticks.ts index 895682b..d50b9ba 100644 --- a/client/src/ticks.ts +++ b/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 diff --git a/client/src/views/NewTrackView.vue b/client/src/views/NewTrackView.vue index 8ec15bc..8b2ed62 100644 --- a/client/src/views/NewTrackView.vue +++ b/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(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('/') }