feat: Persist checkbox states in localStorage to retain settings after page reload

- Implemented logic to save the visibility states of POI and map layers in localStorage.
- Loaded saved checkbox states on component mount to retain user preferences.
- Updated `handleCheckboxChange` and `handlePoiCheckboxChange` to store changes in localStorage.
- Ensured that settings persist across page reloads for a better user experience.

components/DataSheet.js

@@ -18,6 +18,18 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
+  useEffect(() => {
+    const storedPoiVisible = localStorage.getItem("poiVisible");
+    if (storedPoiVisible !== null) {
+      setPoiVisible(storedPoiVisible === "true");
+    }
+
+    const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
+    if (storedMapLayersVisibility) {
+      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+    }
+  }, [setPoiVisible, setMapLayersVisibility]);
+
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
@@ -69,10 +81,17 @@ function DataSheet() {
         ...prev,
         [name]: checked,
       };
+      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage
       return newState;
     });
   };
 
+  const handlePoiCheckboxChange = (event) => {
+    const { checked } = event.target;
+    setPoiVisible(checked);
+    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
+  };
+
   const handleIconClick = () => {
     setSelectedArea("Station wählen");
     setZoomTrigger((current) => current + 1);
@@ -104,15 +123,7 @@ function DataSheet() {
               <br />
             </React.Fragment>
           ))}
-          <input
-            type="checkbox"
-            checked={poiVisible}
-            onChange={(e) => {
-              const checked = e.target.checked;
-              setPoiVisible(checked);
-            }}
-            id="poi-checkbox"
-          />
+          <input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
           <label htmlFor="poi-checkbox" className="text-sm ml-2">
             POIs
           </label>

hooks/useLineData.js

@@ -16,6 +16,8 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
 
     ws.onopen = () => {
       console.log("WebSocket-Verbindung hergestellt");
+      // Testnachricht an den Server senden
+      ws.send(JSON.stringify({ type: "test", message: "Hallo vom Client" }));
     };
 
     ws.onmessage = (event) => {

websocket-server.js

@@ -7,8 +7,22 @@ wss.on("connection", (ws) => {
   console.log("New WebSocket connection");
 
   ws.on("message", (message) => {
-    console.log("Received:", message);
-    ws.send(JSON.stringify({ message: "Hallo vom WebSocket-Server" }));
+    // Konvertiere den Buffer in einen String
+    const messageString = message.toString();
+
+    console.log("Received:", messageString);
+
+    // Versuche die Nachricht in JSON zu parsen
+    try {
+      const parsedMessage = JSON.parse(messageString);
+
+      // Beispielnachricht an den Client zurücksenden
+      if (parsedMessage.type === "test") {
+        ws.send(JSON.stringify({ message: `Hallo zurück, ${parsedMessage.message}` }));
+      }
+    } catch (error) {
+      console.error("Fehler beim Parsen der Nachricht:", error);
+    }
   });
 
   ws.on("close", () => {