rdpds/sa4cps-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add computed sensor stats and refactor AnalyticsView to use stores

Browse Source
This commit is contained in:
rafaeldpsilva
2025-10-01 12:41:12 +01:00
parent b9348140b8
commit 06f7537422
2 changed files with 90 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/stores/sensor.ts
View File

@@ -1,5 +1,5 @@
import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'
import { ref, reactive, computed } from 'vue'
import {
sensorsApi,
SensorType,
@@ -14,9 +14,19 @@ export const useSensorStore = defineStore('sensor', () => {
const latestReadings = reactive<Map<string, SensorReading>>(new Map())
const sensorsData = reactive<Map<string, any>>(new Map()) // Legacy support
const recentlyUpdatedSensors = reactive<Set<string>>(new Set()) // Track recently updated sensors
const totalReadings = ref(0) // Total number of readings across all sensors
const apiLoading = ref(false)
const apiError = ref<string | null>(null)
// Computed properties
const totalSensors = computed(() => sensorDevices.size)
const activeSensors = computed(() => {
return Array.from(sensorDevices.values()).filter(
sensor => sensor.status === 'active' || sensor.status === 'online'
).length
})
// Actions
function updateSensorRoom(sensorId: string, newRoom: string) {
const sensor = sensorDevices.get(sensorId)
@@ -56,6 +66,9 @@ export const useSensorStore = defineStore('sensor', () => {
function updateLatestReading(reading: SensorReading) {
latestReadings.set(reading.sensor_id, reading)
// Increment total readings count
totalReadings.value++
// Mark sensor as recently updated
recentlyUpdatedSensors.add(reading.sensor_id)
// Remove from recently updated after 2 seconds
@@ -178,11 +191,18 @@ 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
result.sensors.forEach((sensor) => {
const sensorKey = sensor._id || sensor.sensor_id
const sensorType = sensor.sensor_type || sensor.type
const sensorName = sensor.name || ''
// Accumulate total readings
if (sensor.total_readings) {
totalReadingsCount += sensor.total_readings
}
const normalizedSensor = {
...sensor,
id: sensorKey,
@@ -207,6 +227,9 @@ export const useSensorStore = defineStore('sensor', () => {
sensorDevices.set(sensorKey, normalizedSensor)
})
// Update total readings
totalReadings.value = totalReadingsCount
} else {
console.warn('Unexpected result format:', typeof result, result)
}
@@ -247,9 +270,14 @@ export const useSensorStore = defineStore('sensor', () => {
latestReadings,
sensorsData,
recentlyUpdatedSensors,
totalReadings,
apiLoading,
apiError,
// Computed
totalSensors,
activeSensors,
// Actions
updateEnergySensors,
updateSensorRoom,

107
src/views/AnalyticsView.vue
View File

@@ -33,7 +33,7 @@
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Total Sensors</p>
<p class="text-lg font-semibold text-gray-900">{{ healthStatus?.total_sensors || 0 }}</p>
<p class="text-lg font-semibold text-gray-900">{{ sensorStore.totalSensors }}</p>
</div>
</div>
</div>
@@ -47,7 +47,7 @@
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Active Sensors</p>
<p class="text-lg font-semibold text-gray-900">{{ healthStatus?.active_sensors || 0 }}</p>
<p class="text-lg font-semibold text-gray-900">{{ sensorStore.activeSensors }}</p>
</div>
</div>
</div>
@@ -61,14 +61,14 @@
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Total Readings</p>
<p class="text-lg font-semibold text-gray-900">{{ formatNumber(healthStatus?.total_readings || 0) }}</p>
<p class="text-lg font-semibold text-gray-900">{{ formatNumber(sensorStore.totalReadings) }}</p>
</div>
</div>
</div>
</div>
<!-- Loading States -->
<div v-if="energyStore.apiLoading" class="bg-white rounded-lg shadow p-6 mb-8">
<div v-if="isLoading" class="bg-white rounded-lg shadow p-6 mb-8">
<div class="flex items-center justify-center">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<p class="ml-3 text-gray-600">Loading API data...</p>
@@ -76,7 +76,7 @@
</div>
<!-- Error States -->
<div v-if="energyStore.apiError" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8">
<div v-if="apiError" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
@@ -85,38 +85,33 @@
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">API Error</h3>
<p class="mt-1 text-sm text-red-700">{{ energyStore.apiError }}</p>
<p class="mt-1 text-sm text-red-700">{{ apiError }}</p>
</div>
</div>
</div>
<!-- Analytics Summary -->
<div v-if="analyticsData.summary" class="bg-white rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 mb-4">Analytics Summary (Last 24 Hours)</h2>
<!-- Energy Metrics Summary -->
<div class="bg-white rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 mb-4">Energy Metrics</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<p class="text-sm font-medium text-gray-600 mb-2">Total Energy Consumption</p>
<p class="text-sm font-medium text-gray-600 mb-2">Current Energy Consumption</p>
<p class="text-2xl font-bold text-blue-600">
{{ analyticsData.summary.total_energy_consumption.value.toFixed(2) }}
{{ analyticsData.summary.total_energy_consumption.unit }}
{{ energyStore.currentEnergyValue.toFixed(2) }} kWh
</p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 mb-2">Average Power</p>
<p class="text-sm font-medium text-gray-600 mb-2">Average Energy Usage</p>
<p class="text-2xl font-bold text-green-600">
{{ analyticsData.summary.average_power.value.toFixed(2) }}
{{ analyticsData.summary.average_power.unit }}
{{ energyStore.averageEnergyUsage.toFixed(2) }} kWh
</p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 mb-2">Peak Power</p>
<p class="text-2xl font-bold text-red-600">
{{ analyticsData.summary.peak_power.value.toFixed(2) }}
{{ analyticsData.summary.peak_power.unit }}
</p>
<p class="text-xs text-gray-500 mt-1">
at {{ new Date(analyticsData.summary.peak_power.timestamp * 1000).toLocaleString() }}
<p class="text-sm font-medium text-gray-600 mb-2">Total Consumption</p>
<p class="text-2xl font-bold text-purple-600">
{{ energyStore.currentConsumption.toFixed(2) }} kWh
</p>
<p class="text-xs text-gray-500 mt-1">Cumulative</p>
</div>
</div>
</div>
@@ -164,14 +159,14 @@
No rooms found from API
</div>
<div v-else class="space-y-3">
<div v-for="room in apiRooms" :key="room.room"
<div v-for="room in apiRooms" :key="room.name || room.room"
class="p-3 bg-gray-50 rounded-lg">
<div class="flex items-center justify-between mb-2">
<p class="font-medium text-gray-900">{{ room.room }}</p>
<p class="font-medium text-gray-900">{{ room.name || room.room }}</p>
<span class="text-sm text-gray-500">{{ room.sensor_count }} sensors</span>
</div>
<div class="text-xs text-gray-600 space-y-1">
<p>Types: {{ room.sensor_types.join(', ') }}</p>
<p v-if="room.sensor_types">Types: {{ room.sensor_types.join(', ') }}</p>
<div v-if="room.latest_metrics">
<span v-if="room.latest_metrics.energy" class="mr-4">
Energy: {{ room.latest_metrics.energy.current }} {{ room.latest_metrics.energy.unit }}
@@ -180,6 +175,7 @@
CO2: {{ room.latest_metrics.co2.current }} {{ room.latest_metrics.co2.unit }}
</span>
</div>
<p v-else class="text-gray-400 italic">No metrics available</p>
</div>
</div>
</div>
@@ -191,31 +187,31 @@
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">API Actions</h2>
<div class="flex flex-wrap gap-3">
<button @click="refreshAllData"
<button @click="refreshAllData"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
:disabled="energyStore.apiLoading">
<svg v-if="!energyStore.apiLoading" class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
:disabled="isLoading">
<svg v-if="!isLoading" class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
<div v-else class="animate-spin -ml-1 mr-2 h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
Refresh All Data
</button>
<button @click="fetchSensorsOnly"
<button @click="fetchSensorsOnly"
class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
:disabled="energyStore.apiLoading">
:disabled="isLoading">
Fetch Sensors
</button>
<button @click="fetchRoomsOnly"
<button @click="fetchRoomsOnly"
class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
:disabled="energyStore.apiLoading">
:disabled="isLoading">
Fetch Rooms
</button>
<button @click="fetchAnalyticsOnly"
<button @click="fetchAnalyticsOnly"
class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
:disabled="energyStore.apiLoading">
:disabled="isLoading">
Fetch Analytics
</button>
</div>
@@ -226,15 +222,29 @@
<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useSensorStore } from '@/stores/sensor'
import { useRoomStore } from '@/stores/room'
import { useAnalyticsStore } from '@/stores/analytics'
import { useEnergyStore } from '@/stores/energy'
const sensorStore = useSensorStore()
const roomStore = useRoomStore()
const analyticsStore = useAnalyticsStore()
const energyStore = useEnergyStore()
// Computed properties
const apiSensors = computed(() => energyStore.apiSensors)
const apiRooms = computed(() => energyStore.apiRooms)
const analyticsData = computed(() => energyStore.analyticsData)
const healthStatus = computed(() => energyStore.healthStatus)
const apiSensors = computed(() => Array.from(sensorStore.sensorDevices.values()))
const apiRooms = computed(() => roomStore.apiRooms)
const analyticsData = computed(() => analyticsStore.analyticsData)
const healthStatus = computed(() => analyticsStore.healthStatus)
// Combined loading and error states
const isLoading = computed(
() => sensorStore.apiLoading || roomStore.apiLoading || analyticsStore.apiLoading
)
const apiError = computed(
() => sensorStore.apiError || roomStore.apiError || analyticsStore.apiError
)
// Helper functions
const formatNumber = (num: number): string => {
@@ -245,23 +255,28 @@ const formatNumber = (num: number): string => {
// Action functions
const refreshAllData = async () => {
await energyStore.initializeFromApi()
await Promise.allSettled([
roomStore.loadRoomsFromAPI(),
sensorStore.fetchApiSensors(),
roomStore.fetchApiRooms(),
analyticsStore.initializeAnalyticsFromApi(),
])
}
const fetchSensorsOnly = async () => {
await energyStore.fetchApiSensors()
await sensorStore.fetchApiSensors()
}
const fetchRoomsOnly = async () => {
await energyStore.fetchApiRooms()
await roomStore.fetchApiRooms()
}
const fetchAnalyticsOnly = async () => {
await energyStore.fetchAnalyticsSummary()
await analyticsStore.fetchAnalyticsSummary()
}
// Initialize data on mount
onMounted(async () => {
await energyStore.initializeFromApi()
await refreshAllData()
})
</script>