drag drop update
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user