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

format

Browse Source
This commit is contained in:
rafaeldpsilva
2025-12-20 00:17:21 +00:00
parent 4b4338fb91
commit c3364cc422
31 changed files with 818 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/cards/AirQualityCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="bg-white rounded-2xl shadow-sm p-4">
<h6 class="text-sm font-bold text-gray-500 mb-4">Air Quality Status</h6>
<!-- Overall Status -->
<div class="mb-4 p-3 rounded-lg" :class="getOverallStatusBg()">
<div class="flex items-center justify-between">
@@ -13,11 +13,28 @@
Building Average: {{ overallCO2.toFixed(0) }} ppm
</div>
</div>
<div class="w-12 h-12 rounded-full flex items-center justify-center" :class="getOverallStatusIconBg()">
<svg class="w-6 h-6" :class="getOverallStatusText()" fill="currentColor" viewBox="0 0 24 24">
<path d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M10,16.5L6,12.5L7.5,11L10,13.5L16.5,7L18,8.5L10,16.5Z" v-if="overallStatus === 'good'"/>
<path d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z" v-else-if="overallStatus === 'moderate'"/>
<path d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z" v-else/>
<div
class="w-12 h-12 rounded-full flex items-center justify-center"
:class="getOverallStatusIconBg()"
>
<svg
class="w-6 h-6"
:class="getOverallStatusText()"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M10,16.5L6,12.5L7.5,11L10,13.5L16.5,7L18,8.5L10,16.5Z"
v-if="overallStatus === 'good'"
/>
<path
d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z"
v-else-if="overallStatus === 'moderate'"
/>
<path
d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z"
v-else
/>
</svg>
</div>
</div>
@@ -28,8 +45,12 @@
<div v-if="roomsList.length === 0" class="text-center text-gray-500 py-4">
No air quality data available
</div>
<div v-for="room in roomsList" :key="room.room" class="flex items-center justify-between p-2 rounded">
<div
v-for="room in roomsList"
:key="room.room"
class="flex items-center justify-between p-2 rounded"
>
<div class="flex items-center gap-2">
<div
class="w-3 h-3 rounded-full"
@@ -76,9 +97,9 @@ const roomStore = useRoomStore()
const roomsList = computed(() => {
return Array.from(roomStore.roomsData.values())
.filter(room => room.co2) // Only include rooms with CO2 data
.sort((a, b) =>
(b.co2?.current || 0) - (a.co2?.current || 0) // Sort by CO2 level descending
.filter((room) => room.co2) // Only include rooms with CO2 data
.sort(
(a, b) => (b.co2?.current || 0) - (a.co2?.current || 0), // Sort by CO2 level descending
)
})
@@ -93,23 +114,27 @@ const overallStatus = computed(() => {
})
const roomsWithGoodAir = computed(() => {
return roomsList.value.filter(room => room.co2?.status === 'good').length
return roomsList.value.filter((room) => room.co2?.status === 'good').length
})
const roomsNeedingAttention = computed(() => {
return roomsList.value.filter(room => room.co2?.status && ['poor', 'critical'].includes(room.co2.status)).length
return roomsList.value.filter(
(room) => room.co2?.status && ['poor', 'critical'].includes(room.co2.status),
).length
})
const recommendations = computed(() => {
const recs = []
const criticalRooms = roomsList.value.filter(room => room.co2?.status === 'critical')
const poorRooms = roomsList.value.filter(room => room.co2?.status === 'poor')
const criticalRooms = roomsList.value.filter((room) => room.co2?.status === 'critical')
const poorRooms = roomsList.value.filter((room) => room.co2?.status === 'poor')
if (criticalRooms.length > 0) {
recs.push(`Immediate ventilation needed in ${criticalRooms[0].room}`)
}
if (poorRooms.length > 0) {
recs.push(`Increase air circulation in ${poorRooms.length} room${poorRooms.length > 1 ? 's' : ''}`)
recs.push(
`Increase air circulation in ${poorRooms.length} room${poorRooms.length > 1 ? 's' : ''}`,
)
}
if (overallCO2.value > 800) {
recs.push('Consider adjusting HVAC settings building-wide')
@@ -120,61 +145,91 @@ const recommendations = computed(() => {
const getOverallStatus = () => {
switch (overallStatus.value) {
case 'good': return 'Excellent Air Quality'
case 'moderate': return 'Moderate Air Quality'
case 'poor': return 'Poor Air Quality'
case 'critical': return 'Critical - Action Required'
default: return 'Unknown Status'
case 'good':
return 'Excellent Air Quality'
case 'moderate':
return 'Moderate Air Quality'
case 'poor':
return 'Poor Air Quality'
case 'critical':
return 'Critical - Action Required'
default:
return 'Unknown Status'
}
}
const getOverallStatusBg = () => {
switch (overallStatus.value) {
case 'good': return 'bg-green-50 border border-green-200'
case 'moderate': return 'bg-yellow-50 border border-yellow-200'
case 'poor': return 'bg-orange-50 border border-orange-200'
case 'critical': return 'bg-red-50 border border-red-200'
default: return 'bg-gray-50 border border-gray-200'
case 'good':
return 'bg-green-50 border border-green-200'
case 'moderate':
return 'bg-yellow-50 border border-yellow-200'
case 'poor':
return 'bg-orange-50 border border-orange-200'
case 'critical':
return 'bg-red-50 border border-red-200'
default:
return 'bg-gray-50 border border-gray-200'
}
}
const getOverallStatusText = () => {
switch (overallStatus.value) {
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'
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 getOverallStatusIconBg = () => {
switch (overallStatus.value) {
case 'good': return 'bg-green-100'
case 'moderate': return 'bg-yellow-100'
case 'poor': return 'bg-orange-100'
case 'critical': return 'bg-red-100'
default: return 'bg-gray-100'
case 'good':
return 'bg-green-100'
case 'moderate':
return 'bg-yellow-100'
case 'poor':
return 'bg-orange-100'
case 'critical':
return 'bg-red-100'
default:
return 'bg-gray-100'
}
}
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'
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 getCO2TextColor = (status: string) => {
switch (status) {
case 'good': return 'text-green-600'
case 'moderate': return 'text-yellow-600'
case 'poor': return 'text-orange-600'
case 'critical': return 'text-red-600'
default: return 'text-gray-600'
case 'good':
return 'text-green-600'
case 'moderate':
return 'text-yellow-600'
case 'poor':
return 'text-orange-600'
case 'critical':
return 'text-red-600'
default:
return 'text-gray-600'
}
}
</script>
</script>