add now features
This commit is contained in:
Matthias Hochmeister
251
frontend/src/components/equipment/EquipmentAlerts.tsx
Normal file
251
frontend/src/components/equipment/EquipmentAlerts.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
AlertTitle,
|
||||
Box,
|
||||
CircularProgress,
|
||||
Link,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import { equipmentApi } from '../../services/equipment';
|
||||
import {
|
||||
AusruestungStatusLabel,
|
||||
AusruestungStatus,
|
||||
} from '../../types/equipment.types';
|
||||
import type {
|
||||
EquipmentStats,
|
||||
AusruestungListItem,
|
||||
} from '../../types/equipment.types';
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
interface EquipmentAlertsProps {
|
||||
daysAhead?: number;
|
||||
hideWhenEmpty?: boolean;
|
||||
}
|
||||
|
||||
interface AlertGroup {
|
||||
key: string;
|
||||
severity: 'error' | 'warning';
|
||||
title: string;
|
||||
content: React.ReactNode;
|
||||
}
|
||||
|
||||
const EquipmentAlerts: React.FC<EquipmentAlertsProps> = ({
|
||||
daysAhead = 30,
|
||||
hideWhenEmpty = true,
|
||||
}) => {
|
||||
const [stats, setStats] = useState<EquipmentStats | null>(null);
|
||||
const [alerts, setAlerts] = useState<AusruestungListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const [statsData, alertsData] = await Promise.all([
|
||||
equipmentApi.getStats(),
|
||||
equipmentApi.getAlerts(daysAhead),
|
||||
]);
|
||||
if (mounted) {
|
||||
setStats(statsData);
|
||||
setAlerts(alertsData);
|
||||
}
|
||||
} catch {
|
||||
if (mounted) setError('Ausrüstungshinweise konnten nicht geladen werden.');
|
||||
} finally {
|
||||
if (mounted) setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
return () => { mounted = false; };
|
||||
}, [daysAhead]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
|
||||
<CircularProgress size={16} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Ausrüstungsstatus wird geprüft...
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <Alert severity="error">{error}</Alert>;
|
||||
}
|
||||
|
||||
if (!stats) return null;
|
||||
|
||||
// Separate alerts into overdue vs. upcoming inspections
|
||||
const overdueItems = alerts.filter(
|
||||
(a) => a.pruefung_tage_bis_faelligkeit !== null && a.pruefung_tage_bis_faelligkeit < 0
|
||||
);
|
||||
const upcomingItems = alerts.filter(
|
||||
(a) => a.pruefung_tage_bis_faelligkeit !== null && a.pruefung_tage_bis_faelligkeit >= 0
|
||||
);
|
||||
|
||||
// Build alert groups based on stats
|
||||
const groups: AlertGroup[] = [];
|
||||
|
||||
// 1. Overdue inspections
|
||||
if (stats.inspectionsOverdue > 0 && overdueItems.length > 0) {
|
||||
groups.push({
|
||||
key: 'overdue',
|
||||
severity: 'error',
|
||||
title: `Überfällige Prüfungen (${stats.inspectionsOverdue})`,
|
||||
content: (
|
||||
<Box component="ul" sx={{ m: 0, pl: 2 }}>
|
||||
{overdueItems.map((item) => {
|
||||
const tage = Math.abs(item.pruefung_tage_bis_faelligkeit!);
|
||||
const tageText = `seit ${tage} Tag${tage === 1 ? '' : 'en'} überfällig`;
|
||||
return (
|
||||
<Box key={item.id} component="li" sx={{ mb: 0.5 }}>
|
||||
<Link
|
||||
component={RouterLink}
|
||||
to={`/ausruestung/${item.id}`}
|
||||
color="inherit"
|
||||
underline="hover"
|
||||
sx={{ fontWeight: 500 }}
|
||||
>
|
||||
{item.bezeichnung}
|
||||
</Link>
|
||||
{item.kategorie_kurzname ? ` (${item.kategorie_kurzname})` : ''}
|
||||
{' — '}
|
||||
<Typography component="span" variant="body2">
|
||||
{tageText}
|
||||
{item.naechste_pruefung_am
|
||||
? ` (${formatDate(item.naechste_pruefung_am)})`
|
||||
: ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// 2. Important equipment not ready (affects vehicle readiness)
|
||||
if (stats.wichtigNichtBereit > 0) {
|
||||
groups.push({
|
||||
key: 'wichtig',
|
||||
severity: 'error',
|
||||
title: `Wichtige Ausrüstung nicht einsatzbereit (${stats.wichtigNichtBereit})`,
|
||||
content: (
|
||||
<Typography variant="body2">
|
||||
{stats.wichtigNichtBereit} wichtige{stats.wichtigNichtBereit === 1 ? 's' : ''}
|
||||
{' '}Ausrüstungsteil{stats.wichtigNichtBereit === 1 ? '' : 'e'} nicht
|
||||
einsatzbereit — Fahrzeugbereitschaft kann beeinträchtigt sein.
|
||||
</Typography>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Damaged equipment
|
||||
if (stats.beschaedigt > 0) {
|
||||
groups.push({
|
||||
key: 'beschaedigt',
|
||||
severity: 'error',
|
||||
title: `${AusruestungStatusLabel[AusruestungStatus.Beschaedigt]} (${stats.beschaedigt})`,
|
||||
content: (
|
||||
<Typography variant="body2">
|
||||
{stats.beschaedigt} Ausrüstungsteil{stats.beschaedigt === 1 ? '' : 'e'}{' '}
|
||||
{stats.beschaedigt === 1 ? 'ist' : 'sind'} als{' '}
|
||||
{AusruestungStatusLabel[AusruestungStatus.Beschaedigt].toLowerCase()} gemeldet.
|
||||
</Typography>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// 4. Upcoming inspections
|
||||
if (stats.inspectionsDue > 0 && upcomingItems.length > 0) {
|
||||
groups.push({
|
||||
key: 'upcoming',
|
||||
severity: 'warning',
|
||||
title: `Prüfungen fällig in den nächsten ${daysAhead} Tagen (${stats.inspectionsDue})`,
|
||||
content: (
|
||||
<Box component="ul" sx={{ m: 0, pl: 2 }}>
|
||||
{upcomingItems.map((item) => {
|
||||
const tage = item.pruefung_tage_bis_faelligkeit!;
|
||||
const tageText =
|
||||
tage === 0
|
||||
? 'heute fällig'
|
||||
: `fällig in ${tage} Tag${tage === 1 ? '' : 'en'}`;
|
||||
return (
|
||||
<Box key={item.id} component="li" sx={{ mb: 0.5 }}>
|
||||
<Link
|
||||
component={RouterLink}
|
||||
to={`/ausruestung/${item.id}`}
|
||||
color="inherit"
|
||||
underline="hover"
|
||||
sx={{ fontWeight: 500 }}
|
||||
>
|
||||
{item.bezeichnung}
|
||||
</Link>
|
||||
{item.kategorie_kurzname ? ` (${item.kategorie_kurzname})` : ''}
|
||||
{' — '}
|
||||
<Typography component="span" variant="body2">
|
||||
{tageText}
|
||||
{item.naechste_pruefung_am
|
||||
? ` (${formatDate(item.naechste_pruefung_am)})`
|
||||
: ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// 5. In maintenance
|
||||
if (stats.inWartung > 0) {
|
||||
groups.push({
|
||||
key: 'wartung',
|
||||
severity: 'warning',
|
||||
title: `${AusruestungStatusLabel[AusruestungStatus.InWartung]} (${stats.inWartung})`,
|
||||
content: (
|
||||
<Typography variant="body2">
|
||||
{stats.inWartung} Ausrüstungsteil{stats.inWartung === 1 ? '' : 'e'}{' '}
|
||||
{stats.inWartung === 1 ? 'befindet' : 'befinden'} sich derzeit in Wartung.
|
||||
</Typography>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// Nothing to show
|
||||
if (groups.length === 0) {
|
||||
if (hideWhenEmpty) return null;
|
||||
return (
|
||||
<Alert severity="success">
|
||||
Alle Ausrüstung ist einsatzbereit. Keine Auffälligkeiten in den nächsten{' '}
|
||||
{daysAhead} Tagen.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{groups.map(({ key, severity, title, content }) => (
|
||||
<Alert key={key} severity={severity} variant="outlined">
|
||||
<AlertTitle sx={{ fontWeight: 600 }}>{title}</AlertTitle>
|
||||
{content}
|
||||
</Alert>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default EquipmentAlerts;
|
||||
Reference in New Issue
Block a user