-
{de.renameGroup}
-
-
setRenameDialog({ ...renameDialog, newName: e.target.value })}
- placeholder={de.newName}
- />
-
-
+
)}
{deleteDialog.open && (
-
-
-
{de.deleteGroup}
-
-
{de.clientsMoved}
- {deleteDialog.groupName && (
-
- {de.warning} Möchten Sie die Gruppe {deleteDialog.groupName}{' '}
- wirklich löschen?
-
- )}
-
-
- {showDeleteConfirm && deleteDialog.groupName && (
-
setShowDeleteConfirm(false)}
- footerTemplate={() => (
-
-
-
-
- )}
- >
-
- Möchten Sie die Gruppe {deleteDialog.groupName} wirklich löschen?
-
- {de.clientsMoved}
-
-
)}
-
+ >
+
+ Möchten Sie die Gruppe {deleteDialog.groupName} wirklich löschen?
+
+ {de.clientsMoved}
+
+
)}
);
diff --git a/dashboard/src/main.tsx b/dashboard/src/main.tsx
index 201997c..9e115d7 100644
--- a/dashboard/src/main.tsx
+++ b/dashboard/src/main.tsx
@@ -6,6 +6,20 @@ import { registerLicense } from '@syncfusion/ej2-base';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-navigations/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
+import '@syncfusion/ej2-inputs/styles/material3.css';
+import '@syncfusion/ej2-dropdowns/styles/material3.css';
+import '@syncfusion/ej2-popups/styles/material3.css';
+import '@syncfusion/ej2-kanban/styles/material3.css';
+// Additional components used across the app
+import '@syncfusion/ej2-grids/styles/material3.css';
+import '@syncfusion/ej2-react-schedule/styles/material3.css';
+import '@syncfusion/ej2-react-filemanager/styles/material3.css';
+import '@syncfusion/ej2-notifications/styles/material3.css';
+import '@syncfusion/ej2-layouts/styles/material3.css';
+import '@syncfusion/ej2-lists/styles/material3.css';
+import '@syncfusion/ej2-calendars/styles/material3.css';
+import '@syncfusion/ej2-splitbuttons/styles/material3.css';
+import '@syncfusion/ej2-icons/styles/material3.css';
// Setze hier deinen Lizenzschlüssel ein
registerLicense(
diff --git a/dashboard/src/programminfo.tsx b/dashboard/src/programminfo.tsx
index ac4f57c..04f7c0a 100644
--- a/dashboard/src/programminfo.tsx
+++ b/dashboard/src/programminfo.tsx
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
+import { PagerComponent } from '@syncfusion/ej2-react-grids';
interface ProgramInfo {
appName: string;
@@ -6,9 +7,7 @@ interface ProgramInfo {
copyright: string;
supportContact: string;
description: string;
- techStack: {
- [key: string]: string;
- };
+ techStack: Record
;
openSourceComponents: {
frontend: { name: string; license: string }[];
backend: { name: string; license: string }[];
@@ -27,26 +26,32 @@ interface ProgramInfo {
const Programminfo: React.FC = () => {
const [info, setInfo] = useState(null);
const [error, setError] = useState(null);
+ const [currentPage, setCurrentPage] = useState(1);
+ const pageSize = 5;
useEffect(() => {
+ let isMounted = true;
fetch('/program-info.json')
- .then(response => {
- if (!response.ok) {
- throw new Error('Netzwerk-Antwort war nicht ok');
- }
- return response.json();
+ .then(res => {
+ if (!res.ok) throw new Error('Netzwerk-Antwort war nicht ok');
+ return res.json();
})
- .then(data => setInfo(data))
- .catch(error => {
- console.error('Fehler beim Laden der Programminformationen:', error);
- setError('Informationen konnten nicht geladen werden.');
+ .then((data: ProgramInfo) => {
+ if (isMounted) setInfo(data);
+ })
+ .catch(err => {
+ console.error('Fehler beim Laden der Programminformationen:', err);
+ if (isMounted) setError('Informationen konnten nicht geladen werden.');
});
+ return () => {
+ isMounted = false;
+ };
}, []);
if (error) {
return (
-
Fehler
+
Fehler
{error}
-
Programminfo
+
Programminfo
Lade Informationen...
+
-
{info.appName}
-
{info.description}
+
{info.appName}
+
{info.description}
-
+
{/* Allgemeine Infos & Build */}
-
-
Allgemein
-
-
- Version: {info.version}
-
-
- Copyright: {info.copyright}
-
-
- Support:{' '}
-
- {info.supportContact}
-
-
-
-
Build-Informationen
-
- Build-Datum:{' '}
- {new Date(info.buildInfo.buildDate).toLocaleString('de-DE')}
-
-
- Commit-ID:{' '}
-
- {info.buildInfo.commitId}
-
-
+
+
+
+
+
+
+ Version: {info.version}
+
+
+ Copyright: {info.copyright}
+
+
+ Support:{' '}
+
+ {info.supportContact}
+
+
+
+
Build-Informationen
+
+ Build-Datum: {new Date(info.buildInfo.buildDate).toLocaleString('de-DE')}
+
+
+ Commit-ID:{' '}
+
+ {info.buildInfo.commitId}
+
+
+
+
{/* Technischer Stack */}
-
-
Technologie-Stack
-
- {Object.entries(info.techStack).map(([key, value]) => (
- -
- {key}: {value}
-
- ))}
-
+
+
+
+
+
+ {Object.entries(info.techStack).map(([key, value]) => (
+ -
+ {key}: {value}
+
+ ))}
+
+
+
{/* Changelog */}
-
Änderungsprotokoll (Changelog)
-
- {info.changelog.map(log => (
-
-
- Version {log.version}{' '}
-
- - {new Date(log.date).toLocaleDateString('de-DE')}
-
-
-
- {log.changes.map((change, index) => (
- - {change}
- ))}
-
-
- ))}
+
+
Änderungsprotokoll (Changelog)
+
+
+ Insgesamt {info.changelog.length} Einträge
+
+
+
+
+
setCurrentPage(args.currentPage)}
+ />
+
+
+ {info.changelog
+ .slice((currentPage - 1) * pageSize, (currentPage - 1) * pageSize + pageSize)
+ .map(log => (
+
+
+
+
+ Version {log.version}{' '}
+
+ - {new Date(log.date).toLocaleDateString('de-DE')}
+
+
+
+
+
+
+ {log.changes.map((change, index) => (
+ - {change}
+ ))}
+
+
+
+ ))}
+
+
+
setCurrentPage(args.currentPage)}
+ />
{/* Open Source Komponenten */}
-
Verwendete Open-Source-Komponenten
-
+
Verwendete Open-Source-Komponenten
+
{info.openSourceComponents.frontend && (
-
-
Frontend
-
- {info.openSourceComponents.frontend.map(item => (
- -
- {item.name} ({item.license}-Lizenz)
-
- ))}
-
+
+
+
+
+
+ {info.openSourceComponents.frontend.map(item => (
+ -
+ {item.name} ({item.license}-Lizenz)
+
+ ))}
+
+
+
)}
{info.openSourceComponents.backend && (
-
-
Backend
-
- {info.openSourceComponents.backend.map(item => (
- -
- {item.name} ({item.license}-Lizenz)
-
- ))}
-
+
+
+
+
+
+ {info.openSourceComponents.backend.map(item => (
+ -
+ {item.name} ({item.license}-Lizenz)
+
+ ))}
+
+
+
)}