From b9f677a999a951300f462705deb627f6748def75 Mon Sep 17 00:00:00 2001 From: Marek Counts Date: Sat, 18 May 2024 00:51:11 -0400 Subject: [PATCH] init htmx --- frontend_api/assets/css/main.css | 27 +++++++++++++ frontend_api/src/lib.rs | 64 +++++++++++++++++++++++++++---- frontend_api/src/main.rs | 7 ++-- frontend_api/templates/admin.html | 55 ++++++++++++++++++++++++++ frontend_api/templates/index.html | 3 -- 5 files changed, 141 insertions(+), 15 deletions(-) create mode 100644 frontend_api/assets/css/main.css create mode 100644 frontend_api/templates/admin.html diff --git a/frontend_api/assets/css/main.css b/frontend_api/assets/css/main.css new file mode 100644 index 0000000..31719a9 --- /dev/null +++ b/frontend_api/assets/css/main.css @@ -0,0 +1,27 @@ +/** write some css to display two divs side by side that contain lists of elements */ +/* Path: main.css */ + +div { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 75%; +} + +.queue { +/** flex items-center justify-between */ + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + cursor: pointer; +} + + diff --git a/frontend_api/src/lib.rs b/frontend_api/src/lib.rs index 730492a..13f9138 100644 --- a/frontend_api/src/lib.rs +++ b/frontend_api/src/lib.rs @@ -22,7 +22,25 @@ use tokio_tungstenite::{ type Tx = UnboundedSender; pub type ConnectionMap = Arc>>; -type MessageQueue = Arc>>; +type EventQueues = Arc>; + +static EVENT_QUEUE_ACTIVE: std::sync::atomic::AtomicBool = std::sync::atomic::AtomicBool::new(true); +static TTS_QUEUE_ACTIVE: std::sync::atomic::AtomicBool = std::sync::atomic::AtomicBool::new(false); +static IS_DISPLAYING: std::sync::atomic::AtomicBool = std::sync::atomic::AtomicBool::new(false); + +pub struct Queues { + pub events: VecDeque, + pub tts: VecDeque, +} + +impl Queues { + pub fn new() -> Queues { + Queues { + events: VecDeque::new(), + tts: VecDeque::new(), + } + } +} pub struct FrontendApi { ws_address: String, @@ -49,15 +67,32 @@ impl FrontendApi { println!("Listening on: {}", self.ws_address); let connection_state = self.connection_state.clone(); - let message_queue_arc: MessageQueue = Arc::new(Mutex::new(VecDeque::new())); + let message_queue_arc: EventQueues = Arc::new(Mutex::new(Queues::new())); + + //TODO: Need to fetch un presented messages from database + let queue = message_queue_arc.clone(); + let state = connection_state.clone(); + // Listen for incoming events and store them in the queues tokio::spawn(async move { loop { let msg = (&mut receiver).recv().await; - handle_message(connection_state.clone(), message_queue_arc.clone(), msg).await; + handle_message(state.clone(), queue.clone(), msg); } }); + // Process the Queues on a new thread + + //tokio::spawn(async move { + // loop { + // let mut queues = message_queue_arc.lock().unwrap(); + // if !queues.events.is_empty() { + // let message = queues.events.pop_front(); + // handle_message(connection_state.clone(), message_queue_arc.clone(), message); + // } + // } + //}); + let https_address = self.http_address.clone(); tokio::spawn(async move { let listener = TcpListener::bind(&https_address) @@ -66,6 +101,7 @@ impl FrontendApi { // build our application let app = Router::new() .route("/", get(index)) + .route("/admin", get(admin)) //TODO: understand where to put our assets // Remember that these need served by nginx in production .nest_service("/assets", ServeDir::new("assets")); @@ -96,13 +132,21 @@ impl FrontendApi { #[template(path = "index.html")] struct IndexTemplate {} +#[derive(askama::Template)] +#[template(path = "admin.html")] +struct AdminTemplate {} + async fn index() -> IndexTemplate { IndexTemplate {} } -async fn handle_message( +async fn admin() -> AdminTemplate { + AdminTemplate {} +} + +fn handle_message( connection_state: ConnectionMap, - message_queue: MessageQueue, + event_queues: EventQueues, message: Option, ) { match message { @@ -113,14 +157,17 @@ async fn handle_message( //Enqueue message { - let mut message_queue = message_queue.lock().unwrap(); - message_queue.push_back(message.clone()); + let mut queues = event_queues.lock().unwrap(); + //TODO: need to handle different types of messages + + queues.events.push_back(message.clone()); } //Make html message to send to frontend //
+ let trigger = format!("delay:{}ms", message.display_time); let html_message = html! { - div id="alerts" hx-swap-oob="true" { + div id="notifications" hx-swap="afterend" hx-target="notifications" ws-send="done" hx-trigger=(trigger) { h1 { (message.message) } img src=(message.image_url) {} } @@ -158,6 +205,7 @@ async fn handle_connection( state.lock().unwrap().insert(peer, tx); } let (mut ws_sender, mut ws_receiver) = ws_stream.split(); + println!("Connection state: {:?}", state.lock().unwrap().keys()); loop { tokio::select! { msg = ws_receiver.next() => { diff --git a/frontend_api/src/main.rs b/frontend_api/src/main.rs index d0b9671..412928a 100644 --- a/frontend_api/src/main.rs +++ b/frontend_api/src/main.rs @@ -1,5 +1,4 @@ use forntend_api_lib::FrontendApi; -use serde_json::to_string; use tokio::sync::mpsc; //TODO: This should run like the "full app" does in the lib.rs file @@ -23,10 +22,10 @@ async fn main() { loop { let display_message = messages::DisplayMessage { - message: "hello fome htmx".to_string(), + message: "hello from htmx".to_string(), image_url: "".to_string(), sound_url: "".to_string(), - display_time: 20, + display_time: 5000, payload: messages::TwitchEvent::ChannelFollow(messages::FollowEvent { user_name: "some user".to_string(), user_id: 123, @@ -35,6 +34,6 @@ async fn main() { let _ = tx.send(display_message).unwrap(); - tokio::time::sleep(tokio::time::Duration::from_secs(5)).await; + tokio::time::sleep(tokio::time::Duration::from_secs(20)).await; } } diff --git a/frontend_api/templates/admin.html b/frontend_api/templates/admin.html new file mode 100644 index 0000000..70c7c18 --- /dev/null +++ b/frontend_api/templates/admin.html @@ -0,0 +1,55 @@ + + + + + + TODO with HTMX + + + + + + +
+ +
+
+

Events

+
+

TODO

+
+
+
+

DOING

+
+
+
+
+

TTS

+
+

DONE

+
+
+
+

ARCHIVED

+
+
+
+
+ + +
+
+ +
+
+
+

TODO with HTMX

+
+
+
+ + + diff --git a/frontend_api/templates/index.html b/frontend_api/templates/index.html index 4ba1499..25efae5 100644 --- a/frontend_api/templates/index.html +++ b/frontend_api/templates/index.html @@ -15,9 +15,6 @@
-
-

TODO with HTMX

-