Files
netwatch/app/modules/floors/edit.php

285 lines
8.0 KiB
PHP

<?php
/**
* app/modules/floors/edit.php
*
* Floor / Stockwerk anlegen oder bearbeiten
* - Name, Ebene, Beschreibung
* - Zugehöriges Gebäude
* - SVG-Grundriss mit Linien-Editor (Polylinien)
*/
$floorId = (int)($_GET['id'] ?? 0);
$floor = null;
if ($floorId > 0) {
$floor = $sql->single(
"SELECT * FROM floors WHERE id = ?",
"i",
[$floorId]
);
}
$isEdit = !empty($floor);
$pageTitle = $isEdit ? "Stockwerk bearbeiten: " . htmlspecialchars($floor['name']) : "Neues Stockwerk";
$buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
$prefillBuildingId = (int)($_GET['building_id'] ?? 0);
$selectedBuildingId = $floor['building_id'] ?? $prefillBuildingId;
$existingSvgContent = '';
if (!empty($floor['svg_path'])) {
$relativePath = ltrim((string)$floor['svg_path'], "/\\");
$absolutePath = __DIR__ . '/../../' . $relativePath;
if (is_file($absolutePath) && is_readable($absolutePath)) {
$existingSvgContent = file_get_contents($absolutePath) ?: '';
}
}
?>
<div class="floor-edit">
<h1><?php echo $pageTitle; ?></h1>
<form method="post" action="?module=floors&action=save" class="edit-form">
<?php if ($isEdit): ?>
<input type="hidden" name="id" value="<?php echo $floorId; ?>">
<?php endif; ?>
<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($floor['name'] ?? ''); ?>"
placeholder="z.B. Erdgeschoss">
</div>
<div class="form-group">
<label for="level">Ebene</label>
<input type="number" id="level" name="level"
value="<?php echo htmlspecialchars($floor['level'] ?? '0'); ?>"
placeholder="z.B. 0 für EG, 1 für 1. OG">
</div>
<div class="form-group">
<label for="comment">Beschreibung</label>
<textarea id="comment" name="comment" rows="3"
placeholder="Notizen zu diesem Stockwerk"><?php echo htmlspecialchars($floor['comment'] ?? ''); ?></textarea>
</div>
</fieldset>
<fieldset>
<legend>Standort</legend>
<div class="form-group">
<label for="building_id">Gebäude <span class="required">*</span></label>
<select id="building_id" name="building_id" required>
<option value="">- Wählen -</option>
<?php foreach ($buildings as $building): ?>
<option value="<?php echo (int)$building['id']; ?>"
<?php echo ((int)$selectedBuildingId === (int)$building['id']) ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($building['name']); ?>
</option>
<?php endforeach; ?>
</select>
</div>
</fieldset>
<fieldset>
<legend>Grundriss (SVG)</legend>
<textarea id="floor-svg-content" name="floor_svg_content" hidden><?php echo htmlspecialchars($existingSvgContent); ?></textarea>
<div id="floor-svg-editor" class="floor-svg-editor">
<div class="floor-svg-tools">
<h4>Zeichenwerkzeug</h4>
<button type="button" class="button" id="floor-start-polyline">Neue Linie starten</button>
<button type="button" class="button" id="floor-finish-polyline">Linie beenden</button>
<button type="button" class="button" id="floor-remove-last-point">Letzten Punkt entfernen</button>
<button type="button" class="button button-danger" id="floor-delete-polyline">Ausgewählte Linie löschen</button>
<button type="button" class="button button-danger" id="floor-clear-drawing">Alles löschen</button>
<label class="inline-checkbox">
<input type="checkbox" id="floor-lock-45">
Winkel auf 45°-Vielfache begrenzen
</label>
<label class="inline-checkbox">
<input type="checkbox" id="floor-snap-guides" checked>
Ecken an Hilfslinien snappen
</label>
</div>
<div class="floor-svg-canvas-wrap">
<svg id="floor-svg-canvas" viewBox="0 0 2000 1000" role="img" aria-label="Stockwerk-Zeichnung"></svg>
<p class="hint">Linien müssen nicht geschlossen sein. Klick auf freie Fläche fügt Punkte hinzu, Punkte sind per Drag verschiebbar.</p>
</div>
<div class="floor-guides">
<h4>Hilfslinien</h4>
<div class="floor-guide-form">
<select id="floor-guide-orientation">
<option value="vertical">Vertikal</option>
<option value="horizontal">Horizontal</option>
</select>
<input type="number" id="floor-guide-position" placeholder="Position (SVG-Koordinate)">
<button type="button" class="button" id="floor-add-guide">Hilfslinie setzen</button>
</div>
<ul id="floor-guide-list" class="guide-list"></ul>
</div>
</div>
</fieldset>
<fieldset class="form-actions">
<button type="submit" class="button button-primary">Speichern</button>
<a href="?module=floors&action=list" class="button">Abbrechen</a>
</fieldset>
</form>
</div>
<style>
.floor-edit {
max-width: 1200px;
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;
}
.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;
}
.floor-svg-editor {
display: grid;
grid-template-columns: 240px 1fr 280px;
gap: 12px;
}
.floor-svg-tools,
.floor-guides,
.floor-svg-canvas-wrap {
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
background: #fff;
}
.floor-svg-tools {
display: flex;
flex-direction: column;
gap: 8px;
}
.floor-svg-canvas-wrap svg {
width: 100%;
min-height: 560px;
display: block;
border: 1px solid #eee;
background: #fafafa;
cursor: crosshair;
}
.floor-guide-form {
display: grid;
gap: 8px;
}
.guide-list {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.guide-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #eee;
font-size: 0.9rem;
}
.inline-checkbox {
display: flex !important;
align-items: center;
gap: 6px;
font-weight: normal !important;
}
.hint {
font-size: 0.82rem;
color: #666;
margin-top: 8px;
}
.required {
color: red;
}
.form-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
.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;
}
@media (max-width: 1200px) {
.floor-svg-editor {
grid-template-columns: 1fr;
}
}
</style>
<script src="/assets/js/floor-svg-editor.js" defer></script>