1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource npm:hono/jsx **/
import { html, raw } from "npm:hono/html";
import { Hono } from "npm:hono@4.2.6";
// import val sqlite
import { sqlite } from "https://esm.town/v/std/sqlite";
const app = new Hono();
const title = "Click Button Demo";
const View = ({ rows }) => {
// create search form
// create html table from all rows
return (
<html>
<head>
{html`
<script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.js" integrity="sha384-qbtR4rS9RrUMECUWDWM2+YGgN3U4V4ZncZ0BvUcg9FGct0jqXz3PUdVpU1p0yrXS" crossorigin="anonymous"></script>
`}
</head>
<body>
<h1>{title}</h1>
<div>
<h3 id="parent-div">Start Demo</h3>
Search:{" "}
<input
class="form-control"
type="search"
name="search"
placeholder="Begin Typing To Search Users..."
hx-post="/search"
hx-trigger="input changed delay:500ms, search"
hx-target="#search-results"
hx-indicator=".htmx-indicator"
>
</input>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</tr>
</thead>
<tbody id="search-results">
{rows.map((row) => (
<tr>
<td>{row[0]}</td>
<td>{row[1]}</td>
<td>{row[2]}</td>
<td>{row[3]}</td>
</tr>
))}
</tbody>
</table>
</div>
</body>
</html>
);
};
app.get("/", async (c) => {
// get all sql lite messages as rows but filter if name is "undefined"
const select = `SELECT * FROM messages WHERE name != 'undefined' LIMIT 10`;
const result = await sqlite.execute(select);
// console.log(result);
const rows = result.rows;
console.log(rows);
// pass all
// rows to the view
return c.html(<View rows={rows} />);
});
const Clicked = () => {
return <h3 id="parent-div">Finish Demo</h3>;
};
app.post("/clicked", (c) => {
return c.html(<Clicked />);
});
// create POST to handle search form input
// filter messages table using LIKE on message table
app.post("/search", async (c) => {
// get post parameters: {"search": <input value>}
const body = await c.req.parseBody();
console.log(body);
const search = body["search"];
console.log(search);
// check if search is empty
let selectQuery = `SELECT * FROM messages WHERE message LIKE '%${search}%' AND name != 'undefined' LIMIT 10`;
console.log(selectQuery);
const result = await sqlite.execute(selectQuery);
console.log(result);
const rows = result.rows;
return c.html(
<tbody id="search-results">
{rows.map((row) => (
<tr>
<td>{row[0]}</td>