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

feat: hamburger menu und info Icons

Browse Source
This commit is contained in:
ISA
2025-09-12 14:55:19 +02:00
parent f200d0bb20
commit cc19a0a466
5 changed files with 109 additions and 24 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 # 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 # basePath wird jetzt in public/config.json gepflegt
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.358 NEXT_PUBLIC_APP_VERSION=1.1.359

2
.env.production
View File

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

100
components/mainComponent/MapComponent.js
View File

@@ -6,7 +6,7 @@ import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu"; import "leaflet-contextmenu";
import "leaflet.smooth_marker_bouncing"; import "leaflet.smooth_marker_bouncing";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { InformationCircleIcon } from "@heroicons/react/20/solid"; import { Icon } from "@iconify/react";
import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js"; import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify"; import { ToastContainer, toast } from "react-toastify";
import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js"; import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
@@ -151,6 +151,24 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [oms, setOms] = useState(null); // State für OMS-Instanz const [oms, setOms] = useState(null); // State für OMS-Instanz
// Sichtbarkeit der App-Info-Karte (unten links)
const [showAppInfoCard, setShowAppInfoCard] = useState(() => {
try {
const v = localStorage.getItem("showAppInfoCard");
return v === null ? true : v === "true";
} catch (_) {
return true;
}
});
// Sichtbarkeit des Layer-Kontrollpanels (oben rechts)
const [showLayersPanel, setShowLayersPanel] = useState(() => {
try {
const v = localStorage.getItem("showLayersPanel");
return v === null ? true : v === "true";
} catch (_) {
return true;
}
});
// Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat // Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat
// Nutzer-Flag global auf window, damit auch Redux darauf zugreifen kann // Nutzer-Flag global auf window, damit auch Redux darauf zugreifen kann
@@ -209,6 +227,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
} }
}); });
// Persistiere Sichtbarkeit der App-Info-Karte
useEffect(() => {
try {
localStorage.setItem("showAppInfoCard", String(showAppInfoCard));
} catch (_) {}
}, [showAppInfoCard]);
// Persistiere Sichtbarkeit des Layer-Panels
useEffect(() => {
try {
localStorage.setItem("showLayersPanel", String(showLayersPanel));
} catch (_) {}
}, [showLayersPanel]);
//-------------------------------------------- //--------------------------------------------
const handleCoordinatesSubmit = coords => { const handleCoordinatesSubmit = coords => {
@@ -1035,31 +1066,62 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
)} )}
</div> </div>
{GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && ( {GisStationsStaticDistrict &&
<MapLayersControlPanel GisStationsStaticDistrict.Points?.length > 0 &&
className="z-50" showLayersPanel && (
handlePolylineCheckboxChange={handlePolylineCheckboxChange} <MapLayersControlPanel
/> className="z-50"
)} handlePolylineCheckboxChange={handlePolylineCheckboxChange}
/>
)}
<CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} /> <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
<div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div> <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
{/* Top-right controls: info toggle + hamburger (layers) */}
<div className="absolute top-3 right-3 z-50 pointer-events-auto flex items-center gap-2">
<button
onClick={() => setShowLayersPanel(v => !v)}
aria-label={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
>
<Icon icon="material-symbols:menu-rounded" className="h-8 w-8 text-blue-900" />
</button>
<button
onClick={() => setShowAppInfoCard(v => !v)}
aria-label={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
>
<Icon
icon="material-symbols:info-rounded"
className="text-blue-900 h-8 w-8 pr-1"
title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
/>
</button>
</div>
<CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} /> <CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} />
<div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50"> {showAppInfoCard && (
<div className="flex justify-between items-center"> <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
<div> <div className="flex justify-between items-center">
<span className="text-black text-lg font-semibold"> TALAS.Map </span> <div>
<br /> <span className="text-black text-lg font-semibold"> TALAS.Map </span>
<span className="text-black text-lg">Version {appVersion}</span> <br />
</div> <span className="text-black text-lg">Version {appVersion}</span>
<div> </div>
<button onClick={openVersionInfoModal}> <div>
<InformationCircleIcon className="text-blue-900 h-8 w-8 pr-1" title="Weitere Infos" /> <button onClick={openVersionInfoModal}>
</button> <Icon
icon="material-symbols:info-rounded"
className="text-blue-900 h-8 w-8 pr-1"
title="Weitere Infos"
/>
</button>
</div>
</div> </div>
</div> </div>
</div> )}
<VersionInfoModal <VersionInfoModal
showVersionInfoModal={showVersionInfoModal} showVersionInfoModal={showVersionInfoModal}
closeVersionInfoModal={closeVersionInfoModal} closeVersionInfoModal={closeVersionInfoModal}

26
package-lock.json generated
View File

@@ -1,16 +1,17 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.358", "version": "1.1.359",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "nodemap", "name": "nodemap",
"version": "1.1.358", "version": "1.1.359",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",
"@heroicons/react": "^2.1.5", "@heroicons/react": "^2.1.5",
"@iconify/react": "^6.0.1",
"@mui/icons-material": "^6.0.2", "@mui/icons-material": "^6.0.2",
"@reduxjs/toolkit": "^2.5.1", "@reduxjs/toolkit": "^2.5.1",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
@@ -357,6 +358,27 @@
"react": ">= 16 || ^19.0.0-rc" "react": ">= 16 || ^19.0.0-rc"
} }
}, },
"node_modules/@iconify/react": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-6.0.1.tgz",
"integrity": "sha512-fCocnAfiGXjrA0u7KkS3W/OQHNp9LRFICudvOtxmS3Mf7U92aDhP50wyzRbobZli51zYt9ksZ9g0J7H586XvOQ==",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"react": ">=16"
}
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"license": "MIT"
},
"node_modules/@isaacs/cliui": { "node_modules/@isaacs/cliui": {
"version": "8.0.2", "version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

3
package.json
View File

@@ -1,10 +1,11 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.358", "version": "1.1.359",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",
"@heroicons/react": "^2.1.5", "@heroicons/react": "^2.1.5",
"@iconify/react": "^6.0.1",
"@mui/icons-material": "^6.0.2", "@mui/icons-material": "^6.0.2",
"@reduxjs/toolkit": "^2.5.1", "@reduxjs/toolkit": "^2.5.1",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",