netwatch/app/modules/racks/list.php

<?php
/**
 * app/modules/racks/list.php
 *
 * Uebersicht aller Racks.
 */

$search = trim((string)($_GET['search'] ?? ''));
$floorId = (int)($_GET['floor_id'] ?? 0);

$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 = $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
);

$floors = $sql->get('SELECT id, name FROM floors ORDER BY name', '', []);
?>

<div class="racks-container">
    <h1>Racks</h1>

    <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">

            <input type="text" name="search" placeholder="Suche nach Name..." value="<?php echo htmlspecialchars($search); ?>" class="search-input">

            <select name="floor_id">
                <option value="">- Alle Stockwerke -</option>
                <?php foreach ($floors as $floor): ?>
                    <option value="<?php echo (int)$floor['id']; ?>" <?php echo ((int)$floor['id'] === $floorId) ? 'selected' : ''; ?>>
                        <?php echo htmlspecialchars((string)$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>

    <?php if (!empty($racks)): ?>
        <table class="rack-list">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Stockwerk</th>
                    <th>Hoehe (HE)</th>
                    <th>Geraete</th>
                    <th>Beschreibung</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($racks as $rack): ?>
                    <tr>
                        <td><strong><?php echo htmlspecialchars((string)$rack['name']); ?></strong></td>
                        <td><?php echo htmlspecialchars((string)($rack['floor_name'] ?? '-')); ?></td>
                        <td><?php echo (int)$rack['height_he']; ?> HE</td>
                        <td><?php echo (int)$rack['device_count']; ?></td>
                        <td><small><?php echo htmlspecialchars((string)($rack['comment'] ?? '')); ?></small></td>
                        <td class="actions">
                            <a href="?module=racks&action=edit&id=<?php echo (int)$rack['id']; ?>" class="button button-small">Bearbeiten</a>
                            <a href="#" class="button button-small button-danger" onclick="return confirmDelete(<?php echo (int)$rack['id']; ?>)">Loeschen</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>

<style>
.racks-container { padding: 20px; max-width: 1000px; margin: 0 auto; }
.filter-form { margin: 20px 0; }
.filter-form input, .filter-form select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; }
.search-input { flex: 1; min-width: 250px; }
.rack-list { width: 100%; border-collapse: collapse; margin: 15px 0; }
.rack-list th { background: #f5f5f5; padding: 12px; text-align: left; border-bottom: 2px solid #ddd; font-weight: bold; }
.rack-list td { padding: 12px; border-bottom: 1px solid #ddd; }
.rack-list tr:hover { background: #f9f9f9; }
.actions { white-space: nowrap; }
.button { display: inline-block; padding: 8px 12px; background: #007bff; color: #fff; 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 loeschen?')) {
        return false;
    }

    fetch('?module=racks&action=delete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body: 'id=' + encodeURIComponent(id)
    })
        .then((res) => res.json())
        .then((data) => {
            if (data && data.success) {
                window.location.reload();
                return;
            }
            alert((data && data.message) ? data.message : 'Loeschen fehlgeschlagen');
        })
        .catch(() => alert('Loeschen fehlgeschlagen'));

    return false;
}
</script>