blob: 2a26fd9f15f754a942dc7a2bbadffe075b29a0ec (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
// React/Component imports
import { useState } from "react";
import DateSelector from './DateSelector.js';
// CSS imports
import '../css/Route.css';
/**
* The component that hold the forms for routing.
* @param {Object} props
*/
function TimeSelector(props) {
const [current, setCurrent] = useState("");
const [startDate, setStartDate] = useState(props.dates.start);
const [endDate, setEndDate] = useState(props.dates.end);
const changeTimeframe = () => {
props.setDates({
start: startDate,
end: endDate
})
}
// The div with the html elements for routing.
return (
<div className="Route">
<div className="Coord-selectors-flex">
<DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={props.setCurrent("start")}
changedFunc={setStartDate} disabled={props.currentSelector==='start' || props.isChanging}></DateSelector>
<div>
<h2>Adjust Timeframe :)</h2>
<button className="Btn Route-btn" onClick={() => changeTimeframe()}
disabled={props.currentSelector !== '' || props.isChanging}>Change Timeframe</button>
</div>
<DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={props.setCurrent("end")}
changedFunc={setEndDate} disabled={props.currentSelector==='end' || props.isChanging}></DateSelector>
</div>
</div>
);
}
export default TimeSelector;
|
