Add alternate bulb list view

Cargo.toml

@@ -1,6 +1,8 @@
 [workspace]
 members = ["backend", "common", "frontend"]
 
+resolver = "2"
+
 [profile.dev]
 # Issue with const-generics
 incremental = false

Dockerfile

@@ -1,7 +1,7 @@
 ##################
 ### BASE STAGE ###
 ##################
-FROM rust:1.62.1 as base
+FROM rust:1.72.1 as base
 
 # Install build dependencies
 RUN cargo install --locked cargo-make trunk strip_cargo_version

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hemma"
-version = "0.1.0"
+version = "0.2.2"
 edition = "2021"
 
 [dependencies]
@@ -25,8 +25,7 @@ path = "../common"
 
 [dependencies.lighter_lib]
 git = "https://git.nubo.sh/hulthe/lighter.git"
-#path = "../../lighter/lib"
 
 [dependencies.lighter_manager]
 git = "https://git.nubo.sh/hulthe/lighter.git"
-#path = "../../lighter/manager"
+

backend/example.config.toml

@@ -1,3 +1,5 @@
+persistence_dir = "/tmp/"
+
 [mqtt]
 #address = "hostname"
 #port = 1883

backend/src/collector/weatherapi.rs

@@ -144,7 +144,7 @@ fn wind_speed_to_beaufort(mps: f64) -> BeaufortScale {
     let index = beaufort_wind_speeds
         .iter()
         .enumerate()
-        .find_map(|(i, range)| range.contains(&mps).then(|| i))
+        .find_map(|(i, range)| range.contains(&mps).then_some(i))
         .unwrap_or(beaufort_wind_speeds.len());
 
     BeaufortScale(index as u8)

backend/src/main.rs

@@ -1,21 +1,20 @@
 mod collector;
+mod persistence;
+mod tasks;
 
 use clap::Parser;
-use collector::{Collector, CollectorConfig, MarkdownWeb, WeatherApi};
+use collector::CollectorConfig;
 use common::{BulbMap, ClientMessage, ServerMessage};
 use futures_util::{SinkExt, StreamExt};
-use lighter_manager::{
-    manager::{BulbCommand, BulbManager, BulbSelector, BulbsConfig},
-    mqtt_conf::MqttConfig,
-};
+use lighter_manager::{manager::BulbsConfig, mqtt_conf::MqttConfig};
 use log::LevelFilter;
+use persistence::Persistence;
 use serde::Deserialize;
 use std::convert::Infallible;
 use std::net::SocketAddr;
 use std::path::PathBuf;
 use tokio::sync::broadcast::error::RecvError;
 use tokio::sync::{broadcast, mpsc};
-use tokio::time::{sleep, Duration};
 use tokio::{fs, select, task};
 use warp::ws::{self, WebSocket};
 use warp::{Filter, Rejection, Reply};
@@ -33,7 +32,7 @@ struct Opt {
     #[clap(short, long)]
     quiet: bool,
 
-    #[clap(long, short, default_value = "127.0.0.0:8000")]
+    #[clap(long, short, default_value = "127.0.0.1:8000")]
     bind: SocketAddr,
 
     #[clap(long, default_value = "./www")]
@@ -44,11 +43,13 @@ struct Opt {
 }
 
 #[derive(Deserialize)]
-struct Config {
+pub struct Config {
     mqtt: MqttConfig,
 
     collectors: CollectorConfig,
 
+    persistence_dir: Option<PathBuf>,
+
     #[serde(flatten)]
     bulbs: BulbsConfig,
 
@@ -56,8 +57,9 @@ struct Config {
     bulb_map: BulbMap,
 }
 
-struct State {
+pub struct State {
     config: Config,
+    persistence: Persistence,
     client_message: broadcast::Sender<ClientRequest>,
     server_message: broadcast::Sender<ServerMessage>,
 }
@@ -88,14 +90,20 @@ async fn main() {
     let (client_message, _) = broadcast::channel(100);
 
     let state = State {
-        config,
         client_message,
         server_message,
+        persistence: match &config.persistence_dir {
+            Some(path) => Persistence::new_persistence(path.to_owned())
+                .await
+                .expect("Failed to open persistence dir"),
+            None => Persistence::new().await,
+        },
+        config,
     };
     let state = Box::leak(Box::new(state));
 
-    task::spawn(info_collector(state));
-    task::spawn(lights_collector(state));
+    task::spawn(tasks::lights_task(state));
+    task::spawn(tasks::info_task(state));
 
     let ws = warp::path("ws")
         // The `ws()` filter will prepare the Websocket handshake.
@@ -129,123 +137,6 @@ struct ClientRequest {
     response: mpsc::Sender<ServerMessage>,
 }
 
-async fn lights_collector(state: &State) {
-    let config = &state.config;
-    let server_message = &state.server_message;
-    let mut client_message = state.client_message.subscribe();
-
-    let (cmd, bulb_states) = BulbManager::launch(config.bulbs.clone(), config.mqtt.clone())
-        .await
-        .expect("Failed to launch bulb manager");
-
-    loop {
-        let notify = bulb_states.notify_on_change();
-        sleep(Duration::from_millis(1000 / 10)).await; // limit to 10 updates/second
-        select! {
-            _ = notify => {
-                for (id, mode) in bulb_states.bulbs().await.clone().into_iter() {
-                    if let Err(e) = server_message.send(ServerMessage::BulbMode { id, mode }) {
-                        error!("broadcast channel error: {e}");
-                        return;
-                    }
-                }
-            }
-            request = client_message.recv() => {
-                let request = match request {
-                    Ok(r) => r,
-                    Err(_) => continue,
-                };
-
-                match request.message {
-                    ClientMessage::SetBulbColor { id, color } =>  {
-                        if let Err(e) = cmd.send(BulbCommand::SetColor(BulbSelector::Id(id), color)).await {
-                            error!("bulb manager error: {e}");
-                        }
-                    }
-                    ClientMessage::SetBulbPower { id, power } =>  {
-                        if let Err(e) = cmd.send(BulbCommand::SetPower(BulbSelector::Id(id), power)).await {
-                            error!("bulb manager error: {e}");
-                        }
-                    }
-                    ClientMessage::GetBulbs => {
-                        if let Err(e) = request.response.send(ServerMessage::BulbMap(config.bulb_map.clone())).await {
-                            error!("GetBulbs response channel error: {e}");
-                            return;
-                        }
-                        for (id, mode) in bulb_states.bulbs().await.clone().into_iter() {
-                            if let Err(e) = request.response.send(ServerMessage::BulbMode { id, mode }).await {
-                                error!("GetBulbs response channel error: {e}");
-                                return;
-                            }
-                        }
-                    }
-                    _ => {}
-                }
-            }
-        }
-    }
-}
-
-async fn info_collector(state: &State) {
-    let mut collectors: Vec<Box<dyn Collector + Send>> = vec![];
-
-    for url in &state.config.collectors.markdown_web_links {
-        collectors.push(Box::new(MarkdownWeb {
-            url: url.to_string(),
-        }));
-    }
-
-    if !state.config.collectors.weatherapi_locations.is_empty() {
-        let api_key = state
-            .config
-            .collectors
-            .weatherapi_key
-            .as_deref()
-            .expect("Missing weatherapi_key");
-
-        for location in state.config.collectors.weatherapi_locations.iter().cloned() {
-            collectors.push(Box::new(WeatherApi {
-                api_key: api_key.to_string(),
-                location,
-            }));
-        }
-    }
-
-    let mut collectors = collectors.into_boxed_slice();
-
-    let server_message = &state.server_message;
-
-    let collectors_len = collectors.len();
-    let next = move |i: usize| (i + 1) % collectors_len;
-    let mut i = 0;
-
-    loop {
-        sleep(Duration::from_secs(30)).await;
-
-        // don't bother collecting if no clients are connected
-        // there is always 1 receiver held by main process
-        if server_message.receiver_count() <= 1 {
-            continue;
-        }
-
-        i = next(i);
-        let collector = &mut collectors[i];
-
-        let msg = match collector.collect().await {
-            Ok(html) => ServerMessage::InfoPage { html },
-            Err(e) => {
-                warn!("collector error: {e}");
-                continue;
-            }
-        };
-
-        if let Err(e) = server_message.send(msg) {
-            error!("broadcast channel error: {e}");
-            return;
-        }
-    }
-}
-
 async fn client_handler(mut socket: WebSocket, state: &State) {
     let mut server_message = state.server_message.subscribe();
     let (server_responder, mut server_responses) = mpsc::channel(100);
@@ -257,7 +148,7 @@ async fn client_handler(mut socket: WebSocket, state: &State) {
         };
 
         if let Err(e) = socket.send(ws::Message::text(message)).await {
-            return warn!("client error: {e}");
+            warn!("client error: {e}");
         }
     }
 

backend/src/persistence.rs

@@ -0,0 +1,111 @@
+use std::io;
+use std::path::PathBuf;
+use std::sync::Arc;
+
+use serde::{de::DeserializeOwned, Serialize};
+use tokio::{
+    fs::{self, File},
+    io::{AsyncReadExt, AsyncSeekExt, AsyncWriteExt},
+};
+
+#[derive(Clone)]
+pub struct Persistence {
+    state: Arc<PersistenceState>,
+}
+
+pub struct PersistenceFile<S> {
+    content: S,
+    file: Option<File>,
+}
+
+enum PersistenceState {
+    NoPersistence,
+    Persistence { directory: PathBuf },
+}
+
+impl Persistence {
+    pub async fn new() -> Persistence {
+        Persistence {
+            state: Arc::new(PersistenceState::NoPersistence),
+        }
+    }
+
+    pub async fn new_persistence(directory: PathBuf) -> io::Result<Persistence> {
+        let _ = fs::read_dir(&directory).await?;
+
+        Ok(Persistence {
+            state: Arc::new(PersistenceState::Persistence { directory }),
+        })
+    }
+
+    pub async fn open<S: Default + Serialize + DeserializeOwned>(
+        &self,
+        name: String,
+    ) -> Result<PersistenceFile<S>, io::Error> {
+        Ok(match &*self.state {
+            PersistenceState::NoPersistence => PersistenceFile {
+                content: S::default(),
+                file: None,
+            },
+            PersistenceState::Persistence { directory } => {
+                let file_path = directory.join(&name);
+                let mut file = fs::OpenOptions::new()
+                    .create(true)
+                    .read(true)
+                    .write(true)
+                    .open(file_path)
+                    .await?;
+
+                let mut content = String::new();
+                file.read_to_string(&mut content).await?;
+
+                let content = ron::from_str(&content).unwrap_or_else(|_| {
+                    info!("Failed to load persistence {name}, using default");
+                    S::default()
+                });
+
+                PersistenceFile {
+                    content,
+                    file: Some(file),
+                }
+            }
+        })
+    }
+}
+
+impl<S> PersistenceFile<S>
+where
+    S: Serialize,
+{
+    pub fn get(&self) -> &S {
+        &self.content
+    }
+
+    pub async fn set(&mut self, s: S) -> anyhow::Result<()> {
+        self.content = s;
+
+        if let Some(file) = &mut self.file {
+            let serialized = ron::ser::to_string_pretty(&self.content, Default::default())?;
+            file.rewind().await?;
+            file.set_len(0).await?;
+            file.write_all(serialized.as_bytes()).await?;
+        }
+
+        Ok(())
+    }
+
+    pub async fn update(&mut self, f: impl FnOnce(&mut S)) -> anyhow::Result<()>
+    where
+        S: Clone + PartialEq,
+    {
+        let mut new = self.content.clone();
+
+        f(&mut new);
+
+        if new != self.content {
+            self.set(new).await?;
+        }
+
+        Ok(())
+    }
+}

backend/src/tasks/info.rs

@@ -0,0 +1,73 @@
+use std::time::Duration;
+
+use common::ServerMessage;
+use tokio::time::sleep;
+
+use crate::{
+    collector::{Collector, MarkdownWeb, WeatherApi},
+    State,
+};
+
+pub async fn info_task(state: &State) {
+    let mut collectors: Vec<Box<dyn Collector + Send>> = vec![];
+
+    for url in &state.config.collectors.markdown_web_links {
+        collectors.push(Box::new(MarkdownWeb {
+            url: url.to_string(),
+        }));
+    }
+
+    if !state.config.collectors.weatherapi_locations.is_empty() {
+        let api_key = state
+            .config
+            .collectors
+            .weatherapi_key
+            .as_deref()
+            .expect("Missing weatherapi_key");
+
+        for location in state.config.collectors.weatherapi_locations.iter().cloned() {
+            collectors.push(Box::new(WeatherApi {
+                api_key: api_key.to_string(),
+                location,
+            }));
+        }
+    }
+
+    let mut collectors = collectors.into_boxed_slice();
+
+    if collectors.is_empty() {
+        return;
+    }
+
+    let server_message = &state.server_message;
+
+    let collectors_len = collectors.len();
+    let next = move |i: usize| (i + 1) % collectors_len;
+    let mut i = 0;
+
+    loop {
+        sleep(Duration::from_secs(30)).await;
+
+        // don't bother collecting if no clients are connected
+        // there is always 1 receiver held by main process
+        if server_message.receiver_count() <= 1 {
+            continue;
+        }
+
+        i = next(i);
+        let collector = &mut collectors[i];
+
+        let msg = match collector.collect().await {
+            Ok(html) => ServerMessage::InfoPage { html },
+            Err(e) => {
+                warn!("collector error: {e}");
+                continue;
+            }
+        };
+
+        if let Err(e) = server_message.send(msg) {
+            error!("broadcast channel error: {e}");
+            return;
+        }
+    }
+}

backend/src/tasks/lights.rs

@@ -0,0 +1,243 @@
+use std::collections::HashMap;
+
+use chrono::{DateTime, Datelike, Local, NaiveTime, Weekday};
+use common::{ClientMessage, ServerMessage};
+use lighter_lib::{BulbColor, BulbId};
+use lighter_manager::manager::{BulbCommand, BulbManager, BulbSelector};
+use serde::{Deserialize, Serialize};
+use std::time::Duration;
+use tokio::select;
+use tokio::sync::{broadcast, mpsc};
+use tokio::task::{spawn, JoinHandle};
+use tokio::time::sleep;
+
+use crate::persistence::PersistenceFile;
+use crate::{ClientRequest, State};
+
+#[derive(Default, Clone, PartialEq, Eq, Serialize, Deserialize)]
+struct LightsState {
+    wake_schedule: HashMap<BulbId, HashMap<Weekday, NaiveTime>>,
+}
+
+pub async fn lights_task(state: &State) {
+    let config = &state.config;
+    let server_message = &state.server_message;
+    let mut client_message = state.client_message.subscribe();
+    let mut lights_state: PersistenceFile<LightsState> = state
+        .persistence
+        .open("lights".into())
+        .await
+        .expect("Failed to open lights config");
+
+    let (cmd, bulb_states) = BulbManager::launch(config.bulbs.clone(), config.mqtt.clone())
+        .await
+        .expect("Failed to launch bulb manager");
+
+    let mut wake_tasks: HashMap<(BulbId, Weekday), JoinHandle<()>> = lights_state
+        .get()
+        .wake_schedule
+        .iter()
+        .flat_map(|(bulb, schedule)| schedule.iter().map(move |(day, time)| (bulb, day, time)))
+        .map(|(bulb, day, time)| {
+            let handle = spawn(wake_task(
+                state.client_message.clone(),
+                cmd.clone(),
+                bulb.clone(),
+                *day,
+                *time,
+            ));
+
+            ((bulb.clone(), *day), handle)
+        })
+        .collect();
+
+    loop {
+        let notify = bulb_states.notify_on_change();
+        select! {
+            _ = notify => {
+                let lights_state = lights_state.get();
+                for (id, mode) in bulb_states.bulbs().await.clone().into_iter() {
+                    let wake_schedule = lights_state.wake_schedule.get(&id).cloned().unwrap_or_default();
+                    let msg = ServerMessage::BulbState { id, mode, wake_schedule };
+                    if let Err(e) = server_message.send(msg) {
+                        error!("broadcast channel error: {e}");
+                        return;
+                    }
+                }
+            }
+            request = client_message.recv() => {
+                let request = match request {
+                    Ok(r) => r,
+                    Err(_) => continue,
+                };
+
+                match request.message {
+                    ClientMessage::SetBulbColor { id, color } =>  {
+                        if let Err(e) = cmd.send(BulbCommand::SetColor(BulbSelector::Id(id), color)).await {
+                            error!("bulb manager error: {e}");
+                        }
+                    }
+                    ClientMessage::SetBulbPower { id, power } =>  {
+                        if let Err(e) = cmd.send(BulbCommand::SetPower(BulbSelector::Id(id), power)).await {
+                            error!("bulb manager error: {e}");
+                        }
+                    }
+                    ClientMessage::GetBulbs => {
+                        if let Err(e) = request.response.send(ServerMessage::BulbMap(config.bulb_map.clone())).await {
+                            error!("GetBulbs response channel error: {e}");
+                            return;
+                        }
+                        let lights_state = lights_state.get();
+                        for (id, mode) in bulb_states.bulbs().await.clone().into_iter() {
+                            let wake_schedule = lights_state.wake_schedule.get(&id).cloned().unwrap_or_default();
+                            let msg = ServerMessage::BulbState { id, mode, wake_schedule };
+                            if let Err(e) = request.response.send(msg).await {
+                                error!("GetBulbs response channel error: {e}");
+                                return;
+                            }
+                        }
+                    }
+                    ClientMessage::SetBulbWakeTime { id, day, time } => {
+                        if let Err(e) = lights_state.update(|lights_state| {
+                            let schedule = lights_state.wake_schedule.entry(id.clone()).or_default();
+                            if let Some(time) = time {
+                                schedule.insert(day, time);
+                            }
+                            else {
+                                schedule.remove(&day);
+                            }
+                        }).await {
+                            error!("Failed to save wake schedule: {e}");
+                        };
+
+                        if let Some(time) = time {
+                            let handle = spawn(wake_task(
+                                state.client_message.clone(),
+                                cmd.clone(),
+                                id.clone(),
+                                day,
+                                time,
+                            ));
+
+                            if let Some(old_handle) = wake_tasks.insert((id, day), handle) {
+                                old_handle.abort();
+                            }
+                        } else if let Some(old_handle) = wake_tasks.remove(&(id, day)) {
+                            old_handle.abort();
+                        }
+                    }
+                    _ => {}
+                }
+            }
+        }
+    }
+}
+
+async fn wake_task(
+    client_messages: broadcast::Sender<ClientRequest>,
+    cmd: mpsc::Sender<BulbCommand>,
+    id: BulbId,
+    day: Weekday,
+    time: NaiveTime,
+) {
+    let mut alarm = next_alarm(Local::now(), day, time);
+
+    loop {
+        info!("sleeping until {alarm}");
+        sleep((alarm - Local::now()).to_std().unwrap()).await;
+
+        // slowly turn up brightness of bulb
+        for brightness in (1..=75).map(|i| (i as f32) * 0.01) {
+            select! {
+                // abort if the client pokes the bulb
+                _ = wait_for_bulb_command(&id, client_messages.subscribe()) => break,
+                _ = sleep(Duration::from_secs(12)) => {}
+            };
+
+            if cmd
+                .send(BulbCommand::SetColor(
+                    BulbSelector::Id(id.clone()),
+                    BulbColor::Kelvin {
+                        t: 0.0,
+                        b: brightness,
+                    },
+                ))
+                .await
+                .is_err()
+            {
+                return;
+            };
+        }
+
+        alarm = next_alarm(Local::now(), day, time);
+    }
+}
+
+/// Get the next alarm, from a weekday+time schedule.
+fn next_alarm(now: DateTime<Local>, day: Weekday, time: NaiveTime) -> DateTime<Local> {
+    let day_of_alarm = day.num_days_from_monday() as i64;
+    let day_now = now.weekday().num_days_from_monday() as i64;
+
+    let alarm = now + chrono::Duration::days(day_of_alarm - day_now);
+    let mut alarm = alarm
+        .date_naive()
+        .and_time(time)
+        .and_local_timezone(Local)
+        .unwrap();
+
+    if alarm <= now {
+        alarm += chrono::Duration::weeks(1);
+    }
+
+    alarm
+}
+
+/// Wait until we receive a client request that mutates the given bulb
+async fn wait_for_bulb_command(
+    bulb_id: &BulbId,
+    mut client_messages: broadcast::Receiver<ClientRequest>,
+) {
+    loop {
+        match client_messages.recv().await {
+            Err(_) => return,
+            Ok(request) => match request.message {
+                ClientMessage::SetBulbColor { id, .. }
+                | ClientMessage::SetBulbPower { id, .. }
+                | ClientMessage::SetBulbWakeTime { id, .. }
+                    if &id == bulb_id =>
+                {
+                    break
+                }
+                _ => continue,
+            },
+        }
+    }
+}
+
+#[cfg(test)]
+mod test {
+    use chrono::{offset::TimeZone, Local, NaiveTime, Weekday};
+
+    use super::next_alarm;
+
+    #[test]
+    fn test_alarm_date() {
+        const FMT: &str = "%Y-%m-%d %H:%M";
+        let now = Local.datetime_from_str("2022-10-18 15:30", FMT).unwrap();
+        let test_values = [
+            (Weekday::Tue, (16, 30), "2022-10-18 16:30"),
+            (Weekday::Tue, (14, 30), "2022-10-25 14:30"),
+            (Weekday::Wed, (15, 30), "2022-10-19 15:30"),
+            (Weekday::Mon, (15, 30), "2022-10-24 15:30"),
+        ];
+
+        for (day, (hour, min), expected) in test_values {
+            let expected = Local.datetime_from_str(expected, FMT).unwrap();
+
+            assert_eq!(
+                next_alarm(now, day, NaiveTime::from_hms(hour, min, 0)),
+                expected
+            );
+        }
+    }
+}

backend/src/tasks/mod.rs

@@ -0,0 +1,5 @@
+pub mod info;
+pub mod lights;
+
+pub use info::info_task;
+pub use lights::lights_task;

common/Cargo.toml

@@ -1,10 +1,11 @@
 [package]
 name = "common"
-version = "0.1.0"
+version = "0.2.2"
 edition = "2021"
 
 [dependencies]
 serde = { version = "1.0.137", features = ["derive"] }
+chrono = { version = "0.4.20", features = ["serde"] }
 
 [dependencies.lighter_lib]
 git = "https://git.nubo.sh/hulthe/lighter.git"

common/src/lib.rs

@@ -1,3 +1,6 @@
+use std::collections::HashMap;
+
+use chrono::{NaiveTime, Weekday};
 use lighter_lib::{BulbColor, BulbId, BulbMode};
 use serde::{Deserialize, Serialize};
 
@@ -9,9 +12,10 @@ pub enum ServerMessage {
     },
 
     /// Update the state of a bulb
-    BulbMode {
+    BulbState {
         id: BulbId,
         mode: BulbMode,
+        wake_schedule: HashMap<Weekday, NaiveTime>,
     },
 
     BulbMap(BulbMap),
@@ -23,8 +27,19 @@ pub enum ClientMessage {
     //SubscribeToInfo,
     //SubscribeToBulbs,
     GetBulbs,
-    SetBulbColor { id: BulbId, color: BulbColor },
-    SetBulbPower { id: BulbId, power: bool },
+    SetBulbColor {
+        id: BulbId,
+        color: BulbColor,
+    },
+    SetBulbPower {
+        id: BulbId,
+        power: bool,
+    },
+    SetBulbWakeTime {
+        id: BulbId,
+        day: Weekday,
+        time: Option<NaiveTime>,
+    },
 }
 
 /// A geometric description of rooms/groups of light bulbs
@@ -50,16 +65,16 @@ pub enum BulbGroupShape {
 
 impl BulbGroupShape {
     pub fn height(&self) -> u32 {
-        match self {
-            &Self::Circle { r } => r,
-            &Self::Rectangle { h, .. } => h,
+        match *self {
+            Self::Circle { r } => r,
+            Self::Rectangle { h, .. } => h,
         }
     }
 
     pub fn width(&self) -> u32 {
-        match self {
-            &Self::Circle { r } => r,
-            &Self::Rectangle { w, .. } => w,
+        match *self {
+            Self::Circle { r } => r,
+            Self::Rectangle { w, .. } => w,
         }
     }
 }

frontend/Cargo.toml

@@ -1,19 +1,17 @@
 [package]
 name = "hemma_web"
-version = "0.1.0"
+version = "0.2.2"
 authors = ["Joakim Hulthe <joakim@hulthe.net"]
 edition = "2021"
 
-[lib]
-crate-type = ["cdylib"]
-
 [dependencies]
-seed = "0.9.1"
-wasm-bindgen = "=0.2.80" # 0.2.81 has a breaking change
-serde = { version = "1", features = ['derive'] }
-serde_json = "1"
-anyhow = "*"
+seed = "0.10.0"
+wasm-bindgen = "=0.2.87" # must match Trunk.toml
+serde = { version = "1.0.0", features = ['derive'] }
 ron = "0.7.1"
+chrono = { version = "0.4.20", features = ["serde"] }
+gloo-net = { version = "0.4.0", default-features = false, features = ["websocket"] }
+gloo-console = "0.3.0"
 
 [dependencies.css_typegen]
 git = "https://github.com/hulthe/css_typegen.git"

frontend/Trunk.toml

@@ -1,12 +1,13 @@
 [serve]
 address = "0.0.0.0"
 
-
+[tools]
+wasm_bindgen = "0.2.87"
 
 [[proxy]]
 # This WebSocket proxy example has a backend and ws field. This example will listen for
 # WebSocket connections at `/api/ws` and proxy them to `ws://localhost:9000/api/ws`.
-backend = "ws://localhost:8000/api/ws"
+backend = "ws://127.0.0.1:8000/api/ws"
 ws = true
 
 #[[proxy]]

frontend/rust-toolchain.toml

@@ -0,0 +1,4 @@
+[toolchain]
+channel = "stable"
+components = ["rust-src", "rustfmt", "rust-src"]
+targets = ["wasm32-unknown-unknown"]

frontend/src/app.rs

@@ -1,10 +1,20 @@
 use crate::page;
 use common::{ClientMessage, ServerMessage};
+use gloo_console::error;
+use gloo_net::websocket;
+use gloo_net::websocket::futures::WebSocket;
 use seed::app::orders::OrdersContainer;
+use seed::futures::channel::mpsc::channel;
+use seed::futures::channel::mpsc::Sender;
+use seed::futures::select_biased;
+use seed::futures::SinkExt;
+use seed::futures::StreamExt;
 use seed::prelude::*;
-use seed::{log, window};
+use seed::window;
+use seed::FutureExt;
 use seed_router::Router;
 use std::collections::VecDeque;
+use std::error::Error;
 
 pub type AppOrders = OrdersContainer<Msg, Model, Vec<Node<Msg>>>;
 
@@ -14,8 +24,16 @@ const TIMEOUT_CONNECT_DELAYS: &[u32] = &[2, 5, 10, 10, 10, 20, 30, 60, 120, 300]
 pub struct Model {
     page: Pages,
     send_queue: VecDeque<ClientMessage>,
-    socket: WebSocket,
+
+    /// Websocket URL
     ws_url: String,
+
+    /// Channel to send websocket messages.
+    socket: Option<Sender<websocket::Message>>,
+
+    /// Handle to the websocket task.
+    socket_task: Option<CmdHandle>,
+
     timeout_count: usize,
 }
 
@@ -47,14 +65,14 @@ pub enum Msg {
 
     // Global
     Connect,
-    SocketOpened(),
-    SocketClosed(CloseEvent),
-    SocketError(),
-    SocketMessage(WebSocketMessage),
+    SocketOpened(Sender<websocket::Message>),
+    SocketClosed,
+    SocketMessage(websocket::Message),
 }
 
 pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
     orders.subscribe(Msg::SendMessage);
+    orders.send_msg(Msg::Connect);
 
     let location = window().location();
     let host = location.host().expect("Failed to get hostname");
@@ -69,73 +87,109 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
         page: Pages::from_url(url, &mut orders.proxy(Msg::Page))
             .unwrap_or(Pages::NotFound(Default::default())),
         send_queue: Default::default(),
-        socket: open_socket(&ws_url, orders),
         ws_url,
+        socket_task: None,
+        socket: None,
         timeout_count: 0,
     }
 }
 
-fn open_socket(url: &str, orders: &mut impl Orders<Msg>) -> WebSocket {
-    WebSocket::builder(url, orders)
-        .on_open(Msg::SocketOpened)
-        .on_close(Msg::SocketClosed)
-        .on_error(Msg::SocketError)
-        .on_message(Msg::SocketMessage)
-        .build_and_open()
-        .expect("failed to open websocket")
+fn open_socket(url: String, orders: &mut impl Orders<Msg>) -> CmdHandle {
+    let update_fn = orders.msg_sender();
+
+    orders.perform_cmd_with_handle(async move {
+        let mut ws = WebSocket::open(&url).expect("Failed to open websocket");
+        let (tx, mut rx) = channel(128);
+        update_fn(Some(Msg::SocketOpened(tx)));
+
+        loop {
+            select_biased! {
+                message = rx.next().fuse() => {
+                    let Some(message) = message else { return; };
+                    if let Err(e) = ws.send(message).await {
+                        error!(format!("websocket error: {e:?}"));
+                        return;
+                    }
+                }
+                message = ws.next().fuse() => match message {
+                    Some(Ok(message)) => update_fn(Some(Msg::SocketMessage(message))),
+                    Some(Err(e)) => {
+                        error!(format!("websocket error: {e:?}"));
+                        update_fn(Some(Msg::SocketClosed));
+                        return;
+                    }
+                    None => {
+                        update_fn(Some(Msg::SocketClosed));
+                        return;
+                    }
+                }
+            }
+        }
+    })
 }
 
 pub fn update(msg: Msg, model: &mut Model, orders: &mut AppOrders) {
     #[cfg(debug_assertions)]
-    log!(format!("{msg:?}"));
+    gloo_console::debug!(format!("{msg:?}"));
 
     match msg {
         Msg::Page(msg) => model.page.update(msg, &mut orders.proxy(Msg::Page)),
         Msg::FlushMessageQueue => {
-            while let Some(message) = model.send_queue.pop_front() {
-                let serialized = ron::to_string(&message).unwrap();
+            if let Some(socket) = model.socket.as_mut() {
+                while let Some(message) = model.send_queue.pop_front() {
+                    let serialized = ron::to_string(&message).expect("failed to serialize ron");
 
-                if let Err(e) = model.socket.send_text(serialized) {
-                    model.send_queue.push_front(message);
-                    log!(e);
-                    return;
+                    let ws_message = websocket::Message::Text(serialized);
+                    if socket.try_send(ws_message).is_err() {
+                        error!("websocket queue full");
+                        model.send_queue.push_front(message);
+                        return;
+                    }
                 }
             }
         }
         Msg::Connect => {
-            model.socket = open_socket(&model.ws_url, orders);
+            model.socket_task = Some(open_socket(model.ws_url.clone(), orders));
         }
         Msg::SendMessage(message) => {
             model.send_queue.push_back(message);
             orders.send_msg(Msg::FlushMessageQueue);
         }
-        Msg::SocketOpened() => {
+        Msg::SocketOpened(socket) => {
+            model.socket = Some(socket);
             model.timeout_count = 0;
             orders.send_msg(Msg::FlushMessageQueue);
         }
-        Msg::SocketClosed(_event) => {
+        Msg::SocketClosed => {
+            model.socket_task = None;
+            model.socket = None;
+
             let timeout_sec = TIMEOUT_CONNECT_DELAYS[model.timeout_count];
             let timeout_ms = timeout_sec * 1000;
             orders.perform_cmd(cmds::timeout(timeout_ms, || Msg::Connect));
 
-            log!(format!(
+            error!(format!(
                 "Socket closed, trying to reconnect in {timeout_sec} seconds"
             ));
 
             model.timeout_count = TIMEOUT_CONNECT_DELAYS.len().min(model.timeout_count + 1);
         }
-        Msg::SocketError() => {}
         Msg::SocketMessage(message) => {
             if let Err(e) = handle_ws_msg(message, orders) {
-                log!(e);
+                error!(format!("{e:?}"));
             }
         }
     }
 }
 
-fn handle_ws_msg(message: WebSocketMessage, orders: &mut impl Orders<Msg>) -> anyhow::Result<()> {
-    let message = message.text().map_err(|e| anyhow::format_err!("{e:?}"))?;
-    let message: ServerMessage = ron::from_str(&message)?;
+fn handle_ws_msg(
+    message: websocket::Message,
+    orders: &mut impl Orders<Msg>,
+) -> Result<(), Box<dyn Error>> {
+    let websocket::Message::Text(text) = &message else {
+        return Err("Server is sending us raw bytes on the websocket! Argh!".into());
+    };
+    let message: ServerMessage = ron::from_str(text)?;
     orders.notify(message);
 
     Ok(())
@@ -143,9 +197,4 @@ fn handle_ws_msg(message: WebSocketMessage, orders: &mut impl Orders<Msg>) -> an
 
 pub fn view(model: &Model) -> Vec<Node<Msg>> {
     vec![model.page.view().map_msg(Msg::Page)]
-    //match &model.page {
-    //    Pages::NotFound => vec![h1!["Not Found"]],
-    //    Pages::InfoScreen => vec![div![C![C.info_box], raw![&model.info_page]]],
-    //    Pages::Lights(page) => vec![],
-    //}
 }

frontend/src/components/color_picker.rs

@@ -19,7 +19,7 @@ pub struct ColorPicker {
 #[derive(Default)]
 enum ColorPickerSetting {
     #[default]
-    HSB,
+    Hsb,
     Kelvin,
 }
 
@@ -55,14 +55,14 @@ impl ColorPicker {
                 }
 
                 match self.dragging.take() {
-                    Some(ColorPickerAttr::HueSat) => self.mode = ColorPickerSetting::HSB,
+                    Some(ColorPickerAttr::HueSat) => self.mode = ColorPickerSetting::Hsb,
                     Some(ColorPickerAttr::Brightness) => {}
                     Some(ColorPickerAttr::Temperature) => self.mode = ColorPickerSetting::Kelvin,
                     None => return,
                 }
 
                 let color = match self.mode {
-                    ColorPickerSetting::HSB => {
+                    ColorPickerSetting::Hsb => {
                         BulbColor::hsb(self.hue, self.saturation, self.brightness)
                     }
                     ColorPickerSetting::Kelvin => {
@@ -130,10 +130,12 @@ impl ColorPicker {
 
         let (r, g, b) = hsb_to_rgb(self.hue, 1.0, 1.0);
         let saturation_gradient = match self.mode {
-            ColorPickerSetting::HSB => {
+            ColorPickerSetting::Hsb => {
                 format!("background: linear-gradient(0deg, #000, rgba({r},{g},{b},1));")
             }
-            ColorPickerSetting::Kelvin => format!("background: linear-gradient(0deg, #000, #fff);"),
+            ColorPickerSetting::Kelvin => {
+                "background: linear-gradient(0deg, #000, #fff);".to_string()
+            }
         };
 
         div![
@@ -186,7 +188,7 @@ impl ColorPicker {
         self.hue = h;
         self.saturation = s;
         self.brightness = b;
-        self.mode = ColorPickerSetting::HSB;
+        self.mode = ColorPickerSetting::Hsb;
     }
 
     pub fn set_kelvin(&mut self, t: f32, b: f32) {

frontend/src/main.rs

@@ -3,10 +3,8 @@ mod components;
 mod css;
 mod page;
 
-use seed::prelude::wasm_bindgen;
 use seed::App;
 
-#[wasm_bindgen(start)]
-pub fn start() {
+pub fn main() {
     App::start("app", app::init, app::update, app::view);
 }

frontend/src/page/lights.rs

@@ -1,37 +1,63 @@
 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, h1, h2, h3, input, label, span, table, td, tr, C};
+use seed::{prelude::*, IF};
 use seed_router::Page;
-use std::collections::{BTreeMap, HashSet};
+use std::collections::{BTreeMap, HashMap, HashSet};
 use std::fmt::Write;
 
 /// /lights page
 #[derive(Default)]
 pub struct Model {
-    bulb_states: BTreeMap<BulbId, BulbMode>,
+    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>,
 
-    /// Whether the currently selected map groups have been interacted with
+    /// 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,
+    wake_schedule: HashMap<Weekday, NaiveTime>,
+}
+
 #[derive(Debug)]
 pub enum Msg {
     ServerMessage(ServerMessage),
 
     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 {
@@ -47,9 +73,15 @@ 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 } => {
-                    *self.bulb_states.entry(id).or_default() = new_mode
-                    //color_picker.set_color(mode.color);
+                ServerMessage::BulbState {
+                    id,
+                    mode: new_mode,
+                    wake_schedule,
+                } => {
+                    *self.bulb_states.entry(id).or_default() = BulbState {
+                        mode: new_mode,
+                        wake_schedule,
+                    };
                 }
                 ServerMessage::BulbMap(bulb_map) => {
                     self.bulb_map = bulb_map;
@@ -80,10 +112,15 @@ impl Page for Model {
                         .and_then(|id| self.bulb_states.get(id));
 
                     if let Some(bulb) = bulb {
-                        self.color_picker.set_color(bulb.color);
+                        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, _| {
@@ -96,7 +133,7 @@ impl Page for Model {
             }
             Msg::ColorPicker(msg) => {
                 self.color_picker
-                    .update(msg, &mut orders.proxy(|msg| Msg::ColorPicker(msg)));
+                    .update(msg, &mut orders.proxy(Msg::ColorPicker));
             }
             Msg::SetBulbPower(power) => {
                 self.groups_interacted = true;
@@ -108,36 +145,34 @@ impl Page for Model {
                     orders.notify(message);
                 });
             }
+            Msg::LightTime(time, day) => {
+                if time.is_empty() {
+                    self.for_selected_bulbs(|id, _| {
+                        let message = ClientMessage::SetBulbWakeTime {
+                            id: id.clone(),
+                            day,
+                            time: None,
+                        };
+                        orders.notify(message);
+                    });
+                } else 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: Some(time),
+                        };
+                        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
@@ -154,7 +189,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!(
@@ -185,38 +220,114 @@ impl Page for Model {
             ]
         };
 
-        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();
+        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 calendar_day = |day: Weekday| {
+            let time = selected_bulb
+                .and_then(|b| b.wake_schedule.get(&day))
+                .map(|t| t.to_string())
+                .unwrap_or_default();
+            tr![
+                C![C.calendar_day],
+                td![day.to_string()],
+                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],
-                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),
+                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],
-                self.color_picker
-                    .view()
-                    .map_msg(|msg| Msg::ColorPicker(msg)),
+                IF!(selected_bulb.is_none() => C![C.cross_out]),
+                self.color_picker.view().map_msg(Msg::ColorPicker),
                 button![
-                    if power {
+                    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]
                     },
-                    ev(Ev::Click, move |_| Msg::SetBulbPower(!power)),
+                    {
+                        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"],
@@ -224,17 +335,38 @@ impl Page for Model {
                     div![attrs! { At::Id => "lever_face" }],
                 ],
             ],
+            div![
+                C![C.calendar_box],
+                IF!(selected_bulb.is_none() => C![C.cross_out]),
+                h2!["Wake Schedule"],
+                table![
+                    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 {
-    fn for_selected_bulbs(&self, mut f: impl FnMut(&BulbId, &BulbMode)) {
-        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));
+    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));
+        }
     }
 }

frontend/static/images/circle-arrow.svg

@@ -0,0 +1,5 @@
+<?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>

frontend/static/styles/common.scss

@@ -19,6 +19,16 @@ body {
 	font-size: x-large;
 }
 
+/* filthy hacks to make the page stop overflowing on mobile */
+@media (width <= 430px) {
+	body {
+		margin: 0;
+		transform-origin: top left;
+		scale: 0.9;
+	}
+}
+@media (width <= 390px) { body { scale: 0.85; } }
+
 .info_box {
 	margin: auto;
 	max-width: 40em;
@@ -84,16 +94,48 @@ 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: 0.5em;
+	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 {
@@ -101,9 +143,88 @@ body {
 	flex-direction: row;
 	align-items: center;
 	padding-right: 0.5em;
-	background: #56636e;
-	border: solid 0.25em #5b3f63;
+	background: #00000000;
+}
 
+.cross_out {
+	position: relative;
+	overflow: hidden;
+	opacity: 0.5;
+}
+
+.cross_out:before {
+	position: absolute;
+	content: '';
+	display: block;
+	background: #00000000;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	z-index: 90;
+}
+
+.cross_out:after {
+	position: absolute;
+	content: '';
+	background: #56636e;
+	display: block;
+	width: 0;
+    height: 10px;
+	border-radius: 8px;
+	-webkit-transform: rotate(-30deg);
+    transform: rotate(-30deg);
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	z-index: 91;
+    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 {
+	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 {
@@ -111,14 +232,14 @@ body {
 	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 {
@@ -130,6 +251,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;
 }
 
@@ -259,3 +381,98 @@ 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 {
+	display: flex;
+	justify-content: center;
+}
+
+.calendar_box > h2 {
+	writing-mode: sideways-lr;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+.calendar_box > * {
+	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);
+}