This commit is contained in:
2026-03-08 00:46:30 +01:00
parent 284dd88df0
commit 40362296ee
3 changed files with 144 additions and 48 deletions

View File

@@ -177,7 +177,10 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
?>
<div class="card">
<div class="pill">Pi Control</div>
<h1 style="margin-top:.75rem;">Hosts</h1>
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.75rem;">
<h1 style="margin:0;">Hosts</h1>
<button class="cta-button" type="button" data-host-new>+ Neuer Host</button>
</div>
<p class="muted">Verwalte die Raspberry Pis, die du steuern möchtest.</p>
<?php if ($error): ?>
@@ -191,52 +194,6 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
<?php endif; ?>
<div class="grid" style="margin-top:1rem;">
<div class="card form-card" style="background:var(--panel-2);">
<strong>Neuer Host</strong>
<form method="post" class="form-grid" style="margin-top:.75rem;" data-host-form>
<input type="hidden" name="id" value="">
<label class="form-field">
<span class="muted">Name</span>
<input type="text" name="name" placeholder="z.B. Wohnzimmer-Pi" required title="Eindeutiger Anzeigename für diesen Pi.">
</label>
<label class="form-field">
<span class="muted">Host / IP</span>
<input type="text" name="host" placeholder="z.B. 192.168.178.14 oder pi.local" required title="Hostname oder IP im Heimnetzwerk.">
</label>
<label class="form-field">
<span class="muted">SSH Port</span>
<input type="number" name="port" placeholder="22" value="22" title="Standard ist 22.">
</label>
<label class="form-field">
<span class="muted">SSH Benutzer</span>
<input type="text" name="username" placeholder="z.B. pi" required title="Benutzername auf dem Pi.">
</label>
<label class="form-field">
<span class="muted">Auth-Typ</span>
<select name="auth_type" title="key = SSH-Key, password = Passwort">
<option value="key">key (SSH-Key)</option>
<option value="pass">pass (Passwort)</option>
</select>
</label>
<label class="form-field">
<span class="muted">Key-Pfad (optional)</span>
<input type="text" name="key_path" placeholder="/home/app/.ssh/id_rsa" title="Pfad zum Private-Key im Webserver-Container.">
</label>
<label class="form-field">
<span class="muted">Passwort (optional)</span>
<input type="password" name="password" placeholder="SSH-Passwort" title="Nur nutzen, wenn Auth-Typ = pass.">
</label>
<label class="form-field">
<span class="muted">Bild-URL (optional)</span>
<input type="text" name="image_url" placeholder="https://..." title="Optionales Bild für die Host-Karte.">
</label>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="cta-button" type="submit" data-host-submit>Speichern</button>
<button class="nav-link" type="button" data-host-cancel>Zurücksetzen</button>
</div>
</form>
</div>
<div class="card form-card" style="background:var(--panel-2);">
<strong>Registrierte Hosts</strong>
<?php if (!$hosts): ?>
@@ -283,3 +240,61 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
</div>
</div>
</div>
<div class="modal" data-host-modal aria-hidden="true">
<div class="modal-card">
<div class="modal-header">
<strong data-host-modal-title>Neuer Host</strong>
<button class="icon-button" type="button" data-host-close>×</button>
</div>
<form method="post" class="form-grid" style="margin-top:.75rem;" data-host-form>
<input type="hidden" name="id" value="">
<label class="form-field">
<span class="muted">Name</span>
<input type="text" name="name" placeholder="z.B. Wohnzimmer-Pi" required title="Eindeutiger Anzeigename für diesen Pi.">
</label>
<label class="form-field">
<span class="muted">Host / IP</span>
<input type="text" name="host" placeholder="z.B. 192.168.178.14 oder pi.local" required title="Hostname oder IP im Heimnetzwerk.">
</label>
<label class="form-field">
<span class="muted">SSH Port</span>
<input type="number" name="port" placeholder="22" value="22" title="Standard ist 22.">
</label>
<label class="form-field">
<span class="muted">SSH Benutzer</span>
<input type="text" name="username" placeholder="z.B. pi" required title="Benutzername auf dem Pi.">
</label>
<label class="form-field">
<span class="muted">Auth-Typ</span>
<select name="auth_type" title="key = SSH-Key, password = Passwort">
<option value="key">key (SSH-Key)</option>
<option value="pass">pass (Passwort)</option>
</select>
</label>
<label class="form-field">
<span class="muted">Key-Pfad (optional)</span>
<input type="text" name="key_path" placeholder="/home/app/.ssh/id_rsa" title="Pfad zum Private-Key im Webserver-Container.">
</label>
<label class="form-field">
<span class="muted">Passwort (optional)</span>
<input type="password" name="password" placeholder="SSH-Passwort" title="Nur nutzen, wenn Auth-Typ = pass.">
</label>
<label class="form-field">
<span class="muted">Bild-URL (optional)</span>
<input type="text" name="image_url" placeholder="https://..." title="Optionales Bild für die Host-Karte.">
</label>
<div class="host-unsaved" data-host-unsaved style="display:none;">
<span class="muted">Änderungen nicht gespeichert.</span>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="cta-button" type="submit" data-host-submit>Speichern</button>
<button class="nav-link" type="button" data-host-discard>Änderungen verwerfen</button>
</div>
</div>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="cta-button" type="submit" data-host-submit>Speichern</button>
<button class="nav-link" type="button" data-host-cancel>Zurücksetzen</button>
</div>
</form>
</div>
</div>