netwatch/app/modules/racks/edit.php

<?php
/**
 * app/modules/racks/edit.php
 *
 * Rack anlegen oder bearbeiten
 * - Name, Beschreibung
 * - Zugehöriges Stockwerk (Floor)
 * - Höhe in Höheneinheiten (HE)
 */

// =========================
// Kontext bestimmen
// =========================
$rackId = (int)($_GET['id'] ?? 0);
$rack = null;

if ($rackId > 0) {
    $rack = $sql->single(
        "SELECT * FROM racks WHERE id = ?",
        "i",
        [$rackId]
    );
}

$isEdit = !empty($rack);
$pageTitle = $isEdit ? "Rack bearbeiten: " . htmlspecialchars($rack['name']) : "Neues Rack";

// =========================
// Floors laden
// =========================
$floors = $sql->get("SELECT id, name FROM floors ORDER BY name", "", []);

?>

<div class="rack-edit">
    <h1><?php echo $pageTitle; ?></h1>

    <form method="post" action="?module=racks&action=save" class="edit-form">

        <?php if ($isEdit): ?>
        <input type="hidden" name="id" value="<?php echo $rackId; ?>">
        <?php endif; ?>

        <!-- =========================
             Basisdaten
             ========================= -->
        <fieldset>
            <legend>Allgemein</legend>

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

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

        <!-- =========================
             Standort & Höhe
             ========================= -->
        <fieldset>
            <legend>Standort & Größe</legend>

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

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

        <!-- =========================
             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>

    </form>
</div>

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

    <fieldset>
        <legend>Rack-Layout</legend>

        <div class="svg-editor-container">
            <svg
                id="rack-svg"
                viewBox="0 0 200 1000"
                width="100%"
                height="600"
            >
                <!-- TODO: Rack-SVG laden -->
            </svg>
        </div>

        <p class="hint">
            Geräte per Drag & Drop im Rack positionieren.
        </p>
    </fieldset>

    <!-- =========================
         Aktionen
         ========================= -->

    <fieldset>
        <button type="submit">Speichern</button>
        <button type="button" onclick="history.back()">Abbrechen</button>
        <!-- TODO: Löschen, falls edit -->
    </fieldset>

</form>

<!-- =========================
     JS-Konfiguration
     ========================= -->

<script>
    /**
     * Konfiguration für Rack-SVG-Editor
     */

    // TODO: Rack-ID aus PHP setzen
    // window.RACK_ID = <?= (int)$rackId ?>;

    // TODO: Gerätepositionen an JS übergeben
    // window.RACK_DEVICES = <?= json_encode($rackDevices ?? []) ?>;
</script>