polylines tooltip content

components/DataSheet.js

@@ -1,3 +1,4 @@
+// components/DataSheet.js
 import React, { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
@@ -5,18 +6,15 @@ import { gisSystemStaticState } from "../store/atoms/gisSystemState";
 import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
 
 function DataSheet() {
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
-  const [mapLayersVisibility, setMapLayersVisibility] =
-    useRecoilState(mapLayersState);
+  const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
-  const GisStationsStaticDistrict = useRecoilValue(
-    gisStationsStaticDistrictState
-  );
+  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
@@ -24,30 +22,31 @@ function DataSheet() {
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
     setSelectedArea(areaName);
-    console.log("Area selected oder areaName in DataSheet.js:", areaName);
   };
 
   useEffect(() => {
-    const allowedSystems = new Set(
-      GisSystemStatic.filter((system) => system.Allow === 1).map(
-        (system) => system.IdSystem
-      )
-    );
+    console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
+    console.log("GisSystemStatic:", GisSystemStatic);
+    const allowedSystems = new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem));
+    console.log("allowedSystems:", allowedSystems);
+
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
-      const isUnique =
-        !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
+      const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
       if (isUnique) {
         seenNames.add(item.Area_Name);
       }
       return isUnique;
     });
+
     setStationListing(
       filteredAreas.map((area, index) => ({
         id: index + 1,
         name: area.Area_Name,
       }))
     );
+    //console.log("filteredAreas:", filteredAreas);
+
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
       const formattedName = item.Name.replace(/[\s\-]+/g, "");
@@ -57,6 +56,7 @@ function DataSheet() {
       }
       return isUnique;
     });
+
     setSystemListing(
       filteredSystems.map((system, index) => ({
         id: index + 1,
@@ -64,19 +64,21 @@ function DataSheet() {
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
+  //}, []);
+  //-----------------------------------------
+  //-----------------------------------------
 
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
-    console.log(`Checkbox ${name} checked state:`, checked);
 
     setMapLayersVisibility((prev) => {
       const newState = {
         ...prev,
         [name]: checked,
       };
-      console.log(`New mapLayersVisibility state:`, newState);
       return newState;
     });
+    console.log("mapLayersVisibility:", mapLayersVisibility);
   };
 
   const handleIconClick = () => {
@@ -85,16 +87,14 @@ function DataSheet() {
   };
 
   return (
-    <div
-      id="mainDataSheet"
-      className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg"
-    >
+    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg">
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
             onChange={handleAreaChange}
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1 font-semibold"
+            role="combobox" // Ensure the correct role is set
           >
             <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
@@ -103,22 +103,15 @@ function DataSheet() {
               </option>
             ))}
           </select>
-          <img
-            src="/img/expand-icon.svg"
-            alt="Expand"
-            className="h-6 w-6 ml-2 cursor-pointer"
-            onClick={handleIconClick}
-          />
+          <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
         </div>
         <div>
           {systemListing.map((system) => (
             <React.Fragment key={system.id}>
-              <input
-                type="checkbox"
-                checked={mapLayersVisibility[system.name] || false}
-                onChange={(e) => handleCheckboxChange(system.name, e)}
-              />
-              <label className="text-sm ml-2">{system.name}</label>
+              <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
+              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                {system.name}
+              </label>
               <br />
             </React.Fragment>
           ))}
@@ -128,12 +121,12 @@ function DataSheet() {
             onChange={(e) => {
               const checked = e.target.checked;
               setPoiVisible(checked);
-              console.log(
-                `POIs sind jetzt ${checked ? "sichtbar" : "nicht sichtbar"}.`
-              );
             }}
+            id="poi-checkbox"
           />
-          <label className="text-sm ml-2">POIs</label>
+          <label htmlFor="poi-checkbox" className="text-sm ml-2">
+            POIs
+          </label>
         </div>
       </div>
     </div>