From 9cc2e7745e686ef9868458239d90ccdb302cbbc6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Aug 2024 14:42:21 +0300
Subject: [PATCH] client: Implement simple month switcher

---
 src/public/app/widgets/buttons/calendar.js | 44 ++++++++++++----------
 src/public/stylesheets/calendar.css        |  4 ++
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.js
index 8140c8720..6a8a80a57 100644
--- a/src/public/app/widgets/buttons/calendar.js
+++ b/src/public/app/widgets/buttons/calendar.js
@@ -7,6 +7,21 @@ import appContext from "../../components/app_context.js";
 import RightDropdownButtonWidget from "./right_dropdown_button.js";
 import toastService from "../../services/toast.js";
 
+const MONTHS = [
+    t("calendar.january"),
+    t("calendar.febuary"),
+    t("calendar.march"),
+    t("calendar.april"),
+    t("calendar.may"),
+    t("calendar.june"),
+    t("calendar.july"),
+    t("calendar.august"),
+    t("calendar.september"),
+    t("calendar.october"),
+    t("calendar.november"),
+    t("calendar.december")
+];
+
 const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
     <style>
@@ -19,7 +34,9 @@ const DROPDOWN_TPL = `
         <div class="calendar-month-selector">
             <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
 
-            <div class="calendar-header-label" data-calendar-label="month"></div>
+            <select data-calendar-input="month">
+                ${Object.entries(MONTHS).map(([i, month]) => `<option value=${i}>${month}</option>`)}
+            </select>
 
             <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
         </div>
@@ -51,9 +68,13 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
         
         // Month navigation
-        this.$label = this.$dropdownContent.find('[data-calendar-label="month"]');
+        this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
         this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
         this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');        
+        this.$monthSelect.on("input", (e) => {
+            this.date.setMonth(e.target.value);
+            this.createMonth();
+        });
         this.$next.on('click', () => {
             this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
@@ -178,24 +199,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.date.setDate(1);
         this.date.setMonth(this.date.getMonth() - 1);
 
-        this.$label.html(t(this.monthsAsString(this.date.getMonth()).toLowerCase()));
+        this.$monthSelect.val(this.date.getMonth());
         this.$yearLabel.html(this.date.getFullYear());
     }
-
-    monthsAsString(monthIndex) {
-        return [
-            t("calendar.january"),
-            t("calendar.febuary"),
-            t("calendar.march"),
-            t("calendar.april"),
-            t("calendar.may"),
-            t("calendar.june"),
-            t("calendar.july"),
-            t("calendar.august"),
-            t("calendar.september"),
-            t("calendar.october"),
-            t("calendar.november"),
-            t("calendar.december")
-        ][monthIndex];
-    }
 }
diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css
index 61efba0dc..3e2a0ae0f 100644
--- a/src/public/stylesheets/calendar.css
+++ b/src/public/stylesheets/calendar.css
@@ -42,6 +42,10 @@
   width: 100%;
 }
 
+.calendar-dropdown-widget select[data-calendar-input="month"] {
+  text-align: center;
+}
+
 .calendar-dropdown-widget .calendar-week {
   display: flex;
   flex-wrap: wrap;