Update litepicker and add ranges plugin

Fix litepicker colors

Fix litepicker event

Add custom ranges to litepicker

Fix code style

Remove some date ranges

Fix date ranges

Replace yesterday date range with last 3 days

Update packages

Improve litepicker box shadow

shynet/dashboard/mixins.py

@@ -1,12 +1,11 @@
 from datetime import datetime, time
-from urllib.parse import urlparse
 
 from django.utils import timezone
 
 
 class DateRangeMixin:
     def get_start_date(self):
-        if self.request.GET.get("startDate") != None:
+        if self.request.GET.get("startDate") is not None:
             found_time = timezone.datetime.strptime(
                 self.request.GET.get("startDate"), "%Y-%m-%d"
             )
@@ -15,7 +14,7 @@ class DateRangeMixin:
             return timezone.now() - timezone.timedelta(days=30)
 
     def get_end_date(self):
-        if self.request.GET.get("endDate") != None:
+        if self.request.GET.get("endDate") is not None:
             found_time = timezone.datetime.strptime(
                 self.request.GET.get("endDate"), "%Y-%m-%d"
             )
@@ -23,8 +22,45 @@ class DateRangeMixin:
         else:
             return timezone.now()
 
+    def get_date_ranges(self):
+        now = timezone.now()
+        return [
+            {
+                'name': 'Last 3 days',
+                'start': now - timezone.timedelta(days=2),
+                'end': now,
+            },
+            {
+                'name': 'Last 30 days',
+                'start': now - timezone.timedelta(days=29),
+                'end': now,
+            },
+            {
+                'name': 'Last 90 days',
+                'start': now - timezone.timedelta(days=89),
+                'end': now,
+            },
+            {
+                'name': 'This month',
+                'start': now.replace(day=1),
+                'end': now,
+            },
+            {
+                'name': 'Last month',
+                'start': now.replace(day=1, month=now.month - 1),
+                'end': now.replace(day=1, month=now.month) - timezone.timedelta(days=1),
+            },
+            {
+                'name': 'This year',
+                'start': now.replace(day=1, month=1),
+                'end': now,
+            },
+        ]
+
     def get_context_data(self, **kwargs):
         data = super().get_context_data(**kwargs)
         data["start_date"] = self.get_start_date()
         data["end_date"] = self.get_end_date()
+        data["date_ranges"] = self.get_date_ranges()
+
         return data

shynet/dashboard/templates/base.html

@@ -10,7 +10,10 @@
   {% include 'a17t/includes/head.html' %}
   <link rel="icon" type="image/png" href="{% static 'dashboard/images/icon.png' %}">
   <script src="{% static 'apexcharts/dist/apexcharts.min.js'%}"></script>
-  <script src="{% static 'litepicker/dist/js/main.js' %}"></script>
+  <script src="{% static 'litepicker/dist/nocss/litepicker.js' %}"></script>
+  <script src="{% static 'litepicker/dist/plugins/ranges.js' %}"></script>
+  <link rel="stylesheet" href="{% static 'litepicker/dist/css/litepicker.css' %}">
+
   <script src="{% static 'dashboard/js/base.js' %}"></script>
   <link rel="stylesheet" href="{% static 'dashboard/css/global.css' %}">
   <link rel="stylesheet" href="{% static 'flag-icon-css/css/flag-icon.min.css' %}">
@@ -122,4 +125,4 @@
   {% endblock %}
 </body>
 
-</html>
+</html>

shynet/dashboard/templates/dashboard/includes/date_range.html

@@ -5,29 +5,45 @@
 <input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral bg-neutral-000 cursor-pointer w-auto" readonly>
 <style>
     :root {
-        --litepickerMonthButtonHover: var(--color-urge);
-        --litepickerDayColorHover: var(--color-urge);
-        --litepickerDayIsTodayColor: var(--color-urge);
-        --litepickerDayIsInRange: var(--color-urge-normal-fill);
-        --litepickerDayIsStartBg: var(--color-urge);
-        --litepickerDayIsEndBg: var(--color-urge);
-        --litepickerButtonApplyBg: var(--color-urge);
+        --litepicker-button-prev-month-color-hover: var(--color-urge);
+        --litepicker-button-next-month-color-hover: var(--color-urge);
+        --litepicker-day-color-hover: var(--color-urge);
+        --litepicker-is-today-color: var(--color-urge);
+        --litepicker-is-in-range-color: var(--color-urge-normal-fill);
+        --litepicker-is-start-color-bg: var(--color-urge);
+        --litepicker-is-end-color-bg: var(--color-urge);
+        --litepicker-button-apply-color-bg: var(--color-urge);
+    }
+
+    .litepicker .container__predefined-ranges, .litepicker .container__months {
+        box-shadow: var(--fallback-box-shadow-normal) !important;
     }
 </style>
 <script>
     var picker = new Litepicker({
         element: document.getElementById('rangePicker'),
+        plugins: ['ranges'],
         singleMode: false,
         format: "MMM DD 'YY",
         maxDate: new Date(),
         startDate: Date.parse(document.getElementById("startDate").getAttribute("value")),
         endDate: Date.parse(document.getElementById("endDate").getAttribute("value")),
-        onSelect: function (startDate, endDate) {
-            document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
-                "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
-            document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
-                (endDate.getMonth() + 1) + "-" + endDate.getDate());
-            document.getElementById("datePicker").submit();
+        ranges: {
+            customRanges: {
+                {% for date_range in date_ranges %}
+                    '{{ date_range.name }}': [
+                        new Date('{{ date_range.start.isoformat }}'),
+                        new Date('{{ date_range.end.isoformat }}')
+                    ],
+                {% endfor %}
+            }
         }
     });
-</script>
+    picker.on('selected', (startDate, endDate) => {
+        document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
+            "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
+        document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
+            (endDate.getMonth() + 1) + "-" + endDate.getDate());
+        document.getElementById("datePicker").submit();
+    });
+</script>

shynet/shynet/settings.py

@@ -301,7 +301,11 @@ NPM_ROOT_PATH = "../"
 NPM_FILE_PATTERNS = {
     "a17t": [os.path.join("dist", "a17t.css"), os.path.join("dist", "tailwind.css")],
     "apexcharts": [os.path.join("dist", "apexcharts.min.js")],
-    "litepicker": [os.path.join("dist", "js", "main.js")],
+    "litepicker": [
+        os.path.join("dist", "nocss", "litepicker.js"),
+        os.path.join("dist", "css", "litepicker.css"),
+        os.path.join("dist", "plugins", "ranges.js"),
+    ],
     "turbolinks": [os.path.join("dist", "turbolinks.js")],
     "stimulus": [os.path.join("dist", "stimulus.umd.js")],
     "inter-ui": [os.path.join("Inter (web)", "*")],