Add NewTrackView

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>