Geräte-Tab: Suche, Detail-Panel und Aktionen

Neuer Haupttab "Geräte" mit Geräteliste (filterbar nach OS/Compliance),
Detail-Panel mit vollständigen Gerätedaten und Aktions-Buttons:
Sync, Neustart, Sperren, Diagnose, BitLocker-Rotation, Retire.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-08-12 14:26:46 +02:00
co-authored by Claude Sonnet 4.6
parent ec130031cb
commit 78dc8d5c01
4 changed files with 566 additions and 1 deletions
+87
View File
@@ -35,6 +35,7 @@
<button class="nav-tab active" data-view="apps" aria-selected="true">App Management</button>
<button class="nav-tab" data-view="groups" aria-selected="false">Group Management</button>
<button class="nav-tab" data-view="report" aria-selected="false">App Report</button>
<button class="nav-tab" data-view="devices" aria-selected="false">Geräte</button>
</nav>
<div class="header-actions">
@@ -463,6 +464,92 @@
</div>
</section>
<!-- GERÄTE VIEW -->
<section class="dev-view hidden" id="devView">
<div class="dev-toolbar">
<div class="search-wrap">
<svg class="search-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
<input type="search" id="devSearch" class="input input-search" placeholder="Gerätename, Benutzer, Seriennummer…" autocomplete="off">
</div>
<span id="devCount" class="count-badge">0</span>
<select id="devOsFilter" class="input input-select btn-sm">
<option value="">Alle OS</option>
<option value="Windows">Windows</option>
<option value="macOS">macOS</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
</select>
<select id="devComplianceFilter" class="input input-select btn-sm">
<option value="">Alle Compliance</option>
<option value="compliant">Compliant</option>
<option value="noncompliant">Non-Compliant</option>
<option value="unknown">Unbekannt</option>
</select>
</div>
<div class="dev-layout">
<!-- Geräteliste -->
<div class="dev-list-wrap">
<table class="dev-table" id="devTable">
<thead>
<tr>
<th class="sortable" data-col="deviceName">Gerät <span class="sort-ico"></span></th>
<th class="sortable" data-col="userDisplayName">Benutzer <span class="sort-ico"></span></th>
<th class="sortable" data-col="operatingSystem">OS <span class="sort-ico"></span></th>
<th class="sortable" data-col="complianceState">Compliance <span class="sort-ico"></span></th>
<th class="sortable" data-col="lastSyncDateTime">Letzter Sync <span class="sort-ico"></span></th>
</tr>
</thead>
<tbody id="devTableBody"></tbody>
</table>
<div id="devEmpty" class="dev-empty hidden">Keine Geräte gefunden.</div>
<div id="devLoading" class="dev-loading hidden">
<span class="spinner"></span> Lade Geräte…
</div>
</div>
<!-- Detail-Panel -->
<div class="dev-detail hidden" id="devDetail">
<div class="dev-detail-header">
<div class="dev-detail-name" id="devDetailName">—</div>
<div class="dev-detail-sub" id="devDetailSub">—</div>
</div>
<div class="dev-detail-body">
<dl class="dev-info-grid" id="devInfoGrid"></dl>
</div>
<div class="dev-actions" id="devActions">
<div class="dev-actions-title">Aktionen</div>
<div class="dev-action-btns">
<button class="btn btn-secondary btn-sm dev-action-btn" data-action="syncDevice" title="Richtlinien & Apps jetzt abrufen">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
Sync
</button>
<button class="btn btn-secondary btn-sm dev-action-btn" data-action="rebootNow" title="Gerät neu starten">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
Neustart
</button>
<button class="btn btn-secondary btn-sm dev-action-btn" data-action="remoteLock" title="Gerät sperren">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
Sperren
</button>
<button class="btn btn-secondary btn-sm dev-action-btn" data-action="collectDiagnostics" title="Diagnose-Daten sammeln">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
Diagnose
</button>
<button class="btn btn-secondary btn-sm dev-action-btn" data-action="rotateBitLockerKeys" title="BitLocker-Schlüssel rotieren" id="devBtnBitlocker">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1"/></svg>
BitLocker
</button>
<button class="btn btn-danger btn-sm dev-action-btn" data-action="retire" title="MDM-Profil entfernen (Retire)">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
Retire
</button>
</div>
</div>
</div>
</div>
</section>
<!-- TOAST CONTAINER -->
<div id="toasts" class="toasts"></div>