feat: display monitored urls using askama template

piny4man · Oct 14, 2024 · 5625ddf · 5625ddf
1 parent 5d4a4d8
commit 5625ddf
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 46 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-askama = "0.12.1"
+askama = { version = "0.12.1", features = ["with-axum"] }
 askama_axum = "0.4.0"
 axum = { version = "0.7.5", features = ["json"] }
 chrono = { version = "0.4.38", features = ["serde"] }
@@ -13,11 +13,11 @@ reqwest = { version = "0.12.5", features = ["json"] }
 serde = { version = "1.0.204", features = ["derive"] }
 serde_json = "1.0.122"
 sqlx = { version = "0.8.0", features = [
-    "runtime-tokio",
-    "tls-rustls",
-    "postgres",
-    "chrono",
-    "json",
+  "runtime-tokio",
+  "tls-rustls",
+  "postgres",
+  "chrono",
+  "json",
 ] }
 tokio = { version = "1.39.2", features = ["full"] }
 tokio-postgres = "0.7.11"

diff --git a/Dockerfile b/Dockerfile
@@ -26,10 +26,11 @@ ARG APP_PORT
 ARG DATABASE_PUBLIC_URL
 
 RUN apt-get update \
-    && apt-get install -y ca-certificates \
-    && rm -rf /var/lib/apt/lists/*
+  && apt-get install -y ca-certificates \
+  && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
 COPY static /app/static
+COPY templates /app/templates
 COPY --from=builder /app/target/release/spyhole /usr/local/bin/spyhole
 
 ENV RUST_LOG=$RUST_LOG

diff --git a/askama.toml b/askama.toml
diff --git a/src/main.rs b/src/main.rs
@@ -33,6 +33,10 @@ struct UrlItem {
     status: bool,
 }
 
+#[derive(Template)]
+#[template(path = "index.html")]
+struct IndexTemplate;
+
 #[derive(Template)]
 #[template(path = "urls.html")]
 struct UrlsTemplate<'a> {
@@ -119,15 +123,6 @@ async fn get_monitored_urls(State(pool): State<PgPool>) -> impl IntoResponse {
     .await
     .expect("Failed to fetch monitored URLs");
 
-    // let mut response_html = Vec::new();
-    // for url in monitored_urls {
-    //     response_html.push(url  &format!(
-    //         "<li class=\"monitored-url\"><a href=\"{0}\" target=\"_blank\" rel=\"noreferrer\">{0}</a><span class=\"status-badge up-{1}\"/></li>",
-    //         url.url,
-    //         url.status.unwrap_or(false)
-    //     ));
-    // }
-    //
     let response_urls: Vec<UrlItem> = monitored_urls
         .iter()
         .map(|url| UrlItem {
@@ -136,10 +131,14 @@ async fn get_monitored_urls(State(pool): State<PgPool>) -> impl IntoResponse {
         })
         .collect();
 
-    let response_html = UrlsTemplate {
+    let template = UrlsTemplate {
         urls: &response_urls,
     };
-    response_html.render().unwrap()
+    askama_axum::IntoResponse::into_response(template)
+}
+
+async fn index() -> impl IntoResponse {
+    IndexTemplate.into_response()
 }
 
 #[tokio::main]
@@ -169,7 +168,8 @@ async fn main() {
     }
 
     let app = Router::new()
-        .nest_service("/", ServeDir::new("static"))
+        .route("/", get(index))
+        .nest_service("/assets", ServeDir::new("static/assets"))
         .route("/monitor", post(monitor_service))
         .route("/monitored_urls", get(get_monitored_urls))
         .layer(ServiceBuilder::new().layer(TraceLayer::new_for_http()))

diff --git a/static/urls.html b/static/urls.html
diff --git a/static/index.html → templates/index.html b/static/index.html → templates/index.html
@@ -6,8 +6,8 @@
         <title>Spyhole</title>
         <script src="https://unpkg.com/[email protected]"></script>
         <link rel="stylesheet" href="/assets/styles.css" />
+        {% block head %}{% endblock %}
     </head>
-
     <body>
         <main>
             <header>
@@ -36,9 +36,11 @@ <h1>SPYHOLE - Simple down detector</h1>
                     </svg>
                 </button>
             </header>
-            {% block content %}
-            <p>Loading monitored urls...</p>
-            {% endblock %}
+            <article>
+              <ul id="list-container" hx-get="/monitored_urls" hx-trigger="load" hx-swap="innerHTML">
+                  <li class="loading">Loading monitored URLs...</li>
+              </ul>
+          </article>
         </main>
     </body>
 </html>
diff --git a/templates/urls.html b/templates/urls.html
@@ -0,0 +1,6 @@
+{% for url in urls %}
+<li class="monitored-url">
+    <a href="{{ url.url }}" target="_blank" rel="noreferrer">{{ url.url }}</a>
+    <span class="status-badge up-{{ url.status }}"></span>
+</li>
+{% endfor %}