Bearbeite Issues #22 bis #24

closes #22

closes #23

closes #24
This commit is contained in:
2026-02-19 10:31:53 +01:00
parent 0642a3b6ef
commit b973d2857b
6 changed files with 49 additions and 97 deletions

View File

@@ -30,10 +30,6 @@
flex-direction: column;
gap: 6px;
}
.floor-plan-toolbar {
display: flex;
gap: 6px;
}
.floor-plan-canvas {
position: relative;
width: 100%;
@@ -48,17 +44,6 @@
cursor: crosshair;
overflow: hidden;
}
.floor-plan-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
z-index: 0;
opacity: 0.75;
border-radius: 6px;
}
.floor-plan-overlay {
position: absolute;
inset: 0;
@@ -67,6 +52,10 @@
z-index: 2;
touch-action: none;
}
.floor-plan-overlay .floor-plan-background {
opacity: 0.75;
pointer-events: none;
}
.floor-plan-overlay .active-marker {
cursor: move;
}

View File

@@ -38,6 +38,18 @@ document.addEventListener('DOMContentLoaded', () => {
let viewWidth = DEFAULT_PLAN_SIZE.width;
let viewHeight = DEFAULT_PLAN_SIZE.height;
overlay.setAttribute('preserveAspectRatio', 'none');
const backgroundImage = document.createElementNS(SVG_NS, 'image');
backgroundImage.classList.add('floor-plan-background');
backgroundImage.setAttribute('x', '0');
backgroundImage.setAttribute('y', '0');
backgroundImage.setAttribute('width', String(DEFAULT_PLAN_SIZE.width));
backgroundImage.setAttribute('height', String(DEFAULT_PLAN_SIZE.height));
backgroundImage.setAttribute('preserveAspectRatio', 'none');
backgroundImage.setAttribute('display', 'none');
overlay.appendChild(backgroundImage);
const activeMarker = document.createElementNS(SVG_NS, 'rect');
activeMarker.classList.add('active-marker');
if (markerType === 'patchpanel') {
@@ -237,7 +249,6 @@ document.addEventListener('DOMContentLoaded', () => {
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');
@@ -312,21 +323,19 @@ document.addEventListener('DOMContentLoaded', () => {
};
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;
backgroundImage.setAttribute('href', svgUrl);
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
backgroundImage.setAttribute('display', 'block');
loadPlanDimensions(svgUrl);
} else {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
backgroundImage.removeAttribute('href');
backgroundImage.setAttribute('display', 'none');
planSize.width = DEFAULT_PLAN_SIZE.width;
planSize.height = DEFAULT_PLAN_SIZE.height;
resetView();
@@ -335,13 +344,6 @@ document.addEventListener('DOMContentLoaded', () => {
filterPatchpanelBindOptions();
};
if (floorPlanSvg) {
floorPlanSvg.addEventListener('error', () => {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
});
}
const loadPlanDimensions = async (svgUrl) => {
if (!svgUrl) {
return;
@@ -365,6 +367,8 @@ document.addEventListener('DOMContentLoaded', () => {
if (parts.length === 4 && parts.every((value) => Number.isFinite(value))) {
planSize.width = Math.max(1, parts[2]);
planSize.height = Math.max(1, parts[3]);
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
resetView();
renderReferenceMarkers();
updateFromInputs();
@@ -381,12 +385,16 @@ document.addEventListener('DOMContentLoaded', () => {
planSize.width = DEFAULT_PLAN_SIZE.width;
planSize.height = DEFAULT_PLAN_SIZE.height;
}
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
resetView();
renderReferenceMarkers();
updateFromInputs();
} catch (error) {
planSize.width = DEFAULT_PLAN_SIZE.width;
planSize.height = DEFAULT_PLAN_SIZE.height;
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
resetView();
renderReferenceMarkers();
updateFromInputs();
@@ -584,23 +592,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
document.querySelectorAll('[data-floor-plan-zoom]').forEach((button) => {
button.addEventListener('click', () => {
const action = button.getAttribute('data-floor-plan-zoom');
if (action === 'in') {
const rect = overlay.getBoundingClientRect();
zoomAt(rect.left + (rect.width / 2), rect.top + (rect.height / 2), 0.85);
return;
}
if (action === 'out') {
const rect = overlay.getBoundingClientRect();
zoomAt(rect.left + (rect.width / 2), rect.top + (rect.height / 2), 1.15);
return;
}
resetView();
});
});
updateOverlayViewBox();
updateFromInputs();
filterPatchpanelBindOptions();

View File

@@ -77,9 +77,6 @@ $isEndpointAllowed = static function (string $type, int $id) use ($occupiedByTyp
if ($id <= 0) {
return false;
}
if ($type === 'outlet') {
return true;
}
if ($type === $portAType && $id === $portAId) {
return true;
}
@@ -173,7 +170,14 @@ foreach ($outletPorts as $row) {
if (!$isEndpointAllowed('outlet', $id)) {
continue;
}
$parts = array_filter([(string)($row['floor_name'] ?? ''), (string)($row['room_name'] ?? ''), (string)$row['outlet_name'], (string)$row['name']]);
$portName = trim((string)($row['name'] ?? ''));
$includePortName = ($portName !== '' && strcasecmp($portName, 'Port 1') !== 0);
$parts = array_filter([
(string)($row['floor_name'] ?? ''),
(string)($row['room_name'] ?? ''),
(string)$row['outlet_name'],
$includePortName ? $portName : '',
]);
$endpointOptions['outlet'][] = [
'id' => $id,
'label' => implode(' / ', $parts),

View File

@@ -75,25 +75,16 @@ $otherConnections = $sql->get(
);
$endpointUsage = [];
$trackUsage = static function (string $endpointType, int $endpointId, string $otherType) use (&$endpointUsage): void {
$trackUsage = static function (string $endpointType, int $endpointId) use (&$endpointUsage): void {
if ($endpointId <= 0) {
return;
}
if (!isset($endpointUsage[$endpointType][$endpointId])) {
$endpointUsage[$endpointType][$endpointId] = [
'total' => 0,
'patchpanel' => 0,
'other' => 0,
];
}
$endpointUsage[$endpointType][$endpointId]['total']++;
if ($endpointType === 'outlet') {
if ($otherType === 'patchpanel') {
$endpointUsage[$endpointType][$endpointId]['patchpanel']++;
} else {
$endpointUsage[$endpointType][$endpointId]['other']++;
}
}
};
foreach ((array)$otherConnections as $row) {
@@ -102,43 +93,29 @@ foreach ((array)$otherConnections as $row) {
$idA = (int)($row['port_a_id'] ?? 0);
$idB = (int)($row['port_b_id'] ?? 0);
$trackUsage($typeA, $idA, $typeB);
$trackUsage($typeB, $idB, $typeA);
$trackUsage($typeA, $idA);
$trackUsage($typeB, $idB);
}
$validateEndpointUsage = static function (string $endpointType, int $endpointId, string $otherType, string $label) use ($endpointUsage): ?string {
$validateEndpointUsage = static function (string $endpointType, int $endpointId, string $label) use ($endpointUsage): ?string {
if ($endpointId <= 0) {
return null;
}
$stats = $endpointUsage[$endpointType][$endpointId] ?? ['total' => 0, 'patchpanel' => 0, 'other' => 0];
$stats = $endpointUsage[$endpointType][$endpointId] ?? ['total' => 0];
if ((int)$stats['total'] <= 0) {
return null;
}
if ($endpointType !== 'outlet') {
return $label . " ist bereits in Verwendung";
}
if ($otherType === 'patchpanel') {
if ((int)$stats['patchpanel'] > 0) {
return $label . " hat bereits eine Patchpanel-Verbindung";
}
return null;
}
if ((int)$stats['other'] > 0) {
return $label . " hat bereits eine Endgeraete-Verbindung";
}
return null;
return $label . " ist bereits in Verwendung";
};
$errorA = $validateEndpointUsage($portAType, $portAId, $portBType, 'Port an Endpunkt A');
$errorA = $validateEndpointUsage($portAType, $portAId, 'Port an Endpunkt A');
if ($errorA !== null) {
$errors[] = $errorA;
}
$errorB = $validateEndpointUsage($portBType, $portBId, $portAType, 'Port an Endpunkt B');
$errorB = $validateEndpointUsage($portBType, $portBId, 'Port an Endpunkt B');
if ($errorB !== null) {
$errors[] = $errorB;
}

View File

@@ -248,11 +248,6 @@ if ($type === 'outlet' && $id > 0) {
<div id="panel-floor-plan-group" class="form-group" <?php echo $showPanelPlacementFields ? '' : 'hidden'; ?>>
<label>Stockwerkskarte</label>
<div class="floor-plan-block">
<div class="floor-plan-toolbar">
<button type="button" class="button button-small" data-floor-plan-zoom="in">+</button>
<button type="button" class="button button-small" data-floor-plan-zoom="out">-</button>
<button type="button" class="button button-small" data-floor-plan-zoom="reset">Reset</button>
</div>
<div id="floor-plan-canvas" class="floor-plan-canvas"
data-marker-width="<?php echo $markerWidth; ?>"
data-marker-height="<?php echo $markerHeight; ?>"
@@ -262,10 +257,9 @@ if ($type === 'outlet' && $id > 0) {
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">
<svg id="floor-plan-overlay" class="floor-plan-overlay" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
</div>
<p class="floor-plan-hint">Nur das aktuell bearbeitete Patchpanel ist verschiebbar. Andere Objekte werden als Referenz halbtransparent angezeigt. Neue Objekte starten bei Position 30 x 30. Zoom per Mausrad, verschieben mit Shift + Drag.</p>
<p class="floor-plan-hint">Nur das aktuell bearbeitete Patchpanel ist verschiebbar. Andere Objekte werden als Referenz halbtransparent angezeigt. Neue Objekte starten bei Position 30 x 30. Zoom mit Mausrad, verschieben mit Shift + Drag.</p>
<p class="floor-plan-position">Koordinate: <span id="floor-plan-position"></span></p>
</div>
</div>
@@ -350,11 +344,6 @@ if ($type === 'outlet' && $id > 0) {
<div class="form-group">
<label>Stockwerkskarte</label>
<div class="floor-plan-block">
<div class="floor-plan-toolbar">
<button type="button" class="button button-small" data-floor-plan-zoom="in">+</button>
<button type="button" class="button button-small" data-floor-plan-zoom="out">-</button>
<button type="button" class="button button-small" data-floor-plan-zoom="reset">Reset</button>
</div>
<div id="floor-plan-canvas" class="floor-plan-canvas"
data-marker-width="<?php echo $markerWidth; ?>"
data-marker-height="<?php echo $markerHeight; ?>"
@@ -364,10 +353,9 @@ if ($type === 'outlet' && $id > 0) {
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">
<svg id="floor-plan-overlay" class="floor-plan-overlay" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
</div>
<p class="floor-plan-hint">Nur die aktuell bearbeitete Wandbuchse ist verschiebbar. Blau = Patchpanel, Gruen = Dosen-Referenz, Orange = gewaehlter Raum. Netzwerkdosen sind immer 10 x 10. Zoom per Mausrad, verschieben mit Shift + Drag.</p>
<p class="floor-plan-hint">Nur die aktuell bearbeitete Wandbuchse ist verschiebbar. Blau = Patchpanel, Gruen = Dosen-Referenz, Orange = gewaehlter Raum. Netzwerkdosen sind immer 10 x 10. Zoom mit Mausrad, verschieben mit Shift + Drag.</p>
<p class="floor-plan-position">Koordinate: <span id="floor-plan-position"></span></p>
</div>
</div>