wip bulb list

frontend/src/page/lights.rs

@@ -3,7 +3,7 @@ use crate::css::C;
 use chrono::{NaiveTime, Weekday};
 use common::{BulbGroup, BulbGroupShape, BulbMap, ClientMessage, ServerMessage};
 use lighter_lib::{BulbId, BulbMode};
-use seed::{attrs, button, div, input, C};
+use seed::{attrs, button, div, h2, h3, input, label, span, table, td, tr, C};
 use seed::{prelude::*, IF};
 use seed_router::Page;
 use std::collections::{BTreeMap, HashMap, HashSet};
@@ -14,11 +14,18 @@ use std::fmt::Write;
 pub struct Model {
     bulb_states: BTreeMap<BulbId, BulbState>,
 
+    select_mode: SelectMode,
+
+    bulb_groups: BTreeMap<String, Vec<BulbId>>,
+
     bulb_map: BulbMap,
 
-    /// the currently selected bulb map groups
+    /// the currently selected bulbs on the map
     selected_groups: HashSet<usize>,
 
+    /// the currently selected bulbs on the list
+    selected_bulbs: HashSet<BulbId>,
+
     /// whether the currently selected map groups have been interacted with
     groups_interacted: bool,
 
@@ -37,9 +44,21 @@ pub enum Msg {
 
     SelectGroup(usize),
     DeselectGroups,
+
+    SelectBulb(BulbId),
+
     ColorPicker(ColorPickerMsg),
     SetBulbPower(bool),
     LightTime(String, Weekday),
+    SetSelectMode(SelectMode),
+}
+
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+pub enum SelectMode {
+    //#[default]
+    Map,
+    #[default]
+    List,
 }
 
 impl Page for Model {
@@ -64,8 +83,6 @@ impl Page for Model {
                         mode: new_mode,
                         wake_schedule,
                     };
-
-                    //color_picker.set_color(mode.color);
                 }
                 ServerMessage::BulbMap(bulb_map) => {
                     self.bulb_map = bulb_map;
@@ -100,6 +117,11 @@ impl Page for Model {
                     }
                 }
             }
+            Msg::SelectBulb(bulb) => {
+                if !self.selected_bulbs.remove(&bulb) {
+                    self.selected_bulbs.insert(bulb);
+                }
+            }
             Msg::ColorPicker(ColorPickerMsg::SetColor(color)) => {
                 self.groups_interacted = true;
                 self.for_selected_bulbs(|id, _| {
@@ -145,36 +167,13 @@ impl Page for Model {
                     });
                 }
             }
+            Msg::SetSelectMode(mode) => {
+                self.select_mode = mode;
+            }
         }
     }
 
     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
             .bulb_map
             .groups
@@ -191,7 +190,7 @@ impl Page for Model {
             .max()
             .unwrap_or(0);
 
-        let view_bulb_group = |(i, group): (usize, &BulbGroup)| {
+        let bulb_group_map = |(i, group): (usize, &BulbGroup)| {
             let (w, h) = (group.shape.width(), group.shape.height());
             let mut style = String::new();
             write!(
@@ -222,43 +221,91 @@ impl Page for Model {
             ]
         };
 
-        let selected_bulb = self
+        let bulb_group_list = |(i, group): (usize, &BulbGroup)| {
-            .selected_groups
+            div![
-            .iter()
+                h3![&group.name[..1]],
-            .next()
+                group.bulbs.iter().map(|bulb| {
-            .and_then(|&index| self.bulb_map.groups.get(index))
+                    div![
-            .and_then(|group| group.bulbs.first())
+                        input![
-            .and_then(|id| self.bulb_states.get(id));
+                            attrs! { At::Type => "checkbox" },
+                            IF!(self.selected_bulbs.contains(bulb) => attrs! { At::Checked => true }),
+                            {
+                                let bulb = bulb.clone();
+                                ev(Ev::Change, |_| Msg::SelectBulb(bulb))
+                            },
+                        ],
+                        span![bulb],
+                    ]
+                }),
+            ]
+        };
+
+        // pick one (arbitrary) selected bulb to pull values for the controls from
+        let selected_bulb = if let SelectMode::Map = self.select_mode {
+            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))
+        } else {
+            self.selected_bulbs
+                .iter()
+                .next()
+                .and_then(|id| self.bulb_states.get(id))
+        };
 
         let calendar_day = |day: Weekday| {
             let time = selected_bulb
                 .and_then(|b| b.wake_schedule.get(&day))
                 .map(|t| t.to_string())
                 .unwrap_or_default();
-            div![
+            tr![
                 C![C.calendar_day],
-                day.to_string(),
+                td![day.to_string()],
-                input![
+                td![input![
                     C![C.calendar_time_input],
                     attrs! {At::Placeholder => time},
                     input_ev(Ev::Input, move |input| Msg::LightTime(input, day))
-                ],
+                ]],
             ]
         };
 
         div![
             C![C.bulb_box],
             div![
-                C![C.bulb_map],
+                C![C.selector_selector],
-                attrs! {
+                div![
-                    At::Style => format!("width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
+                    C![C.selector_selector_highlight],
-                },
+                    IF!(self.select_mode == SelectMode::List =>
-                ev(Ev::Click, |_| Msg::DeselectGroups),
+                        attrs! { At::Style => "margin-left: 10rem;"}),
-                self.bulb_map.groups.iter().enumerate().map(view_bulb_group),
+                ],
+                button![
+                    "Map",
+                    ev(Ev::Click, move |_| Msg::SetSelectMode(SelectMode::Map))
+                ],
+                button![
+                    "List",
+                    ev(Ev::Click, move |_| Msg::SetSelectMode(SelectMode::List))
+                ],
             ],
+            match self.select_mode {
+                SelectMode::Map => div![
+                    C![C.bulb_map],
+                    attrs! {
+                        At::Style => format!("min-width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
+                    },
+                    ev(Ev::Click, |_| Msg::DeselectGroups),
+                    self.bulb_map.groups.iter().enumerate().map(bulb_group_map),
+                ],
+                SelectMode::List => div![
+                    C![C.bulb_list],
+                    self.bulb_map.groups.iter().enumerate().map(bulb_group_list),
+                ],
+            },
             div![
                 C![C.bulb_controls],
-                IF!(selected_bulb.is_none() => C![C.bulb_controls_disable]),
+                IF!(selected_bulb.is_none() => C![C.cross_out]),
                 self.color_picker.view().map_msg(Msg::ColorPicker),
                 button![
                     if selected_bulb.map(|b| b.mode.power).unwrap_or(false) {
@@ -279,13 +326,17 @@ impl Page for Model {
             ],
             div![
                 C![C.calendar_box],
-                calendar_day(Weekday::Mon),
+                IF!(selected_bulb.is_none() => C![C.cross_out]),
-                calendar_day(Weekday::Tue),
+                h2!["Wake Schedule"],
-                calendar_day(Weekday::Wed),
+                table![
-                calendar_day(Weekday::Thu),
+                    calendar_day(Weekday::Mon),
-                calendar_day(Weekday::Fri),
+                    calendar_day(Weekday::Tue),
-                calendar_day(Weekday::Sat),
+                    calendar_day(Weekday::Wed),
-                calendar_day(Weekday::Sun),
+                    calendar_day(Weekday::Thu),
+                    calendar_day(Weekday::Fri),
+                    calendar_day(Weekday::Sat),
+                    calendar_day(Weekday::Sun),
+                ],
             ],
         ]
     }
@@ -293,11 +344,18 @@ impl Page for Model {
 
 impl Model {
     fn for_selected_bulbs(&self, mut f: impl FnMut(&BulbId, &BulbState)) {
-        self.selected_groups
+        if let SelectMode::Map = self.select_mode {
-            .iter()
+            self.selected_groups
-            .filter_map(|&index| self.bulb_map.groups.get(index))
+                .iter()
-            .flat_map(|group| group.bulbs.iter())
+                .filter_map(|&index| self.bulb_map.groups.get(index))
-            .filter_map(|id| self.bulb_states.get(id).map(|bulb| (id, bulb)))
+                .flat_map(|group| group.bulbs.iter())
-            .for_each(|(id, bulb)| f(id, bulb));
+                .filter_map(|id| self.bulb_states.get(id).map(|bulb| (id, bulb)))
+                .for_each(|(id, bulb)| f(id, bulb));
+        } else {
+            self.selected_bulbs
+                .iter()
+                .filter_map(|id| self.bulb_states.get(id).map(|bulb| (id, bulb)))
+                .for_each(|(id, bulb)| f(id, bulb));
+        }
     }
 }

frontend/static/styles/common.scss

@@ -94,17 +94,38 @@ body {
 }
 
 .bulb_box {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-around;
 	width: fit-content;
+	margin: auto;
 }
 
 .bulb_box > * {
-	margin-bottom: 1em;
+	margin-bottom: 1.5rem;
-	margin-right: 1em;
+}
+
+/* lol i'm so funny */
+.selector_selector {
+	margin-bottom: 0;
+	display: flex;
+	border: solid 0.1rem wheat;
+	justify-content: center;
+	background: #534f44;
+}
+.selector_selector > button {
+	width: 10rem;
+	border: unset;
+	background: unset;
+	color: white;
+	font-size: 1.5rem;
+	border-left: solid white 0.1rem;
+	border-right: solid white 0.1rem;
+}
+.selector_selector_highlight {
+	position: absolute;
+	width: 10rem;
+	height: 2rem;
+	background: #ffd70069;
+	margin-left: -10rem;
+	transition: margin-left 0.3s ease-out;
 }
 
 .bulb_controls {
@@ -112,21 +133,20 @@ body {
 	flex-direction: row;
 	align-items: center;
 	padding-right: 0.5em;
-	background: #56636e;
+	background: #00000000;
-	border: solid 0.25em #5b3f63;
 }
 
-.bulb_controls_disable {
+.cross_out {
 	position: relative;
 	overflow: hidden;
+	opacity: 0.5;
 }
 
-.bulb_controls_disable:before {
+.cross_out:before {
 	position: absolute;
 	content: '';
 	display: block;
-	background: #000000;
+	background: #00000000;
-	opacity: 0.5;
 	left: 0;
 	right: 0;
 	top: 0;
@@ -135,7 +155,7 @@ body {
 	z-index: 90;
 }
 
-.bulb_controls_disable:after {
+.cross_out:after {
 	position: absolute;
 	content: '';
 	background: #56636e;
@@ -151,23 +171,35 @@ body {
 	bottom: 0;
 	margin: auto;
 	z-index: 91;
-    animation: to_full_width .2s ease-out 0s 1 forwards;
+    box-shadow: black 0.5rem 0.6rem 1rem 0.3rem;
+    animation: to_width_90 .2s ease-out 0s 1 forwards;
+}
+@keyframes to_width_90 { to { width: 90%; } }
+
+.bulb_list {
+    color: green;
+}
+
+.bulb_list_checked {
+    color: green;
+}
+.bulb_list_unchecked {
+    color: green;
 }
-@keyframes to_full_width { to { width: 100%; } }
 
 .bulb_map {
 	background: url(images/blueprint_bg.png);
 	background-size: auto;
 	background-size: 1em;
 	padding: 2rem;
-	border: solid 0.4rem #5b3f63;
+	border: solid 0.1rem;
+	border-radius: 0.2rem;
 }
 
 .bulb_map::after {
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	content: #0003;
 }
 
 .bulb_group {
@@ -179,6 +211,7 @@ body {
 	font-size: 2em;
 	position: absolute;
 	box-shadow: #0006 0.1em 0.1em 0.1em;
+	user-select: none;
 	transition: 0.3s ease-in-out;
 }
 
@@ -326,7 +359,18 @@ body {
 	//margin-bottom: .7em;
 	margin-left: .5em;
 }
+
 .calendar_box {
-	with: 10em;
+	display: flex;
+	justify-content: center;
+}
+
+.calendar_box > h2 {
+	writing-mode: sideways-lr;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+.calendar_box > * {
+	flex-shrink: 1;
 }