Add a calendar to schedule a recipe to a chosen date (WIP)

frontend/src/calendar.rs

@@ -0,0 +1,121 @@
+use std::{
+    ops::{AddAssign, SubAssign},
+    sync::{
+        atomic::{AtomicI32, AtomicU32, Ordering},
+        Arc,
+    },
+};
+
+use chrono::{offset::Local, Datelike, Days, NaiveDate, Weekday};
+use gloo::{console::log, events::EventListener};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::spawn_local;
+use web_sys::Element;
+
+use crate::utils::{by_id, SelectorExt};
+
+pub fn setup(calendar: &Element) {
+    let prev: Element = calendar.selector(".prev");
+    let next: Element = calendar.selector(".next");
+
+    let current_month = Arc::new(AtomicU32::new(Local::now().month()));
+    let current_year = Arc::new(AtomicI32::new(Local::now().year()));
+
+    display_month(calendar, Local::now().year(), Local::now().month());
+
+    let calendar_clone = calendar.clone();
+    let current_month_clone = current_month.clone();
+    let current_year_clone = current_year.clone();
+    EventListener::new(&prev, "click", move |_event| {
+        let mut m = current_month_clone.load(Ordering::Relaxed) - 1;
+        if m == 0 {
+            current_year_clone.fetch_sub(1, Ordering::Relaxed);
+            m = 12
+        }
+        current_month_clone.store(m, Ordering::Relaxed);
+        display_month(
+            &calendar_clone,
+            current_year_clone.load(Ordering::Relaxed),
+            m,
+        );
+    })
+    .forget();
+
+    let calendar_clone = calendar.clone();
+    let current_month_clone = current_month.clone();
+    let current_year_clone = current_year.clone();
+    EventListener::new(&next, "click", move |_event| {
+        let mut m = current_month_clone.load(Ordering::Relaxed) + 1;
+        if m == 13 {
+            current_year_clone.fetch_add(1, Ordering::Relaxed);
+            m = 1
+        }
+        current_month_clone.store(m, Ordering::Relaxed);
+        display_month(
+            &calendar_clone,
+            current_year_clone.load(Ordering::Relaxed),
+            m,
+        );
+    })
+    .forget();
+
+    // now.weekday()
+
+    // console!(now.to_string());
+}
+
+// fn translate_month(month: u32) -> &'static str {
+//     match
+// }
+
+fn display_month(calendar: &Element, year: i32, month: u32) {
+    log!(year, month);
+
+    calendar
+        .selector::<Element>(".year")
+        .set_inner_html(&year.to_string());
+
+    for (i, m) in calendar
+        .selector_all::<Element>(".month")
+        .into_iter()
+        .enumerate()
+    {
+        if i as u32 + 1 == month {
+            m.set_class_name("month current");
+        } else {
+            m.set_class_name("month");
+        }
+    }
+
+    // calendar
+    //     .selector::<Element>(".month")
+    //     .set_inner_html(&month.to_string());
+
+    let mut current = NaiveDate::from_ymd_opt(year, month, 1).unwrap();
+
+    // let mut day = Local:: ;
+    while (current - Days::new(1)).month() == month {
+        current = current - Days::new(1);
+    }
+
+    while current.weekday() != Weekday::Mon {
+        current = current - Days::new(1);
+    }
+
+    for i in 0..7 {
+        for j in 0..5 {
+            let li: Element = by_id(&format!("day-{}{}", i, j));
+            li.set_inner_html(&current.day().to_string());
+
+            if current == Local::now().date_naive() {
+                li.set_class_name("current-month today");
+            } else if current.month() == month {
+                li.set_class_name("current-month");
+            } else {
+                li.set_class_name("");
+            }
+
+            current = current + Days::new(1);
+        }
+    }
+}