96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
function DataSheet() {
|
|
const stationListing = [
|
|
{ id: 1, name: "Ammersricht BZR (FGN)" },
|
|
{ id: 2, name: "Bad-Bentheim" },
|
|
{ id: 3, name: "Gevelsberg" },
|
|
{ id: 4, name: "Köln" },
|
|
{ id: 5, name: "Olfen-Selm" },
|
|
{ id: 6, name: "Plettenberg" },
|
|
{ id: 7, name: "Renzenhof (RG)" },
|
|
{ id: 8, name: "Schlüchtern II" },
|
|
{ id: 9, name: "Wuppertal" },
|
|
// Füge hier weitere Stationen hinzu, falls nötig
|
|
];
|
|
|
|
// Initialisiere den Zustand mit allen Stationen als nicht gecheckt (false)
|
|
const [checkedStations, setCheckedStations] = useState(
|
|
stationListing.reduce((acc, station) => {
|
|
acc[station.id] = false;
|
|
return acc;
|
|
}, {})
|
|
);
|
|
|
|
const handleCheckboxChange = (id) => {
|
|
setCheckedStations((prev) => ({
|
|
...prev,
|
|
[id]: !prev[id],
|
|
}));
|
|
};
|
|
|
|
const handleStationChange = (event) => {
|
|
console.log("Station selected:", event.target.value);
|
|
};
|
|
|
|
const resetView = () => {
|
|
console.log("View has been reset");
|
|
};
|
|
|
|
return (
|
|
<div
|
|
id="mainDataSheet"
|
|
className="absolute top-12 right-3 w-1/6 min-w-[300px] z-10 bg-gray-100 border border-gray-300"
|
|
>
|
|
<div className="bg-white shadow rounded-lg overflow-hidden">
|
|
<div className="bg-gray-200 border-b border-gray-300 p-3">
|
|
<form>
|
|
<select
|
|
onChange={handleStationChange}
|
|
id="stationListing"
|
|
className="w-full border-none p-2 rounded"
|
|
>
|
|
<option>Station wählen</option>
|
|
{stationListing.map((station) => (
|
|
<option key={station.id} value={station.id}>
|
|
{station.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</form>
|
|
<div className="text-right">
|
|
<button onClick={resetView} className="p-1 focus:outline-none">
|
|
<i
|
|
className="fi-arrows-out text-gray-800 text-lg"
|
|
title="Ansicht zurücksetzen"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col p-4 gap-2">
|
|
{stationListing.map((station) => (
|
|
<div key={station.id} className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id={`box-${station.id}`}
|
|
className="accent-blue-500 checked:bg-blue-500"
|
|
checked={checkedStations[station.id]}
|
|
onChange={() => handleCheckboxChange(station.id)}
|
|
// Wenn du möchtest, dass die Checkboxen nicht veränderbar sind, entferne den onChange-Handler und setze `readOnly`
|
|
/>
|
|
<label
|
|
htmlFor={`box-${station.id}`}
|
|
className="text-sm font-bold ml-2"
|
|
>
|
|
{station.name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DataSheet;
|