1 files changed, 59 insertions, 32 deletions

diff --git a/src/webui.rs b/src/webui.rs
index 9e8b9c3..9b21ab0 100644
--- a/src/webui.rs
+++ b/src/webui.rs
@@ -1,51 +1,59 @@
-use crate::State;
+use crate::{State, helper::Css};
 use axum::extract::State as S;
 use axum::response::Html;
+use markup::doctype;
 use serde_json::{Map, Value};
 use std::sync::Arc;
-use tokio::sync::RwLock;
+use tokio::{fs::read_to_string, sync::RwLock};
+
+pub(crate) async fn webui_style() -> Css<String> {
+    Css(if cfg!(debug_assertions) {
+        read_to_string("src/style.css").await.unwrap()
+    } else {
+        include_str!("style.css").to_string()
+    })
+}
 
 pub(crate) async fn webui(S(state): S<Arc<RwLock<State>>>) -> Html<String> {
     let g = state.read().await;
 
     let doc = markup::new! {
+        @doctype()
         html {
             head {
                 meta[charset="UTF-8"];
-                title { "" }
+                link[rel="stylesheet", href="/style.css"];
+                title { "Queue-Server" }
             }
             body {
                 section {
                     h2 { "Workers"}
                     ul { @for (id, w) in &g.workers {
-                        li { div {
-                            h3 { @w.name }
-                            span { "ID: " @id } " "
-                            @if w.accept > 0 {
-                                span { "Accepting Jobs (" @w.accept ")" }
-                            } else {
-                                span { "Idle" }
-                            }
-                        }}
-                    }}
-                }
-                section {
-                    h2 { "Queued" }
-                    ul { @for key in &g.queue {
-                        li { @key }
+                        li { @Worker { id: *id, w } }
                     }}
                 }
-                section {
-                    h2 { "Loading" }
-                    ul { @for key in &g.loading {
-                        li { @key }
-                    }}
-                }
-                section {
-                    h2 { "Completed" }
-                    ul { @for key in &g.complete {
-                        li { @key }
-                    }}
+                section.tasks {
+                    div {
+                        h2 { "Queued" }
+                        p.count { @g.queue.len() " tasks" }
+                        ul { @for key in &g.queue {
+                            li { @Task { key, data: g.metadata.get(key).unwrap(), class: "task queue" } }
+                        }}
+                    }
+                    div {
+                        h2 { "Loading" }
+                        p.count { @g.loading.len() " tasks" }
+                        ul { @for key in &g.loading {
+                            li { @Task { key, data: g.metadata.get(key).unwrap(), class: "task loading" } }
+                        }}
+                    }
+                    div {
+                        h2 { "Completed" }
+                        p.count { @g.complete.len() " tasks" }
+                        ul { @for key in &g.complete {
+                            li { @Task { key, data: g.metadata.get(key).unwrap(), class: "task complete" } }
+                        }}
+                    }
                 }
             }
         }
@@ -54,10 +62,29 @@ pub(crate) async fn webui(S(state): S<Arc<RwLock<State>>>) -> Html<String> {
 }
 
 markup::define!(
-    Task<'a>(key: &'a str, data: &'a Map<String, Value>) {
-        div.task {
+    Worker<'a>(id: u64, w: &'a crate::Worker) {
+        div[class=worker_class(w)] {
+            h3 { @w.name }
+            span { "ID: " @id } " "
+            @if w.accept > 0 {
+                span { "Accepting Jobs (" @w.accept ")" }
+            } else {
+                span { "Idle" }
+            }
+        }
+    }
+    Task<'a>(key: &'a str, data: &'a Map<String, Value>, class: &'a str) {
+        div[class=class] {
             h3 { @data["title"].as_str().unwrap_or(key) }
-            spawn.key { @key }
+            span.key { @key }
         }
     }
 );
+
+fn worker_class(w: &crate::Worker) -> &'static str {
+    if w.accept > 0 {
+        "worker accepting"
+    } else {
+        "worker busy"
+    }
+}