gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Calendar: Left and right arrow keys can be used to navigate between months

Browse source
This commit is contained in:
Greg Burri 2025-05-25 23:06:09 +02:00
parent 24e901a041
commit 9b28fff3f6
1 changed files with 59 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/calendar.rs
View file

@ -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();
}
});