Compare commits

..

6 Commits

8 changed files with 171 additions and 31 deletions

View File

@@ -1,4 +0,0 @@
### GET request to index
GET http://{{host}}:{{port}}/
###

View File

@@ -1,6 +0,0 @@
{
"dev": {
"host": "127.0.0.1",
"port": "3000"
}
}

View File

@@ -91,7 +91,9 @@ async fn main() -> Result<()> {
.nest_service("/assets", ServeDir::new("assets")) .nest_service("/assets", ServeDir::new("assets"))
.route("/", get(index)) .route("/", get(index))
.route("/feed/", get(get_list_feed).post(post_feed)) .route("/feed/", get(get_list_feed).post(post_feed))
.route("/feed/:id", get(get_feed).delete(delete_feed)) .route("/feed/:id", get(get_feed).delete(delete_feed).put(put_feed))
.route("/feed/:id/edit/form", get(get_feed_form))
.route("/feed/:id/edit/inline", get(get_feed_inline))
.layer(middlewares) .layer(middlewares)
.with_state(context.clone()); .with_state(context.clone());
// Run our app with hyper // Run our app with hyper
@@ -136,7 +138,76 @@ async fn get_feed(
} }
} }
#[derive(Deserialize)] #[derive(Template)]
#[template(path="feed_form.html")]
struct FeedFormTemplate {
feed: RssFeed
}
async fn get_feed_form(
State(ctx): State<AppContext>,
Path(feed_id): Path<i32>
) -> impl IntoResponse {
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 {
FeedFormTemplate{ feed }
} else {
FeedFormTemplate{
feed: RssFeed{
id: -1,
name: "ERROR".to_string(),
feed_url: "ERROR".to_string(),
last_pub_date: Some("ERROR".to_string())
}
}
}
}
#[derive(Template)]
#[template(path="feed_inline.html")]
struct FeedInlineTemplate {
feed: RssFeed
}
async fn get_feed_inline(
State(ctx): State<AppContext>,
Path(feed_id): Path<i32>
) -> impl IntoResponse {
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 {
FeedInlineTemplate{ feed }
} else {
FeedInlineTemplate{
feed: RssFeed{
id: -1,
name: "ERROR".to_string(),
feed_url: "ERROR".to_string(),
last_pub_date: Some("ERROR".to_string())
}
}
}
}
#[derive(Deserialize, AsChangeset)]
#[diesel(table_name = crate::schema::rss_feeds)]
struct PostForm{ struct PostForm{
name: String, name: String,
feed_url: String, feed_url: String,
@@ -156,10 +227,24 @@ async fn post_feed(
.get_result(conn) .get_result(conn)
.expect("Error saving new feed") .expect("Error saving new feed")
}).await.unwrap(); }).await.unwrap();
let mut res = FeedTemplate{ feed: result }.into_response(); FeedTemplate{ feed: result }
// Trigger HTMX Update event }
res.headers_mut().insert("HX-Trigger", HeaderValue::from_static("newFeed"));
res async fn put_feed(
State(ctx): State<AppContext>,
Path(feed_id): Path<i32>,
Form(post): Form<PostForm>
) -> impl IntoResponse {
let conn = ctx.pool.get().await.unwrap();
use self::schema::rss_feeds::dsl::*;
let result = conn.interact(move |conn| {
diesel::update(rss_feeds.find(feed_id))
.set(post)
.returning(RssFeed::as_select())
.get_result(conn)
.expect("Error updating feed")
}).await.unwrap();
FeedTemplate{ feed: result }
} }

View File

@@ -2,20 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css"> <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
<!-- <script src="https://cdn.twind.style" crossorigin></script>-->
<title>{% block title %}{{ title }}{% endblock %}</title> <title>{% block title %}{{ title }}{% endblock %}</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
<style> <style>
[x-cloak] { display: none !important; } [x-cloak] {
.htmx-indicator{ display: none !important;
display:none;
}
.htmx-request .htmx-indicator{
display:inline;
}
.htmx-request.htmx-indicator{
display:inline;
} }
</style> </style>
{% block head %}{% endblock %} {% block head %}{% endblock %}

View File

@@ -3,10 +3,15 @@
<td>{{feed.feed_url}}</td> <td>{{feed.feed_url}}</td>
<td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td> <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
<td> <td>
<button hx-get="/feed/{{feed.id}}" <button hx-get="/feed/{{feed.id}}/edit/inline"
hx-target="#feed_{{feed.id}}" hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML"> hx-swap="outerHTML">
Refresh Edit Inline
</button>
<button hx-get="/feed/{{feed.id}}/edit/form"
hx-target="body"
hx-swap="beforeend">
Edit Dialog
</button> </button>
<button class="danger" <button class="danger"
hx-confirm="Are you sure?" hx-confirm="Are you sure?"

29
templates/feed_form.html Normal file
View File

@@ -0,0 +1,29 @@
<div id="modal" x-data>
<div class="overlay" style="z-index: 30"></div>
<dialog open style="z-index: 31">
<header>
<h2>Modify RSS Feed subscription</h2>
</header>
<form id="modify_form" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
hx-indicator="#mod_indicator"
@htmx:after-on-load="document.getElementById('modal').remove()">
<label>
Name
<input type="text" name="name" value="{{feed.name}}">
</label>
<label>
Feed URL
<input type="url" name="feed_url" value="{{feed.feed_url}}">
</label>
</form>
<footer>
<button form="modify_form" type="reset" @click="document.getElementById('modal').remove()">Close
</button>
<button form="modify_form" type="submit">
Submit
<img id="mod_indicator" class="htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
</footer>
</dialog>
</div>

View File

@@ -0,0 +1,29 @@
<tr id="feed_{{feed.id}}">
<td>
<label style="width: 100%">
<input type="text" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}">
</label>
</td>
<td>
<label style="width: 100%">
<input type="url" name="feed_url" form="update_feed_{{feed.id}}" value="{{feed.feed_url}}">
</label>
</td>
<td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
<td>
<form id="update_feed_{{feed.id}}" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
hx-indicator="update_feed_{{feed.id}}_indicator" style="padding: 0; background: unset">
<button type="reset"
hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Cancel
</button>
<button type="submit">
Confirm
<img id="update_feed_{{feed.id}}_indicator" class="htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
</form>
</td>
</tr>

View File

@@ -22,6 +22,14 @@
background: #161b22; background: #161b22;
opacity: 0.75; opacity: 0.75;
} }
th {
white-space: nowrap;
}
td {
white-space: nowrap;
}
</style> </style>
{% endblock %} {% endblock %}
@@ -44,7 +52,8 @@
<header> <header>
<h2>Create new RSS Feed subscription</h2> <h2>Create new RSS Feed subscription</h2>
</header> </header>
<form id="create_form" hx-post="/feed/" hx-swap="none" x-ref="create_form" hx-indicator="#indicator"> <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" hx-indicator="#indicator"
@htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
<label> <label>
Name Name
<input type="text" name="name"> <input type="text" name="name">
@@ -58,7 +67,8 @@
<button form="create_form" type="reset" @click="isModalOpen = false">Close</button> <button form="create_form" type="reset" @click="isModalOpen = false">Close</button>
<button form="create_form" type="submit"> <button form="create_form" type="submit">
Submit Submit
<img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px" alt="..."> <img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px"
alt="...">
</button> </button>
</footer> </footer>
</dialog> </dialog>
@@ -71,7 +81,7 @@
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody hx-get="/feed/" hx-trigger="newFeed from:body" @htmx:after-settle="isModalOpen = false;$refs['create_form'].reset()"> <tbody id="feed_tbody">
{{ feeds|safe }} {{ feeds|safe }}
</tbody> </tbody>
</table> </table>