Enable progressive enhancement
This commit is contained in:
@@ -13,6 +13,9 @@ def NewPackageList(name=None, description=None, error=False, errormsg=None):
|
||||
data_hx_post="/list/",
|
||||
data_hx_target="#pkglist-manager",
|
||||
data_hx_swap="outerHTML",
|
||||
action="/list/",
|
||||
target="_self",
|
||||
method="post",
|
||||
_class=cls("mt-8", "p-5", "border-2", "border-gray-200"),
|
||||
**{"x-on:htmx:before-request": "(e) => submit_enabled || e.preventDefault()"},
|
||||
) as doc:
|
||||
|
||||
@@ -25,6 +25,3 @@ class PackageListManager:
|
||||
)
|
||||
|
||||
self.doc = doc
|
||||
|
||||
def render(self):
|
||||
return self.doc.render()
|
||||
|
||||
@@ -5,6 +5,53 @@ from dominate.util import raw
|
||||
from ..helpers import *
|
||||
|
||||
|
||||
class PackageListTableRow:
|
||||
def __init__(self, pkglist):
|
||||
with t.tr(_class=cls("h-10", "even:bg-gray-100", "hover:bg-purple-200")) as doc:
|
||||
t.td(pkglist.name, _class=cls("border", "px-2")),
|
||||
t.td(str(pkglist.description), _class=cls("border", "px-2")),
|
||||
t.td(
|
||||
t.span(_class=cls("mdi", "mdi-delete", "text-xl")),
|
||||
id="delete-packagelist",
|
||||
data_hx_delete=f"/list/{pkglist.id}",
|
||||
_class=cls(
|
||||
"border",
|
||||
"bg-red-200",
|
||||
"hover:bg-red-400",
|
||||
"cursor-pointer",
|
||||
"w-8",
|
||||
"text-center",
|
||||
),
|
||||
),
|
||||
t.td(
|
||||
t.span(_class=cls("mdi", "mdi-pencil", "text-xl")),
|
||||
id="edit-packagelist",
|
||||
data_hx_post=f"/list/{pkglist.id}/edit",
|
||||
_class=cls(
|
||||
"border",
|
||||
"bg-blue-200",
|
||||
"hover:bg-blue-400",
|
||||
"cursor-pointer",
|
||||
"w-8",
|
||||
"text-center",
|
||||
),
|
||||
),
|
||||
t.td(
|
||||
t.span(_class=cls("mdi", "mdi-arrow-right", "text-xl")),
|
||||
id="edit-packagelist",
|
||||
# data_hx_post=f"/list/{pkglist.id}/edit",
|
||||
_class=cls(
|
||||
"border",
|
||||
"bg-green-200",
|
||||
"hover:bg-green-400",
|
||||
"cursor-pointer",
|
||||
"w-8",
|
||||
"text-center",
|
||||
),
|
||||
),
|
||||
self.doc = doc
|
||||
|
||||
|
||||
def PackageListTable(pkglists):
|
||||
doc = t.div(id="packagelist-table")
|
||||
with doc:
|
||||
@@ -14,7 +61,6 @@ def PackageListTable(pkglists):
|
||||
_class=cls(
|
||||
"table",
|
||||
"table-auto",
|
||||
# "border-separate",
|
||||
"border-collapse",
|
||||
"border-spacing-0",
|
||||
"border",
|
||||
@@ -32,49 +78,6 @@ def PackageListTable(pkglists):
|
||||
)
|
||||
with t.tbody(data_hx_target="closest tr", data_hx_swap="outerHTML"):
|
||||
for pkglist in pkglists:
|
||||
t.tr(
|
||||
t.td(pkglist.name, _class=cls("border", "px-2")),
|
||||
t.td(str(pkglist.description), _class=cls("border", "px-2")),
|
||||
t.td(
|
||||
t.span(_class=cls("mdi", "mdi-delete", "text-xl")),
|
||||
id="delete-packagelist",
|
||||
data_hx_delete=f"/list/{pkglist.id}",
|
||||
_class=cls(
|
||||
"border",
|
||||
"bg-red-200",
|
||||
"hover:bg-red-400",
|
||||
"cursor-pointer",
|
||||
"w-8",
|
||||
"text-center",
|
||||
),
|
||||
),
|
||||
t.td(
|
||||
t.span(_class=cls("mdi", "mdi-pencil", "text-xl")),
|
||||
id="edit-packagelist",
|
||||
data_hx_post=f"/list/{pkglist.id}/edit",
|
||||
_class=cls(
|
||||
"border",
|
||||
"bg-blue-200",
|
||||
"hover:bg-blue-400",
|
||||
"cursor-pointer",
|
||||
"w-8",
|
||||
"text-center",
|
||||
),
|
||||
),
|
||||
t.td(
|
||||
t.span(_class=cls("mdi", "mdi-arrow-right", "text-xl")),
|
||||
id="edit-packagelist",
|
||||
# data_hx_post=f"/list/{pkglist.id}/edit",
|
||||
_class=cls(
|
||||
"border",
|
||||
"bg-green-200",
|
||||
"hover:bg-green-400",
|
||||
"cursor-pointer",
|
||||
"w-8",
|
||||
"text-center",
|
||||
),
|
||||
),
|
||||
_class=cls("h-10", "even:bg-gray-100", "hover:bg-purple-200"),
|
||||
)
|
||||
PackageListTableRow(pkglist).doc
|
||||
|
||||
return doc
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
from .NewPackageList import NewPackageList
|
||||
from .PackageListTable import PackageListTable
|
||||
from .PackageListManager import PackageListManager
|
||||
from .Home import Home
|
||||
|
||||
@@ -10,7 +10,7 @@ import dominate
|
||||
import dominate.tags as t
|
||||
from dominate.util import raw
|
||||
|
||||
from .components import PackageListManager
|
||||
from .components import PackageListManager, NewPackageList, Home
|
||||
|
||||
from flask import request, make_response
|
||||
|
||||
@@ -45,45 +45,45 @@ def delete_packagelist(id):
|
||||
|
||||
@app.route("/")
|
||||
def root():
|
||||
doc = dominate.document(title="My cool title")
|
||||
with doc.head:
|
||||
t.script(src="https://unpkg.com/htmx.org@1.7.0")
|
||||
t.script(src="https://cdn.tailwindcss.com")
|
||||
t.script(src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.js", defer=True)
|
||||
t.link(
|
||||
rel="stylesheet",
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css",
|
||||
)
|
||||
with doc:
|
||||
return make_response(
|
||||
Home(PackageListManager(get_packagelists()), app.root_path).doc.render(), 200
|
||||
)
|
||||
|
||||
t.script(raw(open(os.path.join(app.root_path, "js/app.js")).read()))
|
||||
PackageListManager(get_packagelists())
|
||||
|
||||
return make_response(doc.render(), 200)
|
||||
def is_htmx():
|
||||
return request.headers.get("HX-Request") is not None
|
||||
|
||||
|
||||
@app.route("/list/", methods=["POST"])
|
||||
def add_new_list():
|
||||
print(f"headers: {request.headers}")
|
||||
name = request.form["name"]
|
||||
description = request.form["description"]
|
||||
|
||||
error, errormsg = validate_name(name)
|
||||
|
||||
print(error, errormsg)
|
||||
if not error:
|
||||
if add_packagelist(name=name, description=description) is False:
|
||||
error = True
|
||||
errormsg = f'Name "{name}" already exists'
|
||||
|
||||
return make_response(
|
||||
PackageListManager(
|
||||
get_packagelists(),
|
||||
name=name,
|
||||
description=description,
|
||||
error=error,
|
||||
errormsg=errormsg,
|
||||
).render(),
|
||||
200,
|
||||
)
|
||||
if is_htmx():
|
||||
return make_response(
|
||||
str(
|
||||
PackageListManager(
|
||||
get_packagelists(),
|
||||
name=name,
|
||||
description=description,
|
||||
error=error,
|
||||
errormsg=errormsg,
|
||||
)
|
||||
),
|
||||
200 if error else 201,
|
||||
)
|
||||
else:
|
||||
r = make_response("", 303)
|
||||
r.headers["Location"] = "/"
|
||||
return r
|
||||
|
||||
|
||||
def validate_name(name):
|
||||
@@ -109,7 +109,7 @@ def validate_list_name():
|
||||
if PackageList.query.filter_by(name=name).first() is not None:
|
||||
error = True
|
||||
errormsg = f'Name "{name}" already exists'
|
||||
doc = new_pkglist_form(name=name, error=error, errormsg=errormsg)
|
||||
doc = NewPackageList(name=name, error=error, errormsg=errormsg)
|
||||
|
||||
return make_response(doc.render(), 200)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user