nodeMap/components/DataSheet.js

// components/DataSheet.js
import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { gisStationsStaticDistrictState } from "../store/gisStationState";
import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState";
function DataSheet() {
  const [mapLayersVisibility, setMapLayersVisibility] =
    useRecoilState(mapLayersState);
  // useState für uniqueAreas und stationListing
  const [uniqueAreas, setUniqueAreas] = useState([]);
  const [uniqueSystems, setUniqueSystems] = useState([]);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const GisStationsStaticDistrict = useRecoilValue(
    gisStationsStaticDistrictState
  );
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);

  useEffect(() => {
    console.log(
      "GisStationsStaticDistrict in DataSheet:",
      GisStationsStaticDistrict
    );
    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);

    // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict.filter((item) => {
      const isUnique = !seenNames.has(item.Area_Name);
      if (isUnique) {
        seenNames.add(item.Area_Name);
      }
      return isUnique;
    });

    setUniqueAreas(filteredAreas);

    const seenSystemNames = new Set();
    const filteredSystems = GisSystemStatic.filter((item) => {
      const isUnique = !seenSystemNames.has(item.Name);
      if (isUnique) {
        seenSystemNames.add(item.Name);
      }
      return isUnique;
    });

    setUniqueSystems(filteredSystems);

    // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
    const newStationListing = filteredAreas
      .map((area, index) => ({
        id: index + 1, // Zuweisung einer eindeutigen ID
        name: area.Area_Name,
      }))
      .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen

    setStationListing(newStationListing);

    //----------
    const newSystemListing = filteredSystems.map((area, index) => ({
      id: index + 1, // Zuweisung einer eindeutigen ID
      name: area.Name,
    }));
    setSystemListing(newSystemListing);
    console.log("System Listing:", systemListing);
  }, [GisStationsStaticDistrict]);

  const [checkedStations, setCheckedStations] = useState({});
  /*   const TALAS = new L.layerGroup();
  const ECI = new L.layerGroup();
  const ULAF = new L.layerGroup();
  const GSMModem = new L.layerGroup();
  const CiscoRouter = new L.layerGroup();
  const WAGO = new L.layerGroup();
  const Siemens = new L.layerGroup();
  const OTDR = new L.layerGroup();
  const WDM = new L.layerGroup();
  const GMA = new L.layerGroup();
  const Sonstige = new L.layerGroup();
  const TALASICL = new L.layerGroup(); */
  const handleCheckboxChangeTALAS = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      TALAS: checked,
    }));
  };
  const handleCheckboxChangeECI = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      ECI: checked,
    }));
  };
  const handleCheckboxChangeULAF = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      ULAF: checked,
    }));
  };
  const handleCheckboxChangeGSMModem = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      GSMModem: checked,
    }));
  };
  const handleCheckboxChangeCiscoRouter = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      CiscoRouter: checked,
    }));
  };
  const handleCheckboxChangeWAGO = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      WAGO: checked,
    }));
  };
  const handleCheckboxChangeSiemens = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      Siemens: checked,
    }));
  };
  const handleCheckboxChangeOTDR = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      OTDR: checked,
    }));
  };
  const handleCheckboxChangeWDM = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      WDM: checked,
    }));
  };
  const handleCheckboxChangeGMA = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      GMA: checked,
    }));
  };
  const handleCheckboxChangeSonstige = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      Sonstige: checked,
    }));
  };
  const handleCheckboxChangeTALASICL = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      TALASICL: checked,
    }));
  };
  const handleCheckboxChangeDAUZ = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      DAUZ: checked,
    }));
  };
  const handleCheckboxChangeSMSFunkmodem = (event) => {
    const { checked } = event.target;

    setMapLayersVisibility((prev) => ({
      ...prev,
      SMSFunkmodem: checked,
    }));
  };
  const handleCheckboxChangeMessstellen = (event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      Messstellen: checked,
    }));
  };
  const handleCheckboxChange = (event) => {
    const { checked, value } = event.target;
    setCheckedStations((prev) => ({
      ...prev,
      [value]: checked,
    }));
  };

  const handleStationChange = (event) => {
    console.log("Station selected:", event.target.value);
  };

  const resetView = () => {
    console.log("View has been reset");
  };
  useEffect(() => {
    console.log("Checked Stations:", checkedStations);
    // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus
    const talasStation = systemListing.find(
      (station) => station.name === "TALAS"
    );
    if (talasStation) {
      console.log(
        "TALAS Station ist gecheckt:",
        checkedStations[talasStation.id]
      );
    }
  }, [checkedStations, systemListing]);
  const eciStation = systemListing.find((station) => station.name === "ECI");
  const ulafStation = systemListing.find((station) => station.name === "ULAF");
  const gsmModemStation = systemListing.find(
    (station) => station.name === "GSMModem"
  );
  const ciscoRouterStation = systemListing.find(
    (station) => station.name === "CiscoRouter"
  );
  const wagoStation = systemListing.find((station) => station.name === "WAGO");
  const siemensStation = systemListing.find(
    (station) => station.name === "Siemens"
  );
  const otdrStation = systemListing.find((station) => station.name === "OTDR");
  const wdmStation = systemListing.find((station) => station.name === "WDM");
  const gmaStation = systemListing.find((station) => station.name === "GMA");
  const sonstigeStation = systemListing.find(
    (station) => station.name === "Sonstige"
  );
  const talasiclStation = systemListing.find(
    (station) => station.name === "TALASICL"
  );
  const dauzStation = systemListing.find((station) => station.name === "DAUZ");
  const smsFunkmodemStation = systemListing.find(
    (station) => station.name === "SMSFunkmodem"
  );
  const messstellenStation = systemListing.find(
    (station) => station.name === "Messstellen"
  );

  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 className="flex flex-col gap-4 p-4">
        <div className="flex items-center justify-between">
          {/* Dropdown */}
          <select
            onChange={handleStationChange}
            id="stationListing"
            className="border-solid-1 p-2 rounded ml-1"
          >
            <option>Station wählen</option>
            {stationListing.map((station) => (
              <option key={station.id} value={station.id}>
                {station.name}
              </option>
            ))}
          </select>
          {/* Icon */}
          <img
            src="/img/expand-icon.svg"
            alt="Expand"
            className="h-6 w-6 ml-2"
          />
        </div>

        {/* Liste der Stationen mit Checkboxen */}

        <div>
          <input
            type="checkbox"
            checked={mapLayersVisibility.TALAS}
            onChange={handleCheckboxChangeTALAS}
          />
          <label className="text-sm font-bold ml-2">TALAS</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.ECI}
            onChange={handleCheckboxChangeECI}
          />
          <label className="text-sm font-bold ml-2">ECI</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.ULAF}
            onChange={handleCheckboxChangeULAF}
          />
          <label className="text-sm font-bold ml-2">ULAF</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.GSMModem}
            onChange={handleCheckboxChangeGSMModem}
          />
          <label className="text-sm font-bold ml-2">GSM Modem</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.CiscoRouter}
            onChange={handleCheckboxChangeCiscoRouter}
          />
          <label className="text-sm font-bold ml-2">Cisco Router</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.WAGO}
            onChange={handleCheckboxChangeWAGO}
          />
          <label className="text-sm font-bold ml-2">WAGO</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.Siemens}
            onChange={handleCheckboxChangeSiemens}
          />
          <label className="text-sm font-bold ml-2">Siemens</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.OTDR}
            onChange={handleCheckboxChangeOTDR}
          />
          <label className="text-sm font-bold ml-2">OTDR</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.WDM}
            onChange={handleCheckboxChangeWDM}
          />
          <label className="text-sm font-bold ml-2">WDM</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.GMA}
            onChange={handleCheckboxChangeGMA}
          />
          <label className="text-sm font-bold ml-2">GMA</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.Sonstige}
            onChange={handleCheckboxChangeSonstige}
          />
          <label className="text-sm font-bold ml-2">Sonstige</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.TALASICL}
            onChange={handleCheckboxChangeTALASICL}
          />
          <label className="text-sm font-bold ml-2">TALASICL</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.DAUZ}
            onChange={handleCheckboxChangeDAUZ}
          />
          <label className="text-sm font-bold ml-2">DAUZ</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.SMSFunkmodem}
            onChange={handleCheckboxChangeSMSFunkmodem}
          />
          <label className="text-sm font-bold ml-2">SMS Funkmodem</label>
          <br />
          <input
            type="checkbox"
            checked={mapLayersVisibility.Messstellen}
            onChange={handleCheckboxChangeMessstellen}
          />
          <label className="text-sm font-bold ml-2">Messstellen</label>
          <br />
        </div>
      </div>
    </div>
  );
}

export default DataSheet;