feat: Implement floors, locations, and racks management

- 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:
2026-02-11 14:34:07 +01:00
parent 2f341bff9f
commit 0d3c6e1ae7
26 changed files with 3753 additions and 1045 deletions

View File

@@ -1,13 +1,12 @@
<?php
/**
* modules/devices/list.php
* Vollständige Geräteübersicht
* Vollständige Geräteübersicht mit Filter
*/
// =========================
// Filter / Suche einlesen
// =========================
$search = trim($_GET['search'] ?? '');
$typeId = (int)($_GET['type_id'] ?? 0);
$locationId = (int)($_GET['location_id'] ?? 0);
@@ -17,7 +16,6 @@ $rackId = (int)($_GET['rack_id'] ?? 0);
// =========================
// WHERE-Clause dynamisch bauen
// =========================
$where = [];
$types = '';
$params = [];
@@ -31,17 +29,11 @@ if ($search !== '') {
}
if ($typeId > 0) {
$where[] = "dt.id = ?";
$where[] = "d.device_type_id = ?";
$types .= "i";
$params[] = $typeId;
}
if ($locationId > 0) {
$where[] = "l.id = ?";
$types .= "i";
$params[] = $locationId;
}
if ($floorId > 0) {
$where[] = "f.id = ?";
$types .= "i";
@@ -49,7 +41,7 @@ if ($floorId > 0) {
}
if ($rackId > 0) {
$where[] = "r.id = ?";
$where[] = "d.rack_id = ?";
$types .= "i";
$params[] = $rackId;
}
@@ -57,9 +49,8 @@ if ($rackId > 0) {
$whereSql = $where ? 'WHERE ' . implode(' AND ', $where) : '';
// =========================
// Geräte laden (inkl. Status-Aggregate)
// Geräte laden
// =========================
$devices = $sql->get(
"
SELECT
@@ -68,35 +59,16 @@ $devices = $sql->get(
d.serial_number,
d.rack_position_he,
d.rack_height_he,
dt.name AS device_type,
dt.image_path,
dt.image_type,
l.name AS location_name,
f.name AS floor_name,
r.name AS rack_name,
COUNT(dp.id) AS total_ports,
SUM(dp.status = 'active') AS active_ports,
SUM(c.id IS NOT NULL) AS connected_ports
r.name AS rack_name
FROM devices d
JOIN device_types dt ON dt.id = d.device_type_id
LEFT JOIN racks r ON r.id = d.rack_id
LEFT JOIN floors f ON f.id = r.floor_id
LEFT JOIN buildings b ON b.id = f.building_id
LEFT JOIN locations l ON l.id = b.location_id
LEFT JOIN device_ports dp ON dp.device_id = d.id
LEFT JOIN connections c
ON (c.port_a_type = 'device' AND c.port_a_id = dp.id)
OR (c.port_b_type = 'device' AND c.port_b_id = dp.id)
$whereSql
GROUP BY d.id
ORDER BY l.name, f.level, r.name, d.rack_position_he, d.name
ORDER BY f.name, r.name, d.rack_position_he, d.name
",
$types,
$params
@@ -105,138 +77,250 @@ $devices = $sql->get(
// =========================
// Filter-Daten laden
// =========================
$deviceTypes = $sql->get("SELECT id, name FROM device_types ORDER BY name", "", []);
$locations = $sql->get("SELECT id, name FROM locations ORDER BY name", "", []);
$floors = $sql->get("SELECT id, name FROM floors ORDER BY level", "", []);
$floors = $sql->get("SELECT id, name FROM floors ORDER BY name", "", []);
$racks = $sql->get("SELECT id, name FROM racks ORDER BY name", "", []);
?>
<h2>Geräte</h2>
<div class="devices-container">
<h1>Geräte</h1>
<form method="get" class="toolbar">
<input type="hidden" name="module" value="devices">
<input type="hidden" name="action" value="list">
<!-- =========================
Filter-Toolbar
========================= -->
<form method="get" class="filter-form">
<input type="hidden" name="module" value="devices">
<input type="hidden" name="action" value="list">
<input type="text" name="search" placeholder="Suche…" value="<?= htmlspecialchars($search) ?>">
<input type="text" name="search" placeholder="Suche nach Name oder Seriennummer…"
value="<?php echo htmlspecialchars($search); ?>" class="search-input">
<select name="type_id">
<option value="">Gerätetyp</option>
<?php foreach ($deviceTypes as $t): ?>
<option value="<?= $t['id'] ?>" <?= $t['id'] === $typeId ? 'selected' : '' ?>>
<?= htmlspecialchars($t['name']) ?>
</option>
<?php endforeach; ?>
</select>
<select name="type_id">
<option value="">- Alle Typen -</option>
<?php foreach ($deviceTypes as $t): ?>
<option value="<?php echo $t['id']; ?>" <?php echo $t['id'] === $typeId ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($t['name']); ?>
</option>
<?php endforeach; ?>
</select>
<select name="location_id">
<option value="">Standort</option>
<?php foreach ($locations as $l): ?>
<option value="<?= $l['id'] ?>" <?= $l['id'] === $locationId ? 'selected' : '' ?>>
<?= htmlspecialchars($l['name']) ?>
</option>
<?php endforeach; ?>
</select>
<select name="floor_id">
<option value="">- Alle Stockwerke -</option>
<?php foreach ($floors as $f): ?>
<option value="<?php echo $f['id']; ?>" <?php echo $f['id'] === $floorId ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($f['name']); ?>
</option>
<?php endforeach; ?>
</select>
<select name="floor_id">
<option value="">Floor</option>
<?php foreach ($floors as $f): ?>
<option value="<?= $f['id'] ?>" <?= $f['id'] === $floorId ? 'selected' : '' ?>>
<?= htmlspecialchars($f['name']) ?>
</option>
<?php endforeach; ?>
</select>
<select name="rack_id">
<option value="">- Alle Racks -</option>
<?php foreach ($racks as $r): ?>
<option value="<?php echo $r['id']; ?>" <?php echo $r['id'] === $rackId ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($r['name']); ?>
</option>
<?php endforeach; ?>
</select>
<select name="rack_id">
<option value="">Rack</option>
<?php foreach ($racks as $r): ?>
<option value="<?= $r['id'] ?>" <?= $r['id'] === $rackId ? 'selected' : '' ?>>
<?= htmlspecialchars($r['name']) ?>
</option>
<?php endforeach; ?>
</select>
<button type="submit" class="button">Filter</button>
<button type="submit">Filtern</button>
<a href="?module=devices&action=list" class="button">Reset</a>
<a href="/devices/edit" class="button">
+ Neues Gerät
</a>
</form>
<a href="?module=devices&action=edit" class="button button-primary" style="margin-left: auto;">
+ Neues Gerät
</a>
</form>
<?php if ($devices): ?>
<!-- =========================
Geräte-Liste
========================= -->
<?php if (!empty($devices)): ?>
<div class="device-stats">
<p>Gefundene Geräte: <strong><?php echo count($devices); ?></strong></p>
</div>
<table class="device-list">
<thead>
<tr>
<th>Vorschau</th>
<th>Name</th>
<th>Typ</th>
<th>Standort</th>
<th>Rack</th>
<th>HE</th>
<th>Ports</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<table class="device-list">
<thead>
<tr>
<th>Name</th>
<th>Typ</th>
<th>Stockwerk</th>
<th>Rack</th>
<th>Position (HE)</th>
<th>Seriennummer</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<?php foreach ($devices as $d): ?>
<tr>
<td>
<strong><?php echo htmlspecialchars($d['name']); ?></strong>
</td>
<?php foreach ($devices as $d):
$freePorts = max(0, $d['total_ports'] - $d['connected_ports']);
?>
<tr>
<td>
<?php if ($d['image_path']): ?>
<img src="<?= htmlspecialchars($d['image_path']) ?>" class="thumb">
<?php else: ?>
<?php endif; ?>
</td>
<td>
<?php echo htmlspecialchars($d['device_type']); ?>
</td>
<td>
<strong><?= htmlspecialchars($d['name']) ?></strong><br>
<small><?= htmlspecialchars($d['serial_number'] ?? '') ?></small>
</td>
<td>
<?php echo htmlspecialchars($d['floor_name'] ?? '—'); ?>
</td>
<td><?= htmlspecialchars($d['device_type']) ?></td>
<td>
<?php echo htmlspecialchars($d['rack_name'] ?? '—'); ?>
</td>
<td>
<?= htmlspecialchars($d['location_name'] ?? '—') ?><br>
<small><?= htmlspecialchars($d['floor_name'] ?? '') ?></small>
</td>
<td>
<?php
if ($d['rack_position_he']) {
echo $d['rack_position_he'];
if ($d['rack_height_he']) {
echo "" . ($d['rack_position_he'] + $d['rack_height_he'] - 1);
}
} else {
echo "—";
}
?>
</td>
<td><?= htmlspecialchars($d['rack_name'] ?? '—') ?></td>
<td>
<small><?php echo htmlspecialchars($d['serial_number'] ?? '—'); ?></small>
</td>
<td>
<?= htmlspecialchars($d['rack_position_he'] ?? '—') ?>
<?php if ($d['rack_height_he']): ?>
<?= $d['rack_position_he'] + $d['rack_height_he'] - 1 ?>
<?php endif; ?>
</td>
<td class="actions">
<a href="?module=devices&action=edit&id=<?php echo $d['id']; ?>" class="button button-small">Bearbeiten</a>
<a href="#" class="button button-small button-danger" onclick="confirmDelete(<?php echo $d['id']; ?>)">Löschen</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<td>
<?= (int)$d['connected_ports'] ?>/<?= (int)$d['total_ports'] ?>
<br>
<small><?= $freePorts ?> frei</small>
</td>
<td class="actions">
<a href="/devices/ports?id=<?= $d['id'] ?>">Ports</a>
<a href="/devices/edit?id=<?= $d['id'] ?>">Bearbeiten</a>
<a href="/devices/delete?id=<?= $d['id'] ?>"
onclick="return confirm('Gerät wirklich löschen?')">
Löschen
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else: ?>
<div class="empty-state">
<p>Keine Geräte gefunden.</p>
<?php else: ?>
<div class="empty-state">
<p>Keine Geräte gefunden.</p>
<p>
<a href="?module=devices&action=edit" class="button button-primary">
Erstes Gerät anlegen
</a>
</p>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<style>
.devices-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.filter-form {
display: flex;
gap: 10px;
margin: 20px 0;
flex-wrap: wrap;
align-items: center;
}
.filter-form input,
.filter-form select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
}
.search-input {
flex: 1;
min-width: 250px;
}
.device-stats {
background: #f0f0f0;
padding: 10px 15px;
border-radius: 4px;
margin: 15px 0;
}
.device-list {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.device-list th {
background: #f5f5f5;
padding: 12px;
text-align: left;
border-bottom: 2px solid #ddd;
font-weight: bold;
}
.device-list td {
padding: 12px;
border-bottom: 1px solid #ddd;
}
.device-list tr:hover {
background: #f9f9f9;
}
.actions {
white-space: nowrap;
}
.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 Gerät wirklich löschen?')) {
// TODO: AJAX-Delete implementieren
alert('Löschen noch nicht implementiert');
}
}
</script>