refactor: zones => topics

This commit is contained in:
Andy Burke 2025-09-10 12:51:27 -07:00
parent 20a5d1bc88
commit fac8f409f4
26 changed files with 470 additions and 469 deletions

View file

@ -22,21 +22,21 @@
<label id="sidebar-toggle-icon" for="sidebar-toggle">
<div class="icon right"></div>
</label>
<div id="zone-creation-container" data-requires-permission="zones.create">
<div id="topic-creation-container" data-requires-permission="topics.create">
<button
id="toggle-zone-creation-form-button"
id="toggle-topic-creation-form-button"
onclick="((event) => {
event.preventDefault();
const zone_create_form = document.getElementById( 'zone-create' );
zone_create_form.style[ 'height' ] = zone_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
const topic_create_form = document.getElementById( 'topic-create' );
topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
})(event)"
>
<div class="icon plus"></div>
</button>
<form
id="zone-create"
id="topic-create"
data-smart="true"
action="/api/zones"
action="/api/topics"
method="POST"
style="
margin-top: 1rem;
@ -48,11 +48,11 @@
"
>
<input
id="new-zone-name-input"
id="new-topic-name-input"
type="text"
name="name"
value=""
placeholder="new zone"
placeholder="new topic"
/>
<!-- <button class="primary" type="submit">
<div class="icon plus"></div>
@ -61,34 +61,34 @@
<script>
{
const form = document.currentScript.closest("form");
const zone_create_form = document.getElementById("zone-create");
const new_zone_name_input =
document.getElementById("new-zone-name-input");
const topic_create_form = document.getElementById("topic-create");
const new_topic_name_input =
document.getElementById("new-topic-name-input");
form.on_reply = (new_zone) => {
const zone_list = document.getElementById("zone-list");
zone_list.insertAdjacentHTML(
form.on_reply = (new_topic) => {
const topic_list = document.getElementById("topic-list");
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="zone-selector-${new_zone.id}" class="zone"><a href="#/zone/${new_zone.id}">${new_zone.name}</a></li>`,
`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
);
new_zone_name_input.value = "";
window.location.hash = `/chat/zone/${new_zone.id}`;
zone_create_form.style["height"] = "0";
new_topic_name_input.value = "";
window.location.hash = `/chat/topic/${new_topic.id}`;
topic_create_form.style["height"] = "0";
};
}
</script>
</form>
</div>
<div>
<span class="title">chat zones</span>
<span class="title">chat topics</span>
</div>
<ul id="zone-list" class="zone-list"></ul>
<ul id="topic-list" class="topic-list"></ul>
</div>
<div id="zone-chat-container">
<div id="zone-chat-content"></div>
<div id="zone-chat-entry-container">
<form id="zone-chat-entry" action="" data-smart="true" data-method="POST">
<div id="topic-chat-container">
<div id="topic-chat-content"></div>
<div id="topic-chat-entry-container">
<form id="topic-chat-entry" action="" data-smart="true" data-method="POST">
<input id="parent-id" type="hidden" name="parent_id" value="" />
<input
id="file-upload-and-share-input"
@ -101,12 +101,12 @@
<div class="icon attachment"></div>
</label>
<textarea
id="zone-chat-input"
class="zone-chat-input"
id="topic-chat-input"
class="topic-chat-input"
rows="1"
name="data.message"
></textarea>
<button id="zone-chat-send" class="primary" aria-label="Send a message">
<button id="topic-chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i>
</button>
<script>
@ -115,11 +115,12 @@
const file_input = document.querySelector(
'input[name="file-upload-and-share"]',
);
const chat_input = document.getElementById("zone-chat-input");
const chat_input = document.getElementById("topic-chat-input");
const parent_id_input = document.getElementById("parent-id");
const zone_chat_container =
document.getElementById("zone-chat-container");
const zone_chat_content = document.getElementById("zone-chat-content");
const topic_chat_container =
document.getElementById("topic-chat-container");
const topic_chat_content =
document.getElementById("topic-chat-content");
let messages_in_flight = {};
@ -131,9 +132,9 @@
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const zone_id = zone_chat_container.dataset.zone_id;
if (!zone_id) {
alert("Failed to get zone_id!");
const topic_id = topic_chat_container.dataset.topic_id;
if (!topic_id) {
alert("Failed to get topic_id!");
return false;
}
@ -171,7 +172,7 @@
return false;
}
form.action = `/api/zones/${zone_id}/events`;
form.action = `/api/topics/${topic_id}/events`;
};
form.on_parsed = (json) => {
@ -198,7 +199,7 @@
}
const user = JSON.parse(document.body.dataset.user);
render_text_event(zone_chat_content, json, user);
render_text_event(topic_chat_content, json, user);
document
.getElementById(`chat-${temp_id}`)
?.classList.add("sending");
@ -215,7 +216,7 @@
.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
?.classList.remove("sending");
append_zone_events([sent_message]);
append_topic_events([sent_message]);
parent_id_input.value = "";
chat_input.value = "";
chat_input.focus();