Update Other Content

from fasthtml.common import H3, Div, Form, Input, Label, Script, Style, Table, Tbody, Td, Th, Thead, Tr, fast_app

css = """
.selected {
  color: rgb(16, 149, 193);
  cursor: pointer;
}
"""
app, rt = fast_app(hdrs=[Style(css)])

data = [
    ("phi", "phi@example.com"),
    ("grace", "grace@example.com"),
]


@app.get
def page():
    return Div(cls="container")(
        Div(hx_get=solution.rt(idx=1), hx_trigger="load delay:100ms", hx_target="this", hx_swap="innerHTML")
    )


@app.get
def solution(idx: int):
    return Div(
        Div(
            Div(style="display:flex;gap:15px")(
                Label("Solution 1", hx_get=solution.rt(idx=1), cls="selected" if idx == 1 else None),
                Label("Solution 2", hx_get=solution.rt(idx=2), cls="selected" if idx == 2 else None),
                Label("Solution 3", hx_get=solution.rt(idx=3), cls="selected" if idx == 3 else None),
                Label("Solution 4", hx_get=solution.rt(idx=4), cls="selected" if idx == 4 else None),
            ),
        ),
        Div(
            H3(f"Solution {idx}"),
            [solution1, solution2, solution3, solution4][idx - 1](),
        ),
    )


# ---- Solution 1 ----


def solution1():
    return Div(hx_target="this")(
        Table(
            Thead(Tr(Th("Name"), Th("Email"), Th())),
            Tbody(*[Tr(Td(d) for d in row) for row in data]),
        ),
        Form(form_fields(), hx_post=solution1_add_contact, hx_swap="outerHTML"),
    )


@app.post("/solution1/contacts")
def solution1_add_contact(name: str, email: str):
    add_contact(name, email)
    return solution1()


# ---- Solution 2 ----


def solution2():
    return Div()(
        Table(
            Thead(Tr(Th("Name"), Th("Email"), Th())),
            Tbody(id="table")(*[Tr(Td(d) for d in row) for row in data]),
        ),
        Form(form_fields(), hx_post=solution2_add_contact, hx_target="this"),
    )


@app.post("/solution2/contacts")
def solution2_add_contact(name: str, email: str):
    add_contact(name, email)
    return (
        Tbody(hx_swap_oob="beforeend:#table")(Tr(Td(name), Td(email))),
        form_fields(),
    )


# ---- Solution 3 ----


def solution3():
    return Div()(
        Div(
            Table(
                Thead(Tr(Th("Name"), Th("Email"), Th())),
                Tbody(id="table", hx_get=solution3_contacts_table, hx_trigger="newContact from:body", hx_target="this")(
                    *[Tr(Td(d) for d in row) for row in data]
                ),
            ),
        ),
        Form(form_fields(), hx_post=solution3_add_contact, hx_target="this"),
    )


@app.get("/solution3/contacts/table")
def solution3_contacts_table():
    return [Tr(Td(d) for d in row) for row in data]


@app.post("/solution3/contacts")
def solution3_add_contact(name: str, email: str):
    add_contact(name, email)
    return (
        form_fields(),
        Script("htmx.trigger('body', 'newContact')"),
    )


# ---- Solution 4 ----


def solution4():
    return (
        Script(src="https://unpkg.com/htmx-ext-path-deps@2.0.0/path-deps.js"),
        Div(hx_ext="path-deps")(
            Table(
                Thead(Tr(Th("Name"), Th("Email"), Th())),
                Tbody(
                    hx_get=solution4_contacts_table,
                    hx_trigger="path-deps",
                    path_deps="/update-other-content/solution4/contacts",
                    hx_target="this",
                )(*[Tr(Td(d) for d in row) for row in data]),
            ),
            Form(form_fields(), hx_post=solution4_add_contact, hx_target="this"),
        ),
    )


@app.get("/solution4/contacts/table")
def solution4_contacts_table():
    return [Tr(Td(d) for d in row) for row in data]


@app.post("/solution4/contacts")
def solution4_add_contact(name: str, email: str):
    add_contact(name, email)
    return form_fields()


# ---- Utilities ----


def form_fields():
    return Div(style="display:flex;gap:5px")(
        Label("Name", Input(name="name")), Label("Email", Input(name="email")), Input(type="submit", hidden=True)
    )


def add_contact(name, email):
    global data
    data.append([name, email])
    data = data[-5:]

Server Calls