From cb659c93bb20ff9a2fd889e762ea9ff48f10e248 Mon Sep 17 00:00:00 2001 From: rafaeldpsilva Date: Wed, 1 Oct 2025 12:57:09 +0100 Subject: [PATCH] Refactor HomeView to use energyStore for energy data Refactor HomeView to use energyStore for energy data --- src/stores/energy.ts | 66 +++++++++++++++++++++++++++++++---------- src/stores/room.ts | 23 +++++++++++--- src/stores/sensor.ts | 24 +++++++-------- src/stores/websocket.ts | 8 ++--- src/views/HomeView.vue | 10 +++---- 5 files changed, 90 insertions(+), 41 deletions(-) diff --git a/src/stores/energy.ts b/src/stores/energy.ts index f29d3a0..ba6e154 100644 --- a/src/stores/energy.ts +++ b/src/stores/energy.ts @@ -1,10 +1,12 @@ import { defineStore } from 'pinia' -import { ref, computed } from 'vue' +import { ref, computed, reactive, watch } from 'vue' import { useWebSocketStore } from './websocket' import { useSensorStore } from './sensor' import { useRoomStore } from './room' import { useAnalyticsStore } from './analytics' +const MAX_HISTORY_POINTS = 100 + /** * Energy Store - Simplified to only track energy consumption metrics * For sensor data: use useSensorStore() @@ -20,34 +22,66 @@ export const useEnergyStore = defineStore('energy', () => { const analyticsStore = useAnalyticsStore() // Energy-specific state - const currentConsumption = ref(0) // Current energy consumption in kWh - const averageConsumption = ref(0) // Average energy consumption in kWh + const currentConsumption = ref(0) // Current energy consumption in kWh + const averageConsumption = ref(0) // Average energy consumption in kWh - // Computed: Current energy value from WebSocket - const currentEnergyValue = computed(() => { - return websocketStore.latestMessage?.energy?.value || 0 + // Track aggregated energy over time + const energyHistory = reactive([]) + const energyTimestamps = reactive([]) + + // Computed: Current total energy value - sum of all sensor readings + const currentEnergyValue = computed(() => { + // Sum energy values from all sensors' latest readings + let totalEnergy: number = 0 + const readings = Array.from(sensorStore.latestReadings.values()) + + readings.forEach((reading) => { + if (reading.energy?.value) { + totalEnergy += reading.energy.value + } + }) + + return totalEnergy }) - // Computed: Average energy usage from time series - const averageEnergyUsage = computed(() => { - const data = websocketStore.timeSeriesData.datasets[0].data - if (data.length === 0) return 0 - const sum = data.reduce((acc, val) => acc + val, 0) - return sum / data.length + // Computed: Average energy usage from history + const averageEnergyUsage = computed(() => { + if (energyHistory.length === 0) return 0 + const sum: number = energyHistory.reduce((acc: number, val: number) => acc + val, 0) + return sum / energyHistory.length }) + // Watch for changes in sensor readings and update history + watch( + () => sensorStore.latestReadings.size, + () => { + const currentTotal: number = currentEnergyValue.value + const timestamp: string = new Date().toLocaleTimeString() + + // Add to history + energyHistory.push(currentTotal) + energyTimestamps.push(timestamp) + + // Keep only the latest MAX_HISTORY_POINTS + if (energyHistory.length > MAX_HISTORY_POINTS) { + energyHistory.shift() + energyTimestamps.shift() + } + } + ) + // Update current consumption (called from components or watchers) - function updateCurrentConsumption(value: number) { + function updateCurrentConsumption(value: number): void { currentConsumption.value = value } // Update average consumption (called from components or watchers) - function updateAverageConsumption(value: number) { + function updateAverageConsumption(value: number): void { averageConsumption.value = value } // Initialize data from APIs (convenience function for AnalyticsView) - async function initializeFromApi() { + async function initializeFromApi(): Promise { await Promise.allSettled([ roomStore.loadRoomsFromAPI(), sensorStore.fetchApiSensors(), @@ -62,6 +96,8 @@ export const useEnergyStore = defineStore('energy', () => { averageConsumption, currentEnergyValue, averageEnergyUsage, + energyHistory, + energyTimestamps, // Energy-specific actions updateCurrentConsumption, diff --git a/src/stores/room.ts b/src/stores/room.ts index efe7da0..94fd463 100644 --- a/src/stores/room.ts +++ b/src/stores/room.ts @@ -30,11 +30,11 @@ export const useRoomStore = defineStore('room', () => { const apiRooms = ref([]) const roomsLoading = ref(false) const roomsLoaded = ref(false) - const apiLoading = ref(false) + const apiLoading = ref(false) const apiError = ref(null) // Actions - function updateRoomData(data: SensorReading) { + function updateRoomData(data: SensorReading): void { const sensorStore = useSensorStore() // Validate data structure and provide fallbacks @@ -169,7 +169,14 @@ export const useRoomStore = defineStore('room', () => { return true } - function getRoomStats(roomName: string) { + function getRoomStats(roomName: string): { + sensorCount: number + sensorTypes: string[] + hasMetrics: boolean + energyConsumption: number + co2Level: number + lastUpdated: number | null + } { const sensorStore = useSensorStore() const sensorsInRoom = sensorStore.getSensorsByRoom(roomName) const roomMetrics = roomsData.get(roomName) @@ -184,7 +191,15 @@ export const useRoomStore = defineStore('room', () => { } } - function getAllRoomsWithStats() { + function getAllRoomsWithStats(): Array<{ + name: string + sensorCount: number + sensorTypes: string[] + hasMetrics: boolean + energyConsumption: number + co2Level: number + lastUpdated: number | null + }> { return availableRooms.value.map((room) => ({ name: room, ...getRoomStats(room), diff --git a/src/stores/sensor.ts b/src/stores/sensor.ts index 4ffcd96..b606b0a 100644 --- a/src/stores/sensor.ts +++ b/src/stores/sensor.ts @@ -14,8 +14,8 @@ export const useSensorStore = defineStore('sensor', () => { const latestReadings = reactive>(new Map()) const sensorsData = reactive>(new Map()) // Legacy support const recentlyUpdatedSensors = reactive>(new Set()) // Track recently updated sensors - const totalReadings = ref(0) // Total number of readings across all sensors - const apiLoading = ref(false) + const totalReadings = ref(0) // Total number of readings across all sensors + const apiLoading = ref(false) const apiError = ref(null) // Computed properties @@ -23,12 +23,12 @@ export const useSensorStore = defineStore('sensor', () => { const activeSensors = computed(() => { return Array.from(sensorDevices.values()).filter( - sensor => sensor.status === 'active' || sensor.status === 'online' + (sensor) => sensor.status === 'active' || sensor.status === 'online', ).length }) // Actions - function updateSensorRoom(sensorId: string, newRoom: string) { + function updateSensorRoom(sensorId: string, newRoom: string): void { const sensor = sensorDevices.get(sensorId) if (sensor) { sensor.room = newRoom @@ -36,14 +36,14 @@ export const useSensorStore = defineStore('sensor', () => { } } - async function executeSensorAction(sensorId: string, actionId: string) { + async function executeSensorAction(sensorId: string, actionId: string): Promise { const sensor = sensorDevices.get(sensorId) if (!sensor) return false const action = sensor.capabilities.actions.find((a) => a.id === actionId) if (!action) return false - return new Promise((resolve) => { + return new Promise((resolve) => { setTimeout(() => { console.log(`Action ${action.name} executed successfully on ${sensor.name}`) resolve(true) @@ -59,11 +59,11 @@ export const useSensorStore = defineStore('sensor', () => { return Array.from(sensorDevices.values()).filter((sensor) => sensor.type === type) } - function updateEnergySensors(data: Sensor) { + function updateEnergySensors(data: SensorReading): void { console.log(data) } - function updateLatestReading(reading: SensorReading) { + function updateLatestReading(reading: SensorReading): void { latestReadings.set(reading.sensor_id, reading) // Increment total readings count @@ -191,12 +191,12 @@ export const useSensorStore = defineStore('sensor', () => { console.log(result) // Check if result has a sensors property (common API pattern) if (result.sensors && Array.isArray(result.sensors)) { - let totalReadingsCount = 0 + let totalReadingsCount: number = 0 result.sensors.forEach((sensor) => { - const sensorKey = sensor._id || sensor.sensor_id - const sensorType = sensor.sensor_type || sensor.type - const sensorName = sensor.name || '' + const sensorKey: string = sensor._id || sensor.sensor_id + const sensorType: string = sensor.sensor_type || sensor.type + const sensorName: string = sensor.name || '' // Accumulate total readings if (sensor.total_readings) { diff --git a/src/stores/websocket.ts b/src/stores/websocket.ts index 84b3904..04fd072 100644 --- a/src/stores/websocket.ts +++ b/src/stores/websocket.ts @@ -24,7 +24,7 @@ interface SensorReading { } export const useWebSocketStore = defineStore('websocket', () => { - const isConnected = ref(false) + const isConnected = ref(false) const latestMessage = ref(null) const timeSeriesData = reactive<{ labels: string[] @@ -37,7 +37,7 @@ export const useWebSocketStore = defineStore('websocket', () => { let socket: WebSocket | null = null const newDataBuffer: SensorReading[] = [] - function connect(url: string) { + function connect(url: string): void { if (isConnected.value && socket) { console.log('Already connected.') return @@ -109,13 +109,13 @@ export const useWebSocketStore = defineStore('websocket', () => { }, 500) } - function disconnect() { + function disconnect(): void { if (socket) { socket.close() } } - function processIncomingData(data: SensorReading) { + function processIncomingData(data: SensorReading): void { // Skip non-data messages if ('type' in data && (data.type === 'connection_established' || data.type === 'proxy_info')) { return diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 078854e..4f7bb13 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -26,7 +26,7 @@ title="Real-time Energy" :content="currentEnergyValue" details="kWh" - :trend-data="websocketStore.timeSeriesData.datasets[0].data.slice(-8)" + :trend-data="energyStore.energyHistory.slice(-8)" trend-direction="neutral" /> { - return websocketStore.latestMessage?.energy?.value.toFixed(2) || '0.00' + return energyStore.currentEnergyValue.toFixed(2) }) const averageEnergyUsage = computed(() => { - const data = websocketStore.timeSeriesData.datasets[0].data - if (data.length === 0) return '0.00' - const sum = data.reduce((acc, val) => acc + val, 0) - return (sum / data.length).toFixed(2) + return energyStore.averageEnergyUsage.toFixed(2) }) onMounted(() => {