Implement date picker

core/lib/opensearch.py

@@ -152,6 +152,8 @@ def query_results(request, size=None):
     message = None
     message_class = None
     add_bool = []
+    add_top = []
+    sort = None
     if request.user.is_anonymous:
         sizes = settings.OPENSEARCH_MAIN_SIZES_ANON
     else:
@@ -172,6 +174,40 @@ def query_results(request, size=None):
         if source != "all":
             add_bool.append({"src": source})
 
+    if "dates" in request.POST:
+        dates = request.POST["dates"]
+        spl = dates.split(" - ")
+        if all(spl):
+            spl = [f"{x.replace(' ', 'T')}Z" for x in spl]
+            if not len(spl) == 2:
+                message = "Invalid dates"
+                message_class = "danger"
+                return {"message": message, "class": message_class}
+            from_ts, to_ts = spl
+            range_query = {
+                "range": {
+                    "ts": {
+                        "gt": from_ts,
+                        "lt": to_ts,
+                    }
+                }
+            }
+            add_top.append(range_query)
+    if "sorting" in request.POST:
+        sorting = request.POST["sorting"]
+        if sorting not in ("asc", "desc", "none"):
+            message = "Invalid sort"
+            message_class = "danger"
+            return {"message": message, "class": message_class}
+        if sorting in ("asc", "desc"):
+            sort = [
+                {
+                    "ts": {
+                        "order": sorting,
+                    }
+                }
+            ]
+
     if "check-sentiment" in request.POST:
         if "sentiment" in request.POST:
             sentiment = request.POST["sentiment"]
@@ -188,6 +224,11 @@ def query_results(request, size=None):
         if add_bool:
             for item in add_bool:
                 search_query["query"]["bool"]["must"].append({"match": item})
+        if add_top:
+            for item in add_top:
+                search_query["query"]["bool"]["must"].append(item)
+        if sort:
+            search_query["sort"] = sort
         results = run_main_query(
             client,
             request.user,  # passed through run_main_query to filter_blacklisted
@@ -280,12 +321,5 @@ def construct_query(query, size):
                 ]
             }
         },
-        "sort": [
-            {
-                "ts": {
-                    "order": "desc",
-                }
-            }
-        ],
     }
     return query

core/templates/base.html

@@ -13,6 +13,8 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip@1.2.0/dist/bulma-tooltip.min.css">
     <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/css/bulma-slider.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/css/bulma-calendar.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/js/bulma-calendar.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/js/bulma-slider.min.js"></script>
     <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.8.0/dist/ext/remove-me.js"></script>

core/templates/ui/drilldown/drilldown.html

@@ -77,9 +77,9 @@
           </div>
         </div>
       </div>
-
+      <div id="options" class="box is-hidden">
-      <div id="options" class="columns is-hidden">
+        <div class="columns is-multiline">
-        <div class="column">
+          <div class="column is-narrow">
             <div class="field has-addons">
               <div class="control has-icons-left">
                 <span class="select">
@@ -100,7 +100,7 @@
               </p>
             </div>
           </div>
-        <div class="column">
+          <div class="column is-narrow">
             <div class="field has-addons">
               <div class="control has-icons-left">
                 <span class="select">
@@ -121,7 +121,7 @@
               </p>
             </div>
           </div>
-        <div class="column">
+          <div class="column is-narrow">
             <div id="sentiment">
               <div class="field has-addons">
                 <div class="control">
@@ -161,6 +161,59 @@
                 Check sentiment
             </label>
           </div>
+          <div class="column is-narrow">
+            <div id="date">
+              <div class="field">
+                <div class="control">
+                  <input type="date" name="dates">
+                  <script>
+                    var options = {
+                      "type": "datetime",
+                      "isRange": true,
+                      "color": "info",
+                      "validateLabel": "Save",
+                      "dateFormat": "yyyy-MM-dd",
+                    };
+                    // Initialize all input of type date
+                    var calendars = bulmaCalendar.attach('[type="date"]', options);
+
+                    // Loop on each calendar initialized
+                    for(var i = 0; i < calendars.length; i++) {
+                      // Add listener to select event
+                      calendars[i].on('save', date => {
+                        console.log(date);
+                        htmx.trigger("#search", "click");
+                      });
+                    }
+
+                    // To access to bulmaCalendar instance of an element
+                    var element = document.querySelector('#my-element');
+                    if (element) {
+                      // bulmaCalendar instance is available as element.bulmaCalendar
+                      element.bulmaCalendar.on('select', function(datepicker) {
+                        console.log(datepicker.data.value());
+                      });
+                    }
+                  </script>
+                </div>
+              </div>
+              <div class="control">
+                <label class="radio">
+                  <input type="radio" value="desc" name="sorting" checked>
+                  Desc
+                </label>
+                <label class="radio">
+                  <input type="radio" value="asc" name="sorting">
+                  Asc
+                </label>
+                <label class="radio">
+                  <input type="radio" value="none" name="sorting">
+                  None
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="is-hidden"></div>
     </form>

docker-compose.yml

@@ -13,14 +13,14 @@ services:
     env_file:
       - .env
 
-  pyroscope:
+  # pyroscope:
-    image: pyroscope/pyroscope
+  #   image: pyroscope/pyroscope
-    environment:
+  #   environment:
-      - PYROSCOPE_LOG_LEVEL=debug
+  #     - PYROSCOPE_LOG_LEVEL=debug
-    ports:
+  #   ports:
-      - '4040:4040'
+  #     - '4040:4040'
-    command:
+  #   command:
-      - 'server'
+  #     - 'server'
 
 networks:
    default: