drag drop update

This commit is contained in:
Troy Grunt
2026-02-11 22:30:55 +01:00
parent c31e1a308d
commit fb4ee93b17
8 changed files with 977 additions and 188 deletions

View File

@@ -5,12 +5,9 @@
* Floor / Stockwerk anlegen oder bearbeiten
* - Name, Ebene, Beschreibung
* - Zugehöriges Gebäude
* - SVG-Grundriss (optional)
* - SVG-Grundriss mit Linien-Editor (Polylinien)
*/
// =========================
// Kontext bestimmen
// =========================
$floorId = (int)($_GET['id'] ?? 0);
$floor = null;
@@ -24,26 +21,26 @@ if ($floorId > 0) {
$isEdit = !empty($floor);
$pageTitle = $isEdit ? "Stockwerk bearbeiten: " . htmlspecialchars($floor['name']) : "Neues Stockwerk";
// =========================
// Gebäude laden
// =========================
$buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
$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" enctype="multipart/form-data" class="edit-form">
<?php if ($isEdit): ?>
<input type="hidden" name="id" value="<?php echo $floorId; ?>">
<?php endif; ?>
<!-- =========================
Basisdaten
========================= -->
<fieldset>
<legend>Allgemein</legend>
@@ -58,8 +55,7 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
<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 Erdgeschoss, 1 für 1. OG">
<small>Dient zur Sortierung</small>
placeholder="z.B. 0 für EG, 1 für 1. OG">
</div>
<div class="form-group">
@@ -69,19 +65,15 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
</div>
</fieldset>
<!-- =========================
Gebäude & Standort
========================= -->
<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 $building['id']; ?>"
<?php echo ($floor['building_id'] ?? 0) == $building['id'] ? 'selected' : ''; ?>>
<option value="<?php echo (int)$building['id']; ?>"
<?php echo ((int)($floor['building_id'] ?? 0) === (int)$building['id']) ? 'selected' : ''; ?>>
<?php echo htmlspecialchars($building['name']); ?>
</option>
<?php endforeach; ?>
@@ -89,43 +81,65 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
</div>
</fieldset>
<!-- =========================
SVG-Grundriss (optional)
========================= -->
<fieldset>
<legend>Grundriss (SVG)</legend>
<div class="form-group">
<label for="svg_file">SVG-Datei hochladen</label>
<input type="file" id="svg_file" name="svg_file" accept=".svg">
<small>Optionales Floorplan-SVG. Kann später im Editor bearbeitet werden.</small>
<small>Optional. Wenn ein Zeichnungsinhalt im Editor erstellt wird, wird dieser beim Speichern bevorzugt.</small>
</div>
<?php if ($isEdit && $floor['svg_path']): ?>
<div class="form-group">
<label>Aktueller Grundriss:</label>
<p><small><?php echo htmlspecialchars($floor['svg_path']); ?></small></p>
<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 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>
<?php endif; ?>
</fieldset>
<!-- =========================
Aktionen
========================= -->
<fieldset class="form-actions">
<button type="submit" class="button button-primary">Speichern</button>
<a href="?module=floors&action=list" class="button">Abbrechen</a>
<?php if ($isEdit): ?>
<a href="#" class="button button-danger" onclick="confirmDelete(<?php echo $floorId; ?>)">Löschen</a>
<?php endif; ?>
</fieldset>
</form>
</div>
<style>
.floor-edit {
max-width: 800px;
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
@@ -147,7 +161,6 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
.edit-form legend {
padding: 0 10px;
font-weight: bold;
font-size: 1.1em;
}
.form-group {
@@ -172,14 +185,68 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
font-family: inherit;
}
.form-group textarea {
resize: vertical;
.floor-svg-editor {
display: grid;
grid-template-columns: 240px 1fr 280px;
gap: 12px;
}
.form-group small {
.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;
margin-top: 5px;
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 {
@@ -189,7 +256,7 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
.form-actions {
display: flex;
gap: 10px;
margin-top: 30px;
margin-top: 20px;
}
.button {
@@ -211,64 +278,11 @@ $buildings = $sql->get("SELECT id, name FROM buildings ORDER BY name", "", []);
background: #dc3545;
}
.button:hover {
opacity: 0.8;
@media (max-width: 1200px) {
.floor-svg-editor {
grid-template-columns: 1fr;
}
}
</style>
<script>
function confirmDelete(id) {
if (confirm('Dieses Stockwerk wirklich löschen? Alle Räume und Racks werden gelöscht.')) {
// TODO: AJAX-Delete implementieren
alert('Löschen noch nicht implementiert');
}
}
</script>
========================= -->
<fieldset>
<legend>Grundriss / Floorplan</legend>
<div class="svg-editor-container">
<svg
id="floor-svg"
viewBox="0 0 2000 1000"
width="100%"
height="600"
>
<!-- TODO: Floorplan SVG laden -->
</svg>
</div>
<p class="hint">
Räume und Netzwerkdosen per Drag & Drop platzieren. Nummerierung und Bezeichnungen editierbar.
</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 Floorplan SVG-Editor
*/
// TODO: Floor-ID aus PHP setzen
// window.FLOOR_ID = <?= (int)$floorId ?>;
// TODO: Räume / Dosen an JS übergeben
// window.ROOMS = <?= json_encode($rooms) ?>;
</script>
<script src="/assets/js/floor-svg-editor.js" defer></script>

View File

@@ -19,6 +19,7 @@ $name = trim($_POST['name'] ?? '');
$buildingId = (int)($_POST['building_id'] ?? 0);
$level = isset($_POST['level']) ? (int)$_POST['level'] : null;
$comment = trim($_POST['comment'] ?? '');
$floorSvgContent = trim($_POST['floor_svg_content'] ?? '');
// =========================
// Validierung
@@ -79,6 +80,17 @@ if (!empty($_FILES['svg_file']['name'])) {
}
}
if ($floorSvgContent !== '') {
$storedSvgPath = storeSvgEditorContent($sql, $floorId, $floorSvgContent);
if ($storedSvgPath === false) {
$_SESSION['error'] = "SVG aus dem Editor konnte nicht gespeichert werden";
$redirectUrl = $floorId ? "?module=floors&action=edit&id=$floorId" : "?module=floors&action=edit";
header("Location: $redirectUrl");
exit;
}
$svgPath = $storedSvgPath;
}
// =========================
// In DB speichern
// =========================
@@ -113,3 +125,41 @@ $_SESSION['success'] = "Stockwerk gespeichert";
// =========================
header('Location: ?module=floors&action=list');
exit;
function storeSvgEditorContent($sql, $floorId, $content)
{
$normalized = trim($content);
if ($normalized === '' || stripos($normalized, '<svg') === false) {
return false;
}
$relativePath = null;
if ($floorId > 0) {
$existing = $sql->single(
"SELECT svg_path FROM floors WHERE id = ?",
"i",
[$floorId]
);
$candidate = trim((string)($existing['svg_path'] ?? ''));
if ($candidate !== '') {
$relativePath = ltrim($candidate, "/\\");
}
}
if (!$relativePath) {
$relativePath = 'uploads/floorplans/' . uniqid('floor_') . '.svg';
}
$absolutePath = __DIR__ . '/../../' . $relativePath;
$targetDir = dirname($absolutePath);
if (!is_dir($targetDir)) {
mkdir($targetDir, 0755, true);
}
$written = file_put_contents($absolutePath, $normalized);
if ($written === false) {
return false;
}
return $relativePath;
}