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

Compare commits

base: hulthe:bulb_list
Branches Tags
hulthe:master hulthe:daylight-script hulthe:bulb_list hulthe:pwa
hulthe:0.3.2 hulthe:0.3.1 hulthe:0.3.0 hulthe:0.2.3 hulthe:0.2.2 hulthe:0.2.1
..
compare: hulthe:0.2.3
Branches Tags
hulthe:daylight-script hulthe:master hulthe:bulb_list hulthe:pwa
hulthe:0.3.2 hulthe:0.3.1 hulthe:0.3.0 hulthe:0.2.3 hulthe:0.2.2 hulthe:0.2.1

1 Commits
bulb_list ... 0.2.3

Author SHA1 Message Date
Joakim Hulthe
f7ec98f8e3 0.2.3 2023-11-06 22:29:54 +01:00
7 changed files with 56 additions and 265 deletions
Expand all files Collapse all files

6
Cargo.lock generated
View File

@ -206,7 +206,7 @@ dependencies = [
[[package]]
name = "common"
version = "0.2.2"
version = "0.2.3"
dependencies = [
"chrono",
"lighter_lib",
@ -576,7 +576,7 @@ checksum = "95505c38b4572b2d910cecb0281560f54b440a19336cbbcb27bf6ce6adc6f5a8"
[[package]]
name = "hemma"
version = "0.2.2"
version = "0.2.3"
dependencies = [
"anyhow",
"async-trait",
@ -600,7 +600,7 @@ dependencies = [
[[package]]
name = "hemma_web"
version = "0.2.2"
version = "0.2.3"
dependencies = [
"chrono",
"common",

2
backend/Cargo.toml
View File

@ -1,6 +1,6 @@
[package]
name = "hemma"
version = "0.2.2"
version = "0.2.3"
edition = "2021"
[dependencies]

2
common/Cargo.toml
View File

@ -1,6 +1,6 @@
[package]
name = "common"
version = "0.2.2"
version = "0.2.3"
edition = "2021"
[dependencies]

2
frontend/Cargo.toml
View File

@ -1,6 +1,6 @@
[package]
name = "hemma_web"
version = "0.2.2"
version = "0.2.3"
authors = ["Joakim Hulthe <joakim@hulthe.net"]
edition = "2021"

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

@ -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, h1, h2, h3, input, label, span, table, td, tr, C};
use seed::{attrs, button, div, h2, input, table, td, tr, C};
use seed::{prelude::*, IF};
use seed_router::Page;
use std::collections::{BTreeMap, HashMap, HashSet};
@ -14,18 +14,11 @@ 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 bulbs on the map
/// the currently selected bulb map groups
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,
@ -44,20 +37,9 @@ 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,
List,
}
impl Page for Model {
@ -82,6 +64,8 @@ impl Page for Model {
mode: new_mode,
wake_schedule,
};
//color_picker.set_color(mode.color);
}
ServerMessage::BulbMap(bulb_map) => {
self.bulb_map = bulb_map;
@ -116,11 +100,6 @@ 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, _| {
@ -166,13 +145,36 @@ 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
@ -189,7 +191,7 @@ impl Page for Model {
.max()
.unwrap_or(0);
let bulb_group_map = |(i, group): (usize, &BulbGroup)| {
let view_bulb_group = |(i, group): (usize, &BulbGroup)| {
let (w, h) = (group.shape.width(), group.shape.height());
let mut style = String::new();
write!(
@ -220,51 +222,13 @@ impl Page for Model {
]
};
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 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 calendar_day = |day: Weekday| {
let time = selected_bulb
@ -285,35 +249,13 @@ impl Page for Model {
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))
],
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),
],
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]),
@ -355,18 +297,11 @@ impl Page for Model {
impl Model {
fn for_selected_bulbs(&self, mut f: impl FnMut(&BulbId, &BulbState)) {
if let SelectMode::Map = self.select_mode {
self.selected_groups
.iter()
.filter_map(|&index| self.bulb_map.groups.get(index))
.flat_map(|group| group.bulbs.iter())
.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));
}
self.selected_groups
.iter()
.filter_map(|&index| self.bulb_map.groups.get(index))
.flat_map(|group| group.bulbs.iter())
.filter_map(|id| self.bulb_states.get(id).map(|bulb| (id, bulb)))
.for_each(|(id, bulb)| f(id, bulb));
}
}

5
frontend/static/images/circle-arrow.svg
View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<ellipse style="vector-effect: non-scaling-stroke; stroke-width: 0px; stroke: rgb(245, 222, 179); fill: rgb(245, 222, 179);" cx="250" cy="250" rx="250" ry="250"/>
<path d="M 59.4 209.201 H 308.253 L 274.16 131.459 L 447.051 254.953 L 274.16 378.446 L 308.253 300.704 H 59.4 V 209.201 Z" style="transform-origin: 447.051px 254.952px; stroke-width: 16px; stroke: rgb(193, 168, 123);" bx:shape="arrow 59.4 131.459 387.651 246.987 91.503 172.891 34.093 1@d4e47a6f"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 607 B

139
frontend/static/styles/common.scss
View File

@ -102,42 +102,6 @@ body {
margin-bottom: 1.5rem;
}
/* lol i'm so funny */
.selector_selector {
margin-bottom: 0;
display: flex;
justify-content: center;
//background: #534f44;
}
.selector_selector > button {
width: 10rem;
border: solid 0.1rem wheat;
background-color: #3a3743;
color: white;
font-size: 1.5rem;
border-left: solid white 0.1rem;
border-right: solid white 0.1rem;
}
.selector_selector > button:hover {
background-color: #4c4858;
}
.selector_selector > button:active {
background-color: #312e38;
}
.selector_selector > button:first-child {
border-top-left-radius: 0.5rem;
}
.selector_selector > button:last-child {
border-top-right-radius: 0.5rem;
}
.selector_selector_arrow {
position: absolute;
width: 2.15rem;
height: 2.15rem;
background: url("/images/circle-arrow.svg");
transition: transform 0.5s ease-in-out;
}
.bulb_controls {
display: flex;
flex-direction: row;
@ -186,47 +150,6 @@ body {
}
@keyframes to_width_90 { to { width: 90%; } }
.bulb_list {
display: flex;
flex-direction: column;
}
.bulb_list_group {
display: flex;
flex-direction: column;
}
.bulb_list_group > h1 {
margin-top: 0.6em;
margin-bottom: 0;
font-size: 1.3em;
border-bottom: solid 1px;
}
.bulb_list_bulb {
font-family: Ubuntu Mono;
display: flex;
font-size: 0.8em;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-top: 0.3em;
background-color: #3a3743;
border: solid 0.2em #45374f;
border-radius: 0.5em;
color: wheat;
}
.bulb_list_bulb:hover {
background-color: #4c4858;
}
.bulb_list_bulb:active {
background-color: #312e38;
}
.bulb_list_bulb > span {
margin: auto;
flex-grow: 1;
padding-right: 1em;
}
.bulb_map {
background: url(images/blueprint_bg.png);
background-size: auto;
@ -414,65 +337,3 @@ body {
flex-shrink: 1;
}
.bulb_list_checkbox {}
.bulb_list_checkbox input[type="checkbox"] {
visibility: hidden;
display: none;
}
.bulb_list_checkbox *,
.bulb_list_checkbox ::after,
.bulb_list_checkbox ::before {
box-sizing: border-box;
}
.bulb_list_checkbox .container {
display: block;
position: relative;
cursor: pointer;
font-size: 25px;
user-select: none;
}
/* Create a custom checkbox */
.bulb_list_checkbox .checkmark {
position: relative;
top: 0;
left: 0;
height: 1.3em;
width: 1.3em;
background: black;
border-radius: 50px;
transition: all 0.7s;
--spread: 10px;
}
/* When the checkbox is checked, add a blue background */
.bulb_list_checkbox .container input:checked ~ .checkmark {
background: black;
/* spawn a bunch of colored balls and blur them together */
box-shadow: -5px -5px var(--spread) 0px #5B51D8, 0 -5px var(--spread) 0px #833AB4, 5px -5px var(--spread) 0px #E1306C, 5px 0 var(--spread) 0px #FD1D1D, 5px 5px var(--spread) 0px #F77737, 0 5px var(--spread) 0px #FCAF45, -5px 5px var(--spread) 0px #FFDC80;
}
/* Create the checkmark/indicator (hidden when not checked) */
.bulb_list_checkbox .checkmark::after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.bulb_list_checkbox .container input:checked ~ .checkmark::after {
display: block;
}
/* Style the checkmark/indicator */
.bulb_list_checkbox .container .checkmark::after {
left: 0.5em;
top: 0.34em;
width: 0.25em;
height: 0.5em;
border: solid wheat;
border-width: 0 0.15em 0.15em 0;
transform: rotate(45deg);
}