diff --git a/dashboard/src/gruppen.tsx b/dashboard/src/gruppen.tsx
deleted file mode 100644
index 91a516c..0000000
--- a/dashboard/src/gruppen.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-const Gruppen: React.FC = () => (
-
-
Gruppen
-
Willkommen im Infoscreen-Management Gruppen.
-
-);
-export default Gruppen;
diff --git a/dashboard/src/infoscreen_groups.tsx b/dashboard/src/infoscreen_groups.tsx
new file mode 100644
index 0000000..cb9abeb
--- /dev/null
+++ b/dashboard/src/infoscreen_groups.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';
+import { fetchClients, updateClientGroup } from './apiClients';
+import { fetchGroups, createGroup } from './apiGroups';
+import type { Client } from './apiClients';
+import type { KanbanComponent as KanbanComponentType } from '@syncfusion/ej2-react-kanban';
+
+interface KanbanClient extends Client {
+ Id: string;
+ Status: string; // Raumgruppe (Gruppenname)
+ Summary: string; // Anzeigename
+}
+
+interface Group {
+ id: number;
+ name: string;
+ // weitere Felder möglich
+}
+
+interface KanbanDragEventArgs {
+ element: HTMLElement | HTMLElement[];
+ data: KanbanClient | KanbanClient[];
+ event?: { event?: MouseEvent };
+ [key: string]: unknown;
+}
+
+const Infoscreen_groups: React.FC = () => {
+ const [clients, setClients] = useState
([]);
+ const [groups, setGroups] = useState<{ keyField: string; headerText: string }[]>([]);
+ const [showDialog, setShowDialog] = useState(false);
+ const [newGroupName, setNewGroupName] = useState('');
+ const [draggedCard, setDraggedCard] = useState<{ id: string; fromColumn: string } | null>(null);
+ const kanbanRef = useRef(null); // Ref für Kanban
+
+ // Lade Gruppen und Clients
+ useEffect(() => {
+ let groupMap: Record = {};
+ fetchGroups().then((groupData: Group[]) => {
+ const kanbanGroups = groupData.map(g => ({
+ keyField: g.name,
+ headerText: g.name,
+ id: g.id,
+ }));
+ setGroups(kanbanGroups);
+
+ groupMap = Object.fromEntries(groupData.map(g => [g.id, g.name]));
+
+ fetchClients().then(data => {
+ setClients(
+ data.map((c, i) => ({
+ ...c,
+ Id: c.uuid,
+ Status: groupMap[c.group_id] || 'Nicht zugeordnet',
+ Summary: c.location || `Client ${i + 1}`,
+ }))
+ );
+ });
+ });
+ }, []);
+
+ // Neue Gruppe anlegen (persistiert per API)
+ const handleAddGroup = async () => {
+ if (!newGroupName.trim()) return;
+ try {
+ const newGroup = await createGroup(newGroupName);
+ setGroups([...groups, { keyField: newGroup.name, headerText: newGroup.name }]);
+ setNewGroupName('');
+ setShowDialog(false);
+ } catch {
+ alert('Fehler beim Erstellen der Gruppe');
+ }
+ };
+
+ const handleDragStart = (args: KanbanDragEventArgs) => {
+ const element = Array.isArray(args.element) ? args.element[0] : args.element;
+ const cardId = element.getAttribute('data-id');
+ const fromColumn = element.getAttribute('data-key');
+ setDraggedCard({ id: cardId || '', fromColumn: fromColumn || '' });
+ };
+
+ const handleCardDrop = async (args: KanbanDragEventArgs) => {
+ if (!draggedCard) return;
+
+ const mouseEvent = args.event?.event;
+ let targetGroupName = '';
+
+ if (mouseEvent && mouseEvent.clientX && mouseEvent.clientY) {
+ const targetElement = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY);
+ const kanbanColumn =
+ targetElement?.closest('[data-key]') || targetElement?.closest('.e-content-row');
+ if (kanbanColumn) {
+ const columnKey = kanbanColumn.getAttribute('data-key');
+ if (columnKey) {
+ targetGroupName = columnKey;
+ } else {
+ const headerElement = kanbanColumn.querySelector('.e-header-text');
+ targetGroupName = headerElement?.textContent?.trim() || '';
+ }
+ }
+ }
+
+ // Fallback
+ if (!targetGroupName) {
+ const targetElement = Array.isArray(args.element) ? args.element[0] : args.element;
+ const cardWrapper = targetElement.closest('.e-card-wrapper');
+ const contentRow = cardWrapper?.closest('.e-content-row');
+ const headerText = contentRow?.querySelector('.e-header-text');
+ targetGroupName = headerText?.textContent?.trim() || '';
+ }
+
+ if (!targetGroupName || targetGroupName === draggedCard.fromColumn) {
+ setDraggedCard(null);
+ return;
+ }
+
+ const dropped = Array.isArray(args.data) ? args.data : [args.data];
+ const clientIds = dropped.map((card: KanbanClient) => card.Id);
+
+ try {
+ await updateClientGroup(clientIds, targetGroupName);
+ fetchGroups().then((groupData: Group[]) => {
+ const groupMap = Object.fromEntries(groupData.map(g => [g.id, g.name]));
+ setGroups(
+ groupData.map(g => ({
+ keyField: g.name,
+ headerText: g.name,
+ id: g.id,
+ }))
+ );
+ fetchClients().then(data => {
+ setClients(
+ data.map((c, i) => ({
+ ...c,
+ Id: c.uuid,
+ Status: groupMap[c.group_id] || 'Nicht zugeordnet',
+ Summary: c.location || `Client ${i + 1}`,
+ }))
+ );
+ });
+ });
+ } catch {
+ alert('Fehler beim Aktualisieren der Clients');
+ }
+ setDraggedCard(null);
+ };
+
+ return (
+
+
Gruppen
+
+
+
+ {groups.map(group => (
+
+ ))}
+
+
+ {showDialog && (
+
+
+
Neue Raumgruppe
+
setNewGroupName(e.target.value)}
+ placeholder="Raumname"
+ />
+
+
+
+
+
+
+ )}
+