+
{/* Sidebar */}
@@ -127,26 +143,8 @@ const Layout: React.FC = () => {
);
};
-function useLoginCheck() {
- const [isLoggedIn, setIsLoggedIn] = useState(false);
-
- useEffect(() => {
- if (ENV === 'development') {
- setIsLoggedIn(true); // Im Development immer eingeloggt
- console.log('[Login] Development-Modus: User automatisch eingeloggt');
- return;
- }
- // Hier echte Loginlogik einbauen (z.B. Token prüfen)
- // setIsLoggedIn(...)
- // console.log('[Login] Produktiv-Modus: Login-Check ausgeführt');
- }, []);
-
- return isLoggedIn;
-}
const App: React.FC = () => {
- const navigate = useNavigate();
- const isLoggedIn = useLoginCheck();
// Automatische Navigation zu /clients bei leerer Beschreibung entfernt
@@ -176,14 +174,3 @@ const AppWrapper: React.FC = () => (
);
export default AppWrapper;
-
-// Dummy Components (können in eigene Dateien ausgelagert werden)
-import Dashboard from './dashboard';
-import Appointments from './appointments';
-import Ressourcen from './ressourcen';
-import Infoscreens from './clients';
-import Infoscreen_groups from './infoscreen_groups';
-import Media from './media';
-import Benutzer from './benutzer';
-import Einstellungen from './einstellungen';
-import SetupMode from './SetupMode';
diff --git a/dashboard/src/SetupMode.tsx b/dashboard/src/SetupMode.tsx
index a378e87..8778606 100644
--- a/dashboard/src/SetupMode.tsx
+++ b/dashboard/src/SetupMode.tsx
@@ -3,6 +3,8 @@ import { fetchClientsWithoutDescription, setClientDescription } from './apiClien
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { useClientDelete } from './hooks/useClientDelete';
type Client = {
uuid: string;
@@ -14,48 +16,67 @@ type Client = {
const SetupMode: React.FC = () => {
const [clients, setClients] = useState
([]);
const [descriptions, setDescriptions] = useState>({});
- const [loading, setLoading] = useState(false);
+ const [loading /* setLoading */] = useState(false);
+ const [inputActive, setInputActive] = useState(false);
+
+ // Lösch-Logik aus Hook (analog zu clients.tsx)
+ const { showDialog, deleteClientId, handleDelete, confirmDelete, cancelDelete } = useClientDelete(
+ async uuid => {
+ // Nach dem Löschen neu laden!
+ const updated = await fetchClientsWithoutDescription();
+ setClients(updated);
+ setDescriptions(prev => {
+ const copy = { ...prev };
+ delete copy[uuid];
+ return copy;
+ });
+ }
+ );
+
+ // Hilfsfunktion zum Vergleich der Clients
+ const isEqual = (a: Client[], b: Client[]) => {
+ if (a.length !== b.length) return false;
+ const aSorted = [...a].sort((x, y) => x.uuid.localeCompare(y.uuid));
+ const bSorted = [...b].sort((x, y) => x.uuid.localeCompare(y.uuid));
+ for (let i = 0; i < aSorted.length; i++) {
+ if (aSorted[i].uuid !== bSorted[i].uuid) return false;
+ if (aSorted[i].hostname !== bSorted[i].hostname) return false;
+ if (aSorted[i].ip_address !== bSorted[i].ip_address) return false;
+ if (aSorted[i].last_alive !== bSorted[i].last_alive) return false;
+ }
+ return true;
+ };
useEffect(() => {
let polling: ReturnType | null = null;
- const isEqual = (a: Client[], b: Client[]) => {
- if (a.length !== b.length) return false;
- const aSorted = [...a].sort((x, y) => x.uuid.localeCompare(y.uuid));
- const bSorted = [...b].sort((x, y) => x.uuid.localeCompare(y.uuid));
- for (let i = 0; i < aSorted.length; i++) {
- if (aSorted[i].uuid !== bSorted[i].uuid) return false;
- if (aSorted[i].hostname !== bSorted[i].hostname) return false;
- if (aSorted[i].ip_address !== bSorted[i].ip_address) return false;
- if (aSorted[i].last_alive !== bSorted[i].last_alive) return false;
- }
- return true;
- };
- let firstLoad = true;
+
const fetchClients = () => {
- if (firstLoad) setLoading(true);
+ if (inputActive) return;
fetchClientsWithoutDescription().then(list => {
- if (firstLoad) {
- setLoading(false);
- firstLoad = false;
- }
setClients(prev => (isEqual(prev, list) ? prev : list));
});
};
+
fetchClients();
- polling = setInterval(fetchClients, 5000); // alle 5 Sekunden
+ polling = setInterval(fetchClients, 5000);
+
return () => {
if (polling) clearInterval(polling);
};
- }, []);
+ }, [inputActive]);
const handleDescriptionChange = (uuid: string, value: string) => {
setDescriptions(prev => ({ ...prev, [uuid]: value }));
};
const handleSave = (uuid: string) => {
- setClientDescription(uuid, descriptions[uuid] || '').then(() => {
- setClients(prev => prev.filter(c => c.uuid !== uuid));
- });
+ setClientDescription(uuid, descriptions[uuid] || '')
+ .then(() => {
+ setClients(prev => prev.filter(c => c.uuid !== uuid));
+ })
+ .catch(err => {
+ console.error('Fehler beim Speichern der Beschreibung:', err);
+ });
};
if (loading) return Lade neue Clients ...
;
@@ -68,14 +89,16 @@ const SetupMode: React.FC = () => {
allowPaging={true}
pageSettings={{ pageSize: 10 }}
rowHeight={50}
+ width="100%"
+ allowTextWrap={false}
>
-
-
+
+
{
if (!props.last_alive) return '';
let iso = props.last_alive;
@@ -93,23 +116,57 @@ const SetupMode: React.FC = () => {
value={descriptions[props.uuid] || ''}
placeholder="Beschreibung eingeben"
change={e => handleDescriptionChange(props.uuid, e.value as string)}
+ focus={() => setInputActive(true)}
+ blur={() => setInputActive(false)}
/>
)}
/>
(
- handleSave(props.uuid)}
- />
+
+ handleSave(props.uuid)}
+ />
+ {
+ e.stopPropagation();
+ handleDelete(props.uuid);
+ }}
+ />
+
)}
/>
{clients.length === 0 && Keine neuen Clients ohne Beschreibung.
}
+
+ {/* Syncfusion Dialog für Sicherheitsabfrage */}
+ {showDialog && deleteClientId && (
+ {
+ const client = clients.find(c => c.uuid === deleteClientId);
+ const hostname = client?.hostname ? ` (${client.hostname})` : '';
+ return client
+ ? `Möchten Sie diesen Client${hostname} wirklich entfernen?`
+ : 'Client nicht gefunden.';
+ })()}
+ showCloseIcon={true}
+ width="400px"
+ buttons={[
+ { click: confirmDelete, buttonModel: { content: 'Ja', isPrimary: true } },
+ { click: cancelDelete, buttonModel: { content: 'Abbrechen' } },
+ ]}
+ close={cancelDelete}
+ />
+ )}
{
- e.currentTarget.onerror = null; // verhindert Endlosschleife
- e.currentTarget.src = "https://placehold.co/400x300?text=No+Screenshot";
- }}
- />
-