Merge branch 'master' into profit-tests

1 files changed, 48 insertions, 0 deletions

diff --git a/react-frontend/src/components/TimeSelector.js b/react-frontend/src/components/TimeSelector.js
new file mode 100644
index 0000000..652a9ec
--- /dev/null
+++ b/react-frontend/src/components/TimeSelector.js
@@ -0,0 +1,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;
\ No newline at end of file