olafn/infoscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement functionality to delete clients in

Browse Source 
clients and SetupMode components
This commit is contained in:
olaf
2025-07-22 16:04:26 +00:00
parent c0202e5802
commit 7f4800496a
12 changed files with 651 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
dashboard/src/clients.tsx
View File

@@ -1,7 +1,6 @@
import SetupModeButton from './components/SetupModeButton';
import React, { useEffect, useState } from 'react';
// ...ButtonComponent entfernt...
// Card-Komponente wird als eigenes Layout umgesetzt
import { useClientDelete } from './hooks/useClientDelete';
import { fetchClients, updateClient } from './apiClients';
import type { Client } from './apiClients';
import {
@@ -15,6 +14,7 @@ import {
Sort,
Edit,
} from '@syncfusion/ej2-react-grids';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
// Raumgruppen werden dynamisch aus der API geladen
@@ -88,9 +88,7 @@ function DetailsModal({ open, client, groupIdToName, onClose }: DetailsModalProp
(value as string).endsWith('Z') ? (value as string) : value + 'Z'
).toLocaleString()
: key === 'last_alive' && value
? new Date(
(value as string).endsWith('Z') ? (value as string) : value + 'Z'
).toLocaleString()
? String(value) // Wert direkt anzeigen, nicht erneut parsen
: String(value)}
</td>
</tr>
@@ -111,7 +109,11 @@ function DetailsModal({ open, client, groupIdToName, onClose }: DetailsModalProp
const Clients: React.FC = () => {
const [clients, setClients] = useState<Client[]>([]);
const [groups, setGroups] = useState<{ id: number; name: string }[]>([]);
const [selectedClient, setSelectedClient] = useState<Client | null>(null);
const [detailsClient, setDetailsClient] = useState<Client | null>(null);
const { showDialog, deleteClientId, handleDelete, confirmDelete, cancelDelete } = useClientDelete(
uuid => setClients(prev => prev.filter(c => c.uuid !== uuid))
);
useEffect(() => {
fetchClients().then(setClients);
@@ -136,15 +138,27 @@ const Clients: React.FC = () => {
: '',
}));
// DataGrid row template für Details-Button
// DataGrid row template für Details- und Entfernen-Button
const detailsButtonTemplate = (props: Client) => (
<button
className="e-btn e-primary"
onClick={() => setSelectedClient(props)}
style={{ minWidth: 80 }}
>
Details
</button>
<div style={{ display: 'flex', gap: '8px' }}>
<button
className="e-btn e-primary"
onClick={() => setDetailsClient(props)}
style={{ minWidth: 80 }}
>
Details
</button>
<button
className="e-btn e-danger"
onClick={e => {
e.stopPropagation();
handleDelete(props.uuid);
}}
style={{ minWidth: 80 }}
>
Entfernen
</button>
</div>
);
return (
@@ -169,9 +183,16 @@ const Clients: React.FC = () => {
allowDeleting: false,
mode: 'Normal',
}}
actionComplete={async (args: { requestType: string; data: any }) => {
actionComplete={async (args: {
requestType: string;
data: Record<string, unknown>;
}) => {
if (args.requestType === 'save') {
const { uuid, description, model } = args.data;
const { uuid, description, model } = args.data as {
uuid: string;
description: string;
model: string;
};
// API-Aufruf zum Speichern
await updateClient(uuid, { description, model });
// Nach dem Speichern neu laden
@@ -183,32 +204,27 @@ const Clients: React.FC = () => {
<ColumnDirective
field="description"
headerText="Beschreibung"
width="150"
allowEditing={true}
width="180"
/>
<ColumnDirective
field="group_name"
headerText="Raumgruppe"
width="120"
allowEditing={false}
/>
<ColumnDirective field="uuid" headerText="UUID" width="220" allowEditing={false} />
<ColumnDirective
field="ip"
headerText="IP-Adresse"
width="150"
allowEditing={false}
width="140"
/>
<ColumnDirective field="uuid" headerText="UUID" allowEditing={false} width="160" />
<ColumnDirective field="ip" headerText="IP-Adresse" allowEditing={false} width="80" />
<ColumnDirective
field="last_alive"
headerText="Last Alive"
width="120"
allowEditing={false}
width="120"
/>
<ColumnDirective field="model" headerText="Model" width="120" allowEditing={true} />
<ColumnDirective field="model" headerText="Model" allowEditing={true} width="120" />
<ColumnDirective
headerText="Details"
width="100"
headerText="Aktion"
width="190"
template={detailsButtonTemplate}
textAlign="Center"
allowEditing={false}
@@ -217,15 +233,30 @@ const Clients: React.FC = () => {
<Inject services={[Page, Toolbar, Search, Sort, Edit]} />
</GridComponent>
<DetailsModal
open={!!selectedClient}
client={selectedClient}
open={!!detailsClient}
client={detailsClient}
groupIdToName={groupIdToName}
onClose={() => setSelectedClient(null)}
onClose={() => setDetailsClient(null)}
/>
</>
) : (
<div className="text-gray-500">Raumgruppen werden geladen ...</div>
)}
{/* DialogComponent für Bestätigung */}
{showDialog && deleteClientId && (
<DialogComponent
visible={showDialog}
header="Bestätigung"
content="Möchten Sie diesen Client wirklich entfernen?"
showCloseIcon={true}
width="400px"
buttons={[
{ click: confirmDelete, buttonModel: { content: 'Ja', isPrimary: true } },
{ click: cancelDelete, buttonModel: { content: 'Abbrechen' } },
]}
close={cancelDelete}
/>
)}
</div>
);
};