troy-grunt/netwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verhalten im Infrastruktur-Modul ist jetzt wie gewünscht:

Browse Source 
Nur das aktiv bearbeitete Objekt ist verschiebbar.
Alle anderen Objekte auf derselben Etage werden als halbtransparente Referenz angezeigt.
In der Listenansicht sind Marker nur noch Vorschau (nicht verschiebbar).
Geänderte Dateien:

edit.php

Referenzdaten für Patchpanels und Wandbuchsen geladen.
Diese Daten als data-* am Canvas hinterlegt.
Hinweise im UI angepasst.
Styles ergänzt:
.floor-plan-marker.is-active
.floor-plan-reference (+ Varianten für Panel/Outlet)
Inline-Script entfernt und auf externe JS-Datei umgestellt (CSP-sicher):
<script src="/assets/js/floor-infrastructure-edit.js" defer></script>
floor-infrastructure-edit.js (neu)

Drag/Drop nur für den aktiven Marker.
Referenzmarker je Stockwerk rendern (halbtransparent, nicht interaktiv).
Aktiven Marker aus Referenzmenge ausschließen.
Referenzen bei Stockwerk-/Raumwechsel neu rendern.
list.php

Kartenansicht auf reine Vorschau umgestellt.
Drag/Save-Logik entfernt.
Marker per CSS nicht interaktiv (pointer-events: none, cursor: default).
Hinweistext entsprechend angepasst.
This commit is contained in:
fixclean
2026-02-16 10:04:12 +01:00
parent 4efd54613a
commit 3bc5a2ca04
3 changed files with 357 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
app/assets/js/floor-infrastructure-edit.js Normal file
View File

@@ -0,0 +1,294 @@
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('floor-plan-canvas');
const marker = document.getElementById('floor-plan-marker');
const positionLabel = document.getElementById('floor-plan-position');
if (!canvas || !marker) {
return;
}
const xFieldName = canvas.dataset.xField;
const yFieldName = canvas.dataset.yField;
const xField = xFieldName ? document.querySelector(`input[name="${xFieldName}"]`) : null;
const yField = yFieldName ? document.querySelector(`input[name="${yFieldName}"]`) : null;
if (!xField || !yField) {
return;
}
const markerWidth = Math.max(1, Number(canvas.dataset.markerWidth) || marker.offsetWidth);
const markerHeight = Math.max(1, Number(canvas.dataset.markerHeight) || marker.offsetHeight);
const markerType = canvas.dataset.markerType || '';
const activeId = Number(canvas.dataset.activeId || 0);
const panelReferences = JSON.parse(canvas.dataset.referencePanels || '[]');
const outletReferences = JSON.parse(canvas.dataset.referenceOutlets || '[]');
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
marker.classList.add('is-active');
const updatePositionLabel = (x, y) => {
if (positionLabel) {
positionLabel.textContent = `${Math.round(x)} x ${Math.round(y)}`;
}
};
const setMarkerPosition = (rawX, rawY) => {
const rect = canvas.getBoundingClientRect();
const maxX = Math.max(0, rect.width - markerWidth);
const maxY = Math.max(0, rect.height - markerHeight);
const left = clamp(rawX, 0, maxX);
const top = clamp(rawY, 0, maxY);
marker.style.left = `${left}px`;
marker.style.top = `${top}px`;
xField.value = Math.round(left);
yField.value = Math.round(top);
updatePositionLabel(left, top);
};
const updateFromInputs = () => {
setMarkerPosition(Number(xField.value) || 0, Number(yField.value) || 0);
};
updateFromInputs();
let dragging = false;
let offsetX = 0;
let offsetY = 0;
const startDrag = (clientX, clientY) => {
const markerRect = marker.getBoundingClientRect();
offsetX = clientX - markerRect.left;
offsetY = clientY - markerRect.top;
};
marker.addEventListener('pointerdown', (event) => {
event.preventDefault();
dragging = true;
startDrag(event.clientX, event.clientY);
marker.setPointerCapture(event.pointerId);
});
marker.addEventListener('pointermove', (event) => {
if (!dragging) {
return;
}
const rect = canvas.getBoundingClientRect();
setMarkerPosition(event.clientX - rect.left - offsetX, event.clientY - rect.top - offsetY);
});
const stopDrag = (event) => {
if (!dragging) {
return;
}
dragging = false;
if (marker.hasPointerCapture(event.pointerId)) {
marker.releasePointerCapture(event.pointerId);
}
};
['pointerup', 'pointercancel', 'pointerleave'].forEach((evt) => {
marker.addEventListener(evt, stopDrag);
});
canvas.addEventListener('pointerdown', (event) => {
if (event.target !== canvas) {
return;
}
const rect = canvas.getBoundingClientRect();
setMarkerPosition(event.clientX - rect.left - markerWidth / 2, event.clientY - rect.top - markerHeight / 2);
});
[xField, yField].forEach((input) => {
input.addEventListener('input', () => {
updateFromInputs();
});
});
window.addEventListener('resize', () => {
updateFromInputs();
});
const panelLocationSelect = document.getElementById('panel-location-select');
const panelBuildingSelect = document.getElementById('panel-building-select');
const panelFloorSelect = document.getElementById('panel-floor-select');
const outletRoomSelect = document.getElementById('outlet-room-select');
const floorPlanSvg = document.getElementById('floor-plan-svg');
const panelPlacementFields = document.getElementById('panel-placement-fields');
const panelFloorPlanGroup = document.getElementById('panel-floor-plan-group');
const panelFloorMissingHint = document.getElementById('panel-floor-missing-hint');
const buildingOptions = panelBuildingSelect ? Array.from(panelBuildingSelect.options).filter((option) => option.value !== '') : [];
const floorOptions = panelFloorSelect ? Array.from(panelFloorSelect.options).filter((option) => option.value !== '') : [];
const getCurrentFloorId = () => {
const floorOption = panelFloorSelect?.selectedOptions?.[0];
if (floorOption?.value) {
return Number(floorOption.value);
}
const roomOption = outletRoomSelect?.selectedOptions?.[0];
return Number(roomOption?.dataset?.floorId || 0);
};
const renderReferenceMarkers = () => {
canvas.querySelectorAll('.floor-plan-reference').forEach((node) => node.remove());
const currentFloorId = getCurrentFloorId();
if (!currentFloorId) {
return;
}
const appendReference = (entry, cssClass, width, height) => {
const markerRef = document.createElement('div');
markerRef.className = `floor-plan-reference ${cssClass}`;
markerRef.style.left = `${Number(entry.x || entry.pos_x || 0)}px`;
markerRef.style.top = `${Number(entry.y || entry.pos_y || 0)}px`;
if (width > 0) {
markerRef.style.width = `${width}px`;
}
if (height > 0) {
markerRef.style.height = `${height}px`;
}
markerRef.title = entry.name || '';
canvas.appendChild(markerRef);
};
panelReferences.forEach((entry) => {
if (Number(entry.floor_id) !== currentFloorId) {
return;
}
if (markerType === 'patchpanel' && Number(entry.id) === activeId) {
return;
}
appendReference(entry, 'panel-marker', Math.max(1, Number(entry.width) || 140), Math.max(1, Number(entry.height) || 40));
});
outletReferences.forEach((entry) => {
if (Number(entry.floor_id) !== currentFloorId) {
return;
}
if (markerType === 'outlet' && Number(entry.id) === activeId) {
return;
}
appendReference(entry, 'outlet-marker', 32, 32);
});
};
const updateFloorPlanImage = () => {
if (!floorPlanSvg) {
return;
}
const floorOption = panelFloorSelect?.selectedOptions?.[0];
const roomOption = outletRoomSelect?.selectedOptions?.[0];
const svgUrl = floorOption?.dataset?.svgUrl || roomOption?.dataset?.floorSvgUrl || '';
if (svgUrl) {
floorPlanSvg.src = svgUrl;
floorPlanSvg.hidden = false;
} else {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
}
renderReferenceMarkers();
};
if (floorPlanSvg) {
floorPlanSvg.addEventListener('error', () => {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
});
}
const updatePanelPlacementVisibility = () => {
if (!panelFloorSelect || !panelPlacementFields || !panelFloorPlanGroup) {
return;
}
const hasFloor = !!panelFloorSelect.value;
panelPlacementFields.hidden = !hasFloor;
panelFloorPlanGroup.hidden = !hasFloor;
if (panelFloorMissingHint) {
panelFloorMissingHint.hidden = hasFloor;
}
};
const filterFloorOptions = () => {
if (!panelFloorSelect) {
return;
}
const buildingValue = panelBuildingSelect?.value || '';
let firstMatch = '';
floorOptions.forEach((option) => {
const matches = !buildingValue || option.dataset.buildingId === buildingValue;
option.hidden = !matches;
option.disabled = !matches;
if (matches && !firstMatch) {
firstMatch = option.value;
}
});
const selectedOption = panelFloorSelect.querySelector(`option[value="${panelFloorSelect.value}"]`);
const isSelectedHidden = selectedOption ? selectedOption.hidden : true;
if (buildingValue && (!panelFloorSelect.value || isSelectedHidden) && firstMatch) {
panelFloorSelect.value = firstMatch;
}
updatePanelPlacementVisibility();
updateFloorPlanImage();
};
const filterBuildingOptions = () => {
if (!panelBuildingSelect) {
return;
}
const locationValue = panelLocationSelect?.value || '';
let firstMatch = '';
buildingOptions.forEach((option) => {
const matches = !locationValue || option.dataset.locationId === locationValue;
option.hidden = !matches;
option.disabled = !matches;
if (matches && !firstMatch) {
firstMatch = option.value;
}
});
const selectedOption = panelBuildingSelect.querySelector(`option[value="${panelBuildingSelect.value}"]`);
const isSelectedHidden = selectedOption ? selectedOption.hidden : true;
if (locationValue && (!panelBuildingSelect.value || isSelectedHidden) && firstMatch) {
panelBuildingSelect.value = firstMatch;
}
};
if (panelLocationSelect) {
panelLocationSelect.addEventListener('change', () => {
filterBuildingOptions();
filterFloorOptions();
});
}
if (panelBuildingSelect) {
panelBuildingSelect.addEventListener('change', () => {
filterFloorOptions();
});
}
if (panelFloorSelect) {
panelFloorSelect.addEventListener('change', () => {
updatePanelPlacementVisibility();
updateFloorPlanImage();
});
}
if (outletRoomSelect) {
outletRoomSelect.addEventListener('change', () => {
updateFloorPlanImage();
});
}
if (panelLocationSelect) {
filterBuildingOptions();
filterFloorOptions();
} else {
updateFloorPlanImage();
}
updatePanelPlacementVisibility();
});

294
app/modules/floor_infrastructure/edit.php
View File

@@ -103,6 +103,22 @@ if ($type === 'patchpanel') {
$markerWidth = $type === 'patchpanel' ? $panel['width'] : $defaultOutletSize;
$markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
$mapPatchPanels = $sql->get(
"SELECT id, floor_id, name, pos_x, pos_y, width, height
FROM floor_patchpanels
ORDER BY floor_id, name",
"",
[]
);
$mapOutlets = $sql->get(
"SELECT o.id, r.floor_id, o.name, o.x, o.y
FROM network_outlets o
JOIN rooms r ON r.id = o.room_id
ORDER BY r.floor_id, o.name",
"",
[]
);
?>
<div class="floor-infra-edit">
@@ -188,12 +204,15 @@ $markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
data-marker-height="<?php echo $markerHeight; ?>"
data-marker-type="patchpanel"
data-x-field="pos_x"
data-y-field="pos_y">
data-y-field="pos_y"
data-active-id="<?php echo (int)($panel['id'] ?? 0); ?>"
data-reference-panels="<?php echo htmlspecialchars(json_encode($mapPatchPanels, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8'); ?>"
data-reference-outlets="<?php echo htmlspecialchars(json_encode($mapOutlets, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8'); ?>">
<img id="floor-plan-svg" class="floor-plan-svg" alt="Stockwerksplan">
<div id="floor-plan-marker" class="floor-plan-marker panel-marker"
style="--marker-width: <?php echo $markerWidth; ?>px; --marker-height: <?php echo $markerHeight; ?>px;"></div>
</div>
<p class="floor-plan-hint">Ziehe das Patchpanel oder klicke auf den Plan, um die Position zu setzen.</p>
<p class="floor-plan-hint">Nur das aktuell bearbeitete Patchpanel ist verschiebbar. Andere Objekte werden als Referenz halbtransparent angezeigt.</p>
<p class="floor-plan-position">Koordinate: <span id="floor-plan-position"></span></p>
</div>
</div>
@@ -204,7 +223,7 @@ $markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
</div>
<p id="panel-floor-missing-hint" class="info" <?php echo $showPanelPlacementFields ? 'hidden' : ''; ?>>
Position, Groesse und Stockwerkskarte werden erst angezeigt, sobald ein Stockwerk ausgewaehlt ist.
Position, Größe und Stockwerkskarte werden erst angezeigt, sobald ein Stockwerk ausgewählt ist.
</p>
<div class="form-group">
@@ -253,12 +272,15 @@ $markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
data-marker-height="<?php echo $markerHeight; ?>"
data-marker-type="outlet"
data-x-field="x"
data-y-field="y">
data-y-field="y"
data-active-id="<?php echo (int)($outlet['id'] ?? 0); ?>"
data-reference-panels="<?php echo htmlspecialchars(json_encode($mapPatchPanels, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8'); ?>"
data-reference-outlets="<?php echo htmlspecialchars(json_encode($mapOutlets, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8'); ?>">
<img id="floor-plan-svg" class="floor-plan-svg" alt="Stockwerksplan">
<div id="floor-plan-marker" class="floor-plan-marker outlet-marker"
style="--marker-width: <?php echo $markerWidth; ?>px; --marker-height: <?php echo $markerHeight; ?>px;"></div>
</div>
<p class="floor-plan-hint">Klicke oder ziehe die Wandbuchse auf dem Plan. Die Größe bleibt quadratisch.</p>
<p class="floor-plan-hint">Nur die aktuell bearbeitete Wandbuchse ist verschiebbar. Andere Objekte werden als Referenz halbtransparent angezeigt.</p>
<p class="floor-plan-position">Koordinate: <span id="floor-plan-position"></span></p>
</div>
</div>
@@ -350,6 +372,10 @@ $markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
touch-action: none;
z-index: 2;
}
.floor-plan-marker.is-active {
cursor: move;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(13, 110, 253, 0.35);
}
.floor-plan-marker.panel-marker {
background: rgba(13, 110, 253, 0.25);
border: 2px solid #0d6efd;
@@ -360,6 +386,26 @@ $markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
border: 2px solid #198754;
border-radius: 4px;
}
.floor-plan-reference {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
opacity: 0.35;
z-index: 1;
}
.floor-plan-reference.panel-marker {
background: rgba(13, 110, 253, 0.22);
border: 2px solid rgba(13, 110, 253, 0.7);
border-radius: 6px;
}
.floor-plan-reference.outlet-marker {
width: 32px;
height: 32px;
background: rgba(25, 135, 84, 0.22);
border: 2px solid rgba(25, 135, 84, 0.7);
border-radius: 4px;
}
.floor-plan-hint {
font-size: 0.85em;
color: #444;
@@ -372,241 +418,5 @@ $markerHeight = $type === 'patchpanel' ? $panel['height'] : $defaultOutletSize;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('floor-plan-canvas');
const marker = document.getElementById('floor-plan-marker');
const positionLabel = document.getElementById('floor-plan-position');
if (!canvas || !marker) {
return;
}
const xFieldName = canvas.dataset.xField;
const yFieldName = canvas.dataset.yField;
const xField = xFieldName ? document.querySelector(`input[name="${xFieldName}"]`) : null;
const yField = yFieldName ? document.querySelector(`input[name="${yFieldName}"]`) : null;
if (!xField || !yField) {
return;
}
const markerWidth = Math.max(1, Number(canvas.dataset.markerWidth) || marker.offsetWidth);
const markerHeight = Math.max(1, Number(canvas.dataset.markerHeight) || marker.offsetHeight);
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
const updatePositionLabel = (x, y) => {
if (positionLabel) {
positionLabel.textContent = `${Math.round(x)} x ${Math.round(y)}`;
}
};
const setMarkerPosition = (rawX, rawY) => {
const rect = canvas.getBoundingClientRect();
const maxX = Math.max(0, rect.width - markerWidth);
const maxY = Math.max(0, rect.height - markerHeight);
const left = clamp(rawX, 0, maxX);
const top = clamp(rawY, 0, maxY);
marker.style.left = `${left}px`;
marker.style.top = `${top}px`;
xField.value = Math.round(left);
yField.value = Math.round(top);
updatePositionLabel(left, top);
};
const updateFromInputs = () => {
setMarkerPosition(Number(xField.value) || 0, Number(yField.value) || 0);
};
updateFromInputs();
let dragging = false;
let offsetX = 0;
let offsetY = 0;
const startDrag = (clientX, clientY) => {
const markerRect = marker.getBoundingClientRect();
offsetX = clientX - markerRect.left;
offsetY = clientY - markerRect.top;
};
marker.addEventListener('pointerdown', (event) => {
event.preventDefault();
dragging = true;
startDrag(event.clientX, event.clientY);
marker.setPointerCapture(event.pointerId);
});
marker.addEventListener('pointermove', (event) => {
if (!dragging) {
return;
}
const rect = canvas.getBoundingClientRect();
setMarkerPosition(event.clientX - rect.left - offsetX, event.clientY - rect.top - offsetY);
});
const stopDrag = (event) => {
if (!dragging) {
return;
}
dragging = false;
if (marker.hasPointerCapture(event.pointerId)) {
marker.releasePointerCapture(event.pointerId);
}
};
['pointerup', 'pointercancel', 'pointerleave'].forEach((evt) => {
marker.addEventListener(evt, stopDrag);
});
canvas.addEventListener('pointerdown', (event) => {
if (event.target !== canvas) {
return;
}
const rect = canvas.getBoundingClientRect();
setMarkerPosition(event.clientX - rect.left - markerWidth / 2, event.clientY - rect.top - markerHeight / 2);
});
[xField, yField].forEach((input) => {
input.addEventListener('input', () => {
updateFromInputs();
});
});
window.addEventListener('resize', () => {
updateFromInputs();
});
const panelLocationSelect = document.getElementById('panel-location-select');
const panelBuildingSelect = document.getElementById('panel-building-select');
const panelFloorSelect = document.getElementById('panel-floor-select');
const outletRoomSelect = document.getElementById('outlet-room-select');
const floorPlanSvg = document.getElementById('floor-plan-svg');
const panelPlacementFields = document.getElementById('panel-placement-fields');
const panelFloorPlanGroup = document.getElementById('panel-floor-plan-group');
const panelFloorMissingHint = document.getElementById('panel-floor-missing-hint');
const buildingOptions = panelBuildingSelect ? Array.from(panelBuildingSelect.options).filter((option) => option.value !== '') : [];
const floorOptions = panelFloorSelect ? Array.from(panelFloorSelect.options).filter((option) => option.value !== '') : [];
const updateFloorPlanImage = () => {
if (!floorPlanSvg) {
return;
}
const floorOption = panelFloorSelect?.selectedOptions?.[0];
const roomOption = outletRoomSelect?.selectedOptions?.[0];
const svgUrl = floorOption?.dataset?.svgUrl || roomOption?.dataset?.floorSvgUrl || '';
if (svgUrl) {
floorPlanSvg.src = svgUrl;
floorPlanSvg.hidden = false;
} else {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
}
};
if (floorPlanSvg) {
floorPlanSvg.addEventListener('error', () => {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
});
}
const updatePanelPlacementVisibility = () => {
if (!panelFloorSelect || !panelPlacementFields || !panelFloorPlanGroup) {
return;
}
const hasFloor = !!panelFloorSelect.value;
panelPlacementFields.hidden = !hasFloor;
panelFloorPlanGroup.hidden = !hasFloor;
if (panelFloorMissingHint) {
panelFloorMissingHint.hidden = hasFloor;
}
};
const filterFloorOptions = () => {
if (!panelFloorSelect) {
return;
}
const buildingValue = panelBuildingSelect?.value || '';
let firstMatch = '';
floorOptions.forEach((option) => {
const matches = !buildingValue || option.dataset.buildingId === buildingValue;
option.hidden = !matches;
option.disabled = !matches;
if (matches && !firstMatch) {
firstMatch = option.value;
}
});
const selectedOption = panelFloorSelect.querySelector(`option[value="${panelFloorSelect.value}"]`);
const isSelectedHidden = selectedOption ? selectedOption.hidden : true;
if (buildingValue && (!panelFloorSelect.value || isSelectedHidden) && firstMatch) {
panelFloorSelect.value = firstMatch;
}
updatePanelPlacementVisibility();
updateFloorPlanImage();
};
const filterBuildingOptions = () => {
if (!panelBuildingSelect) {
return;
}
const locationValue = panelLocationSelect?.value || '';
let firstMatch = '';
buildingOptions.forEach((option) => {
const matches = !locationValue || option.dataset.locationId === locationValue;
option.hidden = !matches;
option.disabled = !matches;
if (matches && !firstMatch) {
firstMatch = option.value;
}
});
const selectedOption = panelBuildingSelect.querySelector(`option[value="${panelBuildingSelect.value}"]`);
const isSelectedHidden = selectedOption ? selectedOption.hidden : true;
if (locationValue && (!panelBuildingSelect.value || isSelectedHidden) && firstMatch) {
panelBuildingSelect.value = firstMatch;
}
};
if (panelLocationSelect) {
panelLocationSelect.addEventListener('change', () => {
filterBuildingOptions();
filterFloorOptions();
});
}
if (panelBuildingSelect) {
panelBuildingSelect.addEventListener('change', () => {
filterFloorOptions();
});
}
if (panelFloorSelect) {
panelFloorSelect.addEventListener('change', () => {
updatePanelPlacementVisibility();
updateFloorPlanImage();
});
}
if (outletRoomSelect) {
outletRoomSelect.addEventListener('change', () => {
updateFloorPlanImage();
});
}
if (panelLocationSelect) {
filterBuildingOptions();
filterFloorOptions();
} else {
updateFloorPlanImage();
}
updatePanelPlacementVisibility();
});
</script>
<script src="/assets/js/floor-infrastructure-edit.js" defer></script>

111
app/modules/floor_infrastructure/list.php
View File

@@ -2,7 +2,7 @@
/**
* app/modules/floor_infrastructure/list.php
*
* Uebersicht ueber Patchpanels und Netzwerkbuchsen auf Stockwerken
* Übersicht über Patchpanels und Netzwerkbuchsen auf Stockwerken
*/
$floorId = (int)($_GET['floor_id'] ?? 0);
@@ -101,10 +101,10 @@ if ($editorFloorId > 0) {
<div class="toolbar">
<a href="?module=floor_infrastructure&action=edit&type=patchpanel" class="button button-primary">
+ Patchpanel hinzufuegen
+ Patchpanel hinzufügen
</a>
<a href="?module=floor_infrastructure&action=edit&type=outlet" class="button">
+ Wandbuchse hinzufuegen
+ Wandbuchse hinzufügen
</a>
</div>
@@ -122,7 +122,7 @@ if ($editorFloorId > 0) {
</select>
<button class="button">Filter</button>
<a href="?module=floor_infrastructure&action=list" class="button">Zuruecksetzen</a>
<a href="?module=floor_infrastructure&action=list" class="button">Zurücksetzen</a>
</form>
<section class="infra-section">
@@ -134,7 +134,7 @@ if ($editorFloorId > 0) {
<th>Name</th>
<th>Stockwerk</th>
<th>Position</th>
<th>Groesse</th>
<th>Größe</th>
<th>Ports</th>
<th>Aktionen</th>
</tr>
@@ -196,18 +196,18 @@ if ($editorFloorId > 0) {
<section class="infra-plan">
<h2>Stockwerksplan-Verortung</h2>
<?php if (!$editorFloor): ?>
<p class="empty-state">Kein Stockwerk fuer die Planansicht verfuegbar.</p>
<p class="empty-state">Kein Stockwerk für die Planansicht verfügbar.</p>
<?php elseif (($editorFloor['svg_url'] ?? '') === ''): ?>
<p class="empty-state">Das gewaehlte Stockwerk hat noch keinen SVG-Plan hinterlegt.</p>
<p class="empty-state">Das gewählte Stockwerk hat noch keinen SVG-Plan hinterlegt.</p>
<?php else: ?>
<p>Drag & Drop ist aktiv fuer <strong><?php echo htmlspecialchars($editorFloor['name']); ?></strong>. Aenderungen werden direkt gespeichert.</p>
<p>Vorschau für <strong><?php echo htmlspecialchars($editorFloor['name']); ?></strong>. Positionen bearbeitest du über den jeweiligen „Bearbeiten“-Button.</p>
<div id="infra-floor-canvas"
class="infra-floor-canvas"
data-save-url="?module=floor_infrastructure&action=save"
data-floor-id="<?php echo (int)$editorFloor['id']; ?>">
<img src="<?php echo htmlspecialchars($editorFloor['svg_url']); ?>" class="infra-floor-svg" alt="Stockwerksplan">
</div>
<p class="floor-plan-hint">Patchpanels: blau, Wandbuchsen: gruen. Ziehen und loslassen zum Speichern.</p>
<p class="floor-plan-hint">Patchpanels: blau, Wandbuchsen: grün. In dieser Ansicht sind Marker nicht verschiebbar.</p>
<?php endif; ?>
</section>
</div>
@@ -277,8 +277,9 @@ if ($editorFloorId > 0) {
left: 0;
user-select: none;
touch-action: none;
cursor: move;
cursor: default;
z-index: 2;
pointer-events: none;
}
.infra-marker.patchpanel {
background: rgba(13, 110, 253, 0.25);
@@ -292,9 +293,6 @@ if ($editorFloorId > 0) {
border: 2px solid #198754;
border-radius: 4px;
}
.infra-marker.is-saving {
opacity: 0.65;
}
.floor-plan-hint {
margin: 8px 0 0;
font-size: 0.85em;
@@ -319,95 +317,10 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
const saveUrl = canvas.dataset.saveUrl;
const floorId = Number(canvas.dataset.floorId || 0);
const outletSize = 32;
const patchPanels = <?php echo json_encode($editorPatchPanels, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
const outlets = <?php echo json_encode($editorOutlets, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
const savePosition = async (entry, type, marker) => {
const form = new FormData();
if (type === 'patchpanel') {
form.append('type', 'patchpanel');
form.append('id', String(entry.id));
form.append('name', entry.name || '');
form.append('floor_id', String(floorId));
form.append('pos_x', String(entry.x));
form.append('pos_y', String(entry.y));
form.append('width', String(entry.width));
form.append('height', String(entry.height));
form.append('port_count', String(entry.port_count || 0));
form.append('comment', entry.comment || '');
} else {
form.append('type', 'outlet');
form.append('id', String(entry.id));
form.append('name', entry.name || '');
form.append('room_id', String(entry.room_id || 0));
form.append('x', String(entry.x));
form.append('y', String(entry.y));
form.append('comment', entry.comment || '');
}
marker.classList.add('is-saving');
try {
await fetch(saveUrl, {
method: 'POST',
body: form,
credentials: 'same-origin'
});
} finally {
marker.classList.remove('is-saving');
}
};
const bindDrag = (marker, entry, type) => {
let dragging = false;
let offsetX = 0;
let offsetY = 0;
marker.addEventListener('pointerdown', (event) => {
dragging = true;
const rect = marker.getBoundingClientRect();
offsetX = event.clientX - rect.left;
offsetY = event.clientY - rect.top;
marker.setPointerCapture(event.pointerId);
});
marker.addEventListener('pointermove', (event) => {
if (!dragging) {
return;
}
const rect = canvas.getBoundingClientRect();
const width = type === 'patchpanel' ? entry.width : outletSize;
const height = type === 'patchpanel' ? entry.height : outletSize;
const maxX = Math.max(0, rect.width - width);
const maxY = Math.max(0, rect.height - height);
entry.x = Math.round(clamp(event.clientX - rect.left - offsetX, 0, maxX));
entry.y = Math.round(clamp(event.clientY - rect.top - offsetY, 0, maxY));
marker.style.left = `${entry.x}px`;
marker.style.top = `${entry.y}px`;
});
const stopDrag = (event) => {
if (!dragging) {
return;
}
dragging = false;
if (marker.hasPointerCapture(event.pointerId)) {
marker.releasePointerCapture(event.pointerId);
}
savePosition(entry, type, marker);
};
marker.addEventListener('pointerup', stopDrag);
marker.addEventListener('pointercancel', stopDrag);
};
const createMarker = (entry, type) => {
const marker = document.createElement('div');
marker.className = `infra-marker ${type}`;
@@ -423,8 +336,6 @@ document.addEventListener('DOMContentLoaded', () => {
marker.style.left = `${entry.x}px`;
marker.style.top = `${entry.y}px`;
canvas.appendChild(marker);
bindDrag(marker, entry, type);
};
patchPanels.forEach((entry) => createMarker(entry, 'patchpanel'));