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,89 +77,142 @@
           </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">
-                <select name="size">
-                  {% for size in sizes %}
-                    <option value="{{ size }}">{{ size }}</option>
-                  {% endfor %}
-                </select>
-                <span class="icon is-small is-left">
-                  <i class="fas fa-magnifying-glass"></i>
-                </span>
-              </span>
-            </div>
-            <p class="control">
-              <a class="button is-static">
-                results
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="column">
-          <div class="field has-addons">
-            <div class="control has-icons-left">
-              <span class="select">
-                <select id="source" name="source">
-                  <option selected value="all">All</option>
-                  <option value="irc">IRC</option>
-                  <option value="dis">Discord</option>
-                </select>
-                <span class="icon is-small is-left">
-                  <i class="fas fa-magnifying-glass"></i>
-                </span>
-              </span>
-            </div>
-            <p class="control">
-              <a class="button is-static">
-                source
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="column">
-          <div id="sentiment">
             <div class="field has-addons">
-              <div class="control">
+              <div class="control has-icons-left">
-                <input disabled="undefined" name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1" value="0" step="0.05" type="range">
+                <span class="select">
-                <output for="sliderWithValue" class="slider-output">0</output>
+                  <select name="size">
-                <script>bulmaSlider.attach();</script>
+                    {% for size in sizes %}
+                      <option value="{{ size }}">{{ size }}</option>
+                    {% endfor %}
+                  </select>
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-magnifying-glass"></i>
+                  </span>
+                </span>
               </div>
               <p class="control">
                 <a class="button is-static">
-                  sentiment
+                  results
                 </a>
               </p>
             </div>
-            <div class="control">
+          </div>
-              <label class="radio">
+          <div class="column is-narrow">
-                <input type="radio" value="below" name="sentiment-method">
+            <div class="field has-addons">
-                Below
+              <div class="control has-icons-left">
-              </label>
+                <span class="select">
-              <label class="radio">
+                  <select id="source" name="source">
-                <input type="radio" value="exact" name="sentiment-method">
+                    <option selected value="all">All</option>
-                Exact
+                    <option value="irc">IRC</option>
-              </label>
+                    <option value="dis">Discord</option>
-              <label class="radio">
+                  </select>
-                <input type="radio" value="above" name="sentiment-method">
+                  <span class="icon is-small is-left">
-                Above
+                    <i class="fas fa-magnifying-glass"></i>
-              </label>
+                  </span>
-              <label class="radio">
+                </span>
-                <input type="radio" value="nonzero" name="sentiment-method">
+              </div>
-                Nonzero
+              <p class="control">
-              </label>
+                <a class="button is-static">
+                  source
+                </a>
+              </p>
             </div>
           </div>
+          <div class="column is-narrow">
+            <div id="sentiment">
+              <div class="field has-addons">
+                <div class="control">
+                  <input disabled="undefined" name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1" value="0" step="0.05" type="range">
+                  <output for="sliderWithValue" class="slider-output">0</output>
+                  <script>bulmaSlider.attach();</script>
+                </div>
+                <p class="control">
+                  <a class="button is-static">
+                    sentiment
+                  </a>
+                </p>
+              </div>
+              <div class="control">
+                <label class="radio">
+                  <input type="radio" value="below" name="sentiment-method">
+                  Below
+                </label>
+                <label class="radio">
+                  <input type="radio" value="exact" name="sentiment-method">
+                  Exact
+                </label>
+                <label class="radio">
+                  <input type="radio" value="above" name="sentiment-method">
+                  Above
+                </label>
+                <label class="radio">
+                  <input type="radio" value="nonzero" name="sentiment-method">
+                  Nonzero
+                </label>
+              </div>
+            </div>
 
-          <label class="checkbox">
+            <label class="checkbox">
-            <input type="checkbox" name="check-sentiment"
+              <input type="checkbox" name="check-sentiment"
-              _="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
+                _="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
-              Check sentiment
+                Check sentiment
-          </label>
+            </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>

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: