client/.dockerignore

@@ -1,2 +0,0 @@
-node_modules/
-dist/

client/Dockerfile

@@ -1,10 +0,0 @@
-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/
-

client/src/state.ts

@@ -18,6 +18,12 @@ 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 ?? []
@@ -27,17 +33,22 @@ 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 => {
@@ -49,7 +60,6 @@ export const state = reactive({
             error(event)
             window.location = window.location
         })
-        window.addEventListener('beforeunload', () => source.close())
     },
     async repopulate() {
         this.state = State.Fetching

docker-compose_dev.yml

@@ -37,9 +37,11 @@ services:
       - ./db.mount:/var/lib/postgresql/data
 
   client_devserver:
-    build: ./client
+    image: node
     volumes: [ ./client:/client/ ]
-    command: "yarn dev --host 0.0.0.0"
+    working_dir: /client
+    command: [ "sh", "-c", "yarn && yarn dev --host 0.0.0.0" ]
+    expose: [ 5173 ]
     networks: [ web ]
     labels:
       traefik.enable: true