blob: 6960807d839ce109c775819c1a8b8e3a299345b5 (
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
45
46
47
48
|
// React/Component imports
import { useEffect, 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 toValue = date => new Date(date).toISOString().slice(0, 10);
const [startDate, setStartDate] = useState(props.dates.start);
const [endDate, setEndDate] = useState(props.dates.end);
const changeTimeframe = () => {
props.setDates({
start: startDate,
end: endDate
});
}
useEffect(() => setCurrent(""), [startDate, 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={setCurrent}
changedFunc={setStartDate} disabled={current==='start' || props.isChanging} value={toValue(startDate)}></DateSelector>
<div>
<h2>Adjust Timeframe :)</h2>
<button className="Btn Route-btn" onClick={() => changeTimeframe()}
disabled={current!=="" || props.isChanging}>Change Timeframe</button>
</div>
<DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={setCurrent}
changedFunc={setEndDate} disabled={current==='end' || props.isChanging} value={toValue(endDate)}></DateSelector>
</div>
</div>
);
}
export default TimeSelector;
|
