407 lines
14 KiB
Rust
407 lines
14 KiB
Rust
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, h1, h2, input, label, span, table, td, tr, C};
|
|
use seed::{prelude::*, IF};
|
|
use seed_router::Page;
|
|
use std::collections::{BTreeMap, HashSet};
|
|
use std::fmt::Write;
|
|
use std::iter::repeat;
|
|
|
|
/// /lights page
|
|
#[derive(Default)]
|
|
pub struct Model {
|
|
bulb_states: BTreeMap<BulbId, BulbState>,
|
|
|
|
select_mode: SelectMode,
|
|
|
|
bulb_map: BulbMap,
|
|
|
|
/// 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,
|
|
|
|
color_picker: ColorPicker,
|
|
}
|
|
|
|
#[derive(Default, Clone)]
|
|
struct BulbState {
|
|
mode: BulbMode,
|
|
prefs: BTreeMap<String, BulbPrefs>,
|
|
}
|
|
|
|
#[derive(Debug)]
|
|
pub enum Msg {
|
|
ServerMessage(ServerMessage),
|
|
|
|
SelectGroup(usize),
|
|
DeselectGroups,
|
|
|
|
SelectBulb(BulbId),
|
|
|
|
ColorPicker(ColorPickerMsg),
|
|
SetBulbPower(bool),
|
|
|
|
/// Set a script parameter value for all selected bulbs.
|
|
SetParam {
|
|
script: String,
|
|
name: String,
|
|
value: Param,
|
|
},
|
|
|
|
SetSelectMode(SelectMode),
|
|
}
|
|
|
|
#[derive(Debug, Clone, Default, PartialEq, Eq)]
|
|
pub enum SelectMode {
|
|
#[default]
|
|
Map,
|
|
List,
|
|
}
|
|
|
|
impl Page for Model {
|
|
type Msg = Msg;
|
|
|
|
fn new(orders: &mut impl Orders<Self::Msg>) -> Self {
|
|
orders.subscribe(Msg::ServerMessage);
|
|
orders.notify(ClientMessage::GetBulbs);
|
|
|
|
Model::default()
|
|
}
|
|
|
|
fn update(&mut self, msg: Self::Msg, orders: &mut impl Orders<Self::Msg>) {
|
|
match msg {
|
|
Msg::ServerMessage(msg) => match msg {
|
|
ServerMessage::BulbState {
|
|
id,
|
|
mode: new_mode,
|
|
prefs,
|
|
} => {
|
|
*self.bulb_states.entry(id).or_default() = BulbState {
|
|
mode: new_mode,
|
|
prefs,
|
|
};
|
|
}
|
|
ServerMessage::BulbMap(bulb_map) => {
|
|
self.bulb_map = bulb_map;
|
|
self.selected_groups.clear();
|
|
}
|
|
_ => {}
|
|
},
|
|
Msg::DeselectGroups => {
|
|
self.selected_groups.clear();
|
|
}
|
|
Msg::SelectGroup(index) => {
|
|
if self.groups_interacted {
|
|
self.groups_interacted = false;
|
|
// If this group is the only selected group, don't clear it
|
|
if self.selected_groups.len() != 1 || !self.selected_groups.contains(&index) {
|
|
self.selected_groups.clear();
|
|
}
|
|
}
|
|
|
|
if !self.selected_groups.insert(index) {
|
|
self.selected_groups.remove(&index);
|
|
} else {
|
|
let bulb = self
|
|
.bulb_map
|
|
.groups
|
|
.get(index)
|
|
.and_then(|group| group.bulbs.first())
|
|
.and_then(|id| self.bulb_states.get(id));
|
|
|
|
if let Some(bulb) = bulb {
|
|
self.color_picker.set_color(bulb.mode.color);
|
|
}
|
|
}
|
|
}
|
|
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, _| {
|
|
let message = ClientMessage::SetBulbColor {
|
|
id: id.clone(),
|
|
color,
|
|
};
|
|
orders.notify(message);
|
|
});
|
|
}
|
|
Msg::ColorPicker(msg) => {
|
|
self.color_picker
|
|
.update(msg, &mut orders.proxy(Msg::ColorPicker));
|
|
}
|
|
Msg::SetBulbPower(power) => {
|
|
self.groups_interacted = true;
|
|
self.for_selected_bulbs(|id, _| {
|
|
let message = ClientMessage::SetBulbPower {
|
|
id: id.clone(),
|
|
power,
|
|
};
|
|
orders.notify(message);
|
|
});
|
|
}
|
|
Msg::SetParam {
|
|
script,
|
|
name,
|
|
value,
|
|
} => {
|
|
self.for_selected_bulbs(|id, bulb| {
|
|
bulb.prefs
|
|
.get_mut(&script)
|
|
.unwrap() //TOD
|
|
.kvs
|
|
.insert(name.clone(), value.clone());
|
|
let message = ClientMessage::SetBulbPref {
|
|
bulb: id.clone(),
|
|
script: script.clone(),
|
|
name: name.clone(),
|
|
value: value.clone(),
|
|
};
|
|
orders.notify(message);
|
|
});
|
|
}
|
|
Msg::SetSelectMode(mode) => {
|
|
self.select_mode = mode;
|
|
}
|
|
}
|
|
}
|
|
|
|
fn view(&self) -> Node<Self::Msg> {
|
|
let bulb_map_width = self
|
|
.bulb_map
|
|
.groups
|
|
.iter()
|
|
.map(|group| group.x + group.shape.width())
|
|
.max()
|
|
.unwrap_or(0);
|
|
|
|
let bulb_map_height = self
|
|
.bulb_map
|
|
.groups
|
|
.iter()
|
|
.map(|group| group.y + group.shape.height())
|
|
.max()
|
|
.unwrap_or(0);
|
|
|
|
let bulb_group_map = |(i, group): (usize, &BulbGroup)| {
|
|
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();
|
|
|
|
if let BulbGroupShape::Circle { r } = group.shape {
|
|
write!(&mut style, " border-radius: {r}rem;").ok();
|
|
}
|
|
|
|
div![
|
|
&group.name[..1],
|
|
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 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();
|
|
let script = script.to_string();
|
|
|
|
match value {
|
|
Param::String(value) => tr![
|
|
C![C.pref_line],
|
|
td![&name],
|
|
td![input![
|
|
C![C.pref_input],
|
|
attrs! {At::Placeholder => &script},
|
|
attrs! {At::Value => value},
|
|
input_ev(Ev::Input, move |input| Msg::SetParam {
|
|
script,
|
|
name,
|
|
value: Param::String(input),
|
|
})
|
|
]]
|
|
],
|
|
&Param::Toggle(value) => {
|
|
tr![
|
|
C![C.pref_line],
|
|
button![
|
|
if value {
|
|
C![C.pref_button_enabled]
|
|
} else {
|
|
C![C.pref_button]
|
|
},
|
|
&name,
|
|
input_ev(Ev::Click, move |_| Msg::SetParam {
|
|
script,
|
|
name,
|
|
value: Param::Toggle(!value),
|
|
})
|
|
]
|
|
]
|
|
}
|
|
}
|
|
};
|
|
|
|
div![
|
|
C![C.bulb_box],
|
|
div![
|
|
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]),
|
|
self.color_picker.view().map_msg(Msg::ColorPicker),
|
|
button![
|
|
if selected_bulb.map(|b| b.mode.power).unwrap_or(false) {
|
|
C![C.bulb_power_button, C.bulb_power_button_on]
|
|
} else {
|
|
C![C.bulb_power_button]
|
|
},
|
|
{
|
|
let target_power = selected_bulb.map(|b| !b.mode.power);
|
|
ev(Ev::Click, move |_| target_power.map(Msg::SetBulbPower))
|
|
},
|
|
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.prefs_box],
|
|
IF!(selected_bulb.is_none() => C![C.cross_out]),
|
|
h2!["Settings"],
|
|
if let Some(selected_bulb) = selected_bulb {
|
|
table![selected_bulb
|
|
.prefs
|
|
.iter()
|
|
.flat_map(|(script, prefs)| repeat(script).zip(prefs.kvs.iter()))
|
|
.map(|(script, (name, value))| script_param(script, name, value))]
|
|
} else {
|
|
empty![]
|
|
},
|
|
],
|
|
]
|
|
}
|
|
}
|
|
|
|
impl Model {
|
|
fn for_selected_bulbs(&mut self, mut f: impl FnMut(&BulbId, &mut BulbState)) {
|
|
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() {
|
|
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);
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|