matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

resolve issues with new features

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-12 17:20:32 +01:00
parent 68586b01dc
commit 34ca007f9b
8 changed files with 232 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/chat/ChatPanel.tsx
View File

@@ -17,6 +17,7 @@ import { Link } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { configApi } from '../../services/config';
import { notificationsApi } from '../../services/notifications';
import { nextcloudApi } from '../../services/nextcloud';
import { safeOpenUrl } from '../../utils/safeOpenUrl';
import ChatRoomList from './ChatRoomList';
import ChatMessageView from './ChatMessageView';
@@ -36,12 +37,27 @@ const ChatPanelInner: React.FC = () => {
});
const nextcloudUrl = externalLinks?.nextcloud;
// Keep a ref to rooms so the effect can access the latest list without
// re-running every time room data refreshes.
const roomsRef = React.useRef(rooms);
roomsRef.current = rooms;
React.useEffect(() => {
if (chatPanelOpen) {
// Dismiss our internal notification-centre entries
notificationsApi.dismissByType('nextcloud_talk').then(() => {
queryClient.invalidateQueries({ queryKey: ['notifications'] });
queryClient.invalidateQueries({ queryKey: ['unreadNotificationCount'] });
}).catch(() => {});
// Also mark all unread rooms as read directly in Nextcloud so that
// Nextcloud's own notification badges clear as well.
roomsRef.current
.filter((r) => r.unreadMessages > 0)
.forEach((r) => {
nextcloudApi.markAsRead(r.token).catch(() => {});
});
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
}
}, [chatPanelOpen, queryClient]);

62
frontend/src/components/shared/Sidebar.tsx
View File

@@ -27,14 +27,16 @@ import {
ExpandLess,
} from '@mui/icons-material';
import { useNavigate, useLocation } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useLayout, DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED } from '../../contexts/LayoutContext';
import { useAuth } from '../../contexts/AuthContext';
import { vehiclesApi } from '../../services/vehicles';
export { DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED };
interface SubItem {
text: string;
tabIndex: number;
path: string;
}
interface NavigationItem {
@@ -45,17 +47,17 @@ interface NavigationItem {
}
const kalenderSubItems: SubItem[] = [
{ text: 'Veranstaltungen', tabIndex: 0 },
{ text: 'Fahrzeugbuchungen', tabIndex: 1 },
{ text: 'Veranstaltungen', path: '/kalender?tab=0' },
{ text: 'Fahrzeugbuchungen', path: '/kalender?tab=1' },
];
const adminSubItems: SubItem[] = [
{ text: 'Services', tabIndex: 0 },
{ text: 'System', tabIndex: 1 },
{ text: 'Benutzer', tabIndex: 2 },
{ text: 'Broadcast', tabIndex: 3 },
{ text: 'Banner', tabIndex: 4 },
{ text: 'Wartung', tabIndex: 5 },
{ text: 'Services', path: '/admin?tab=0' },
{ text: 'System', path: '/admin?tab=1' },
{ text: 'Benutzer', path: '/admin?tab=2' },
{ text: 'Broadcast', path: '/admin?tab=3' },
{ text: 'Banner', path: '/admin?tab=4' },
{ text: 'Wartung', path: '/admin?tab=5' },
];
const baseNavigationItems: NavigationItem[] = [
@@ -123,9 +125,34 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
const isAdmin = user?.groups?.includes('dashboard_admin') ?? false;
const navigationItems = useMemo(() => {
return isAdmin ? [...baseNavigationItems, adminItem, adminSettingsItem] : baseNavigationItems;
}, [isAdmin]);
// Fetch vehicle list for dynamic dropdown sub-items
const { data: vehicleList } = useQuery({
queryKey: ['vehicles', 'sidebar'],
queryFn: () => vehiclesApi.getAll(),
staleTime: 2 * 60 * 1000,
});
const vehicleSubItems: SubItem[] = useMemo(
() =>
(vehicleList ?? []).map((v) => ({
text: v.kurzname ?? v.bezeichnung,
path: `/fahrzeuge/${v.id}`,
})),
[vehicleList],
);
const navigationItems = useMemo((): NavigationItem[] => {
const fahrzeugeItem: NavigationItem = {
text: 'Fahrzeuge',
icon: <DirectionsCar />,
path: '/fahrzeuge',
subItems: vehicleSubItems.length > 0 ? vehicleSubItems : undefined,
};
const items = baseNavigationItems.map((item) =>
item.path === '/fahrzeuge' ? fahrzeugeItem : item,
);
return isAdmin ? [...items, adminItem, adminSettingsItem] : items;
}, [isAdmin, vehicleSubItems]);
// Expand state for items with sub-items — auto-expand when route matches
const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
@@ -169,7 +196,7 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
>
<ListItemButton
selected={isActive}
onClick={() => handleNavigation(hasSubItems ? `${item.path}?tab=0` : item.path)}
onClick={() => handleNavigation(hasSubItems ? item.subItems![0].path : item.path)}
aria-label={`Zu ${item.text} navigieren`}
sx={{
justifyContent: sidebarCollapsed ? 'center' : 'initial',
@@ -219,14 +246,11 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
<Collapse in={expanded} timeout="auto" unmountOnExit>
<List disablePadding>
{item.subItems!.map((sub) => {
const subPath = `${item.path}?tab=${sub.tabIndex}`;
const isSubActive =
location.pathname === item.path &&
location.search === `?tab=${sub.tabIndex}`;
const isSubActive = location.pathname + location.search === sub.path;
return (
<ListItemButton
key={sub.tabIndex}
onClick={() => handleNavigation(subPath)}
key={sub.path}
onClick={() => handleNavigation(sub.path)}
selected={isSubActive}
sx={{
pl: 4,

79
frontend/src/pages/AdminSettings.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import {
Container,
Typography,
@@ -76,9 +76,11 @@ function AdminSettings() {
adminServices: 15,
});
// State for PDF header/footer
// State for PDF header/footer/logo/org
const [pdfHeader, setPdfHeader] = useState('');
const [pdfFooter, setPdfFooter] = useState('');
const [pdfLogo, setPdfLogo] = useState('');
const [pdfOrgName, setPdfOrgName] = useState('');
// Fetch all settings
const { data: settings, isLoading } = useQuery({
@@ -113,6 +115,10 @@ function AdminSettings() {
if (pdfHeaderSetting?.value != null) setPdfHeader(pdfHeaderSetting.value);
const pdfFooterSetting = settings.find((s) => s.key === 'pdf_footer');
if (pdfFooterSetting?.value != null) setPdfFooter(pdfFooterSetting.value);
const pdfLogoSetting = settings.find((s) => s.key === 'pdf_logo');
if (pdfLogoSetting?.value != null) setPdfLogo(pdfLogoSetting.value);
const pdfOrgNameSetting = settings.find((s) => s.key === 'pdf_org_name');
if (pdfOrgNameSetting?.value != null) setPdfOrgName(pdfOrgNameSetting.value);
}
}, [settings]);
@@ -156,17 +162,40 @@ function AdminSettings() {
queryClient.invalidateQueries({ queryKey: ['pdf-settings'] });
},
});
const pdfLogoMutation = useMutation({
mutationFn: (value: string) => settingsApi.update('pdf_logo', value),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
queryClient.invalidateQueries({ queryKey: ['pdf-settings'] });
},
});
const pdfOrgNameMutation = useMutation({
mutationFn: (value: string) => settingsApi.update('pdf_org_name', value),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
queryClient.invalidateQueries({ queryKey: ['pdf-settings'] });
},
});
const handleSavePdfSettings = async () => {
try {
await Promise.all([
pdfHeaderMutation.mutateAsync(pdfHeader),
pdfFooterMutation.mutateAsync(pdfFooter),
pdfLogoMutation.mutateAsync(pdfLogo),
pdfOrgNameMutation.mutateAsync(pdfOrgName),
]);
showSuccess('PDF-Einstellungen gespeichert');
} catch {
showError('Fehler beim Speichern der PDF-Einstellungen');
}
};
const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => setPdfLogo(ev.target?.result as string);
reader.readAsDataURL(file);
};
if (!isAdmin) {
return <Navigate to="/dashboard" replace />;
@@ -423,7 +452,44 @@ function AdminSettings() {
</Typography>
<Stack spacing={2}>
<TextField
label="PDF Kopfzeile"
label="Organisationsname (rechts im PDF-Header)"
value={pdfOrgName}
onChange={(e) => setPdfOrgName(e.target.value)}
fullWidth
size="small"
placeholder="FREIWILLIGE FEUERWEHR REMS"
/>
<Box>
<Typography variant="body2" color="text.secondary" gutterBottom>
Logo (erscheint rechts im PDF-Header, neben dem Organisationsnamen)
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
<Button component="label" variant="outlined" size="small">
Logo hochladen
<input
type="file"
hidden
accept="image/*"
onChange={handleLogoUpload}
/>
</Button>
{pdfLogo && (
<>
<Box
component="img"
src={pdfLogo}
alt="Logo Vorschau"
sx={{ height: 40, maxWidth: 120, objectFit: 'contain', borderRadius: 1 }}
/>
<IconButton size="small" onClick={() => setPdfLogo('')} title="Logo entfernen">
<Delete fontSize="small" />
</IconButton>
</>
)}
</Box>
</Box>
<TextField
label="PDF Kopfzeile (links, unter dem Header-Banner)"
value={pdfHeader}
onChange={(e) => setPdfHeader(e.target.value)}
multiline
@@ -447,7 +513,12 @@ function AdminSettings() {
onClick={handleSavePdfSettings}
variant="contained"
size="small"
disabled={pdfHeaderMutation.isPending || pdfFooterMutation.isPending}
disabled={
pdfHeaderMutation.isPending ||
pdfFooterMutation.isPending ||
pdfLogoMutation.isPending ||
pdfOrgNameMutation.isPending
}
>
Speichern
</Button>

2
frontend/src/pages/FahrzeugBuchungen.tsx
View File

@@ -398,7 +398,7 @@ function FahrzeugBuchungen() {
<TableContainer component={Paper} elevation={1}>
<Table size="small" sx={{ tableLayout: 'fixed' }}>
<TableHead>
<TableRow sx={{ bgcolor: (theme) => theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100' }}>
<TableRow sx={{ bgcolor: (theme) => theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100' }}>
<TableCell sx={{ width: 160, fontWeight: 700 }}>
Fahrzeug
</TableCell>

56
frontend/src/pages/Kalender.tsx
View File

@@ -675,7 +675,7 @@ async function fetchPdfSettings(): Promise<PdfSettings> {
_pdfSettingsCacheTime = Date.now();
return _pdfSettingsCache;
} catch {
return { pdf_header: '', pdf_footer: '' };
return { pdf_header: '', pdf_footer: '', pdf_logo: '', pdf_org_name: '' };
}
}
@@ -701,9 +701,28 @@ async function generatePdf(
doc.setFontSize(14);
doc.setFont('helvetica', 'bold');
doc.text(`Kalender — ${monthLabel} ${year}`, 10, 12);
doc.setFontSize(9);
doc.setFont('helvetica', 'normal');
doc.text('Feuerwehr Rems', 250, 12);
// Right side: logo and/or org name
const logoSize = 14;
const logoX = 297 - 4 - logoSize; // 4mm right margin
if (pdfSettings.pdf_logo) {
try {
const fmt = pdfSettings.pdf_logo.match(/^data:image\/(\w+);/)?.[1]?.toUpperCase() ?? 'PNG';
doc.addImage(pdfSettings.pdf_logo, fmt === 'JPG' ? 'JPEG' : fmt, logoX, 2, logoSize, logoSize);
} catch { /* ignore invalid image */ }
}
if (pdfSettings.pdf_org_name) {
doc.setFontSize(9);
doc.setFont('helvetica', 'bold');
doc.setTextColor(255, 255, 255);
const nameW = doc.getTextWidth(pdfSettings.pdf_org_name);
const nameX = (pdfSettings.pdf_logo ? logoX - 3 : 297 - 4) - nameW;
doc.text(pdfSettings.pdf_org_name, nameX, 12);
} else if (!pdfSettings.pdf_logo) {
doc.setFontSize(9);
doc.setFont('helvetica', 'normal');
doc.text('Feuerwehr Rems', 250, 12);
}
// Custom header text
let tableStartY = 22;
@@ -796,9 +815,28 @@ async function generateBookingsPdf(
doc.setFontSize(14);
doc.setFont('helvetica', 'bold');
doc.text(`Fahrzeugbuchungen — ${kwLabel} · ${startLabel} – ${endLabel}`, 10, 12);
doc.setFontSize(9);
doc.setFont('helvetica', 'normal');
doc.text('Feuerwehr Rems', 250, 12);
// Right side: logo and/or org name
const logoSize = 14;
const logoX = 297 - 4 - logoSize;
if (pdfSettings.pdf_logo) {
try {
const fmt = pdfSettings.pdf_logo.match(/^data:image\/(\w+);/)?.[1]?.toUpperCase() ?? 'PNG';
doc.addImage(pdfSettings.pdf_logo, fmt === 'JPG' ? 'JPEG' : fmt, logoX, 2, logoSize, logoSize);
} catch { /* ignore invalid image */ }
}
if (pdfSettings.pdf_org_name) {
doc.setFontSize(9);
doc.setFont('helvetica', 'bold');
doc.setTextColor(255, 255, 255);
const nameW = doc.getTextWidth(pdfSettings.pdf_org_name);
const nameX = (pdfSettings.pdf_logo ? logoX - 3 : 297 - 4) - nameW;
doc.text(pdfSettings.pdf_org_name, nameX, 12);
} else if (!pdfSettings.pdf_logo) {
doc.setFontSize(9);
doc.setFont('helvetica', 'normal');
doc.text('Feuerwehr Rems', 250, 12);
}
// Custom header text
let tableStartY = 22;
@@ -2747,7 +2785,7 @@ export default function Kalender() {
<TableContainer component={Paper} elevation={1}>
<Table size="small" sx={{ tableLayout: 'fixed' }}>
<TableHead>
<TableRow sx={{ bgcolor: 'grey.100' }}>
<TableRow sx={{ bgcolor: (theme) => theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100' }}>
<TableCell sx={{ width: 160, fontWeight: 700 }}>
Fahrzeug
</TableCell>
@@ -2758,7 +2796,7 @@ export default function Kalender() {
sx={{
fontWeight: fnsIsToday(day) ? 700 : 400,
color: fnsIsToday(day) ? 'primary.main' : 'text.primary',
bgcolor: fnsIsToday(day) ? 'primary.50' : undefined,
bgcolor: fnsIsToday(day) ? (theme) => theme.palette.mode === 'dark' ? 'primary.900' : 'primary.50' : undefined,
}}
>
<Typography variant="caption" display="block">

2
frontend/src/services/config.ts
View File

@@ -9,6 +9,8 @@ interface ApiResponse<T> {
export interface PdfSettings {
pdf_header: string;
pdf_footer: string;
pdf_logo: string;
pdf_org_name: string;
}
export const configApi = {