UI Improvements (#14)

* Show watched workloads on main page. Refactor to create a 'system info card' for future information. Add css styles for card.

* Rename release workflow to not have the release version in the name

Author: devclef

.github/workflows/release.yaml

@@ -1,4 +1,4 @@
-name: Release v0.3.8
+name: Release Slackwatch
 
 on:
   push:

assets/style.css

@@ -109,7 +109,11 @@
     font-size: 1.25em;
 }
 
-.next-scheduled-time {
+.system-info-entry {
+    margin-top: 10px;
+}
+
+.system-info-card {
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         padding: 20px;
         border-radius: 8px;

src/site/app.rs

@@ -33,6 +33,11 @@ struct WorkloadCardProps {
     workload: Workload,
 }
 
+#[derive(PartialEq, Clone,Props)]
+struct WorkloadsProps {
+    workloads: Vec<Workload>,
+}
+
 
 #[server] // For the server-side rendering version
 async fn get_all_workloads() -> Result<String, ServerFnError> {
@@ -118,7 +123,7 @@ fn Home() -> Element {
             } else {
             rsx! {
                 div { class: "workloads-page",
-                    NextScheduledTimeCard {},
+                    SystemInfoCard {workloads: workloads.clone()},
                     for w in workloads.iter() {
                     WorkloadCard{workload: w.clone()}
                         }
@@ -136,6 +141,49 @@ fn Home() -> Element {
     }
 }
 
+
+// ... rest of the code ...
+#[component]
+fn SystemInfoCard(props: WorkloadsProps) -> Element {
+    let data = use_signal(|| {props.workloads.clone()});
+    rsx! {
+        div { class: "system-info-card",
+            div { class: "system-info", "System Info" },
+            div { class: "system-info-entry","Watched Workloads: {data().len()}" },
+            NextScheduledTimeCard {},
+        }
+        }
+}
+
+#[component]
+fn NextScheduledTimeCard() -> Element {
+    let settings_context = use_context::<Signal<Settings>>();
+    log::info!("settings context: {:?}", settings_context);
+    let mut next_schedule = use_server_future(move || async move {
+        let settings = settings_context.read();
+        get_next_schedule_time(settings.clone()).await
+    })?;
+    match next_schedule() {
+        Some(Ok(next_schedule)) => {
+            rsx! {
+                    div { class: "system-info-entry", "Next Run: {next_schedule}" }
+                    div { class: "system-info-entry", 
+                    a {  href: "/refresh-all", "Click to Run Now" }
+                    }
+            }
+        },
+        Some(Err(err)) => {
+            rsx! { div { "Error: {err}" } }
+        },
+        None => {
+            rsx! { div { "Loading..." } }
+        }
+        _ => {
+            rsx! { div { "Loading..." } }
+        }
+    }
+}
+
 #[component]
 fn DebugWorkloadCard(props: WorkloadCardProps) -> Element {
     rsx! {
@@ -214,7 +262,7 @@ pub fn App() -> Element {
     //use_context_provider(|| {
     //    //Signal::new(settings)
     //});
-    
+
 //    use_context_provider(|| Signal::new(Appsettings:settings)  );
 //    use_context_provider(|| Signal::new(load_settings)  );
     //load config
@@ -299,37 +347,7 @@ fn All() -> Element {
 }
 
 
-// ... rest of the code ...
 
-#[component]
-fn NextScheduledTimeCard() -> Element {
-    let settings_context = use_context::<Signal<Settings>>();
-    log::info!("settings context: {:?}", settings_context);
-    let mut next_schedule = use_server_future(move || async move {
-        let settings = settings_context.read();
-        get_next_schedule_time(settings.clone()).await
-    })?;
-    match next_schedule() {
-        Some(Ok(next_schedule)) => {
-            rsx! {
-                div { class: "next-scheduled-time",
-                    div { class: "system-info", "System Info" },
-                    div { "Next Run: {next_schedule}" }
-                    a { href: "/refresh-all", "Click to Run Now" }
-                }
-            }
-        },
-        Some(Err(err)) => {
-            rsx! { div { "Error: {err}" } }
-        },
-        None => {
-            rsx! { div { "Loading..." } }
-        }
-        _ => {
-            rsx! { div { "Loading..." } }
-        }
-    }
-}
 
 #[server]
 async fn get_next_schedule_time(settings: Settings) -> Result<String, ServerFnError> {