aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Add reset filters button

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-04-06 03:08:49 +01:00
parent 29cdf8a23b
commit 69230edcbb
1 changed files with 86 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/components/Sidebar.jsx
View File

@ -171,6 +171,20 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
fetchData(enabledSources, numberInputValue); // Use enabledSources for data fetching fetchData(enabledSources, numberInputValue); // Use enabledSources for data fetching
}; };
const resetFilters = () => {
const savedSources = Cookies.get("selectedSources");
const savedNumberInputValue = Cookies.get("numberInputValue");
if (savedSources) {
setSelectedSources(JSON.parse(savedSources));
} else {
setSelectedSources(customDefaultChecked);
}
setNumberInputValue(savedNumberInputValue || "");
};
return ( return (
<div style={{ <div style={{
position: "absolute", top: "6vh", right: "1vh", position: "absolute", top: "6vh", right: "1vh",
@ -206,43 +220,80 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
<label htmlFor={"showFavouritesOnly"}>Show Favourites Only</label> <label htmlFor={"showFavouritesOnly"}>Show Favourites Only</label>
</div> </div>
<div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "4px"}}> <div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "4px"}}>
<input <input
type="checkbox" type="checkbox"
id="toggleClustering" id="toggleClustering"
checked={clusteringEnabled} checked={clusteringEnabled}
onChange={() => setClusteringEnabled(!clusteringEnabled)} onChange={() => setClusteringEnabled(!clusteringEnabled)}
/> />
<label htmlFor="toggleClustering">Cluster overlapping icons</label> <label htmlFor="toggleClustering">Cluster overlapping icons</label>
</div>
{userLocationAvailable && (
<div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "8px"}}>
<label htmlFor="numberInput" style={{maxWidth: "40%"}}>Within KM:</label>
<input
type="number"
id="numberInput"
value={numberInputValue}
onChange={(e) => setNumberInputValue(e.target.value)}
style={{maxWidth: "40%"}}
/>
</div>
)}
<button onClick={handleSubmit} style={{marginTop: "10px", color: "white"}}>Submit</button>
</div> </div>
{userLocationAvailable && (
<div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "8px"}}>
<label htmlFor="numberInput" style={{maxWidth: "40%"}}>Within KM:</label>
<input
type="number"
id="numberInput"
value={numberInputValue}
onChange={(e) => setNumberInputValue(e.target.value)}
style={{maxWidth: "40%"}}
/>
</div>
)} )}
<div style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "10px",
marginTop: "10px",
width: "100%"
}}>
<button
onClick={handleSubmit}
style={{
flex: 1,
color: "white",
backgroundColor: "#4CAF50",
padding: "6px 12px",
borderRadius: "5px",
border: "none",
cursor: "pointer"
}}
>
Submit
</button>
<button
onClick={resetFilters}
style={{
flex: 1,
color: "white",
backgroundColor: "#f44336",
padding: "6px 12px",
borderRadius: "5px",
border: "none",
cursor: "pointer"
}}
>
Reset
</button>
</div>
</div> </div>
); )}
}; </div>
);
};
Sidebar.propTypes = { Sidebar.propTypes = {
selectedSources: PropTypes.array.isRequired, selectedSources: PropTypes.array.isRequired,
setSelectedSources: PropTypes.func.isRequired, setSelectedSources: PropTypes.func.isRequired,
clusteringEnabled: PropTypes.bool.isRequired, clusteringEnabled: PropTypes.bool.isRequired,
setClusteringEnabled: PropTypes.func.isRequired, setClusteringEnabled: PropTypes.func.isRequired,
fetchData: PropTypes.func.isRequired, fetchData: PropTypes.func.isRequired,
userLocationAvailable: PropTypes.bool.isRequired, userLocationAvailable: PropTypes.bool.isRequired,
showFavouritesOnly: PropTypes.bool.isRequired, showFavouritesOnly: PropTypes.bool.isRequired,
setShowFavouritesOnly: PropTypes.func.isRequired, setShowFavouritesOnly: PropTypes.func.isRequired,
}; };
export default Sidebar export default Sidebar