Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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
/** @jsxImportSource https://esm.sh/preact */
import css from "https://esm.town/v/kajgod/manage_users_css";
import { getDatabaseStructure, getFormData, getUsersList } from "https://esm.town/v/kajgod/manage_users_db";
import js from "https://esm.town/v/kajgod/manage_users_js";
import { render } from "npm:preact-render-to-string";
const UserRow = ({ user }) => {
const [id, name, surname, email, timestamp] = user;
return (
<tr>
<td>{name} {surname}</td>
<td>{email}</td>
<form method="POST">
<td>
<input type="hidden" name="action" value="update-date" />
<input type="hidden" name="id" value={id} />
<input
type="date"
name="timestamp"
value={(new Date(timestamp * 1000)).toISOString().split("T")[0]}
/>
</td>
<td className="icon">
<button>💾</button>
</td>
</form>
<form method="POST">
<input type="hidden" name="action" value="delete" />
<input type="hidden" name="id" value={id} />
<td className="icon">
<button>❌</button>
</td>
</form>
</tr>
);
};
export default async function(req: Request) {
const struct = await getDatabaseStructure();
const users = await getFormData(req, struct);
return new Response(
render(
<html>
<head>
<title>Users management</title>
<style dangerouslySetInnerHTML={{ __html: css }} />
</head>
<body>
<div className="users-table">
<p>Users</p>
<table>
{users
.map(v => <UserRow user={v} />)}
</table>
</div>
<div className="add-user_container">
<div className="add-user_button">Add user</div>
<div className="add-user_form">
<form method="POST">
{struct.map(v => v[1])}
<input type="hidden" name="action" value="submit" />
<button>Save a user</button>
<button className="cancel-add-user">Cancel</button>
</form>
</div>
</div>
<script dangerouslySetInnerHTML={{ __html: js }} />
</body>
</html>,
),
{
headers: {
"Content-Type": "text/html; charset=utf-8",
},
},
);
}