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

Fix Create Modal form using DaisyUI

Browse Source
This commit is contained in:
Federico Pasqua
2025-02-01 21:34:39 +01:00
parent 045b0f5ec0
commit e4415c9929
2 changed files with 66 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -1,3 +1,6 @@
# Intro
### Some things to do before the good things can happen
Install Diesel and Watchexec: Install Diesel and Watchexec:
``` ```
sudo pacman -S diesel-cli watchexec sudo pacman -S diesel-cli watchexec
@@ -5,6 +8,11 @@ sudo pacman -S diesel-cli watchexec
Absolutely use pnpm as packet manager for this project. Absolutely use pnpm as packet manager for this project.
First initialize the Database:
```
diesel setup
```
To run the Tailwind Compiler in watch: To run the Tailwind Compiler in watch:
``` ```
pnpm dlx @tailwindcss/cli -i styles/tailwind.css -o assets/generated/main.css --watch pnpm dlx @tailwindcss/cli -i styles/tailwind.css -o assets/generated/main.css --watch
@@ -14,5 +22,6 @@ or (with or without `--watch`)
pnpm compile pnpm compile
``` ```
### How to Dev like a pro
My suggestion is to open one terminal and run `pnpm devrun` to continously rebuild My suggestion is to open one terminal and run `pnpm devrun` to continously rebuild
the Tailwind css and restart/rebuild the Rust server if a template file change. the Tailwind css and restart/rebuild the Rust server if a template file change.

128
templates/index.html
View File

@@ -3,80 +3,66 @@
{% block title %}Hello!{% endblock %} {% block title %}Hello!{% endblock %}
{% block head %} {% block head %}
<style>
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #161b22;
opacity: 0.75;
}
th {
white-space: nowrap;
}
td {
white-space: nowrap;
}
</style>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div x-data="{'isModalOpen': false}"> <div x-data>
<nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between"> <nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between">
<a class="btn btn-ghost text-xl flex" href="/"> <a class="btn btn-ghost text-xl flex" href="/">
<img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/> <img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
<h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2> <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
</a> </a>
<button class="btn btn-primary" @click="isModalOpen = true">Create</button> <button class="btn btn-primary" @click="document.getElementById('create_modal').showModal()">Create</button>
</nav> </nav>
<div class="pt-20"> <div class="pt-20">
<!-- TODO: Switch overlay and dialog to DaisyUI --> <dialog id="create_modal" class="modal" x-cloak x-transition @close="document.getElementById('create_form').reset()">
<div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div> <div class="modal-box">
<dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition> <h3 class="text-lg font-bold pb-2">Create new RSS Feed subscription</h3>
<header> <form method="dialog">
<h2>Create new RSS Feed subscription</h2> <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</header> </form>
<form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
hx-indicator="#indicator" hx-indicator="#indicator"
@htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false"> @htmx:after-on-load="document.getElementById('create_modal').close()">
<label> <fieldset class="fieldset gap-2">
Name <label class="floating-label">
<input type="text" name="name"> <span>Name</span>
</label> <input type="text" class="input input-md w-full" placeholder="Name" name="name">
<label> </label>
Feed URL <label class="floating-label">
<input type="url" name="feed_url"> <span>Feed URL</span>
</label> <input type="url" class="input input-md w-full" placeholder="Feed URL" name="feed_url">
</form> </label>
<footer> </fieldset>
<button class="btn" form="create_form" type="reset" @click="isModalOpen = false">Close</button> <div class="modal-action">
<button class="btn" form="create_form" type="submit"> <button class="btn btn-primary" form="create_form" type="submit">
Submit Submit
<img id="indicator" class="htmx-indicator" src="/assets/oval.svg" <img id="indicator" class="htmx-inline htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" style="height: 1rem; margin-left: 2px"
alt="..."> alt="...">
</button> </button>
</footer> </div>
</dialog> </form>
<div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100"> </div>
<table class="table table-zebra"> <form method="dialog" class="modal-backdrop">
<thead> <button>close</button>
<tr> </form>
<th>Feed Name</th> </dialog>
<th>Feed URL</th> <div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100">
<th>Last Mail Sent</th> <table class="table table-zebra">
<th>Actions</th> <thead>
</tr> <tr>
</thead> <th>Feed Name</th>
<tbody id="feed_tbody"> <th>Feed URL</th>
{{ feeds|safe }} <th>Last Mail Sent</th>
</tbody> <th>Actions</th>
</table> </tr>
</thead>
<tbody id="feed_tbody">
{{ feeds|safe }}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}