Feat/replace localhost

Dockerfile

@@ -8,6 +8,10 @@ FROM maven:3.8.5-openjdk-18 AS builder
 # MAVEN: application
 FROM builder AS app-stage
 COPY . /
+ARG VITE_HOST
+ARG VITE_PORT
+ENV VITE_HOST=$VITE_HOST
+ENV VITE_PORT=$VITE_PORT
 RUN mvn clean install -DskipTests
 
 #

docker-compose.yml

@@ -21,6 +21,9 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        - VITE_HOST=host.docker.internal
+        - VITE_PORT=8084
     environment:
       - SPRING_DATASOURCE_URL=jdbc:postgresql://postgresql:5432/test
       - SPRING_DATASOURCE_USERNAME=postgres
@@ -36,6 +39,8 @@ services:
       - GRAPHDB_URL=http://rdf4j-server:8080/rdf4j-server/repositories/
       - GRAPHDB_REPOSITORYID=test
       - SERVER_PORT=8080
+      - VITE_HOST=demonstrator
+      - VITE_PORT=8080
     ports:
       - 8084:8080
     depends_on:

frontend/src/components/legend/Legend.vue

@@ -45,5 +45,6 @@ const emit = defineEmits(['onCloseClick'])
   grid-template-columns: 81px auto;
   gap: 24px 36px;
   margin-bottom: 24px;
+  align-items: center;
 }
 </style>

frontend/src/components/linechart/LineChart.vue

@@ -36,6 +36,7 @@ export default {
       data: {
         labels: [],
         datasets: [],
+        stompClient: null,
       },
       colorCodesFlanders: ["#FFED00", "#443939"],
       options: {
@@ -61,7 +62,8 @@ export default {
   methods: {
     //websocket
     connect() {
-      this.stompClient = new Stomp.client('ws://localhost:8084/update', {debug: false});
+      this.stompClient = new Stomp.client(`ws://${import.meta.env.VITE_HOST}:${import.meta.env.VITE_PORT}/update`, {debug: false});
+      // this.stompClient = new Stomp.client(`ws://localhost:8084/update`, {debug: false});
       this.stompClient.connect(
           {},
           () => {

frontend/src/components/map/LeafletMap.vue

@@ -156,7 +156,7 @@ export default {
     //websocket
     connect() {
       const decolouringTimeout = 1000;
-      this.stompClient = new Stomp.client('ws://localhost:8084/update', {debug: false});
+      this.stompClient = new Stomp.client(`ws://${import.meta.env.VITE_HOST}:${import.meta.env.VITE_PORT}/update`, {debug: false});
       this.stompClient.connect(
           {},
           frame => this.subscribe(),
@@ -172,7 +172,7 @@ export default {
       }
     },
     subscribe() {
-      for (let [key, value] of this.layersToShow.entries()) {
+      for (let key of this.layersToShow.keys()) {
         this.stompClient.subscribe("/broker/member/" + key, (member) => {
           let body = JSON.parse(member.body)
           let marker = useMarkers([body], (memberId) => this.memberId = memberId, this.onPopupClosed).at(0)

frontend/src/components/membercounter/MemberCounter.vue

@@ -24,7 +24,8 @@ export default {
   methods: {
     //websocket
     connect() {
-      this.stompClient = new Stomp.client('ws://localhost:8084/update', {debug: false});
+      this.stompClient = new Stomp.client(`ws://${import.meta.env.VITE_HOST}:${import.meta.env.VITE_PORT}/update`, {debug: false});
+      // this.stompClient = new Stomp.client(`ws://localhost:8084/update`, {debug: false});
       this.stompClient.connect(
           {},
           () => {

frontend/src/components/modal/MapButtons.vue

@@ -135,6 +135,7 @@ function onCheckboxClicked(key: string, isChecked: boolean) {
   position: fixed;
   right: 8px;
   top: 0;
+  cursor: pointer;
 }
 
 </style>

frontend/vite.config.js

@@ -1,27 +1,30 @@
 import {fileURLToPath, URL} from 'node:url'
 
-import {defineConfig} from 'vite'
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-    ],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
-        }
-    },
-    server: {
-        cors: {
-            origin: "*"
+export default defineConfig(({command, mode}) => {
+    const env = loadEnv(mode, process.cwd(), '')
+    return {
+        plugins: [
+            vue(),
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        },
+        server: {
+            cors: {
+                origin: "*"
+            },
+            proxy: {
+                '/api': `http://${env.VITE_HOST}:${env.VITE_PORT}/`,
+            }
         },
-        proxy: {
-            '/api': 'http://localhost:8084/',
+        build: {
+            outDir: 'target/dist'
         }
-    },
-    build: {
-        outDir: 'target/dist'
     }
 })