-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponents.templ
143 lines (136 loc) · 3.62 KB
/
components.templ
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
package main
templ BaseView(title string) {
<!DOCTYPE html>
<html>
<head>
<title>{ title }</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://unpkg.com/98.css"/>
<link rel="stylesheet" href="/static/styles.css"/>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
</head>
<body>
{ children... }
</body>
</html>
}
templ IndexView() {
@WindowView("Chat with a Fuse!") {
<p>
Each chat has a fuse that counts down.
If the fuse runs out, the chat closes and deletes itself.
Writing a message to the chat resets the fuse.
</p>
<div class="button-row">
<form action="/new">
<button type="submit">Create New Chat</button>
</form>
</div>
}
}
templ WindowView(title string) {
@BaseView(title) {
<main class="window">
<div class="title-bar">
<div class="title-bar-text">{ title }</div>
<div class="title-bar-controls">
<form action="/">
<button aria-label="Close" type="submit"></button>
</form>
</div>
</div>
<div class="window-body">
{ children... }
</div>
</main>
}
}
templ ChatEndView() {
@WindowView("Chat Ended") {
<div class="chat-end-message">
<img src="/static/msg_error-0.png" alt="" width="20" height="20"/>
<span>This Chat has ended.</span>
</div>
<div class="button-row">
<form action="/">
<button type="submit">Return to Home</button>
</form>
<form action="/new">
<button type="submit">Create New Chat</button>
</form>
</div>
}
}
// hx-on::after-settle workaround: https://github.com/bigskysoftware/htmx/issues/784
templ ChatView(chat *Chat, client *Client) {
@WindowView("Go Chat!") {
<fieldset>
<legend>
<div class="group-header">
<img src="/static/address_book_pad_users.png" alt="" width="20" height="20"/>
Invite Others
</div>
</legend>
<input class="url-field" type="text" value={ chat.URL() } hx-on:click="this.select()" readonly/>
</fieldset>
<fieldset>
<legend>
<div class="group-header">
<img src="/static/network_normal_two_pcs-4.png" alt="" width="20" height="20"/>
Messages | You are: { client.Name }
</div>
</legend>
<div
class="sunken-panel chat-messages"
hx-ext="sse"
sse-connect={ "/c/" + chat.id + "/sse" }
sse-swap="message"
hx-swap="beforeend"
hx-on::after-settle="this.scrollTo(0, this.scrollHeight);"
>
<div hx-get="/end" hx-trigger="sse:end" hx-swap="none"></div>
</div>
</fieldset>
<form method="post" hx-post hx-on::after-request="this.reset()" autocomplete="off">
<fieldset>
<legend id="message-label">
<div class="group-header">
<img src="/static/envelope_closed-0.png" alt="" width="20" height="20"/>
New Message
</div>
</legend>
<div class="chat-form">
<input
type="text"
name="message"
aria-labelledby="message-label"
required
/>
<button type="submit">Send</button>
</div>
</fieldset>
</form>
@ChatStatusView(chat)
}
}
templ MessageView(m *Message, isAuthor bool) {
<div data-author?={ isAuthor } class="message-view">
<span class="message-view-author">{ m.client.Name }: </span>
<span>{ m.text }</span>
</div>
}
templ ChatStatusView(chat *Chat) {
<div
class="status-bar"
hx-get={ "/c/" + chat.id + "/status" }
hx-trigger="every 1s"
hx-swap="outerHTML"
hx-target="this"
>
<p class="status-bar-field">{ chat.TimeRemaining() } </p>
<p class="status-bar-field">{ chat.Connections() }</p>
<p class="status-bar-field">{ chat.Age() }</p>
</div>
}