eisterman/htmxssrtest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Table basics with some HTMX to allow data refresh

Browse Source
This commit is contained in:
Federico Pasqua
2025-01-28 20:21:43 +01:00
parent acf7b5ab6b
commit 3c180625b2
8 changed files with 388 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Cargo.lock generated
View File

@@ -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",

2
Cargo.toml
View File

@@ -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"

BIN
assets/galaxy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 MiB

265
assets/logo.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

66
src/main.rs
View File

@@ -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> {
name: &'a str,
struct IndexTemplate {
feeds: Vec<RssFeed>,
}
async fn index(
State(ctx): State<AppContext>,
) -> HelloTemplate<'static> {
HelloTemplate { name: "world" }
) -> IndexTemplate {
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 }
}

3
templates/base.html
View File

@@ -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 %}

13
templates/feed.html Normal file
View File

@@ -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>

27
templates/index.html
View File

@@ -2,6 +2,29 @@
{% block title %}Hello!{% endblock %}
{% block content %}
<h1>Hello, {{name}}!</h1>
{% block head %}
{% 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 %}