1 files changed, 22 insertions, 10 deletions
diff --git a/src/webui.rs b/src/webui.rs
index 5a66ffc..cd7c1de 100644
--- a/src/webui.rs
+++ b/src/webui.rs
@@ -1,4 +1,7 @@
-use crate::{State, helper::Css};
+use crate::{
+    State,
+    helper::{Css, Javascript},
+};
 use axum::extract::State as S;
 use axum::response::Html;
 use markup::doctype;
@@ -13,6 +16,13 @@ pub(crate) async fn webui_style() -> Css<String> {
         include_str!("style.css").to_string()
     })
 }
+pub(crate) async fn webui_script() -> Javascript<String> {
+    Javascript(if cfg!(debug_assertions) {
+        read_to_string("src/webui_live.js").await.unwrap()
+    } else {
+        include_str!("webui_live.js").to_string()
+    })
+}
 
 pub(crate) async fn webui(S(state): S<Arc<RwLock<State>>>) -> Html<String> {
     let g = state.read().await;
@@ -25,19 +35,20 @@ pub(crate) async fn webui(S(state): S<Arc<RwLock<State>>>) -> Html<String> {
             head {
                 meta[charset="UTF-8"];
                 link[rel="stylesheet", href="/style.css"];
+                script[src="/webui_live.js", defer] {}
                 title { "Queue-Server" }
             }
             body {
-                section {
+                section.workers {
                     h2 { "Workers"}
                     ul { @for (id, w) in &g.workers {
                         li { @Worker { id: *id, w } }
                     }}
                 }
                 section.tasks {
-                    @Taskbin {title: "Queued", class: "task queue", set: &g.queue, default, g }
-                    @Taskbin {title: "Loading", class: "task loading", set: &g.loading, default, g }
-                    @Taskbin {title: "Completed", class: "task complete", set: &g.complete, default, g }
+                    @Taskbin {title: "Queued", state: "queue", set: &g.queue, default, g }
+                    @Taskbin {title: "Loading", state: "loading", set: &g.loading, default, g }
+                    @Taskbin {title: "Completed", state: "complete", set: &g.complete, default, g }
                 }
             }
         }
@@ -46,17 +57,18 @@ pub(crate) async fn webui(S(state): S<Arc<RwLock<State>>>) -> Html<String> {
 }
 
 markup::define!(
-    Taskbin<'a>(title: &'a str, class: &'a str, set: &'a HashSet<String>, g: &'a State, default: &'a Map<String, Value>) {
-        div {
+    Taskbin<'a>(title: &'a str, state: &'a str, set: &'a HashSet<String>, g: &'a State, default: &'a Map<String, Value>) {
+        div[id=format!("bin-{state}")] {
             h2 { @title }
             p.count { @set.len() " tasks" }
+            @let class = format!("task {state}");
             ul { @for key in set.iter().take(128) {
-                li { @Task { key, data: g.metadata.get(key).unwrap_or(&default), class } }
+                li { @Task { key, data: g.metadata.get(key).unwrap_or(&default), class: &class } }
             }}
         }
     }
     Task<'a>(key: &'a str, data: &'a Map<String, Value>, class: &'a str) {
-        div[class=class] {
+        div[class=class, id=key] {
             // @if let Some(url) = data.get("thumbnail").and_then(Value::as_str) {
             //     img[src=url, loading="lazy"];
             // }
@@ -68,7 +80,7 @@ markup::define!(
         }
     }
     Worker<'a>(id: u64, w: &'a crate::Worker) {
-        div[class=worker_class(w)] {
+        div[class=worker_class(w), id=format!("worker-{id}")] {
             h3 { @w.name }
             span { "ID: " @id } ", "
             @if !w.assigned_tasks.is_empty() {