Fix #41 Add a date input for filtering

static/public/css/style.css

@@ -379,7 +379,7 @@ body.login-visible .login-wrapper {
 
 .slider-value {
     display: inline;
-    width: auto;
+    max-width: 7rem;
 }
 
 .slider-col {
@@ -389,16 +389,20 @@ body.login-visible .login-wrapper {
 .slider-col > .slider {
     flex: 1;
 }
+.slider-container .container.justify-content-between {
+    padding: 0;
+    display: flex;
+}
 
 .multiselect-wrapper { display: flex; flex-direction: column; background: var(--bs-body-bg); position: relative; }
-.multiselect-inputlist { border: 1px solid grey; padding: .3rem; display: inline-block; margin: 0; border-radius: 4px; }
-.multiselect-inputlist > li.checked { border: 1px solid grey; display: inline-block; border-radius: 4px; }
+.multiselect-inputlist { border: 1px solid var(--bs-border-color); padding: .3rem; display: inline-block; margin: 0; border-radius: 4px; }
+.multiselect-inputlist > li.checked { border: 1px solid var(--bs-border-color); display: inline-block; border-radius: 4px; }
 .multiselect-inputlist > li.checked { margin-right: .3rem; padding: .2rem; }
 .multiselect-inputlist > li.checked > a { padding: .2rem; }
 .multiselect-inputlist > li.checked.indeterminate:before { content: "-"; background-color: red; color: white; height: 1rem; width: 1rem; display: inline-block; border-radius: 1rem; text-align: center; margin-right: .2rem; line-height: 1rem; }
 .multiselect-inputlist > .multiselect-input { border: none; padding: .3rem; background: inherit; }
 .multiselect-inputlist > .multiselect-input:focus { outline: none; }
-.multiselect-dropdown { margin: 0; padding: 0; list-style-type: none; display: inline-block; overflow: auto; background: inherit; border: 1px solid grey; position: absolute; z-index: 10000; top: 100%; width: 100%; }
+.multiselect-dropdown { margin: 0; padding: 0; list-style-type: none; display: inline-block; overflow: auto; background: inherit; border: 1px solid var(--bs-border-color); position: absolute; z-index: 10000; top: 100%; width: 100%; }
 .multiselect-dropdown > li > label { display: block; margin: .3rem 0; }
 .multiselect-dropdown > li input { margin: 0 .5rem;}
 .multiselect-dropdown.hidden { display: none; }

static/public/js/uiFilter.js

@@ -11,14 +11,16 @@ $(() => {
         sliderDiv.className = "container";
         resultContainer.appendChild(sliderDiv);
         let labelRow = document.createElement("div");
-        labelRow.className = "row justify-content-between";
-        let minValueLabel = document.createElement("div");
-        minValueLabel.className = "slider-value slider-min-value";
-        minValueLabel.textContent = serialize(minValue);
+        labelRow.className = "container justify-content-between";
+        let minValueLabel = document.createElement("input");
+        minValueLabel.className = "slider-value slider-min-value form-control";
+        minValueLabel.type = "text";
+        minValueLabel.value = serialize(minValue);
         labelRow.appendChild(minValueLabel);
-        let maxValueLabel = document.createElement("div");
-        maxValueLabel.className = "slider-value slider-max-value";
-        maxValueLabel.textContent = serialize(maxValue);
+        let maxValueLabel = document.createElement("input");
+        maxValueLabel.className = "slider-value slider-max-value form-control";
+        maxValueLabel.type = "text";
+        maxValueLabel.value = serialize(maxValue);
         labelRow.appendChild(maxValueLabel);
         sliderDiv.appendChild(labelRow);
         let inputContainer = document.createElement("div");
@@ -40,8 +42,30 @@ $(() => {
         let onChange = () => {};
         jQueryInput.on('slideStop', evt => onChange({ min: evt.value[0], max: evt.value[1] }));
         jQueryInput.on('slide', evt => {
-            minValueLabel.textContent = serialize(evt.value[0]);
-            maxValueLabel.textContent = serialize(evt.value[1]);
+            minValueLabel.value = serialize(evt.value[0]);
+            maxValueLabel.value = serialize(evt.value[1]);
+        });
+        $(minValueLabel).datepicker({
+            format: "dd/mm/yyyy",
+            todayBtn: "linked",
+            autoclose: true,
+            startDate: serialize(minValue),
+            endDate: serialize(maxValue)
+        }).on('changeDate', e => {
+            let maxDate = jQueryInput.slider('getValue')[1];
+            jQueryInput.slider("setValue", [ e.date.getTime(), maxDate ]);
+            onChange({ min: e.date.getTime(), max: maxDate });
+        });
+        $(maxValueLabel).datepicker({
+            format: "dd/mm/yyyy",
+            todayBtn: "linked",
+            autoclose: true,
+            startDate: serialize(minValue),
+            endDate: serialize(maxValue)
+        }).on('changeDate', e => {
+            let min = jQueryInput.slider('getValue')[0];
+            jQueryInput.slider("setValue", [ min, e.date.getTime() ]);
+            onChange({ min: min, max: e.date.getTime() });
         });
         return {
             container: resultContainer,

templates/_footer.js

@@ -4,6 +4,7 @@ module.exports = `
 <script src="/public/js/multiSelect.js"></script>
 <script src="/public/bootstrap/bootstrap.bundle.min.js"></script>
 <script src="/public/bootstrap/bootstrap-slider.min.js"></script>
+<script src="/public/js/bootstrap-datepicker.min.js"></script>
 <script src="/public/js/popper.min.js"></script>
 <script src="/public/leaflet/leaflet-src.js"></script>
 <script src="/public/js/Control.Geocoder.js"></script>

templates/_header.js

@@ -8,6 +8,7 @@ module.exports = `
 <link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap.min.css"/>
 <link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap-icons.min.css"/>
 <link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap-slider.min.css"/>
+<link type="text/css" rel="stylesheet" href="/public/css/bootstrap-datepicker3.standalone.min.css"/>
 <link type="text/css" rel="stylesheet" href="/public/leaflet/leaflet.css"/>
 <link type="text/css" rel="stylesheet" href="/public/css/Control.Geocoder.css" />
 <link type="text/css" rel="stylesheet" href="/public/css/style.css"/>