From 9b28fff3f629d3445b494f7e73d5031e5cf3ccda Mon Sep 17 00:00:00 2001
From: Greg Burri <greg.burri@gmail.com>
Date: Sun, 25 May 2025 23:06:09 +0200
Subject: [PATCH] Calendar: Left and right arrow keys can be used to navigate
 between months

---
 frontend/src/calendar.rs | 64 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/frontend/src/calendar.rs b/frontend/src/calendar.rs
index e4bdb7f..23f5583 100644
--- a/frontend/src/calendar.rs
+++ b/frontend/src/calendar.rs
@@ -1,14 +1,14 @@
 use std::{cell::RefCell, rc::Rc};
 
 use chrono::{Datelike, Days, Months, NaiveDate, Weekday, offset::Local};
-use common::{web_api, utils::substitute_with_names};
+use common::{utils::substitute_with_names, web_api};
 use gloo::{
     events::EventListener,
     utils::{document, window},
 };
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{Element, HtmlInputElement};
+use web_sys::{Element, HtmlInputElement, KeyboardEvent};
 
 use crate::{
     modal_dialog,
@@ -94,6 +94,32 @@ pub fn setup(
     })
     .forget();
 
+    // Left arrow key.
+    let calendar_clone = calendar.clone();
+    let state_clone = state.clone();
+    EventListener::new(&document(), "keydown", move |event| {
+        let key_event: &KeyboardEvent = event.dyn_ref().unwrap();
+        // Avoid triggering when an input has focus.
+        if key_event
+            .target()
+            .unwrap()
+            .dyn_ref::<HtmlInputElement>()
+            .is_some()
+        {
+            return;
+        }
+        if key_event.key() == "ArrowLeft" {
+            state_clone.displayed_date_previous_month();
+            display_month(
+                &calendar_clone,
+                state_clone.clone(),
+                options,
+                recipe_scheduler,
+            );
+        }
+    })
+    .forget();
+
     // Click on next month.
     let calendar_clone = calendar.clone();
     let state_clone = state.clone();
@@ -108,6 +134,32 @@ pub fn setup(
     })
     .forget();
 
+    // Right arrow key.
+    let calendar_clone = calendar.clone();
+    let state_clone = state.clone();
+    EventListener::new(&document(), "keydown", move |event| {
+        let key_event: &KeyboardEvent = event.dyn_ref().unwrap();
+        // Avoid triggering when an input has focus.
+        if key_event
+            .target()
+            .unwrap()
+            .dyn_ref::<HtmlInputElement>()
+            .is_some()
+        {
+            return;
+        }
+        if key_event.key() == "ArrowRight" {
+            state_clone.displayed_date_next_month();
+            display_month(
+                &calendar_clone,
+                state_clone.clone(),
+                options,
+                recipe_scheduler,
+            );
+        }
+    })
+    .forget();
+
     // Click on a day of the current month.
     let days: Element = calendar.selector(".days");
     let calendar_clone = calendar.clone();
@@ -172,9 +224,11 @@ pub fn setup(
                         date,
                         remove_ingredients_from_shopping_list,
                     };
-                    let _ =
-                        ron_request::delete::<(), _>("/ron-api/calendar/scheduled_recipe", Some(body))
-                            .await;
+                    let _ = ron_request::delete::<(), _>(
+                        "/ron-api/calendar/scheduled_recipe",
+                        Some(body),
+                    )
+                    .await;
                     window().location().reload().unwrap();
                 }
             });