siwat/m2-inno-bedpressure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Refactor alarm filtering logic to improve active alarms display and ensure warnings are correctly filtered

Browse source
This commit is contained in:
Siwat Sirichai 2025-06-21 19:23:23 +07:00
parent 83286c318e
commit f82b5b6abb
1 changed files with 13 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

19
components/bed-pressure/AlertsPanel.tsx
View file

@ -47,8 +47,16 @@ export function AlertsPanel() {
if (silenced) return "bg-gray-100 border-gray-300" if (silenced) return "bg-gray-100 border-gray-300"
return type === 'alarm' ? "bg-red-50 border-red-200" : "bg-yellow-50 border-yellow-200" return type === 'alarm' ? "bg-red-50 border-red-200" : "bg-yellow-50 border-yellow-200"
} }
// Filter out warnings when there's an alarm with the same sensor name
const filteredAlarms = activeAlarms.filter(alarm => {
if (alarm.type === 'alarm') return true
// For warnings, only keep if there's no alarm with the same sensor name
return !activeAlarms.some(other =>
other.type === 'alarm' && other.sensorLabel === alarm.sensorLabel
)
})
const hasActiveAlarms = activeAlarms.some(alarm => !alarm.silenced) const hasActiveAlarms = filteredAlarms.some(alarm => !alarm.silenced)
return ( return (
<Card> <Card>
@ -56,7 +64,7 @@ export function AlertsPanel() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<AlertTriangle className={`w-5 h-5 ${hasActiveAlarms ? "text-red-600 animate-pulse" : "text-gray-400"}`} /> <AlertTriangle className={`w-5 h-5 ${hasActiveAlarms ? "text-red-600 animate-pulse" : "text-gray-400"}`} />
Active Alarms ({activeAlarms.length}) Active Alarms ({filteredAlarms.length})
</CardTitle> </CardTitle>
{activeAlarms.length > 0 && ( {activeAlarms.length > 0 && (
<Button <Button
@ -70,17 +78,16 @@ export function AlertsPanel() {
</Button> </Button>
)} )}
</div> </div>
</CardHeader> </CardHeader> <CardContent>
<CardContent>
<div className="space-y-3 max-h-80 overflow-y-auto"> <div className="space-y-3 max-h-80 overflow-y-auto">
{activeAlarms.length === 0 ? ( {filteredAlarms.length === 0 ? (
<div className="text-center py-8"> <div className="text-center py-8">
<CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-2" /> <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-2" />
<p className="text-sm text-gray-500">No active alarms</p> <p className="text-sm text-gray-500">No active alarms</p>
<p className="text-xs text-gray-400">System monitoring normally</p> <p className="text-xs text-gray-400">System monitoring normally</p>
</div> </div>
) : ( ) : (
activeAlarms.map((alarm) => ( filteredAlarms.map((alarm) => (
<div <div
key={alarm.id} key={alarm.id}
className={`p-3 rounded-lg border ${getAlarmBgColor(alarm.type, alarm.silenced)}`} className={`p-3 rounded-lg border ${getAlarmBgColor(alarm.type, alarm.silenced)}`}