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

Refactor dashboard layout and update sensor table columns

Browse Source 
- Make metric cards and charts more compact and consistent - Change
SensorConsumptionTable columns: show Room and Value, remove
Current/Total/Average - Update headings and layout for AnalyticsView and
HomeView - Improve responsiveness and spacing for cards and sections
This commit is contained in:
rafaeldpsilva
2025-10-03 15:06:34 +01:00
parent 3ecd0ab2c4
commit 9a25170b27
5 changed files with 307 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/HomeView.vue
View File

@@ -1,29 +1,13 @@
<template>
<div class="space-y-6">
<!-- Filter Controls Row -->
<!--div class="flex flex-col sm:flex-row gap-4 mb-6">
<select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
<option>Timeframe: All-time</option>
</select>
<select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
<option>People: All</option>
</select>
<select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
<option>Topic: All</option>
</select>
</div-->
<!-- Top Metric Cards Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-96">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-3">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-20">
<div class="space-y-6">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<MetricCard title="Current Energy" :content="currentEnergyValue" details="kWh" />
<MetricCard title="Average Usage" :content="averageEnergyUsage" details="kWh" />
<MetricCard
title="Connection Status"
:content="websocketStore.isConnected ? 'Connected' : 'Disconnected'"
/>
<MetricCard title="Average Usage" :content="averageEnergyUsage" details="kWh" />
<MetricCard title="Average CO2" :content="averageCO2" details="ppm" />
<MetricCard title="Max CO2" :content="maxCO2" details="ppm" />
<GraphMetricCard
title="Real-time Energy"
:content="currentEnergyValue"
@@ -31,19 +15,16 @@
:trend-data="energyStore.energyHistory.slice(-8)"
trend-direction="neutral"
/>
<GraphMetricCard title="Average CO2" :content="averageCO2" details="ppm" />
<GraphMetricCard title="Max CO2" :content="maxCO2" details="ppm" />
</div>
<div>
<RealtimeEnergyChartCard title="Month" />
</div>
<SensorConsumptionTable />
</div>
<!-- Charts and Knowledge Cards Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<SensorConsumptionTable />
<div class="grid grid-cols-1 gap-4">
<RoomMetricsCard />
<AirQualityCard />
</div>
<div class="space-y-6">
<RealtimeEnergyChartCard title="Month" />
<RoomMetricsCard />
<AirQualityCard />
</div>
</div>
</template>
@@ -66,7 +47,6 @@ const sensorStore = useSensorStore()
const websocketStore = useWebSocketStore()
const settingsStore = useSettingsStore()
// Use energy store for aggregated values across all sensors
const currentEnergyValue = computed(() => {
return energyStore.currentEnergyValue.toFixed(2)
})