hulthe/hemma
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Add alternate bulb list view

Browse Source
This commit is contained in:
Joakim Hulthe
2023-11-06 22:28:56 +01:00
parent 558bf4782b
commit 8bd16b6755
3 changed files with 259 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
frontend/src/page/lights.rs
View File

@ -2,7 +2,7 @@ use crate::components::color_picker::{ColorPicker, ColorPickerMsg};
use crate::css::C;
use common::{BulbGroup, BulbGroupShape, BulbMap, BulbPrefs, ClientMessage, Param, ServerMessage};
use lighter_lib::{BulbId, BulbMode};
use seed::{attrs, button, div, empty, h2, input, table, td, tr, C};
use seed::{attrs, button, div, empty, h1, h2, input, label, span, table, td, tr, C};
use seed::{prelude::*, IF};
use seed_router::Page;
use std::collections::{BTreeMap, HashSet};
@ -14,11 +14,16 @@ use std::iter::repeat;
pub struct Model {
bulb_states: BTreeMap<BulbId, BulbState>,
select_mode: SelectMode,
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,6 +42,9 @@ pub enum Msg {
SelectGroup(usize),
DeselectGroups,
SelectBulb(BulbId),
ColorPicker(ColorPickerMsg),
SetBulbPower(bool),
@ -46,6 +54,15 @@ pub enum Msg {
name: String,
value: Param,
},
SetSelectMode(SelectMode),
}
#[derive(Debug, Clone, Default, PartialEq, Eq)]
pub enum SelectMode {
#[default]
Map,
List,
}
impl Page for Model {
@ -70,8 +87,6 @@ impl Page for Model {
mode: new_mode,
prefs,
};
//color_picker.set_color(mode.color);
}
ServerMessage::BulbMap(bulb_map) => {
self.bulb_map = bulb_map;
@ -106,6 +121,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, _| {
@ -150,36 +170,13 @@ impl Page for Model {
orders.notify(message);
});
}
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
@ -196,7 +193,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!(
@ -227,13 +224,51 @@ impl Page for Model {
]
};
let selected_bulb = 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));
let bulb_group_list = |(_i, group): (usize, &BulbGroup)| {
div![
C![C.bulb_list_group],
h1![&group.name],
group.bulbs.iter().map(|bulb| {
let select_ev = || {
let bulb = bulb.clone();
ev(Ev::Click, |_| Msg::SelectBulb(bulb))
};
button![
C![C.bulb_list_bulb],
select_ev(),
div![
C![C.bulb_list_checkbox],
label![
C![C.container],
input![
attrs! { At::Type => "checkbox" },
IF!(self.selected_bulbs.contains(bulb) => attrs! { At::Checked => true }),
select_ev(),
],
div![C![C.checkmark]],
],
],
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 script_param = |script: &str, name: &str, value: &Param| {
let name = name.to_string();
@ -278,13 +313,35 @@ impl Page for Model {
div![
C![C.bulb_box],
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(view_bulb_group),
C![C.selector_selector],
button![
"Map",
ev(Ev::Click, move |_| Msg::SetSelectMode(SelectMode::Map))
],
div![
C![C.selector_selector_arrow],
IF!(self.select_mode == SelectMode::Map =>
attrs! { At::Style => "transform: rotateY(180deg);"}),
],
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.cross_out]),
@ -326,15 +383,23 @@ impl Page for Model {
impl Model {
fn for_selected_bulbs(&mut self, mut f: impl FnMut(&BulbId, &mut BulbState)) {
for &index in &self.selected_groups {
let Some(group) = self.bulb_map.groups.get(index) else {
continue;
};
if let SelectMode::Map = self.select_mode {
for &index in &self.selected_groups {
let Some(group) = self.bulb_map.groups.get(index) else {
continue;
};
for id in group.bulbs.iter() {
for id in group.bulbs.iter() {
if let Some(bulb) = self.bulb_states.get_mut(id) {
f(id, bulb);
}
}
}
} else {
for id in &self.selected_bulbs {
if let Some(bulb) = self.bulb_states.get_mut(id) {
f(id, bulb);
}
};
}
}
}