From 0f7011aa8e9464d17f375ccdf3b23fe96f60e220 Mon Sep 17 00:00:00 2001 From: "D. Scott Boggs" Date: Sun, 25 Jun 2023 14:06:25 -0400 Subject: [PATCH] Add NewTrackView --- client/src/App.vue | 6 +- client/src/components/NavBar.vue | 28 +++++++++ client/src/components/Table.vue | 5 +- client/src/components/TrackIcon.vue | 16 ++++++ client/src/router.ts | 4 +- client/src/state.ts | 13 +++++ client/src/track.ts | 6 +- client/src/views/NewTrackView.vue | 88 +++++++++++++++++++++++++++++ 8 files changed, 160 insertions(+), 6 deletions(-) create mode 100644 client/src/components/NavBar.vue create mode 100644 client/src/components/TrackIcon.vue create mode 100644 client/src/views/NewTrackView.vue diff --git a/client/src/App.vue b/client/src/App.vue index 8e42bdc..5f48482 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,7 +1,11 @@ diff --git a/client/src/components/NavBar.vue b/client/src/components/NavBar.vue new file mode 100644 index 0000000..e11af91 --- /dev/null +++ b/client/src/components/NavBar.vue @@ -0,0 +1,28 @@ + + \ No newline at end of file diff --git a/client/src/components/Table.vue b/client/src/components/Table.vue index 338bd0b..1f1ddec 100644 --- a/client/src/components/Table.vue +++ b/client/src/components/Table.vue @@ -2,7 +2,9 @@ - + @@ -18,6 +20,7 @@ + \ No newline at end of file diff --git a/client/src/router.ts b/client/src/router.ts index 062c50d..806e60d 100644 --- a/client/src/router.ts +++ b/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')} ] diff --git a/client/src/state.ts b/client/src/state.ts index cc140cd..b875b56 100644 --- a/client/src/state.ts +++ b/client/src/state.ts @@ -79,5 +79,18 @@ export const state = reactive({ const { ok, status, statusText } = await fetch(`/api/v1/tracks/${track.id}/all-ticks`, { 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})`) } }) diff --git a/client/src/track.ts b/client/src/track.ts index 14f7567..83947a3 100644 --- a/client/src/track.ts +++ b/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 constructor( - id: number, + id: number | undefined, name: String, description: String, icon: String, diff --git a/client/src/views/NewTrackView.vue b/client/src/views/NewTrackView.vue new file mode 100644 index 0000000..8ec15bc --- /dev/null +++ b/client/src/views/NewTrackView.vue @@ -0,0 +1,88 @@ + + \ No newline at end of file
Date{{ track.icon }} + +