From cf57669830212a421da0cca447279044b97051d2 Mon Sep 17 00:00:00 2001
From: Guntis Smaukstelis <gsmaukstelis@evolution.com>
Date: Tue, 4 Jul 2023 00:20:13 +0300
Subject: [PATCH] Add option to select full day time range

---
 web/src/aggregator/SelectField.tsx       |  2 +-
 web/src/aggregator/SelectGranularity.tsx |  2 +-
 web/src/aggregator/SelectKey.tsx         |  2 +-
 web/src/aggregator/SelectTimeRange.tsx   | 76 +++++++++++++++++++++++-
 web/src/css/FileManager.css              |  2 +
 web/src/css/aggregator.css               | 14 +++++
 6 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 web/src/css/aggregator.css

diff --git a/web/src/aggregator/SelectField.tsx b/web/src/aggregator/SelectField.tsx
index 81e1b98..d5d0254 100644
--- a/web/src/aggregator/SelectField.tsx
+++ b/web/src/aggregator/SelectField.tsx
@@ -8,7 +8,7 @@ export const SelectField: Component<{
 }> = (props) => {
     return (
         <div>
-            <h3>Select field</h3>
+            <h4>Select field</h4>
             <select onChange={(e) => props.setField(e.target.value)}>
                 { weatherField.map(field =>
                     <option
diff --git a/web/src/aggregator/SelectGranularity.tsx b/web/src/aggregator/SelectGranularity.tsx
index d04ab4d..7cce69a 100644
--- a/web/src/aggregator/SelectGranularity.tsx
+++ b/web/src/aggregator/SelectGranularity.tsx
@@ -8,7 +8,7 @@ export const SelectGranularity: Component<{
 }> = ({ getGranularity, setGranularity }) => {
     return (
         <div>
-            <h3>Select granularity</h3>
+            <h4>Select granularity</h4>
             <select onChange={(e) => setGranularity(e.target.value)}>
                 { aggregateGranularity.map(granularity =>
                     <option
diff --git a/web/src/aggregator/SelectKey.tsx b/web/src/aggregator/SelectKey.tsx
index 411a07a..c1776f9 100644
--- a/web/src/aggregator/SelectKey.tsx
+++ b/web/src/aggregator/SelectKey.tsx
@@ -8,7 +8,7 @@ export const SelectKey: Component<{
 }> = (props) => {
     return (
         <div>
-            <h3>Select key</h3>
+            <h4>Select key</h4>
             <ul>
                 { aggregateKey.map(key => 
                     <label><li><input
diff --git a/web/src/aggregator/SelectTimeRange.tsx b/web/src/aggregator/SelectTimeRange.tsx
index 7f0088f..7ea2909 100644
--- a/web/src/aggregator/SelectTimeRange.tsx
+++ b/web/src/aggregator/SelectTimeRange.tsx
@@ -1,18 +1,90 @@
 import moment from 'moment';
-import { Accessor, Component, Setter } from "solid-js";
+import { Accessor, batch, Component, createSignal, Setter } from "solid-js";
+
+import "../css/aggregator.css"
 
 export const SelectTimeRange: Component<{
     getStart: Accessor<Date>,
     setStart: Setter<Date>,
     getEnd: Accessor<Date>,
     setEnd: Setter<Date>,
+}> = (props) => {
+    // true: dateTime, false: date
+    const [getDateTimeMode, setDateTimeMode] = createSignal(true);
+
+    function handleClick() {
+        const currentMode = getDateTimeMode();
+        if (currentMode) {
+            const startDate = moment().subtract(1, "days").startOf("day");
+            const endDate = moment().subtract(1, "days").endOf("day");
+            batch(() => {
+                props.setStart(startDate.toDate());
+                props.setEnd(endDate.toDate());
+            });
+        }
+        setDateTimeMode(!currentMode);
+    }
+
+    return (
+        <div>
+            <div class="timeRangeTitle">
+                <h4>Time range</h4>
+                <div><input
+                    type="checkbox"
+                    onClick={handleClick}
+                    checked={getDateTimeMode()}
+                /> date+time</div>
+            </div>
+            { getDateTimeMode() && <DateTimeRange {...props} /> }
+            { !getDateTimeMode() && <DateRange {...props} /> }
+        </div>
+    );
+}
+
+const DateRange: Component<{
+    getStart: Accessor<Date>,
+    setStart: Setter<Date>,
+    getEnd: Accessor<Date>,
+    setEnd: Setter<Date>,
+}> = (props) => {
+    const startStr = () => moment(props.getStart()).format("YYYY-MM-DD");
+    const endStr = () => moment(props.getEnd()).format("YYYY-MM-DD");
+
+    return (
+        <div>
+            <p>
+                <input
+                    type="date"
+                    value={startStr()}
+                    onChange={e => props.setStart(
+                        moment(new Date(e.target.value)).startOf("day").toDate()
+                    )}
+                /> start
+            </p>
+            <p>
+                <input
+                    type="date"
+                    value={endStr()}
+                    onChange={e => props.setEnd(
+                        moment(new Date(e.target.value)).endOf("day").toDate()
+                    )}
+                /> end
+            </p>
+        </div>
+    );
+}
+
+const DateTimeRange: Component<{
+    getStart: Accessor<Date>,
+    setStart: Setter<Date>,
+    getEnd: Accessor<Date>,
+    setEnd: Setter<Date>,
 }> = (props) => {
     const startStr = () => moment(props.getStart()).format("YYYY-MM-DDTHH:mm");
     const endStr = () => moment(props.getEnd()).format("YYYY-MM-DDTHH:mm");
 
     return (
         <div>
-            <h3>Select time range</h3>
             <p>
                 <input
                     type="datetime-local"
diff --git a/web/src/css/FileManager.css b/web/src/css/FileManager.css
index 83bc132..804071d 100644
--- a/web/src/css/FileManager.css
+++ b/web/src/css/FileManager.css
@@ -14,9 +14,11 @@
   .column:nth-child(2) {
     flex-basis: 15%;
     background-color: #f2f2f2;
+    min-width: 200px;
   }
 
   .column:nth-child(3) {
     flex-basis: 70%;
     background-color: #e6e6e6;
+    min-width: 680px;
   }
\ No newline at end of file
diff --git a/web/src/css/aggregator.css b/web/src/css/aggregator.css
new file mode 100644
index 0000000..dcafeb7
--- /dev/null
+++ b/web/src/css/aggregator.css
@@ -0,0 +1,14 @@
+.timeRangeTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0;
+}
+
+.timeRangeTitle h4 {
+    margin: 0;
+}
+
+.timeRangeTitle div {
+    font-size: 11px;
+}
\ No newline at end of file