From d0020a7ce66737be5590d97f86e1cc4e738509c6 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sat, 13 Apr 2024 05:29:07 -0700
Subject: [PATCH] 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 | 2 ++
src/test-websocket-server.cjs | 37 +++++++++++++-------
src/views/StaticScreen.vue | 64 ++++++++++++++++-------------------
3 files changed, 55 insertions(+), 48 deletions(-)
diff --git a/mockWebsock.cjs b/mockWebsock.cjs
index bed72e3..cd93e13 100644
--- a/mockWebsock.cjs
+++ b/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);
diff --git a/src/test-websocket-server.cjs b/src/test-websocket-server.cjs
index 1e4465e..6da58d6 100644
--- a/src/test-websocket-server.cjs
+++ b/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() {
- count = count+counterIncrement;
+ setInterval(() => {
+ 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(() => {
- vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
- socket.send(JSON.stringify(vehicleData));
- }, 1000);
+ // setInterval(() => {
+ // vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
+ // socket.send(JSON.stringify(vehicleData));
+ // }, 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
diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue
index d170390..e121f87 100644
--- a/src/views/StaticScreen.vue
+++ b/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/');
- // uncomment below to use other local websocket server for data for single vehicle widget in Static Screen
- let client = new WebSocket('ws://localhost:3000/');
- console.log("Connected to server");
+ let client = new WebSocket('ws://localhost:5135/');
+ console.log("Connected to 5135 server");
client.addEventListener("message", (event) => {
const data = JSON.parse(event.data);
receivedData.value = data;
- console.log("Received data:", receivedData);
- batteryPct.value = receivedData.value.battery;
+ console.log("Received data from mockWebsock:", receivedData);
+ 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>