Skip to content
Snippets Groups Projects
Commit 558e740b authored by Holzheu Hannah's avatar Holzheu Hannah
Browse files

added FilterPage with sliders and DropDownFilters for search Requests #13

parent ee50f07d
No related branches found
No related tags found
1 merge request!28Closes #40 : Custom useGrowbrosFetcher hook to make calls to the backend.
import { useState } from "react";
function DropDownFilter(props: PropsDropDownFilter) {
const options = props.options;
const topic = props.topic;
const [selectedOption, setSelectedOption] = useState("");
const handleOptionChange = (event: any) => {
setSelectedOption(event.target.value);
};
return (
<div >
<label>{topic}</label>
<select value={selectedOption} onChange={handleOptionChange}>
<option value=""></option>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
</div>
);
}
type PropsDropDownFilter = {
options: Array<string>;
topic: string;
};
export default DropDownFilter
import { useState } from "react";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";
import "../stylesheets/FilterPage.css";
import DropDownFilter from "./DropDownFilter";
function FilterPage() {
return (
<div className="filterPage">
<h3>Setze Filter und suche nach passenden Pflanzen</h3>
</div>
<>
<div className="filterPage">
<h3>Setze Filter und suche nach passenden Pflanzen</h3>
</div>
<div>
<DropDownFilter
topic={"Wasserbedarf "}
options={["Trocken", "Feucht", "Sehr Feucht"]}
/>
<DropDownFilter
topic={"Nährstoffbedarf "}
options={["Niedrig", "Mittel", "Hoch"]}
/>
<DropDownFilter
topic={"Lichtbedarf "}
options={["Niedrig", "Mittel", "Hoch"]}
/>
<DropDownFilter
topic={"Bodentyp"}
options={["Leicht", "Mittel", "Schwer"]}
/>
</div>
<SliderFilter topic={"Anbauphase"} min={1} max={52} />
<SliderFilter topic={"Erntezeitraum"} min={1} max={52} />
<SliderFilter topic={"Wachstumsdauer"} min={1} max={52} />{" "}
</>
);
}
/*function Filter() {
const options = ["Option 1", "Option 2", "Option 3"];
const [selectedOption, setSelectedOption] = useState("");
const handleOptionChange = (event) => {
setSelectedOption(event.target.value);
function SliderFilter({ topic, min, max }: PropsSliderFilter) {
const [range, setRange] = useState([min, max]);
const handleRangeChange = (newRange: any) => {
setRange(newRange);
};
return (
<>
<label>Wählen Sie eine Option:</label>
<select value={selectedOption} onChange={handleOptionChange}>
<option value="">-- Bitte wählen --</option>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
</>
<div>
<label>
{topic} von KW {range[0]} bis KW {range[1]}
</label>
<Slider
min={min}
max={max}
range
value={range}
onChange={handleRangeChange}
/>
</div>
);
}*/
}
type PropsSliderFilter = {
topic: string;
min: number;
max: number;
};
export default FilterPage;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment