` page content; `Container` is a tiny function that generates that. # A handler can return either a single `FT` object or string, or a tuple of them. # In the case of a tuple, the stringified objects are concatenated and returned to the browser. # The `Title` tag has a special purpose: it sets the title of the page. return Title(title), Container(top, card) # This is the handler for the reordering of todos. # It's a POST request, which is used by the 'sortable' js library. # Because the todo list form created earlier included hidden inputs with the todo IDs, # they are passed as form data. By using a parameter called (e.g) "id", FastHTML will try to find # something suitable in the request with this name. In order, it searches as follows: # path; query; cookies; headers; session keys; form data. # Although all these are provided in the request as strings, FastHTML will use your parameter's type # annotation to try to cast the value to the requested type. # In the case of form data, there can be multiple values with the same key. So in this case, # the parameter is a list of ints. @rt("/reorder") def post(id:list[int]): for i,id_ in enumerate(id): todos.update({'priority':i}, id_) # HTMX by default replaces the inner HTML of the calling element, which in this case is the todo list form. # Therefore, we return the list of todos, now in the correct order, which will be auto-converted to FT for us. # In this case, it's not strictly necessary, because sortable.js has already reorder the DOM elements. # However, by returning the updated data, we can be assured that there aren't sync issues between the DOM # and the server. return tuple(todos(order_by='priority')) # Refactoring components in FastHTML is as simple as creating Python functions. # The `clr_details` function creates a Div with specific HTMX attributes. # `hx_swap_oob='innerHTML'` tells HTMX to swap the inner HTML of the target element out-of-band, # meaning it will update this element regardless of where the HTMX request originated from. def clr_details(): return Div(hx_swap_oob='innerHTML', id='current-todo') # This route handler uses a path parameter `{id}` which is automatically parsed and passed as an int. @rt("/todos/{id}") def delete(id:int): # The `delete` method is part of the MiniDataAPI spec, removing the item with the given primary key. todos.delete(id) # Returning `clr_details()` ensures the details view is cleared after deletion, # leveraging HTMX's out-of-band swap feature. # Note that we are not returning *any* FT component that doesn't have an "OOB" swap, so the target element # inner HTML is simply deleted. That's why the deleted todo is removed from the list. return clr_details() @rt("/edit/{id}") def get(id:int): # The `hx_put` attribute tells HTMX to send a PUT request when the form is submitted. # `target_id` specifies which element will be updated with the server's response. res = Form(Group(Input(id="title"), Button("Save")), Hidden(id="id"), CheckboxX(id="done", label='Done'), Textarea(id="details", name="details", rows=10), hx_put="/", target_id=f'todo-{id}', id="edit") # `fill_form` populates the form with existing todo data, and returns the result. # Indexing into a table (`todos`) queries by primary key, which is `id` here. It also includes # `xtra`, so this will only return the id if it belongs to the current user. return fill_form(res, todos[id]) @rt("/") def put(todo: Todo): # `update` is part of the MiniDataAPI spec. # Note that the updated todo is returned. By returning the updated todo, we can update the list directly. # Because we return a tuple with `clr_details()`, the details view is also cleared. return todos.update(todo), clr_details() @rt("/") def post(todo:Todo): # `hx_swap_oob='true'` tells HTMX to perform an out-of-band swap, updating this element wherever it appears. # This is used to clear the input field after adding the new todo. new_inp = Input(id="new-title", name="title", placeholder="New Todo", hx_swap_oob='true') # `insert` returns the inserted todo, which is appended to the start of the list, because we used # `hx_swap='afterbegin'` when creating the todo list form. return todos.insert(todo), new_inp @rt("/todos/{id}") def get(id:int): todo = todos[id] # `hx_swap` determines how the update should occur. We use "outerHTML" to replace the entire todo `Li` element. btn = Button('delete', hx_delete=f'/todos/{todo.id}', target_id=f'todo-{todo.id}', hx_swap="outerHTML") # The "markdown" class is used here because that's the CSS selector we used in the JS earlier. # Therefore this will trigger the JS to parse the markdown in the details field. # Because `class` is a reserved keyword in Python, we use `cls` instead, which FastHTML auto-converts. return Div(H2(todo.title), Div(todo.details, cls="markdown"), btn) serve()