refactor and cleanup

components/AddPOIOnPolyline.js

@@ -1,3 +1,4 @@
+// /components/AddPOIOnPolyline.js
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { closeAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice";
@@ -20,6 +21,7 @@ const AddPOIOnPolyline = () => {
   if (!isOpen) return null;
 
   const handleSubmit = async (event) => {
+    alert("POI auf Polyline hinzufügen");
     event.preventDefault();
 
     const formData = { name, latitude, longitude };

components/CircleIcon.js

@@ -1,13 +0,0 @@
-// /components/CircleIcon.js
-// Custom circle icon for draggable markers
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-
-const circleIcon = L.divIcon({
-  className: "custom-div-icon",
-  html: "<div style='background-color:gray;border-radius:50%;width:10px;height:10px;border: solid black 1px;'></div>",
-  iconSize: [25, 25],
-  iconAnchor: [5, 5],
-});
-
-export default circleIcon;

components/CoordinateModal.js

@@ -1,29 +0,0 @@
-// components/CoordinateModal.js
-import React from "react";
-
-const CoordinateModal = ({ isOpen, onClose, coordinates }) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white p-6 rounded-lg shadow-lg w-80">
-        <h2 className="text-lg font-bold mb-2">Koordinaten</h2>
-        <p className="mb-4">Koordinaten: {coordinates}</p>
-        <button
-          onClick={() => {
-            navigator.clipboard.writeText(coordinates);
-            alert("Koordinaten kopiert!");
-          }}
-          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-        >
-          Kopieren
-        </button>
-        <button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">
-          Schließen
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default CoordinateModal;

components/EndIcon.js

@@ -1,10 +0,0 @@
-// Viereck als End-Icon für die Route
-import L from "leaflet";
-const endIcon = L.divIcon({
-  className: "custom-end-icon",
-  html: "<div style='background-color: gray; width: 14px; height: 14px; border: solid black 2px;'></div>", // Graues Viereck
-  iconSize: [14, 14],
-  iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker
-});
-
-export default endIcon;

components/StartIcon.js

@@ -1,16 +0,0 @@
-// Custom triangle icon for draggable markers
-import L from "leaflet";
-
-const startIcon = L.divIcon({
-  className: "custom-start-icon",
-  html: `
-    <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <polygon points="10,2 18,18 2,18" fill="black" />
-      <polygon points="10,5 16,16 4,16" fill="gray" />
-    </svg>
-  `, // Schwarzes Dreieck innerhalb eines grauen Dreiecks
-  iconSize: [18, 18],
-  iconAnchor: [9, 10],
-});
-
-export default startIcon;

components/mainComponent/MapComponent.js

@@ -7,7 +7,7 @@ import "leaflet-contextmenu";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt
 import "react-toastify/dist/ReactToastify.css";
-import MapLayersControlPanel from "../MapLayersControlPanel.js";
+import MapLayersControlPanel from "../uiWidgets/MapLayersControlPanel.js";
 
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import PoiUpdateModal from "../pois/PoiUpdateModal.js";
@@ -23,7 +23,7 @@ import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarke
 import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js";
 import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
 import { setupPOIs } from "../../utils/setupPOIs.js";
-import VersionInfoModal from "../VersionInfoModal.js";
+import VersionInfoModal from "../uiWidgets/VersionInfoModal.js";
 import useLayerVisibility from "../../hooks/useLayerVisibility.js";
 import useLineData from "../../hooks/useLineData.js";
 import { useMapComponentState } from "../../hooks/useMapComponentState.js";
@@ -31,15 +31,14 @@ import { updateLocation } from "../../utils/updateBereichUtil.js";
 import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js";
-import CoordinateInput from "../CoordinateInput.js";
-import CoordinateModal from "../CoordinateModal.js";
+import CoordinateInput from "../uiWidgets/CoordinateInput.js";
 import CoordinatePopup from "../CoordinatePopup.js";
 //------------------------Daten aus API--------------------
 import { fetchPoiDataService } from "../../services/database/fetchPoiDataService.js";
 import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js";
 import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
 import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js";
-import ShowAddStationPopup from "../AddPOIModal.js";
+import ShowAddStationPopup from "../pois/AddPOIModal.js";
 import AddPOIOnPolyline from "../AddPOIOnPolyline";
 import { enablePolylineEvents, disablePolylineEvents } from "../../utils/polylines/eventHandlers";
 import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/polylineContextMenuSlice";
@@ -865,8 +864,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   return (
     <>
       {useSelector((state) => state.addPoiOnPolyline.isOpen) && <AddPOIOnPolyline />}
-      {/* Zeigt das Koordinaten-Modal, wenn `showCoordinatesModal` true ist */}
-      {showCoordinatesModal && <CoordinateModal latlng={popupCoordinates} onClose={() => setShowCoordinatesModal(false)} />}
 
       {/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */}
       {showPoiModal && <ShowAddStationPopup latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />}

components/pois/AddPOIModal.js

@@ -1,13 +1,13 @@
-// components/AddStationPopup.js
+// components/AddPOIModal.js
 import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
-import { setPoiMarkers } from "../redux/slices/readPoiMarkersStoreSlice";
-import { selectGisStationsStaticDistrict } from "../redux/slices/webservice/gisStationsStaticDistrictSlice";
+import { setPoiMarkers } from "../../redux/slices/readPoiMarkersStoreSlice";
+import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchPoiTypes } from "../redux/slices/database/poiTypesSlice";
-import { incrementTrigger } from "../redux/slices/poiReadFromDbTriggerSlice";
+import { fetchPoiTypes } from "../../redux/slices/database/poiTypesSlice";
+import { incrementTrigger } from "../../redux/slices/poiReadFromDbTriggerSlice";
 
-const ShowAddStationPopup = ({ onClose, map, latlng }) => {
+const AddPOIModal = ({ onClose, map, latlng }) => {
   const dispatch = useDispatch();
 
   const poiTypData = useSelector((state) => state.poiTypes.data);
@@ -176,4 +176,4 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   );
 };
 
-export default ShowAddStationPopup;
+export default AddPOIModal;

components/uiWidgets/MapLayersControlPanel.js

@@ -1,14 +1,14 @@
 // /componentss/MapLayersControlPanel.js
 import React, { useEffect, useState } from "react";
-import { setSelectedArea } from "../redux/slices/selectedAreaSlice";
-import EditModeToggle from "./EditModeToggle";
+import { setSelectedArea } from "../../redux/slices/selectedAreaSlice";
+import EditModeToggle from "../EditModeToggle";
 import { useSelector, useDispatch } from "react-redux";
-import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
-import { selectGisSystemStatic } from "../redux/slices/webservice/gisSystemStaticSlice";
-import { selectGisStationsStaticDistrict } from "../redux/slices/webservice/gisStationsStaticDistrictSlice";
-import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
-import { setVisible } from "../redux/slices/poiLayerVisibleSlice";
-import { incrementZoomTrigger } from "../redux/slices/zoomTriggerSlice";
+import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice";
+import { selectGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice";
+import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
+import { selectMapLayersState, setLayerVisibility } from "../../redux/slices/mapLayersSlice";
+import { setVisible } from "../../redux/slices/poiLayerVisibleSlice";
+import { incrementZoomTrigger } from "../../redux/slices/zoomTriggerSlice";
 
 function MapLayersControlPanel() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode