388 lines
12 KiB
JavaScript
388 lines
12 KiB
JavaScript
// 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;
|