Table basics with some HTMX to allow data refresh

Cargo.lock

@@ -512,6 +512,12 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
 
+[[package]]
+name = "futures-sink"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+
 [[package]]
 name = "futures-task"
 version = "0.3.31"
@@ -602,6 +608,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range-header"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9171a2ea8a68358193d15dd5d70c1c10a2afc3e7e4c5bc92bc9f025cebd7359c"
+
 [[package]]
 name = "httparse"
 version = "1.9.5"
@@ -1164,6 +1176,19 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "tokio-util"
+version = "0.7.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7fcaa8d55a2bdd6b83ace262b016eca0d79ee02818c5c1bcdf0305114081078"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
 [[package]]
 name = "tower"
 version = "0.5.2"
@@ -1188,9 +1213,18 @@ checksum = "403fa3b783d4b626a8ad51d766ab03cb6d2dbfc46b1c5d4448395e6628dc9697"
 dependencies = [
  "bitflags",
  "bytes",
+ "futures-util",
  "http",
  "http-body",
+ "http-body-util",
+ "http-range-header",
+ "httpdate",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
  "pin-project-lite",
+ "tokio",
+ "tokio-util",
  "tower-layer",
  "tower-service",
  "tracing",

Cargo.toml

@@ -9,7 +9,7 @@ axum = "0.7.9"
 tower = "0.5.2"
 tracing = "0.1.41"
 tracing-subscriber = "0.3.19"
-tower-http = { version = "0.6.2", features = ["cors", "trace"] }
+tower-http = { version = "0.6.2", features = ["cors", "trace", "fs"] }
 chrono = "0.4.39"
 diesel = { version = "2.2.0", features = ["sqlite", "returning_clauses_for_sqlite_3_35"] }
 dotenvy = "0.15"

assets/logo.svg

@@ -0,0 +1,265 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3">
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect15"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect15"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect14"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect14"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powerclip"
+       message=""
+       id="path-effect13"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false" />
+    <inkscape:path-effect
+       effect="powerclip"
+       message=""
+       id="path-effect12"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false" />
+    <inkscape:path-effect
+       effect="powerclip"
+       message=""
+       id="path-effect11"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect9"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect9"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect8"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect8"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect7"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect7"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath9">
+      <rect
+         style="display:none;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         id="rect9"
+         width="100.455"
+         height="15.318766"
+         x="126.82163"
+         y="135.80667"
+         d="m 126.82163,135.80667 h 100.455 v 15.31877 h -100.455 z" />
+      <path
+         id="lpe_path-effect11"
+         style="display:inline;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         class="powerclip"
+         d="m 168.34962,137.49724 h 61.89469 v 53.94291 h -61.89469 z m -41.52799,-1.69057 v 15.31877 h 100.455 v -15.31877 z" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath10">
+      <rect
+         style="display:none;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         id="rect10"
+         width="100.455"
+         height="15.318766"
+         x="126.82163"
+         y="135.80667"
+         d="m 126.82163,135.80667 h 100.455 v 15.31877 h -100.455 z" />
+      <path
+         id="lpe_path-effect12"
+         style="display:inline;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         class="powerclip"
+         d="m 121.74987,137.4969 h 61.72408 v 53.96962 h -61.72408 z m 5.07176,-1.69023 v 15.31877 h 100.455 v -15.31877 z" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath11">
+      <rect
+         style="display:none;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         id="rect11"
+         width="100.455"
+         height="15.318766"
+         x="126.82163"
+         y="135.80667"
+         d="m 126.82163,135.80667 h 100.455 v 15.31877 h -100.455 z" />
+      <path
+         id="lpe_path-effect13"
+         style="display:inline;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         class="powerclip"
+         d="m 123,139 h 106 v 74 H 123 Z m 3.82163,-3.19333 v 15.31877 h 100.455 v -15.31877 z" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4"
+     inkscape:cx="129.5"
+     inkscape:cy="123.125"
+     inkscape:window-width="1896"
+     inkscape:window-height="1026"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <!-- Background rectangle with rounded corners -->
+  <rect
+     width="256"
+     height="256"
+     rx="48"
+     ry="48"
+     fill="#FF6600"
+     id="rect1"
+     style="fill:#ff6600;fill-opacity:1" />
+  <!-- RSS symbol -->
+  <!-- Small circle -->
+  <!-- First arc -->
+  <path
+     d="m 72,112 c 38,0 72,34 72,72"
+     fill="none"
+     stroke="#ffffff"
+     stroke-width="24"
+     stroke-linecap="round"
+     id="path1" />
+  <path
+     d="m 72,36 c 78,0 148,70 148,148"
+     fill="none"
+     stroke="#ffffff"
+     stroke-width="24"
+     stroke-linecap="round"
+     id="path2" />
+  <!-- Second arc -->
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="mail"
+     style="display:inline;mix-blend-mode:normal">
+    <path
+       x="128"
+       y="144"
+       width="96"
+       height="64"
+       fill="#FFFFFF"
+       rx="8"
+       ry="8"
+       id="rect2"
+       style="fill:#e6e6e6"
+       mask="none"
+       sodipodi:type="rect"
+       clip-path="url(#clipPath11)"
+       inkscape:path-effect="#path-effect13"
+       d="m 136,144 h 80 c 4.432,0 8,3.568 8,8 v 48 c 0,4.432 -3.568,8 -8,8 h -80 c -4.432,0 -8,-3.568 -8,-8 v -48 c 0,-4.432 3.568,-8 8,-8 z" />
+    <line
+       x1="128.02968"
+       y1="144.03561"
+       x2="177.19414"
+       y2="184.92781"
+       stroke="#ff6600"
+       stroke-width="4.00277"
+       id="line2"
+       mask="none"
+       clip-path="url(#clipPath10)"
+       inkscape:path-effect="#path-effect12"
+       d="m 128.02968,144.03561 49.16446,40.8922" />
+    <line
+       x1="223.96869"
+       y1="144.03763"
+       x2="174.62524"
+       y2="184.89977"
+       stroke="#ff6600"
+       stroke-width="4"
+       id="line3"
+       mask="none"
+       clip-path="url(#clipPath9)"
+       inkscape:path-effect="#path-effect11"
+       d="m 223.96869,144.03763 -49.34345,40.86214" />
+    <polygon
+       points="224,144 128,144 176,104 "
+       fill="#ffffff"
+       id="polygon2"
+       transform="matrix(0.99906475,0,0,0.99788438,0.1631611,7.4375162)"
+       style="fill:#e6e6e6;fill-opacity:1" />
+    <path
+       style="fill:#fbf46f;fill-opacity:1;stroke:#ff6600;stroke-width:2;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 139.125,152.375 212.75,152.25 176,183.5 Z"
+       id="path5" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#ff6600;stroke-width:2;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 137.62066,152.20474 h 75.8372"
+       id="path4" />
+  </g>
+  <!-- Email envelope -->
+  <!-- Envelope body -->
+  <!-- Envelope flap -->
+  <!-- Envelope details -->
+  <path
+     style="fill:none;stroke:#fbf46f;stroke-width:12;stroke-dasharray:none;stroke-opacity:1"
+     d="m 71.880322,186.18182 c 0,0 -2.986403,-88.537022 29.599538,-106.664846 25.66147,-14.275685 36.95282,17.638952 47.53683,29.110466 15.64037,16.95188 26.85443,-3.75287 26.55983,35.1332 L 175.5,153 v 0 l 0.0625,6.75 v 0"
+     id="path3"
+     sodipodi:nodetypes="cssccccc"
+     mask="none" />
+  <circle
+     cx="72"
+     cy="184"
+     r="24"
+     fill="#FFFFFF"
+     id="circle1" />
+</svg>

src/main.rs

@@ -17,6 +17,7 @@ use tower::{ServiceBuilder};
 use tower_http::{
     cors::{Any, CorsLayer},
     trace::{TraceLayer, DefaultOnResponse},
+    services::ServeDir,
     LatencyUnit
 };
 use tracing::{
@@ -96,7 +97,9 @@ async fn main() -> Result<()> {
         .layer(tracelayer).layer(cors);
     // Launch Web Server
     let app = Router::new()
+        .nest_service("/assets", ServeDir::new("assets"))
         .route("/", get(index))
+        .route("/feed/:id/", get(get_feed))
         .layer(middlewares)
         .with_state(context.clone());
     // Run our app with hyper
@@ -104,32 +107,59 @@ async fn main() -> Result<()> {
         .await.context(format!("Failed to bind Web Service on {}:{}", config.http_host, config.http_port))?;
     info!("Listening on {}:{}", config.http_host, config.http_port);
     axum::serve(listener, app).await.context("Failed to serve Web Service")?;
-    // let connection = &mut establish_connection();
-    // use self::schema::rss_feeds::dsl::*;
-    // let results = rss_feeds
-    //     .limit(5)
-    //     .select(RssFeed::as_select())
-    //     .load(connection)
-    //     .expect("Error loading posts");
-    //
-    // println!("Displaying {} posts", results.len());
-    // for rss_feed in results {
-    //     println!("{}", rss_feed.name);
-    //     println!("-----------\n");
-    //     println!("{}", rss_feed.feed_url);
-    // }
     Ok(())
 }
 
+#[derive(Template)]
+#[template(path="feed.html")]
+struct FeedTemplate {
+    feed: RssFeed
+}
+
+async fn get_feed(
+    State(ctx): State<AppContext>,
+    Path(feed_id): Path<i32>
+) -> FeedTemplate {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let result = conn.interact(move |conn| {
+        rss_feeds
+            .find(feed_id)
+            .select(RssFeed::as_select())
+            .first(conn)
+            .optional()
+            .expect("Error loading feeds")
+    }).await.unwrap();
+    if let Some(feed) = result {
+        FeedTemplate{ feed }
+    } else {
+        FeedTemplate{
+            feed: RssFeed{
+                id: -1,
+                name: "ERROR".to_string(),
+                feed_url: "ERROR".to_string(),
+                last_pub_date: Some("ERROR".to_string())
+            }
+        }
+    }
+}
 
 #[derive(Template)]
 #[template(path = "index.html")]
-struct HelloTemplate<'a> {
+struct IndexTemplate {
-    name: &'a str,
+    feeds: Vec<RssFeed>,
 }
 
 async fn index(
     State(ctx): State<AppContext>,
-) -> HelloTemplate<'static> {
+) -> IndexTemplate {
-    HelloTemplate { name: "world" }
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let result = conn.interact(|conn| {
+        rss_feeds
+            .select(RssFeed::as_select())
+            .load(conn)
+            .expect("Error loading feeds")
+    }).await.unwrap();
+    IndexTemplate { feeds: result }
 }

templates/base.html

@@ -1,7 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <link href="https://matcha.mizu.sh/matcha.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
+<!--    <script src="https://cdn.twind.style" crossorigin></script>-->
     <title>{% block title %}{{ title }}{% endblock %}</title>
     <script src="https://unpkg.com/htmx.org@2.0.4"></script>
     {% block head %}{% endblock %}

templates/feed.html

@@ -0,0 +1,13 @@
+<tr id="feed_{{feed.id}}">
+    <td>{{feed.name}}</td>
+    <td>{{feed.feed_url}}</td>
+    <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
+    <td>
+        <button hx-get="/feed/{{feed.id}}/"
+                hx-target="#feed_{{feed.id}}"
+                hx-swap="outerHTML"
+                hx-trigger="click">
+            Refresh
+        </button>
+    </td>
+</tr>

templates/index.html

@@ -2,6 +2,29 @@
 
 {% block title %}Hello!{% endblock %}
 
-{% block content %}
+{% block head %}
-<h1>Hello, {{name}}!</h1>
+{% endblock %}
+
+{% block content %}
+<nav class="no-overflow fixed width" style="z-index: 20">
+    <div>
+        <a href="/" class="flex">
+            <img src="/assets/logo.svg" class="m-.5" style="height: 32px" alt="RSS Notifier Logo"/>
+            <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
+        </a>
+    </div>
+</nav>
+<div style="height: 48px; margin-bottom: 8px"></div>
+<div class="flex end"><button>Create</button></div>
+<table class="centered">
+    <tr>
+        <th>Feed Name</th>
+        <th>Feed URL</th>
+        <th>Last Mail Sent</th>
+        <th>Actions</th>
+    </tr>
+    {% for feed in feeds %}
+    {% include "feed.html" %}
+    {% endfor %}
+</table>
 {% endblock %}