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

Modify with Feed Form

Browse Source
This commit is contained in:
Federico Pasqua
2025-01-29 22:03:57 +01:00
parent 53e7d79f7c
commit 03510fd68a
4 changed files with 88 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
templates/base.html
View File

@@ -2,7 +2,6 @@
<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>

7
templates/feed.html
View File

@@ -6,7 +6,12 @@
<button hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Refresh
Edit Inline
</button>
<button hx-get="/feedform/{{feed.id}}"
hx-target="body"
hx-swap="beforeend">
Edit Dialog
</button>
<button class="danger"
hx-confirm="Are you sure?"

27
templates/feed_form.html Normal file
View File

@@ -0,0 +1,27 @@
<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>