public setup

2024-08-19 14:56:20 +02:00
commit 4fac3fbfa3
18 changed files with 682 additions and 0 deletions
--- a/view/base.templ
+++ b/view/base.templ
@@ -0,0 +1,20 @@
+package view
+
+var Username string
+
+templ Base() {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<title>{ Username } Todos</title>
+			<meta charset="UTF-8"/>
+			<link href="/css/pico.min.css" rel="stylesheet"/>
+			<link href="/css/style.css" rel="stylesheet"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1"/>
+			<script src="/js/htmx.min.js"></script>
+		</head>
+		<body>
+			{ children... }
+		</body>
+	</html>
+}
--- a/view/components.templ
+++ b/view/components.templ
@@ -0,0 +1,66 @@
+package view
+
+import (
+	"git.wittern.io/public/echo-todos/model"
+	"strconv"
+)
+
+templ TodoForm() {
+	<form hx-on::after-request="this.reset()" hx-post="/todos" hx-target="#todoslist">
+		<fieldset role="group">
+			<input type="text" name="todo" required/><input value="Clear" type="reset"/>
+			<button type="submit">Add</button>
+		</fieldset>
+	</form>
+}
+
+templ TodosList(todos []model.Todo) {
+	<table class="striped" id="todoslist">
+		<thead>
+			<tr>
+				<th>Title</th>
+				<th>Done</th>
+				<th>Delete</th>
+			</tr>
+		</thead>
+		<tbody>
+			for _, todo := range todos {
+				@TodoRow(todo)
+			}
+		</tbody>
+	</table>
+}
+
+templ TodoRow(todo model.Todo) {
+	<tr id={ "todo-" + strconv.Itoa(todo.ID) }>
+		<td>{ todo.Title }</td>
+		if todo.Done {
+			<td><input hx-put={ "/todos/todo-" + strconv.Itoa(todo.ID) } hx-target="#todoslist" type="checkbox" name="done" checked/></td>
+		} else {
+			<td><input hx-put={ "/todos/todo-" + strconv.Itoa(todo.ID) } hx-target="#todoslist" type="checkbox" name="done"/></td>
+		}
+		<td><button hx-delete={ "/todos/todo-" + strconv.Itoa(todo.ID) } hx-target={ "#todo-" + strconv.Itoa(todo.ID) } hx-swap="delete">Delete</button></td>
+	</tr>
+}
+
+templ ErrorPage(message string) {
+	@Base() {
+		<container>
+			<h1>{ message }</h1>
+		</container>
+	}
+}
+
+templ Hero(AppTitle string) {
+	@Centered() {
+		<div class="hero">
+			<h1>{ AppTitle }</h1>
+		</div>
+	}
+}
+
+templ Centered() {
+	<div id="centered-div" class="container centered">
+		{ children... }
+	</div>
+}
--- a/view/index.templ
+++ b/view/index.templ
@@ -0,0 +1,13 @@
+package view
+
+import "git.wittern.io/public/echo-todos/model"
+
+templ Index(todos []model.Todo) {
+	@Base() {
+		<main class="container">
+			<h1>{ Username } Todos</h1>
+			@TodoForm()
+			@TodosList(todos)
+		</main>
+	}
+}