62 lines
3.0 KiB
JavaScript
62 lines
3.0 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const dataSources = [
|
|
{ id: "IrishRailTrains", name: "Irish Rail Trains" },
|
|
{ id: "IrishRailStations", name: "Irish Rail Stations" },
|
|
{ id: "LuasStops", name: "Luas Stops" },
|
|
{ id: "BusStops", name: "Bus Stops" },
|
|
{ id: "Buses", name: "Buses", },
|
|
];
|
|
|
|
return (
|
|
<div style={{
|
|
position: "absolute", top: "10px", right: "10px",
|
|
width: "250px", minWidth: "50px",
|
|
padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
|
|
borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",
|
|
height: isOpen ? "auto" : "40px", display: "flex", flexDirection: "column",
|
|
alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center"
|
|
}}>
|
|
<button onClick={() => setIsOpen(!isOpen)} style={{
|
|
background: "none", border: "none", color: "black",
|
|
fontSize: "16px", cursor: "pointer", display: "flex",
|
|
alignItems: "center", width: "100%", justifyContent: "center",
|
|
padding: "8px 10px", fontWeight: "bold"
|
|
}}>
|
|
{isOpen ? "▼ Filters" : "▶ Filters"}
|
|
</button>
|
|
{isOpen && (
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%" }}>
|
|
<h3>Select Data Sources</h3>
|
|
{dataSources.map(({ id, name }) => (
|
|
<div key={id} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
|
<input
|
|
type="checkbox"
|
|
id={id}
|
|
checked={selectedSources.includes(id)}
|
|
onChange={() =>
|
|
setSelectedSources((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id])
|
|
}
|
|
/>
|
|
<label htmlFor={id}>{name}</label>
|
|
</div>
|
|
))}
|
|
<div style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
|
|
<input
|
|
type="checkbox"
|
|
id="toggleClustering"
|
|
checked={clusteringEnabled}
|
|
onChange={() => setClusteringEnabled(!clusteringEnabled)}
|
|
/>
|
|
<label htmlFor="toggleClustering">Cluster overlapping icons</label>
|
|
</div>
|
|
<button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar; |