jbergner
9ee6d3c919
All checks were successful
release-tag / release-image (push) Successful in 1m41s
70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.Title}} · SEND.NRW Chat</title>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header class="topbar">
|
|
<a class="brand" href="/rooms">SEND.NRW Chat</a>
|
|
<form method="post" action="/logout">
|
|
{{if .CanAdmin}}<a class="ghost link-button" href="/admin">Admin</a>{{end}}
|
|
<span class="user-pill">{{.Username}} · {{.User.Role}}</span>
|
|
<button class="ghost" type="submit">Logout</button>
|
|
</form>
|
|
</header>
|
|
|
|
<main class="chat-page">
|
|
<aside class="card sidebar">
|
|
<a class="back" href="/rooms">← Zur Raumliste</a>
|
|
<p class="eyebrow">Chatraum</p>
|
|
<h1>{{.Room.Name}}</h1>
|
|
<p class="muted">{{.Room.Description}}</p>
|
|
<div class="hint">Lesen: {{.Room.ReadAccess}}<br>Schreiben: {{.Room.WriteAccess}}</div>
|
|
{{if .Room.Members}}<div class="hint">Mitglieder: {{join .Room.Members ", "}}</div>{{end}}
|
|
</aside>
|
|
|
|
<section class="chat-card card">
|
|
<div id="messages" class="messages">
|
|
{{range .Messages}}
|
|
{{template "partials/message.html" .}}
|
|
{{else}}
|
|
<div class="empty">Noch keine Nachrichten. Schreib die erste.</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
{{if .CanWrite}}
|
|
<form id="message-form" class="message-form" hx-post="/rooms/{{.Room.ID}}/messages" hx-swap="none" hx-on::after-request="if(event.detail.successful) this.reset()">
|
|
<input name="body" placeholder="Nachricht schreiben …" autocomplete="off" required maxlength="2000">
|
|
<button type="submit">Senden</button>
|
|
</form>
|
|
{{else}}
|
|
<div class="hint">Du hast in diesem Raum nur Leserechte.</div>
|
|
{{end}}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const messages = document.getElementById('messages');
|
|
const source = new EventSource('/rooms/{{.Room.ID}}/events');
|
|
function scrollDown() { messages.scrollTop = messages.scrollHeight; }
|
|
source.addEventListener('message', function (event) {
|
|
const data = JSON.parse(event.data);
|
|
const empty = messages.querySelector('.empty');
|
|
if (empty) empty.remove();
|
|
messages.insertAdjacentHTML('beforeend', data.html);
|
|
scrollDown();
|
|
});
|
|
window.addEventListener('beforeunload', function () { source.close(); });
|
|
scrollDown();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|