Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Plus und Minus Icons

Browse Source
This commit is contained in:
ISA
2025-09-16 13:32:22 +02:00
parent cdfdd3d6cf
commit 2e5acf9327
16 changed files with 111 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
# z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
# basePath wird jetzt in public/config.json gepflegt
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.375
NEXT_PUBLIC_APP_VERSION=1.1.376

2
.env.production
View File

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
# basePath wird jetzt in public/config.json gepflegt
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.375
NEXT_PUBLIC_APP_VERSION=1.1.376

14
components/icons/material-symbols/MinusIcon.js Normal file
View File

@@ -0,0 +1,14 @@
const MinusIcon = ({ className = "h-8 w-8" }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
strokeWidth="1.5"
stroke="currentColor"
className={className}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
</svg>
);
export default MinusIcon;

14
components/icons/material-symbols/PlusIcon.js Normal file
View File

@@ -0,0 +1,14 @@
const PlusIcon = ({ className = "h-8 w-8" }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
strokeWidth="1.5"
stroke="currentColor"
className={className}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14M5 12h14" />
</svg>
);
export default PlusIcon;

23
components/mainComponent/MapComponent.js
View File

@@ -15,6 +15,8 @@ import InfoIcon from "@/components/icons/material-symbols/InfoIcon";
import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
import MapMarkerIcon from "@/components/icons/material-symbols/MapMarkerIcon";
import ExpandIcon from "@/components/icons/material-symbols/ExpandIcon";
import PlusIcon from "@/components/icons/material-symbols/PlusIcon";
import MinusIcon from "@/components/icons/material-symbols/MinusIcon";
import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify";
import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
@@ -1266,6 +1268,27 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
/>
</button>
</div>
{/* Custom Zoom Controls bottom-right, styled in littwin-blue to match app icons */}
<div className="absolute bottom-8 right-3 z-50 flex flex-col gap-1">
<button
data-testid="zoom-in"
onClick={() => map?.zoomIn?.()}
aria-label="Zoom in"
className="rounded-md bg-white/90 hover:bg-white shadow-sm p-1"
title="Zoom in"
>
<PlusIcon className="h-5 w-5 text-littwin-blue" />
</button>
<button
data-testid="zoom-out"
onClick={() => map?.zoomOut?.()}
aria-label="Zoom out"
className="rounded-md bg-white/90 hover:bg-white shadow-sm p-1"
title="Zoom out"
>
<MinusIcon className="h-5 w-5 text-littwin-blue" />
</button>
</div>
{/* Marker/AreaDropdown Panel außerhalb der Button-Leiste platzieren, damit die Position mit den anderen Panels identisch ist */}
{overlay === "area" && <AreaDropdown onClose={() => setOverlay(null)} />}
{/* BaseMapPanel entfernt */}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "nodemap",
"version": "1.1.375",
"version": "1.1.376",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "nodemap",
"version": "1.1.375",
"version": "1.1.376",
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "nodemap",
"version": "1.1.375",
"version": "1.1.376",
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",

6
playwright/tests/mapcomponent.spec.js
View File

@@ -282,10 +282,10 @@ test("zoom control buttons update mapZoom", async ({ page }) => {
});
await page.goto("http://localhost:3000/?m=12&u=484");
// Wait for Leaflet map and zoom controls
// Wait for Leaflet map and custom zoom controls
await page.locator("#map.leaflet-container").waitFor({ state: "visible", timeout: 20_000 });
const zoomInBtn = page.locator(".leaflet-control-zoom-in");
const zoomOutBtn = page.locator(".leaflet-control-zoom-out");
const zoomInBtn = page.getByTestId("zoom-in");
const zoomOutBtn = page.getByTestId("zoom-out");
await expect(zoomInBtn).toBeVisible();
await expect(zoomOutBtn).toBeVisible();

10
reports/junit/playwright.xml
View File

@@ -1,6 +1,6 @@
<testsuites id="" name="" tests="3" failures="3" skipped="0" errors="0" time="14.65598">
<testsuite name="mapcomponent.spec.js" timestamp="2025-09-16T10:21:16.870Z" hostname="chromium" tests="3" failures="3" skipped="0" time="38.656" errors="0">
<testcase name="MapComponent" classname="mapcomponent.spec.js" time="13.578">
<testsuites id="" name="" tests="3" failures="3" skipped="0" errors="0" time="14.492743999999998">
<testsuite name="mapcomponent.spec.js" timestamp="2025-09-16T10:34:03.733Z" hostname="chromium" tests="3" failures="3" skipped="0" time="38.186" errors="0">
<testcase name="MapComponent" classname="mapcomponent.spec.js" time="13.365">
<failure message="mapcomponent.spec.js:162:5 MapComponent" type="FAILURE">
<![CDATA[ [chromium] › mapcomponent.spec.js:162:5 › MapComponent ───────────────────────────────────────────
@@ -56,7 +56,7 @@
]]>
</system-out>
</testcase>
<testcase name="mouse wheel zoom updates mapZoom" classname="mapcomponent.spec.js" time="12.558">
<testcase name="mouse wheel zoom updates mapZoom" classname="mapcomponent.spec.js" time="12.426">
<failure message="mapcomponent.spec.js:239:5 mouse wheel zoom updates mapZoom" type="FAILURE">
<![CDATA[ [chromium] › mapcomponent.spec.js:239:5 › mouse wheel zoom updates mapZoom ───────────────────────
@@ -103,7 +103,7 @@
]]>
</system-out>
</testcase>
<testcase name="zoom control buttons update mapZoom" classname="mapcomponent.spec.js" time="12.52">
<testcase name="zoom control buttons update mapZoom" classname="mapcomponent.spec.js" time="12.395">
<failure message="mapcomponent.spec.js:272:5 zoom control buttons update mapZoom" type="FAILURE">
<![CDATA[ [chromium] › mapcomponent.spec.js:272:5 › zoom control buttons update mapZoom ────────────────────

77
test-results/mapcomponent-MapComponent-chromium/error-context.md
View File

@@ -6,61 +6,30 @@
- generic [ref=e4]:
- generic:
- generic:
- button "Marker" [ref=e5] [cursor=pointer]
- button "Marker" [ref=e6] [cursor=pointer]
- button "Marker" [ref=e7] [cursor=pointer]
- button "Marker" [ref=e8] [cursor=pointer]
- button "Marker" [ref=e9] [cursor=pointer]
- button "Marker" [ref=e10] [cursor=pointer]
- button "Marker" [ref=e11] [cursor=pointer]
- button "Marker" [ref=e12] [cursor=pointer]
- button "Marker" [ref=e13] [cursor=pointer]
- button "Marker" [ref=e14] [cursor=pointer]
- button "Marker" [ref=e15] [cursor=pointer]
- button "Marker" [ref=e16] [cursor=pointer]
- button "Marker" [ref=e17] [cursor=pointer]
- button "Marker" [ref=e18] [cursor=pointer]
- button "Marker" [ref=e19] [cursor=pointer]
- button "Marker" [ref=e20] [cursor=pointer]
- button "Marker" [ref=e21] [cursor=pointer]
- button "Marker" [ref=e22] [cursor=pointer]
- button "Marker" [ref=e23] [cursor=pointer]
- button "Marker" [ref=e24] [cursor=pointer]
- button "Marker" [ref=e25] [cursor=pointer]
- button "Marker" [ref=e26] [cursor=pointer]
- button "Marker" [ref=e27] [cursor=pointer]
- button "Marker" [ref=e28] [cursor=pointer]
- button "Marker" [ref=e29] [cursor=pointer]
- button "Marker" [ref=e30] [cursor=pointer]
- button "Marker" [ref=e31] [cursor=pointer]
- button "Marker" [ref=e32] [cursor=pointer]
- button "Marker" [ref=e33] [cursor=pointer]
- generic:
- generic:
- generic [ref=e34]:
- button "Zoom in" [ref=e35] [cursor=pointer]:
- generic [ref=e36] [cursor=pointer]: +
- button "Zoom out" [ref=e37] [cursor=pointer]:
- generic [ref=e38] [cursor=pointer]: −
- generic [ref=e39]:
- link "Leaflet" [ref=e40] [cursor=pointer]:
- generic [ref=e5]:
- button "Zoom in" [ref=e6] [cursor=pointer]:
- generic [ref=e7] [cursor=pointer]: +
- button "Zoom out" [ref=e8] [cursor=pointer]:
- generic [ref=e9] [cursor=pointer]: −
- generic [ref=e10]:
- link "Leaflet" [ref=e11] [cursor=pointer]:
- /url: https://leafletjs.com
- img [ref=e41] [cursor=pointer]
- img [ref=e12] [cursor=pointer]
- text: Leaflet
- generic [ref=e45]: "|"
- generic [ref=e16]: "|"
- text: © OpenStreetMap contributors
- generic [ref=e46]:
- button "Marker" [ref=e47] [cursor=pointer]:
- img [ref=e48] [cursor=pointer]
- button "Koordinatensuche einblenden" [ref=e51] [cursor=pointer]:
- img [ref=e52] [cursor=pointer]
- button "Bearbeitungsmodus aktivieren" [ref=e54] [cursor=pointer]:
- img [ref=e55] [cursor=pointer]
- button "Karte auf Standardansicht" [ref=e57] [cursor=pointer]:
- img [ref=e58] [cursor=pointer]
- button "Layer-Panel einblenden" [active] [ref=e60] [cursor=pointer]:
- img [ref=e61] [cursor=pointer]
- button "Info einblenden" [ref=e63] [cursor=pointer]:
- img [ref=e64] [cursor=pointer]
- alert [ref=e66]
- generic [ref=e17]:
- button "Marker" [ref=e18] [cursor=pointer]:
- img [ref=e19] [cursor=pointer]
- button "Koordinatensuche einblenden" [ref=e22] [cursor=pointer]:
- img [ref=e23] [cursor=pointer]
- button "Bearbeitungsmodus aktivieren" [ref=e25] [cursor=pointer]:
- img [ref=e26] [cursor=pointer]
- button "Karte auf Standardansicht" [ref=e28] [cursor=pointer]:
- img [ref=e29] [cursor=pointer]
- button "Layer-Panel einblenden" [active] [ref=e31] [cursor=pointer]:
- img [ref=e32] [cursor=pointer]
- button "Info einblenden" [ref=e34] [cursor=pointer]:
- img [ref=e35] [cursor=pointer]
- alert [ref=e37]
```

BIN
test-results/mapcomponent-MapComponent-chromium/test-failed-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
test-results/mapcomponent-MapComponent-chromium/video.webm
View File

Binary file not shown.

77
test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/error-context.md
View File

@@ -6,61 +6,30 @@
- generic [ref=e4]:
- generic:
- generic:
- button "Marker" [ref=e5] [cursor=pointer]
- button "Marker" [ref=e6] [cursor=pointer]
- button "Marker" [ref=e7] [cursor=pointer]
- button "Marker" [ref=e8] [cursor=pointer]
- button "Marker" [ref=e9] [cursor=pointer]
- button "Marker" [ref=e10] [cursor=pointer]
- button "Marker" [ref=e11] [cursor=pointer]
- button "Marker" [ref=e12] [cursor=pointer]
- button "Marker" [ref=e13] [cursor=pointer]
- button "Marker" [ref=e14] [cursor=pointer]
- button "Marker" [ref=e15] [cursor=pointer]
- button "Marker" [ref=e16] [cursor=pointer]
- button "Marker" [ref=e17] [cursor=pointer]
- button "Marker" [ref=e18] [cursor=pointer]
- button "Marker" [ref=e19] [cursor=pointer]
- button "Marker" [ref=e20] [cursor=pointer]
- button "Marker" [ref=e21] [cursor=pointer]
- button "Marker" [ref=e22] [cursor=pointer]
- button "Marker" [ref=e23] [cursor=pointer]
- button "Marker" [ref=e24] [cursor=pointer]
- button "Marker" [ref=e25] [cursor=pointer]
- button "Marker" [ref=e26] [cursor=pointer]
- button "Marker" [ref=e27] [cursor=pointer]
- button "Marker" [ref=e28] [cursor=pointer]
- button "Marker" [ref=e29] [cursor=pointer]
- button "Marker" [ref=e30] [cursor=pointer]
- button "Marker" [ref=e31] [cursor=pointer]
- button "Marker" [ref=e32] [cursor=pointer]
- button "Marker" [ref=e33] [cursor=pointer]
- generic:
- generic:
- generic [ref=e34]:
- button "Zoom in" [ref=e35] [cursor=pointer]:
- generic [ref=e36] [cursor=pointer]: +
- button "Zoom out" [ref=e37] [cursor=pointer]:
- generic [ref=e38] [cursor=pointer]: −
- generic [ref=e39]:
- link "Leaflet" [ref=e40] [cursor=pointer]:
- generic [ref=e5]:
- button "Zoom in" [ref=e6] [cursor=pointer]:
- generic [ref=e7] [cursor=pointer]: +
- button "Zoom out" [ref=e8] [cursor=pointer]:
- generic [ref=e9] [cursor=pointer]: −
- generic [ref=e10]:
- link "Leaflet" [ref=e11] [cursor=pointer]:
- /url: https://leafletjs.com
- img [ref=e41] [cursor=pointer]
- img [ref=e12] [cursor=pointer]
- text: Leaflet
- generic [ref=e45]: "|"
- generic [ref=e16]: "|"
- text: © OpenStreetMap contributors
- generic [ref=e46]:
- button "Marker" [ref=e47] [cursor=pointer]:
- img [ref=e48] [cursor=pointer]
- button "Koordinatensuche einblenden" [ref=e51] [cursor=pointer]:
- img [ref=e52] [cursor=pointer]
- button "Bearbeitungsmodus aktivieren" [ref=e54] [cursor=pointer]:
- img [ref=e55] [cursor=pointer]
- button "Karte auf Standardansicht" [ref=e57] [cursor=pointer]:
- img [ref=e58] [cursor=pointer]
- button "Layer-Panel einblenden" [ref=e60] [cursor=pointer]:
- img [ref=e61] [cursor=pointer]
- button "Info einblenden" [ref=e63] [cursor=pointer]:
- img [ref=e64] [cursor=pointer]
- alert [ref=e66]
- generic [ref=e17]:
- button "Marker" [ref=e18] [cursor=pointer]:
- img [ref=e19] [cursor=pointer]
- button "Koordinatensuche einblenden" [ref=e22] [cursor=pointer]:
- img [ref=e23] [cursor=pointer]
- button "Bearbeitungsmodus aktivieren" [ref=e25] [cursor=pointer]:
- img [ref=e26] [cursor=pointer]
- button "Karte auf Standardansicht" [ref=e28] [cursor=pointer]:
- img [ref=e29] [cursor=pointer]
- button "Layer-Panel einblenden" [ref=e31] [cursor=pointer]:
- img [ref=e32] [cursor=pointer]
- button "Info einblenden" [ref=e34] [cursor=pointer]:
- img [ref=e35] [cursor=pointer]
- alert [ref=e37]
```

BIN
test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/test-failed-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/video.webm
View File

Binary file not shown.

5
utils/initializeMap.js
View File

@@ -143,10 +143,7 @@ export const initializeMap = (
initMap.dragging.enable();
// Add visible +/- zoom control bottom-right (playwright-friendly)
try {
L.control.zoom({ position: "bottomright" }).addTo(initMap);
} catch (_) {}
// Do not add the default Leaflet zoom control; we'll render custom React controls in MapComponent
L.tileLayer(tileLayerUrl, {
attribution: "&copy; OpenStreetMap contributors",