room-based monitoring

src/components/cards/RoomMetricsCard.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="bg-white rounded-2xl shadow-sm p-4">
+    <h6 class="text-sm font-bold text-gray-500 mb-4">Room Overview</h6>
+    
+    <div class="space-y-4">
+      <div v-if="roomsList.length === 0" class="text-center text-gray-500 py-8">
+        No room data available. Connect sensors to see room metrics.
+      </div>
+      
+      <div v-for="room in roomsList" :key="room.room" class="border border-gray-100 rounded-lg p-3">
+        <!-- Room Header -->
+        <div class="flex items-center justify-between mb-3">
+          <h3 class="font-medium text-gray-900">{{ room.room }}</h3>
+          <div class="flex items-center gap-2">
+            <!-- CO2 Status Indicator -->
+            <div 
+              class="w-3 h-3 rounded-full"
+              :class="getCO2StatusColor(room.co2.status)"
+            ></div>
+            <!-- Occupancy Indicator -->
+            <div class="flex items-center gap-1 text-xs text-gray-500">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+              </svg>
+              <span class="capitalize">{{ room.occupancyEstimate }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metrics Grid -->
+        <div class="grid grid-cols-2 gap-3 text-sm">
+          <!-- Energy -->
+          <div class="bg-blue-50 rounded p-2">
+            <div class="text-blue-600 font-medium">Energy</div>
+            <div class="text-blue-900">{{ room.energy.current.toFixed(2) }} {{ room.energy.unit }}</div>
+            <div class="text-blue-600 text-xs">Total: {{ room.energy.total.toFixed(2) }}</div>
+          </div>
+
+          <!-- CO2 -->
+          <div class="rounded p-2" :class="getCO2BackgroundColor(room.co2.status)">
+            <div class="font-medium" :class="getCO2TextColor(room.co2.status)">CO2</div>
+            <div :class="getCO2TextColor(room.co2.status)">{{ Math.round(room.co2.current) }} {{ room.co2.unit }}</div>
+            <div class="text-xs" :class="getCO2TextColor(room.co2.status)">{{ room.co2.status.toUpperCase() }}</div>
+          </div>
+        </div>
+
+        <!-- Sensors Info -->
+        <div class="mt-2 text-xs text-gray-500 flex justify-between">
+          <span>{{ room.sensors.length }} sensor{{ room.sensors.length !== 1 ? 's' : '' }}</span>
+          <span>{{ formatTime(room.lastUpdated) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Summary Stats -->
+    <div v-if="roomsList.length > 0" class="mt-4 pt-4 border-t border-gray-100 grid grid-cols-3 gap-4 text-center text-xs">
+      <div>
+        <div class="font-medium text-gray-900">{{ roomsList.length }}</div>
+        <div class="text-gray-500">Rooms</div>
+      </div>
+      <div>
+        <div class="font-medium text-gray-900">{{ totalEnergy.toFixed(1) }} kWh</div>
+        <div class="text-gray-500">Total Energy</div>
+      </div>
+      <div>
+        <div class="font-medium text-gray-900">{{ averageCO2.toFixed(0) }} ppm</div>
+        <div class="text-gray-500">Avg CO2</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEnergyStore } from '@/stores/energy'
+
+const energyStore = useEnergyStore()
+
+const roomsList = computed(() => {
+  return Array.from(energyStore.roomsData.values()).sort((a, b) => 
+    a.room.localeCompare(b.room)
+  )
+})
+
+const totalEnergy = computed(() => {
+  return roomsList.value.reduce((sum, room) => sum + room.energy.current, 0)
+})
+
+const averageCO2 = computed(() => {
+  if (roomsList.value.length === 0) return 0
+  return roomsList.value.reduce((sum, room) => sum + room.co2.current, 0) / roomsList.value.length
+})
+
+const getCO2StatusColor = (status: string) => {
+  switch (status) {
+    case 'good': return 'bg-green-500'
+    case 'moderate': return 'bg-yellow-500'
+    case 'poor': return 'bg-orange-500'
+    case 'critical': return 'bg-red-500'
+    default: return 'bg-gray-500'
+  }
+}
+
+const getCO2BackgroundColor = (status: string) => {
+  switch (status) {
+    case 'good': return 'bg-green-50'
+    case 'moderate': return 'bg-yellow-50'
+    case 'poor': return 'bg-orange-50'
+    case 'critical': return 'bg-red-50'
+    default: return 'bg-gray-50'
+  }
+}
+
+const getCO2TextColor = (status: string) => {
+  switch (status) {
+    case 'good': return 'text-green-700'
+    case 'moderate': return 'text-yellow-700'
+    case 'poor': return 'text-orange-700'
+    case 'critical': return 'text-red-700'
+    default: return 'text-gray-700'
+  }
+}
+
+const formatTime = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+  
+  if (diffSecs < 60) {
+    return `${diffSecs}s ago`
+  } else if (diffSecs < 3600) {
+    return `${Math.floor(diffSecs / 60)}m ago`
+  } else {
+    return date.toLocaleTimeString()
+  }
+}
+</script>