added lightschedule to frontend

Cargo.lock

@@ -552,6 +552,7 @@ name = "hemma_web"
 version = "0.1.0"
 dependencies = [
  "anyhow",
+ "chrono",
  "common",
  "css_typegen",
  "lighter_lib",

frontend/Cargo.toml

@@ -14,6 +14,7 @@ serde = { version = "1", features = ['derive'] }
 serde_json = "1"
 anyhow = "*"
 ron = "0.7.1"
+chrono = { version = "0.4.20", features = ["serde"] }
 
 [dependencies.css_typegen]
 git = "https://github.com/hulthe/css_typegen.git"

frontend/src/page/lights.rs

@@ -1,9 +1,10 @@
 use crate::components::color_picker::{ColorPicker, ColorPickerMsg};
 use crate::css::C;
+use chrono::{NaiveTime, Weekday};
 use common::{BulbGroup, BulbGroupShape, BulbMap, ClientMessage, ServerMessage};
 use lighter_lib::{BulbId, BulbMode};
 use seed::prelude::*;
-use seed::{attrs, button, div, C};
+use seed::{attrs, button, div, input, C};
 use seed_router::Page;
 use std::collections::{BTreeMap, HashSet};
 use std::fmt::Write;
@@ -32,6 +33,7 @@ pub enum Msg {
     DeselectGroups,
     ColorPicker(ColorPickerMsg),
     SetBulbPower(bool),
+    LightTime(String, Weekday),
 }
 
 impl Page for Model {
@@ -47,7 +49,7 @@ impl Page for Model {
     fn update(&mut self, msg: Self::Msg, orders: &mut impl Orders<Self::Msg>) {
         match msg {
             Msg::ServerMessage(msg) => match msg {
-                ServerMessage::BulbMode { id, mode: new_mode } => {
+                ServerMessage::BulbState { id, mode: new_mode, wake_schedule } => {
                     *self.bulb_states.entry(id).or_default() = new_mode
                     //color_picker.set_color(mode.color);
                 }
@@ -108,124 +110,159 @@ impl Page for Model {
                     orders.notify(message);
                 });
             }
+            Msg::LightTime(time, day) => {
+                if let Ok(time) = NaiveTime::parse_from_str(&time, "%H:%M") {
+                    self.for_selected_bulbs(|id, _| {
+                        let message = ClientMessage::SetBulbWakeTime {
+                            id: id.clone(),
+                            day,
+                            time,
+                        };
+                        orders.notify(message);
+                    });
+                }
+            }
         }
     }
 
-    fn view(&self) -> Node<Self::Msg> {
-        //let view_bulb = |(id, (mode, color_picker)): (&BulbId, &(BulbMode, ColorPicker))| {
-        //    div![
-        //        C![C.bulb_box],
-        //        h1![id],
-        //        div![
-        //            C![C.bulb_controls],
-        //            {
-        //                let id = id.clone();
-        //                color_picker.view().map_msg(|msg| Msg::ColorPicker(id, msg))
-        //            },
-        //            button![
-        //                if mode.power {
-        //                    C![C.bulb_power_button, C.bulb_power_button_on]
-        //                } else {
-        //                    C![C.bulb_power_button]
-        //                },
-        //                {
-        //                    let id = id.clone();
-        //                    let power = !mode.power;
-        //                    ev(Ev::Click, move |_| Msg::SetBulbPower(id, power))
-        //                },
-        //            ],
-        //        ],
-        //    ]
-        //};
 
-        let bulb_map_width = self
+fn view(&self) -> Node<Self::Msg> {
-            .bulb_map
+    //let view_bulb = |(id, (mode, color_picker)): (&BulbId, &(BulbMode, ColorPicker))| {
-            .groups
+    //    div![
-            .iter()
+    //        C![C.bulb_box],
-            .map(|group| group.x + group.shape.width())
+    //        h1![id],
-            .max()
+    //        div![
-            .unwrap_or(0);
+    //            C![C.bulb_controls],
+    //            {
+    //                let id = id.clone();
+    //                color_picker.view().map_msg(|msg| Msg::ColorPicker(id, msg))
+    //            },
+    //            button![
+    //                if mode.power {
+    //                    C![C.bulb_power_button, C.bulb_power_button_on]
+    //                } else {
+    //                    C![C.bulb_power_button]
+    //                },
+    //                {
+    //                    let id = id.clone();
+    //                    let power = !mode.power;
+    //                    ev(Ev::Click, move |_| Msg::SetBulbPower(id, power))
+    //                },
+    //            ],
+    //        ],
+    //    ]
+    //};
 
-        let bulb_map_height = self
+    let bulb_map_width = self
-            .bulb_map
+        .bulb_map
-            .groups
+        .groups
-            .iter()
+        .iter()
-            .map(|group| group.y + group.shape.height())
+        .map(|group| group.x + group.shape.width())
-            .max()
+        .max()
-            .unwrap_or(0);
+        .unwrap_or(0);
 
-        let view_bulb_group = |(i, group): (usize, &BulbGroup)| {
+    let bulb_map_height = self
-            let (w, h) = (group.shape.width(), group.shape.height());
+        .bulb_map
-            let mut style = String::new();
+        .groups
-            write!(
+        .iter()
-                &mut style,
+        .map(|group| group.y + group.shape.height())
-                "margin-left: {}rem; margin-top: {}rem; width: {}rem; height: {}rem;",
+        .max()
-                group.x, group.y, w, h
+        .unwrap_or(0);
-            )
-            .ok();
 
-            if let BulbGroupShape::Circle { r } = group.shape {
+    let view_bulb_group = |(i, group): (usize, &BulbGroup)| {
-                write!(&mut style, " border-radius: {r}rem;").ok();
+        let (w, h) = (group.shape.width(), group.shape.height());
-            }
+        let mut style = String::new();
+        write!(
+            &mut style,
+            "margin-left: {}rem; margin-top: {}rem; width: {}rem; height: {}rem;",
+            group.x, group.y, w, h
+        )
+        .ok();
 
-            div![
+        if let BulbGroupShape::Circle { r } = group.shape {
-                &group.name[..1],
+            write!(&mut style, " border-radius: {r}rem;").ok();
-                if self.selected_groups.contains(&i) {
+        }
-                    C![C.bulb_group, C.bulb_group_selected]
-                } else {
-                    C![C.bulb_group]
-                },
-                attrs! {
-                    At::Style => style,
-                },
-                ev(Ev::Click, move |event| {
-                    event.stop_propagation();
-                    Msg::SelectGroup(i)
-                }),
-            ]
-        };
-
-        let (_color, power) = self
-            .selected_groups
-            .iter()
-            .next()
-            .and_then(|&index| self.bulb_map.groups.get(index))
-            .and_then(|group| group.bulbs.first())
-            .and_then(|id| self.bulb_states.get(id))
-            .map(|bulb| (bulb.color, bulb.power))
-            .unwrap_or_default();
 
         div![
-            C![C.bulb_box],
+            &group.name[..1],
-            div![
+            if self.selected_groups.contains(&i) {
-                C![C.bulb_map],
+                C![C.bulb_group, C.bulb_group_selected]
-                attrs! {
+            } else {
-                    At::Style => format!("width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
+                C![C.bulb_group]
-                },
+            },
-                ev(Ev::Click, |_| Msg::DeselectGroups),
+            attrs! {
-                self.bulb_map.groups.iter().enumerate().map(view_bulb_group),
+                At::Style => style,
-            ],
+            },
-            div![
+            ev(Ev::Click, move |event| {
-                C![C.bulb_controls],
+                event.stop_propagation();
-                self.color_picker
+                Msg::SelectGroup(i)
-                    .view()
+            }),
-                    .map_msg(|msg| Msg::ColorPicker(msg)),
+        ]
-                button![
+    };
-                    if power {
+
-                        C![C.bulb_power_button, C.bulb_power_button_on]
+    let calendar_day = |day: Weekday| {
-                    } else {
+        div![
-                        C![C.bulb_power_button]
+            C![C.calendar_day],
-                    },
+            day.to_string(),
-                    ev(Ev::Click, move |_| Msg::SetBulbPower(!power)),
+            input![
-                    div![attrs! { At::Id => "switch_socket" }],
+                C![C.calendar_time_input],
-                    div![attrs! { At::Id => "off_label" }, "Off"],
+                attrs! {At::Placeholder => "7:30"},
-                    div![attrs! { At::Id => "on_label" }, "On"],
+                input_ev(Ev::Input, move |input| Msg::LightTime(input, day))
-                    div![attrs! { At::Id => "lever_stem" }],
-                    div![attrs! { At::Id => "lever_face" }],
-                ],
             ],
         ]
-    }
+    };
+
+    let (_color, power) = self
+        .selected_groups
+        .iter()
+        .next()
+        .and_then(|&index| self.bulb_map.groups.get(index))
+        .and_then(|group| group.bulbs.first())
+        .and_then(|id| self.bulb_states.get(id))
+        .map(|bulb| (bulb.color, bulb.power))
+        .unwrap_or_default();
+
+    div![
+        C![C.bulb_box],
+        div![
+            C![C.bulb_map],
+            attrs! {
+                At::Style => format!("width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
+            },
+            ev(Ev::Click, |_| Msg::DeselectGroups),
+            self.bulb_map.groups.iter().enumerate().map(view_bulb_group),
+        ],
+        div![
+            C![C.bulb_controls],
+            self.color_picker
+                .view()
+                .map_msg(|msg| Msg::ColorPicker(msg)),
+            button![
+                if power {
+                    C![C.bulb_power_button, C.bulb_power_button_on]
+                } else {
+                    C![C.bulb_power_button]
+                },
+                ev(Ev::Click, move |_| Msg::SetBulbPower(!power)),
+                div![attrs! { At::Id => "switch_socket" }],
+                div![attrs! { At::Id => "off_label" }, "Off"],
+                div![attrs! { At::Id => "on_label" }, "On"],
+                div![attrs! { At::Id => "lever_stem" }],
+                div![attrs! { At::Id => "lever_face" }],
+            ],
+        ],
+        div![
+            C![C.calendar_box],
+            calendar_day(Weekday::Mon),
+            calendar_day(Weekday::Tue),
+            calendar_day(Weekday::Wed),
+            calendar_day(Weekday::Thu),
+            calendar_day(Weekday::Fri),
+            calendar_day(Weekday::Sat),
+            calendar_day(Weekday::Sun),
+        ],
+    ]
+}
 }
 
 impl Model {

frontend/static/styles/common.scss

@@ -259,3 +259,25 @@ body {
 
 	transition: margin 0.1s ease-out;
 }
+.calendar_day {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-top: .3em;
+}
+
+.calendar_time_input {
+	background: #453f4b;
+	border: solid 0.35em #5b3f63;
+	border-radius: .3em;
+	color: white;
+	height: 15;
+	width: 5em;
+	align: right;
+	//margin-bottom: .7em;
+	margin-left: .5em;
+}
+.calendar_box {
+	with: 10em;
+}
+