forked from TWS/kalkutago
finishing touches
This commit is contained in:
parent
6360f23209
commit
eb14a39c33
|
@ -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" })
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue