troy-grunt/netwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement floors, locations, and racks management

Browse Source 
- Added list, edit, and save functionalities for floors, locations, and racks.
- Enhanced UI with search and filter options for better usability.
- Implemented SVG upload for floor plans in the floors module.
- Added validation for required fields in the save processes.
- Improved navigation in the header to reflect new modules.
- Styled forms and tables for a consistent look and feel across modules.
This commit is contained in:
fixclean
2026-02-11 14:34:07 +01:00
parent 2f341bff9f
commit 0d3c6e1ae7
26 changed files with 3753 additions and 1045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
app/modules/devices/edit.php
View File

@@ -1,156 +1,234 @@
<?php
/**
* app/devices/edit.php
* app/modules/devices/edit.php
*
* Konkretes Gerät anlegen / bearbeiten
* - Name, Beschreibung, Standort (Rack / Floor)
* - Name, Seriennummer
* - Gerätetyp wählen
* - Ports automatisch vom Device-Type übernehmen
* - SVG-Position im Rack / Floor
* - Optional: Notizen / Kommentare
* - Standort (Rack, HE-Position)
*/
// TODO: bootstrap laden
// require_once __DIR__ . '/../../bootstrap.php';
// TODO: Auth erzwingen
// requireAuth();
// =========================
// Kontext bestimmen
// =========================
$deviceId = (int)($_GET['id'] ?? 0);
$device = null;
// Gerät-ID aus GET
// $deviceId = (int)($_GET['id'] ?? 0);
if ($deviceId > 0) {
$device = $sql->single(
"SELECT d.* FROM devices d WHERE d.id = ?",
"i",
[$deviceId]
);
}
// TODO: Gerät aus DB laden, falls ID vorhanden
// $device = null;
$isEdit = !empty($device);
$pageTitle = $isEdit ? "Gerät bearbeiten: " . htmlspecialchars($device['name']) : "Neues Gerät";
// TODO: Alle Device-Types laden
// $deviceTypes = $sql->get("SELECT * FROM device_types ORDER BY name", "", []);
// TODO: Wenn Gerät vorhanden, Ports laden (vom Device-Type)
$ports = []; // TODO: Ports vorbereiten
// =========================
// Optionen laden
// =========================
$deviceTypes = $sql->get("SELECT id, name, category FROM device_types ORDER BY name", "", []);
$racks = $sql->get("SELECT id, name FROM racks ORDER BY name", "", []);
?>
<h2>Gerät bearbeiten</h2>
<div class="device-edit">
<h1><?php echo $pageTitle; ?></h1>
<form method="post" action="/devices/save" enctype="multipart/form-data">
<form method="post" action="?module=devices&action=save" class="edit-form">
<!-- =========================
Basisdaten
========================= -->
<?php if ($isEdit): ?>
<input type="hidden" name="id" value="<?php echo $deviceId; ?>">
<?php endif; ?>
<fieldset>
<legend>Allgemein</legend>
<!-- =========================
Basisdaten
========================= -->
<fieldset>
<legend>Allgemein</legend>
<label>
Name<br>
<input type="text" name="name" value="">
<!-- TODO: Name vorbelegen -->
</label>
<div class="form-group">
<label for="name">Name <span class="required">*</span></label>
<input type="text" id="name" name="name" required
value="<?php echo htmlspecialchars($device['name'] ?? ''); ?>"
placeholder="z.B. Core Switch 1">
</div>
<br><br>
<div class="form-group">
<label for="device_type_id">Gerätetyp <span class="required">*</span></label>
<select id="device_type_id" name="device_type_id" required>
<option value="">- Wählen -</option>
<?php foreach ($deviceTypes as $type): ?>
<option value="<?php echo $type['id']; ?>"
<?php echo ($device['device_type_id'] ?? 0) == $type['id'] ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($type['name']); ?>
<small>(<?php echo $type['category']; ?>)</small>
</option>
<?php endforeach; ?>
</select>
</div>
<label>
Beschreibung<br>
<textarea name="description"></textarea>
<!-- TODO: Beschreibung vorbelegen -->
</label>
<div class="form-group">
<label for="serial_number">Seriennummer</label>
<input type="text" id="serial_number" name="serial_number"
value="<?php echo htmlspecialchars($device['serial_number'] ?? ''); ?>"
placeholder="Optionales Feld">
</div>
<br><br>
<div class="form-group">
<label for="comment">Kommentar</label>
<textarea id="comment" name="comment" rows="3"
placeholder="Notizen zu diesem Gerät"><?php echo htmlspecialchars($device['comment'] ?? ''); ?></textarea>
</div>
</fieldset>
<label>
Gerätetyp<br>
<select name="device_type_id">
<!-- TODO: Device-Types aus DB -->
<option value="1">Switch</option>
</select>
</label>
</fieldset>
<!-- =========================
Standort im Rack
========================= -->
<fieldset>
<legend>Standort</legend>
<!-- =========================
Standort / Rack / Floor
========================= -->
<div class="form-group">
<label for="rack_id">Rack <span class="required">*</span></label>
<select id="rack_id" name="rack_id" required>
<option value="">- Wählen -</option>
<?php foreach ($racks as $rack): ?>
<option value="<?php echo $rack['id']; ?>"
<?php echo ($device['rack_id'] ?? 0) == $rack['id'] ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($rack['name']); ?>
</option>
<?php endforeach; ?>
</select>
<small>Wählen Sie das Rack, in dem sich das Gerät befindet.</small>
</div>
<fieldset>
<legend>Standort</legend>
<div class="form-group">
<label for="rack_position_he">Position im Rack (HE) <span class="required">*</span></label>
<input type="number" id="rack_position_he" name="rack_position_he" required min="1"
value="<?php echo htmlspecialchars($device['rack_position_he'] ?? ''); ?>"
placeholder="Höheneinheit von oben">
</div>
<label>
Stockwerk<br>
<select name="floor_id">
<!-- TODO: Floors laden -->
</select>
</label>
<div class="form-group">
<label for="rack_height_he">Höhe (HE) <span class="required">*</span></label>
<input type="number" id="rack_height_he" name="rack_height_he" required min="1"
value="<?php echo htmlspecialchars($device['rack_height_he'] ?? '1'); ?>"
placeholder="Anzahl Höheneinheiten">
</div>
</fieldset>
<br><br>
<!-- =========================
Aktionen
========================= -->
<fieldset class="form-actions">
<button type="submit" class="button button-primary">Speichern</button>
<a href="?module=devices&action=list" class="button">Abbrechen</a>
<?php if ($isEdit): ?>
<a href="#" class="button button-danger" onclick="confirmDelete(<?php echo $deviceId; ?>)">Löschen</a>
<?php endif; ?>
</fieldset>
<label>
Rack<br>
<select name="rack_id">
<!-- TODO: Racks laden -->
</select>
</label>
</form>
</div>
<br><br>
<style>
.device-edit {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
<label>
Position im Rack<br>
<input type="number" name="rack_position" value="">
</label>
</fieldset>
.edit-form {
background: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
<!-- =========================
Ports
========================= -->
.edit-form fieldset {
margin: 20px 0;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
<fieldset>
<legend>Ports</legend>
.edit-form legend {
padding: 0 10px;
font-weight: bold;
font-size: 1.1em;
}
<p class="hint">Ports werden vom Device-Type übernommen. Positionen können angepasst werden.</p>
.form-group {
margin: 15px 0;
}
<div class="svg-editor-container">
<svg
id="device-svg"
viewBox="0 0 800 400"
width="100%"
height="400"
>
<!-- TODO: SVG laden -->
</svg>
</div>
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
<!-- TODO: Port-Liste -->
<div class="port-list">
<!-- Ports mit Typ, Name, Modus, VLAN -->
</div>
</fieldset>
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
}
<!-- =========================
Aktionen
========================= -->
.form-group textarea {
resize: vertical;
}
<fieldset>
<button type="submit">Speichern</button>
<button type="button" onclick="history.back()">Abbrechen</button>
<!-- TODO: Löschen, falls edit -->
</fieldset>
.form-group small {
display: block;
margin-top: 5px;
color: #666;
}
</form>
.required {
color: red;
}
<!-- =========================
JS-Konfiguration
========================= -->
.form-actions {
display: flex;
gap: 10px;
margin-top: 30px;
}
.button {
padding: 10px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 0.95em;
}
.button-primary {
background: #28a745;
}
.button-danger {
background: #dc3545;
}
.button:hover {
opacity: 0.8;
}
</style>
<script>
/**
* SVG-Editor Konfiguration
*/
// TODO: Device-ID setzen
// window.DEVICE_ID = <?= (int)$deviceId ?>;
// TODO: Ports an JS übergeben
// window.DEVICE_PORTS = <?= json_encode($ports) ?>;
function confirmDelete(id) {
if (confirm('Dieses Gerät wirklich löschen?')) {
// TODO: AJAX-Delete implementieren
alert('Löschen noch nicht implementiert');
}
}
</script>