Table basics with some HTMX to allow data refresh

2025-01-28 20:21:43 +01:00
parent acf7b5ab6b
commit 3c180625b2
8 changed files with 388 additions and 22 deletions
--- a/templates/base.html
+++ b/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 %}
--- a/templates/feed.html
+++ b/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>
--- a/templates/index.html
+++ b/templates/index.html
@@ -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 %}