From cdb01b26ceaecb049d923059214c0d315cb27706 Mon Sep 17 00:00:00 2001
From: "D. Scott Boggs" <scott@tams.tech>
Date: Tue, 20 Jun 2023 11:47:20 -0400
Subject: [PATCH 1/5] Build custom image for client dev server

---
 client/.dockerignore   |  2 ++
 client/Dockerfile      | 10 ++++++++++
 docker-compose_dev.yml |  6 ++----
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 client/.dockerignore
 create mode 100644 client/Dockerfile

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/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
-- 
2.43.5


From 7d4dcf15c159e0102ebd8a0ed5a125b73c0aab03 Mon Sep 17 00:00:00 2001
From: "D. Scott Boggs" <scott@tams.tech>
Date: Tue, 20 Jun 2023 11:48:02 -0400
Subject: [PATCH 2/5] Remove a bit of cruft

---
 client/src/state.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/client/src/state.ts b/client/src/state.ts
index e0ad4ad..d9c00e7 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 => {
-- 
2.43.5


From 9c255b5f6834b8a5fa925f14aa164eb1e07303b8 Mon Sep 17 00:00:00 2001
From: "D. Scott Boggs" <scott@tams.tech>
Date: Wed, 21 Jun 2023 06:23:36 -0400
Subject: [PATCH 3/5] Cleanly disconnect from the update stream if possible

---
 client/src/state.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/state.ts b/client/src/state.ts
index d9c00e7..cc140cd 100644
--- a/client/src/state.ts
+++ b/client/src/state.ts
@@ -49,6 +49,7 @@ export const state = reactive({
             error(event)
             window.location = window.location
         })
+        window.addEventListener('beforeunload', () => source.close())
     },
     async repopulate() {
         this.state = State.Fetching
-- 
2.43.5


From afacdaa3dd07817b45014ba4d2c9d39513245baa Mon Sep 17 00:00:00 2001
From: "D. Scott Boggs" <scott@tams.tech>
Date: Wed, 21 Jun 2023 06:26:52 -0400
Subject: [PATCH 4/5] Move state initialization from App.vue to main.ts

---
 client/src/App.vue | 3 ---
 client/src/main.ts | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index b7adb44..a7b1c04 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import Table from "./components/Table.vue";
-import { state } from "./state";
-
-state.populate()
 </script>
 
 <template>
diff --git a/client/src/main.ts b/client/src/main.ts
index 26bcf20..18f4202 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,6 +1,9 @@
 import { createApp } from 'vue'
 import './style.scss'
 import App from './App.vue'
+import { state } from "./state";
 import 'bulma/css/bulma.css'
 
 createApp(App).mount('#app')
+
+state.populate()
\ No newline at end of file
-- 
2.43.5


From 68ede48cbc3894c2a28ec44f20cf45a265b7589b Mon Sep 17 00:00:00 2001
From: "D. Scott Boggs" <scott@tams.tech>
Date: Sun, 25 Jun 2023 10:29:32 -0400
Subject: [PATCH 5/5] Add vue router

---
 client/package.json            |  3 ++-
 client/src/App.vue             |  8 ++------
 client/src/main.ts             |  9 ++++++---
 client/src/router.ts           | 13 +++++++++++++
 client/src/views/TableView.vue | 11 +++++++++++
 client/yarn.lock               | 12 ++++++++++++
 6 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 client/src/router.ts
 create mode 100644 client/src/views/TableView.vue

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 a7b1c04..8e42bdc 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import Table from "./components/Table.vue";
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
-    <div class="container">
-        <Table></Table>
-    </div>
+    <RouterView />
 </template>
-
-<style scoped></style>
diff --git a/client/src/main.ts b/client/src/main.ts
index 18f4202..90cdedc 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,9 +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')
 
-state.populate()
\ No newline at end of file
+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/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 @@
+<script setup lang="ts">
+import Table from "../components/Table.vue";
+</script>
+
+<template>
+    <div class="container">
+        <Table></Table>
+    </div>
+</template>
+
+<style scoped></style>
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"
-- 
2.43.5