Autostart-Funktionalität implementiert: Crontab-Syntax, Scheduler und UI-Integration

This commit is contained in:
2025-08-22 07:49:45 +02:00
parent b6888ca5da
commit 5bfc380a37
9 changed files with 521 additions and 58 deletions

View File

@ -157,12 +157,21 @@ class PCManager {
</td>
<td>${new Date(pc.created_at).toLocaleDateString('de-DE')}</td>
<td>
<div class="mb-1">
<small class="text-muted">
<i class="fas fa-clock"></i> Autostart:
${pc.autostart_enabled ?
`<span class="text-success">${this.escapeHtml(pc.autostart_cron || '30 7 * * Mon-Fri')}</span>` :
'<span class="text-muted">Deaktiviert</span>'
}
</small>
</div>
<div class="btn-group" role="group">
<button class="btn btn-success btn-sm" onclick="pcManager.wakePC(${pc.id})"
title="PC aufwecken">
<i class="fas fa-power-off"></i> Aufwecken
</button>
<button class="btn btn-warning btn-sm" onclick="pcManager.editPC(${pc.id}, '${this.escapeHtml(pc.name)}', '${this.escapeHtml(pc.mac)}', '${this.escapeHtml(pc.ip || '')}')"
<button class="btn btn-warning btn-sm" onclick="pcManager.editPC(${pc.id}, '${this.escapeHtml(pc.name)}', '${this.escapeHtml(pc.mac)}', '${this.escapeHtml(pc.ip || '')}', '${this.escapeHtml(pc.autostart_cron || '')}', ${pc.autostart_enabled})"
title="PC bearbeiten">
<i class="fas fa-edit"></i> Bearbeiten
</button>
@ -183,9 +192,11 @@ class PCManager {
const name = document.getElementById('pcName').value.trim();
const mac = document.getElementById('macAddress').value.trim();
const ip = document.getElementById('ipAddress').value.trim();
const autostartCron = document.getElementById('autostartCron').value.trim();
const autostartEnabled = document.getElementById('autostartEnabled').checked;
if (!name || !mac || !ip) {
this.showNotification('Warnung', 'Bitte füllen Sie alle Felder aus', 'warning');
this.showNotification('Warnung', 'Bitte füllen Sie alle Pflichtfelder aus', 'warning');
return;
}
@ -195,7 +206,13 @@ class PCManager {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, mac, ip })
body: JSON.stringify({
name,
mac,
ip,
autostart_cron: autostartCron || '30 7 * * Mon-Fri',
autostart_enabled: autostartEnabled
})
});
const data = await response.json();
@ -212,12 +229,14 @@ class PCManager {
}
}
editPC(id, name, mac, ip) {
editPC(id, name, mac, ip, autostartCron, autostartEnabled) {
// Modal mit PC-Daten füllen
document.getElementById('editPCId').value = id;
document.getElementById('editPCName').value = name;
document.getElementById('editMACAddress').value = mac;
document.getElementById('editIPAddress').value = ip;
document.getElementById('editAutostartCron').value = autostartCron || '30 7 * * Mon-Fri';
document.getElementById('editAutostartEnabled').checked = autostartEnabled || false;
// Modal öffnen
const editModal = new bootstrap.Modal(document.getElementById('editPCModal'));
@ -229,9 +248,11 @@ class PCManager {
const name = document.getElementById('editPCName').value.trim();
const mac = document.getElementById('editMACAddress').value.trim();
const ip = document.getElementById('editIPAddress').value.trim();
const autostartCron = document.getElementById('editAutostartCron').value.trim();
const autostartEnabled = document.getElementById('editAutostartEnabled').checked;
if (!name || !mac || !ip) {
this.showNotification('Warnung', 'Bitte füllen Sie alle Felder aus', 'warning');
this.showNotification('Warnung', 'Bitte füllen Sie alle Pflichtfelder aus', 'warning');
return;
}
@ -241,7 +262,13 @@ class PCManager {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, mac, ip })
body: JSON.stringify({
name,
mac,
ip,
autostart_cron: autostartCron || '30 7 * * Mon-Fri',
autostart_enabled: autostartEnabled
})
});
const data = await response.json();

View File

@ -281,6 +281,29 @@ body {
border-top-color: var(--brand-primary) !important;
}
/* Autostart-Checkbox Styling - vereinfacht */
.form-check {
display: flex;
align-items: center;
min-height: 38px; /* Gleiche Höhe wie form-control */
}
/* Spezifische Ausrichtung für die Autostart-Zeile */
.row .col-md-6 .form-check {
height: 38px;
display: flex;
align-items: center;
}
/* Mehr Abstand zwischen Checkbox und Label */
.form-check-input[type="checkbox"] {
margin-right: 0.5em; /* Erhöhter Abstand zur Checkbox */
}
.form-check-label {
margin-left: 0.5em; /* Zusätzlicher Abstand zum Label */
}
/* Content Header */
.content-header {
text-align: center;

View File

@ -75,6 +75,31 @@
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="autostartCron" class="form-label">Autostart (Crontab)</label>
<input type="text" class="form-control" id="autostartCron"
placeholder="30 7 * * Mon-Fri"
title="Format: Minute Stunde Tag Monat Wochentag">
<div class="form-text">
<a href="https://crontab.guru/" target="_blank" class="text-decoration-none">
<i class="fas fa-external-link-alt"></i> Crontab-Guru für Hilfe
</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<div class="form-check mt-4">
<input class="form-check-input" type="checkbox" id="autostartEnabled">
<label class="form-check-label" for="autostartEnabled">
Autostart aktiv
</label>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> PC hinzufügen
</button>
@ -176,6 +201,25 @@
<input type="text" class="form-control" id="editIPAddress"
placeholder="192.168.1.100" required>
</div>
<div class="mb-3">
<label for="editAutostartCron" class="form-label">Autostart (Crontab)</label>
<input type="text" class="form-control" id="editAutostartCron"
placeholder="30 7 * * Mon-Fri"
title="Format: Minute Stunde Tag Monat Wochentag">
<div class="form-text">
<a href="https://crontab.guru/" target="_blank" class="text-decoration-none">
<i class="fas fa-external-link-alt"></i> Crontab-Guru für Hilfe
</a>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editAutostartEnabled">
<label class="form-check-label" for="editAutostartEnabled">
Autostart aktiv
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">