diff --git a/client/.dockerignore b/client/.dockerignore new file mode 100644 index 0000000..04c01ba --- /dev/null +++ b/client/.dockerignore @@ -0,0 +1,2 @@ +node_modules/ +dist/ \ No newline at end of file diff --git a/client/Dockerfile b/client/Dockerfile new file mode 100644 index 0000000..1a44d67 --- /dev/null +++ b/client/Dockerfile @@ -0,0 +1,10 @@ +FROM node +# user node has UID 1000 in the container +USER node +EXPOSE 5173 +VOLUME /client +WORKDIR /client +ADD package.json yarn.lock tsconfig.json tsconfig.node.json vite.config.ts /client/ +RUN yarn +ADD public/ src/ index.html /client/ + diff --git a/client/package.json b/client/package.json index f410ede..a7858e3 100644 --- a/client/package.json +++ b/client/package.json @@ -12,7 +12,8 @@ "dependencies": { "bulma": "^0.9.4", "sass": "^1.25.0", - "vue": "^3.2.47" + "vue": "^3.2.47", + "vue-router": "4" }, "devDependencies": { "@vitejs/plugin-vue": "^4.1.0", diff --git a/client/src/App.vue b/client/src/App.vue index b7adb44..8e42bdc 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,14 +1,7 @@ - - diff --git a/client/src/main.ts b/client/src/main.ts index 26bcf20..90cdedc 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,6 +1,12 @@ import { createApp } from 'vue' import './style.scss' -import App from './App.vue' +import router from './router' +import { state } from "./state"; import 'bulma/css/bulma.css' +import App from './App.vue' -createApp(App).mount('#app') + +const app = createApp(App) +app.use(router) +app.mount('#app') +state.populate() diff --git a/client/src/router.ts b/client/src/router.ts new file mode 100644 index 0000000..062c50d --- /dev/null +++ b/client/src/router.ts @@ -0,0 +1,13 @@ +import { createRouter, createWebHistory } from 'vue-router' +import TableView from './views/TableView.vue' + +const router = createRouter({ + history: createWebHistory(), + routes: [ + { path: '/', component: TableView } + // for other pages: + // {path: '/', component: import('./views/TableView.vue')} + ] +}) + +export default router \ No newline at end of file diff --git a/client/src/state.ts b/client/src/state.ts index e0ad4ad..cc140cd 100644 --- a/client/src/state.ts +++ b/client/src/state.ts @@ -18,12 +18,6 @@ export const state = reactive({ source.addEventListener('TickAdded', event => { console.log(event) const tick: Tick = JSON.parse(event.data) - // for (const track of this.tracks) { - // if (track.id === tick.track_id) { - // console.debug('pushing tick') - // track.ticks?.push(tick) - // } - // } const tracks = this.tracks.map(track => { if (track.id === tick.track_id) { const ticks = track.ticks ?? [] @@ -33,22 +27,17 @@ export const state = reactive({ } return track }) - console.debug(tracks) this.tracks = tracks }) source.addEventListener('TickDropped', event => { console.log(event) const tick: Tick = JSON.parse(event.data) - // for (const track of this.tracks) - // if (track.id === tick.track_id) - // track.ticks = track.ticks?.filter($tick => $tick.id === tick.id) const tracks = this.tracks.map(track => { if (track.id === tick.track_id) { track.ticks = track.ticks?.filter($tick => $tick.id !== tick.id) } return track }) - console.debug(tracks) this.tracks = tracks }) source.addEventListener('Lagged', event => { @@ -60,6 +49,7 @@ export const state = reactive({ error(event) window.location = window.location }) + window.addEventListener('beforeunload', () => source.close()) }, async repopulate() { this.state = State.Fetching diff --git a/client/src/views/TableView.vue b/client/src/views/TableView.vue new file mode 100644 index 0000000..053df35 --- /dev/null +++ b/client/src/views/TableView.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/client/yarn.lock b/client/yarn.lock index 47e9ec4..a06ffcf 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -213,6 +213,11 @@ "@vue/compiler-dom" "3.3.4" "@vue/shared" "3.3.4" +"@vue/devtools-api@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07" + integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q== + "@vue/reactivity-transform@3.3.4": version "3.3.4" resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929" @@ -522,6 +527,13 @@ vite@^4.3.9: optionalDependencies: fsevents "~2.3.2" +vue-router@4: + version "4.2.2" + resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.2.tgz#b0097b66d89ca81c0986be03da244c7b32a4fd81" + integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ== + dependencies: + "@vue/devtools-api" "^6.5.0" + vue-template-compiler@^2.7.14: version "2.7.14" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1" diff --git a/docker-compose_dev.yml b/docker-compose_dev.yml index 780b9be..93d4bf1 100644 --- a/docker-compose_dev.yml +++ b/docker-compose_dev.yml @@ -37,11 +37,9 @@ services: - ./db.mount:/var/lib/postgresql/data client_devserver: - image: node + build: ./client volumes: [ ./client:/client/ ] - working_dir: /client - command: [ "sh", "-c", "yarn && yarn dev --host 0.0.0.0" ] - expose: [ 5173 ] + command: "yarn dev --host 0.0.0.0" networks: [ web ] labels: traefik.enable: true