Basic way to show the hubs with their scores.

1 files changed, 44 insertions, 0 deletions

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