Reformat templates. Work Completed

Inline Edit
Remove full feeds reload
2025-01-29 22:49:50 +01:00 · 2025-01-29 22:40:35 +01:00 · 2025-01-29 22:11:39 +01:00 · 2025-01-29 22:03:57 +01:00
8 changed files with 181 additions and 29 deletions
--- a/httptests/Index.http
+++ b/httptests/Index.http
@@ -1,4 +0,0 @@
-### GET request to index
-GET http://{{host}}:{{port}}/
-
-###
--- a/httptests/http-client.env.json
+++ b/httptests/http-client.env.json
@@ -1,6 +0,0 @@
-{
-  "dev": {
-    "host": "127.0.0.1",
-    "port": "3000"
-  }
-}
--- a/src/main.rs
+++ b/src/main.rs
@@ -91,7 +91,9 @@ async fn main() -> Result<()> {
        .nest_service("/assets", ServeDir::new("assets"))
        .route("/", get(index))
        .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)
        .with_state(context.clone());
    // 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{
    name: String,
    feed_url: String,
@@ -156,10 +227,24 @@ async fn post_feed(
            .get_result(conn)
            .expect("Error saving new feed")
    }).await.unwrap();
-    let mut res = FeedTemplate{ feed: result }.into_response();
-    // Trigger HTMX Update event
-    res.headers_mut().insert("HX-Trigger", HeaderValue::from_static("newFeed"));
-    res
+    FeedTemplate{ feed: result }
+}
+
+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 }
 }


--- a/templates/base.html
+++ b/templates/base.html
@@ -2,18 +2,22 @@
 <html lang="en">
 <head>
    <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>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
    <style>
-        [x-cloak] { display: none !important; }
+        [x-cloak] {
+            display: none !important;
+        }
+
        .htmx-indicator {
            display: none;
        }
+
        .htmx-request .htmx-indicator {
            display: inline;
        }
+
        .htmx-request.htmx-indicator {
            display: inline;
        }
--- a/templates/feed.html
+++ b/templates/feed.html
@@ -3,10 +3,15 @@
    <td>{{feed.feed_url}}</td>
    <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
    <td>
-        <button hx-get="/feed/{{feed.id}}"
+        <button hx-get="/feed/{{feed.id}}/edit/inline"
                hx-target="#feed_{{feed.id}}"
                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 class="danger"
                hx-confirm="Are you sure?"
--- a/templates/feed_form.html
+++ b/templates/feed_form.html
@@ -0,0 +1,29 @@
+<div id="modal">
+    <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>
--- a/templates/feed_inline.html
+++ b/templates/feed_inline.html
@@ -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>
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,6 +22,14 @@
        background: #161b22;
        opacity: 0.75;
    }
+
+    th {
+        white-space: nowrap;
+    }
+
+    td {
+        white-space: nowrap;
+    }
 </style>
 {% endblock %}

@@ -44,7 +52,8 @@
        <header>
            <h2>Create new RSS Feed subscription</h2>
        </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>
                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="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>
        </footer>
    </dialog>
@@ -71,7 +81,7 @@
            <th>Actions</th>
        </tr>
        </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 }}
        </tbody>
    </table>
Author	SHA1	Message	Date
Federico Pasqua (eisterman)	a4869ae12c	Reformat templates. Work Completed	2025-01-29 22:49:50 +01:00
Federico Pasqua (eisterman)	c68945fe4b	Inline Edit	2025-01-29 22:40:35 +01:00
Federico Pasqua (eisterman)	e5be3b2394	Remove full feeds reload	2025-01-29 22:11:39 +01:00
Federico Pasqua (eisterman)	03510fd68a	Modify with Feed Form	2025-01-29 22:03:57 +01:00