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

229
app/modules/racks/edit.php
View File

@@ -1,83 +1,208 @@
<?php
/**
* app/racks/edit.php
* app/modules/racks/edit.php
*
* Rack anlegen oder bearbeiten
* - Name, Beschreibung
* - Zugehöriges Stockwerk (Floor)
* - Höhe / Slots
* - Gerätepositionen (optional Vorschau)
* - Höhe in Höheneinheiten (HE)
*/
// TODO: bootstrap laden
// require_once __DIR__ . '/../../bootstrap.php';
// TODO: Auth erzwingen
// requireAuth();
// =========================
// Kontext bestimmen
// =========================
$rackId = (int)($_GET['id'] ?? 0);
$rack = null;
// Rack-ID aus GET
// $rackId = (int)($_GET['id'] ?? 0);
if ($rackId > 0) {
$rack = $sql->single(
"SELECT * FROM racks WHERE id = ?",
"i",
[$rackId]
);
}
// TODO: Rack aus DB laden, falls ID vorhanden
// $rack = null;
$isEdit = !empty($rack);
$pageTitle = $isEdit ? "Rack bearbeiten: " . htmlspecialchars($rack['name']) : "Neues Rack";
// TODO: Floors laden für Auswahl
// $floors = $sql->get("SELECT * FROM floors ORDER BY name", "", []);
// =========================
// Floors laden
// =========================
$floors = $sql->get("SELECT id, name FROM floors ORDER BY name", "", []);
?>
<h2>Rack bearbeiten</h2>
<div class="rack-edit">
<h1><?php echo $pageTitle; ?></h1>
<form method="post" action="/app/racks/save.php" enctype="multipart/form-data">
<form method="post" action="?module=racks&action=save" class="edit-form">
<!-- =========================
Basisdaten
========================= -->
<?php if ($isEdit): ?>
<input type="hidden" name="id" value="<?php echo $rackId; ?>">
<?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($rack['name'] ?? ''); ?>"
placeholder="z.B. Rack A1">
</div>
<br><br>
<div class="form-group">
<label for="comment">Beschreibung</label>
<textarea id="comment" name="comment" rows="3"
placeholder="z.B. Standort, Besonderheiten"><?php echo htmlspecialchars($rack['comment'] ?? ''); ?></textarea>
</div>
</fieldset>
<label>
Beschreibung<br>
<textarea name="description"></textarea>
<!-- TODO: Beschreibung vorbelegen -->
</label>
</fieldset>
<!-- =========================
Standort & Höhe
========================= -->
<fieldset>
<legend>Standort & Größe</legend>
<!-- =========================
Zugehöriges Floor
========================= -->
<div class="form-group">
<label for="floor_id">Stockwerk <span class="required">*</span></label>
<select id="floor_id" name="floor_id" required>
<option value="">- Wählen -</option>
<?php foreach ($floors as $floor): ?>
<option value="<?php echo $floor['id']; ?>"
<?php echo ($rack['floor_id'] ?? 0) == $floor['id'] ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($floor['name']); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<fieldset>
<legend>Stockwerk / Standort</legend>
<div class="form-group">
<label for="height_he">Höhe in Höheneinheiten (HE) <span class="required">*</span></label>
<input type="number" id="height_he" name="height_he" required min="1" max="100"
value="<?php echo htmlspecialchars($rack['height_he'] ?? '42'); ?>"
placeholder="z.B. 42">
<small>Standard: 42 HE (ca. 2 Meter)</small>
</div>
</fieldset>
<label>
Stockwerk<br>
<select name="floor_id">
<!-- TODO: Floors aus DB -->
</select>
</label>
<!-- =========================
Aktionen
========================= -->
<fieldset class="form-actions">
<button type="submit" class="button button-primary">Speichern</button>
<a href="?module=racks&action=list" class="button">Abbrechen</a>
<?php if ($isEdit): ?>
<a href="#" class="button button-danger" onclick="confirmDelete(<?php echo $rackId; ?>)">Löschen</a>
<?php endif; ?>
</fieldset>
<br><br>
</form>
</div>
<label>
Höhe (Anzahl U)<br>
<input type="number" name="height" value="">
<!-- TODO: Höhe vorbelegen -->
</label>
</fieldset>
<style>
.rack-edit {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.edit-form {
background: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.edit-form fieldset {
margin: 20px 0;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.edit-form legend {
padding: 0 10px;
font-weight: bold;
font-size: 1.1em;
}
.form-group {
margin: 15px 0;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.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;
}
.form-group textarea {
resize: vertical;
}
.form-group small {
display: block;
margin-top: 5px;
color: #666;
}
.required {
color: red;
}
.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>
function confirmDelete(id) {
if (confirm('Dieses Rack wirklich löschen? Alle Geräte werden aus dem Rack entfernt.')) {
// TODO: AJAX-Delete implementieren
alert('Löschen noch nicht implementiert');
}
}
</script>
<!-- =========================
Rack-SVG / Gerätepositionen

299
app/modules/racks/list.php
View File

@@ -1,102 +1,261 @@
<?php
/**
* app/racks/list.php
* app/modules/racks/list.php
*
* Übersicht aller Racks
* - Anzeigen
* - Bearbeiten
* - Löschen
* - Zugehöriges Floor anzeigen
* - SVG-Vorschau optional
* - Anzeigen, Bearbeiten, Löschen
* - Zugehöriges Stockwerk anzeigen
* - Gerätecount
*/
// TODO: bootstrap laden
// require_once __DIR__ . '/../../bootstrap.php';
// =========================
// Filter einlesen
// =========================
$search = trim($_GET['search'] ?? '');
$floorId = (int)($_GET['floor_id'] ?? 0);
// TODO: Auth erzwingen
// requireAuth();
// =========================
// WHERE-Clause bauen
// =========================
$where = [];
$types = '';
$params = [];
if ($search !== '') {
$where[] = "r.name LIKE ?";
$types .= "s";
$params[] = "%$search%";
}
if ($floorId > 0) {
$where[] = "r.floor_id = ?";
$types .= "i";
$params[] = $floorId;
}
$whereSql = $where ? "WHERE " . implode(" AND ", $where) : "";
// =========================
// Racks laden
// =========================
$racks = $sql->get(
"SELECT r.*, f.name AS floor_name, COUNT(d.id) AS device_count
FROM racks r
LEFT JOIN floors f ON r.floor_id = f.id
LEFT JOIN devices d ON d.rack_id = r.id
$whereSql
GROUP BY r.id
ORDER BY f.name, r.name",
$types,
$params
);
// TODO: Racks aus DB laden
// $racks = $sql->get("SELECT r.*, f.name AS floor_name FROM racks r LEFT JOIN floors f ON r.floor_id = f.id ORDER BY r.name", "", []);
// =========================
// Filter-Daten laden
// =========================
$floors = $sql->get("SELECT id, name FROM floors ORDER BY name", "", []);
?>
<h2>Racks</h2>
<div class="racks-container">
<h1>Racks</h1>
<!-- =========================
Toolbar
========================= -->
<!-- =========================
Toolbar
========================= -->
<div class="filter-form">
<form method="GET" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
<input type="hidden" name="module" value="racks">
<input type="hidden" name="action" value="list">
<div class="toolbar">
<a href="/?page=racks/edit" class="button">
+ Neues Rack
</a>
<input type="text" name="search" placeholder="Suche nach Name…"
value="<?php echo htmlspecialchars($search); ?>" class="search-input">
<!-- TODO: Suchfeld -->
<!-- TODO: Filter (Floor / Standort) -->
<select name="floor_id">
<option value="">- Alle Stockwerke -</option>
<?php foreach ($floors as $floor): ?>
<option value="<?php echo $floor['id']; ?>"
<?php echo $floor['id'] === $floorId ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($floor['name']); ?>
</option>
<?php endforeach; ?>
</select>
<button type="submit" class="button">Filter</button>
<a href="?module=racks&action=list" class="button">Reset</a>
<a href="?module=racks&action=edit" class="button button-primary" style="margin-left: auto;">+ Neues Rack</a>
</form>
</div>
<!-- =========================
Racks-Tabelle
========================= -->
<?php if (!empty($racks)): ?>
<table class="rack-list">
<thead>
<tr>
<th>Name</th>
<th>Stockwerk</th>
<th>Höhe (HE)</th>
<th>Geräte</th>
<th>Beschreibung</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<?php foreach ($racks as $rack): ?>
<tr>
<td>
<strong><?php echo htmlspecialchars($rack['name']); ?></strong>
</td>
<td>
<?php echo htmlspecialchars($rack['floor_name'] ?? '—'); ?>
</td>
<td>
<?php echo $rack['height_he']; ?> HE
</td>
<td>
<?php echo $rack['device_count']; ?>
</td>
<td>
<small><?php echo htmlspecialchars($rack['comment'] ?? ''); ?></small>
</td>
<td class="actions">
<a href="?module=racks&action=edit&id=<?php echo $rack['id']; ?>" class="button button-small">Bearbeiten</a>
<a href="#" class="button button-small button-danger" onclick="confirmDelete(<?php echo $rack['id']; ?>)">Löschen</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else: ?>
<div class="empty-state">
<p>Keine Racks gefunden.</p>
<p>
<a href="?module=racks&action=edit" class="button button-primary">
Erstes Rack anlegen
</a>
</p>
</div>
<?php endif; ?>
</div>
<!-- =========================
Rack-Tabelle
========================= -->
<style>
.racks-container {
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
<table class="rack-list">
<thead>
<tr>
<th>Vorschau</th>
<th>Name</th>
<th>Stockwerk</th>
<th>Höhe (U)</th>
<th>Geräte</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
.filter-form {
margin: 20px 0;
}
<?php /* foreach ($racks as $rack): */ ?>
<tr>
<td class="preview">
<!-- TODO: SVG / JPG Thumbnail -->
</td>
.filter-form form {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
<td>
<!-- TODO: Rack-Name -->
Rack 1
</td>
.filter-form input,
.filter-form select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
}
<td>
<!-- TODO: Floor / Standort -->
</td>
.search-input {
flex: 1;
min-width: 250px;
}
<td>
<!-- TODO: Höhe -->
</td>
.rack-list {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
<td>
<!-- TODO: Anzahl Geräte im Rack -->
</td>
.rack-list th {
background: #f5f5f5;
padding: 12px;
text-align: left;
border-bottom: 2px solid #ddd;
font-weight: bold;
}
<td>
<a href="/?page=racks/edit&id=1">Bearbeiten</a>
<button>Löschen</button>
</td>
</tr>
<?php /* endforeach; */ ?>
.rack-list td {
padding: 12px;
border-bottom: 1px solid #ddd;
}
</tbody>
</table>
.rack-list tr:hover {
background: #f9f9f9;
}
<!-- =========================
Leerer Zustand
========================= -->
.actions {
white-space: nowrap;
}
<?php /* if (empty($racks)): */ ?>
<div class="empty-state">
<p>Noch keine Racks angelegt.</p>
<p><a href="/?page=racks/edit">Erstes Rack anlegen</a></p>
.button {
display: inline-block;
padding: 8px 12px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 0.9em;
}
.button:hover {
background: #0056b3;
}
.button-primary {
background: #28a745;
}
.button-primary:hover {
background: #218838;
}
.button-small {
padding: 4px 8px;
font-size: 0.85em;
}
.button-danger {
background: #dc3545;
}
.button-danger:hover {
background: #c82333;
}
.empty-state {
text-align: center;
padding: 40px 20px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 8px;
}
</style>
<script>
function confirmDelete(id) {
if (confirm('Dieses Rack wirklich löschen?')) {
// TODO: AJAX-Delete implementieren
alert('Löschen noch nicht implementiert');
}
}
</script>
</div>
<?php /* endif; */ ?>

73
app/modules/racks/save.php Normal file
View File

@@ -0,0 +1,73 @@
<?php
/**
* app/modules/racks/save.php
*
* Speichert / aktualisiert ein Rack
*/
// Nur POST
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
header('Location: ?module=racks&action=list');
exit;
}
// =========================
// Daten einlesen
// =========================
$rackId = (int)($_POST['id'] ?? 0);
$name = trim($_POST['name'] ?? '');
$floorId = (int)($_POST['floor_id'] ?? 0);
$heightHe = (int)($_POST['height_he'] ?? 42);
$comment = trim($_POST['comment'] ?? '');
// =========================
// Validierung
// =========================
$errors = [];
if (empty($name)) {
$errors[] = "Name ist erforderlich";
}
if ($floorId <= 0) {
$errors[] = "Stockwerk ist erforderlich";
}
if ($heightHe < 1) {
$errors[] = "Höhe muss mindestens 1 HE sein";
}
// Falls Fehler: zurück zum Edit-Formular
if (!empty($errors)) {
$_SESSION['error'] = implode(', ', $errors);
$redirectUrl = $rackId ? "?module=racks&action=edit&id=$rackId" : "?module=racks&action=edit";
header("Location: $redirectUrl");
exit;
}
// =========================
// In DB speichern
// =========================
if ($rackId > 0) {
// UPDATE
$sql->set(
"UPDATE racks SET name = ?, floor_id = ?, height_he = ?, comment = ? WHERE id = ?",
"siisi",
[$name, $floorId, $heightHe, $comment, $rackId]
);
} else {
// INSERT
$sql->set(
"INSERT INTO racks (name, floor_id, height_he, comment) VALUES (?, ?, ?, ?)",
"sii s",
[$name, $floorId, $heightHe, $comment]
);
}
$_SESSION['success'] = "Rack gespeichert";
// =========================
// Redirect
// =========================
header('Location: ?module=racks&action=list');
exit;