ERU widget updates with data from mockWebsock. added option to have MEA widget display data from test-websocket-server to show faster component rendering if needed

mockWebsock.cjs

@@ -29,6 +29,7 @@ wss.on('connection', (ws) => {
             latitude: 7.7,
             longitude: 8.8,
         },
+        dummyConnection: 0,
         vehicleStatus: 0,
     };
 
@@ -41,6 +42,7 @@ wss.on('connection', (ws) => {
         vehicleData.currentPosition.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
         vehicleData.currentPosition.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
         vehicleData.lastUpdated = new Date().toLocaleTimeString();
+        vehicleData.dummyConnection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
 
         ws.send(JSON.stringify(vehicleData));
     }, 1000);

src/test-websocket-server.cjs

@@ -11,7 +11,6 @@ const server = http.createServer(app);
 // Create a WebSocket server instance and attach it to the HTTP server
 const websocketServer = new WebSocket.Server({ server });
 
-let battery = 0;
 //Listen for WebSocket connections
 websocketServer.on('connection', (socket) => {
     // Log a message when a new client connects
@@ -27,30 +26,38 @@ websocketServer.on('connection', (socket) => {
         vehicleStatus: 0,
     }
 
-    // continuously send random battery values to client
+    // continuously send dummy battery, coordinate, and connection values to client using JSON object //
     var count = 89;
     var counterIncrement = -1;
-    const testBattery = setInterval(function() {
+    setInterval(() => {
-        count = count+counterIncrement;
+        count += counterIncrement;
         if (count == 0 || count == 100 ) {
             counterIncrement = -counterIncrement;
         }
         vehicleData.battery = count;
-        socket.send(JSON.stringify(vehicleData));
-    }, 100);
-
-    // continuously send random coordinate values to client
-    setInterval(() => {
         vehicleData.currentPosition.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
         vehicleData.currentPosition.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
+        vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
         socket.send(JSON.stringify(vehicleData));
     }, 100);
 
+    // continuously send random battery values to client
+    // var count = 89;
+    // var counterIncrement = -1;
+    // const testBattery = setInterval(function() {
+    //     count = count+counterIncrement;
+    //     if (count == 0 || count == 100 ) {
+    //         counterIncrement = -counterIncrement;
+    //     }
+    //     vehicleData.battery = count;
+    //     socket.send(JSON.stringify(vehicleData));
+    // }, 100);
+
     // continuously send random connection values to client
-    setInterval(() => {
+    // setInterval(() => {
-        vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
+    //     vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
-        socket.send(JSON.stringify(vehicleData));
+    //     socket.send(JSON.stringify(vehicleData));
-     }, 1000);
+    //  }, 1000);
 
     // Listen for incoming WebSocket messages
     socket.on('message', (message) => {
@@ -61,6 +68,10 @@ websocketServer.on('connection', (socket) => {
       // Log a message when a client disconnects
       console.log('Client disconnected');
     });
+
+    socket.on('close', () => {
+        console.log('client disconnected');
+    });
 });
 
 // Start the server listening on port 3000

src/views/StaticScreen.vue

@@ -4,34 +4,50 @@ import Status from '../components/VehicleStatusComponent.vue';
 import NavBar from '../components/Navbar.vue';
 import { onMounted, ref } from 'vue';
 
+// for ERU widget
 const receivedData = ref<any>(null);
 const batteryPct = ref(0);
-const latitude = ref<number>(7.7);
-const longitude = ref<number>(8.8);
 const testCoordinate = ref({longitude: 0, latitude: 0})
 const dummyConnection = ref(0);
+// for MEA widget
+const receivedData2 = ref<any>(null);
+const batteryPct2 = ref(78);
+const testCoordinate2 = ref({longitude: 57.848923, latitude: -67.384919})
+const dummyConnection2 = ref(65);
+
 // create websocket connection once Static Screen finishes initial rendering
 onMounted(() => {
-    // let client = new WebSocket('ws://localhost:5135/');
+    let client = new WebSocket('ws://localhost:5135/');
-    // uncomment below to use other local websocket server for data for single vehicle widget in Static Screen
+    console.log("Connected to 5135 server");
-    let client = new WebSocket('ws://localhost:3000/');
-    console.log("Connected to server");
 
     client.addEventListener("message", (event) => {
         const data = JSON.parse(event.data);
         receivedData.value = data; 
 
-        console.log("Received data:", receivedData);
+        console.log("Received data from mockWebsock:", receivedData);
-        batteryPct.value = receivedData.value.battery;
+        batteryPct.value = receivedData.value.batteryLife;
         testCoordinate.value.latitude = receivedData.value.currentPosition.latitude;
         testCoordinate.value.longitude = receivedData.value.currentPosition.longitude;
-        dummyConnection.value = receivedData.value.dummy_connection;
+        dummyConnection.value = receivedData.value.dummyConnection;
+    });
+
+    // -- uncomment below to use test-websocket-server.cjs for data for single vehicle widget in Static Screen -- //
+    let client2 = new WebSocket('ws://localhost:3000/');
+    console.log("Connected to port 3000 server")
+
+    client2.addEventListener("message", (event) => {
+        const data = JSON.parse(event.data);
+        receivedData2.value = data;
+
+        console.log("Received data from test-websocket-server:", receivedData2);
+        batteryPct2.value = receivedData2.value.battery;
+        testCoordinate2.value.latitude = receivedData2.value.currentPosition.latitude;
+        testCoordinate2.value.longitude = receivedData2.value.currentPosition.longitude;
+        dummyConnection2.value = receivedData2.value.dummy_connection;
     });
 });
 
 // --- testing with dummy reactive data --- //
-//let battery1 = ref(100); 
-let battery2 = ref(50);
 let testCoordinateObject1 = {
         longitude: -177.9325790,
         latitude: 33.9325790
@@ -40,44 +56,22 @@ let testCoordinateObject2 = {
     longitude: 40.748440,
     latitude: -73.984559
 }
-
-// --- functions to change reactive data randomly to test if individual vue components re-render ---- //
-// var count = 89;
-// var counterIncrement = -1;
-// const testBattery = setInterval(function() {
-//     count = count+counterIncrement;
-//     if (count == 0 || count == 100 ) {
-//         counterIncrement = -counterIncrement;
-//     }
-//     battery1.value = count;
-//     battery2.value = count;
-//     connection.value = count;
-//  }, 100);
-// const testCoords = setInterval(function() {
-//     testCoordinate.value.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
-//     testCoordinate.value.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
-// }, 100);
 </script>
 
 <template>
   <div class="screen_div">
     <!-- Map component will be placed below -->
     <div class="map_div"></div>
-    <!-- <p v-if="receivedData && receivedData.currentPosition">
+
-        Latitude: {{ receivedData.currentPosition.latitude }}, Longitude: {{ receivedData.currentPosition.longitude }}
-    </p> -->
     <div class="four-status-rightside">
         <!-- For final product, pass in a Vehicle Object instead that contains all of the information for the VehicleStatusComponent to display-->
         <Status :batteryPct=batteryPct :latency=dummyConnection :coordinates=testCoordinate :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
-        <Status :batteryPct=67 :latency=30 :coordinates="testCoordinateObject1" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
+        <Status :batteryPct=batteryPct2 :latency=dummyConnection2 :coordinates=testCoordinate2 :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
         <Status :batteryPct=0 :latency=100 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
         <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject1" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
     </div>
   </div>
 
-    <!-- <div class="camera-container">
-       this is static screen
-    </div> -->
 </template>
   
 <style scoped>