tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

refactor: rooms => zones

Browse source
This commit is contained in:
Andy Burke 2025-09-09 15:32:07 -07:00
parent 525568d368
commit 20a5d1bc88
27 changed files with 2466 additions and 2044 deletions
Download patch file Download diff file Expand all files Collapse all files

166
public/tabs/chat/chat.js
View file

@ -257,7 +257,7 @@ let time_tick_tock_class = "time-tock";
let last_creator_id = null;
let user_tick_tock_class = "user-tock";
function render_text_event(room_chat_content, event, creator, existing_element) {
function render_text_event(zone_chat_content, event, creator, existing_element) {
const event_datetime = datetime_to_local(event.timestamps.created);
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
@ -278,12 +278,14 @@ function render_text_event(room_chat_content, event, creator, existing_element)
id="show_message_actions-${message_id}"
class="message-actions-display-toggle"
/>
<label for="show_message_actions-${message_id}" class="message-actions-display-toggle-label"
><div class="icon more"></div>
<label class="message-actions-display-toggle-label" for="show_message_actions-${message_id}">
<div class="icon more-borderless"></div>
</label>
<div class="message-action" data-action="reply"><i class="icon reply"></i><span class="action-name">Reply</span></div>
<div class="message-action" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Forward (Copy Link)</span></div>
<div class="message-action" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></div>
<button class="message-action" data-action="react"><i class="icon more-circle"></i><span class="action-name">React</span></button>
<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${message_id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
<button class="message-action" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
<button class="message-action" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
</div>
<div class="info-container">
<div class="avatar-container">
@ -305,31 +307,31 @@ function render_text_event(room_chat_content, event, creator, existing_element)
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
} else {
room_chat_content.insertAdjacentHTML("beforeend", html_content);
zone_chat_content.insertAdjacentHTML("beforeend", html_content);
}
}
async function get_new_room_element() {
const existing_new_room_element = document.getElementById("new-room");
if (existing_new_room_element) {
return existing_new_room_element;
async function get_new_zone_element() {
const existing_new_zone_element = document.getElementById("new-zone");
if (existing_new_zone_element) {
return existing_new_zone_element;
}
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
const zone_list = document.getElementById("zone-list");
zone_list.insertAdjacentHTML(
"beforeend",
`<li id="new-room" class="room"><a href="" contenteditable="true">new room</a></li>`,
`<li id="new-zone" class="zone"><a href="" contenteditable="true">new zone</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_room_element = document.getElementById("new-room");
return new_room_element;
const new_zone_element = document.getElementById("new-zone");
return new_zone_element;
}
const users = {};
async function append_room_events(events) {
const room_chat_content = document.getElementById("room-chat-content");
let last_message_id = room_chat_content.dataset.last_message_id ?? "";
async function append_zone_events(events) {
const zone_chat_content = document.getElementById("zone-chat-content");
let last_message_id = zone_chat_content.dataset.last_message_id ?? "";
for (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
@ -339,8 +341,8 @@ async function append_room_events(events) {
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== room_chat_content.dataset.last_message_id) {
room_chat_content.dataset.last_message_id = last_message_id;
if (last_message_id !== zone_chat_content.dataset.last_message_id) {
zone_chat_content.dataset.last_message_id = last_message_id;
}
users[event.creator_id] =
@ -352,37 +354,37 @@ async function append_room_events(events) {
(event.meta?.temp_id
? document.getElementById(`chat-${event.meta.temp_id}`)
: undefined);
render_text_event(room_chat_content, event, users[event.creator_id], existing_element);
render_text_event(zone_chat_content, event, users[event.creator_id], existing_element);
}
room_chat_content.scrollTop = room_chat_content.scrollHeight;
zone_chat_content.scrollTop = zone_chat_content.scrollHeight;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change rooms, this is the most basic
// similar for when we change zones, this is the most basic
// first pass outline
let room_polling_request_abort_controller = null;
let zone_polling_request_abort_controller = null;
async function poll_for_new_events() {
const room_chat_content = document.getElementById("room-chat-content");
const room_id = room_chat_content.dataset.room_id;
const last_message_id = room_chat_content.dataset.last_message_id;
const zone_chat_content = document.getElementById("zone-chat-content");
const zone_id = zone_chat_content.dataset.zone_id;
const last_message_id = zone_chat_content.dataset.last_message_id;
if (!room_id) {
if (!zone_id) {
return;
}
const message_polling_url = `/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
const message_polling_url = `/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
room_polling_request_abort_controller =
room_polling_request_abort_controller || new AbortController();
zone_polling_request_abort_controller =
zone_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: room_polling_request_abort_controller.signal,
signal: zone_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = ((await new_events_response.json()) ?? []).reverse();
await append_room_events(new_events.toReversed());
poll_for_new_events(room_id);
await append_zone_events(new_events.toReversed());
poll_for_new_events(zone_id);
})
.catch((error) => {
// TODO: poll again? back off?
@ -390,37 +392,37 @@ async function poll_for_new_events() {
});
}
async function load_room(room_id) {
const room_chat_content = document.getElementById("room-chat-content");
async function load_zone(zone_id) {
const zone_chat_content = document.getElementById("zone-chat-content");
if (room_polling_request_abort_controller) {
room_polling_request_abort_controller.abort();
room_polling_request_abort_controller = null;
delete room_chat_content.dataset.last_message_id;
if (zone_polling_request_abort_controller) {
zone_polling_request_abort_controller.abort();
zone_polling_request_abort_controller = null;
delete zone_chat_content.dataset.last_message_id;
}
const room_response = await api.fetch(`/api/rooms/${room_id}`);
if (!room_response.ok) {
const error = await room_response.json();
const zone_response = await api.fetch(`/api/zones/${zone_id}`);
if (!zone_response.ok) {
const error = await zone_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const room = await room_response.json();
const zone = await zone_response.json();
room_chat_content.dataset.room_id = room.id;
room_chat_content.innerHTML = "";
zone_chat_content.dataset.zone_id = zone.id;
zone_chat_content.innerHTML = "";
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
if (room_selector.id === `room-selector-${room_id}`) {
room_selector.classList.add("active");
const zone_selectors = document.querySelectorAll("li.zone");
for (const zone_selector of zone_selectors) {
zone_selector.classList.remove("active");
if (zone_selector.id === `zone-selector-${zone_id}`) {
zone_selector.classList.add("active");
}
}
const events_response = await api.fetch(
`/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
`/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
@ -430,36 +432,36 @@ async function load_room(room_id) {
const events = (await events_response.json()).reverse();
await append_room_events(events);
poll_for_new_events(room_id);
await append_zone_events(events);
poll_for_new_events(zone_id);
}
let last_room_update = undefined;
async function update_chat_rooms() {
let last_zone_update = undefined;
async function update_chat_zones() {
const now = new Date();
const time_since_last_update = now - (last_room_update ?? 0);
const time_since_last_update = now - (last_zone_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
const rooms_response = await api.fetch("/api/rooms");
if (rooms_response.ok) {
const room_list = document.getElementById("room-list");
room_list.innerHTML = "";
const rooms = await rooms_response.json();
for (const room of rooms) {
room_list.insertAdjacentHTML(
const zones_response = await api.fetch("/api/zones");
if (zones_response.ok) {
const zone_list = document.getElementById("zone-list");
zone_list.innerHTML = "";
const zones = await zones_response.json();
for (const zone of zones) {
zone_list.insertAdjacentHTML(
"beforeend",
`<li id="room-selector-${room.id}" class="room"><a href="#/chat/room/${room.id}">${room.name}</a></li>`,
`<li id="zone-selector-${zone.id}" class="zone"><a href="#/chat/zone/${zone.id}">${zone.name}</a></li>`,
);
}
last_room_update = now;
last_zone_update = now;
}
}
window.addEventListener("locationchange", update_chat_rooms);
window.addEventListener("locationchange", update_chat_zones);
function check_for_room_in_url() {
function check_for_zone_in_url() {
const user_json = document.body.dataset.user;
if (!user_json) {
return;
@ -471,28 +473,28 @@ function check_for_room_in_url() {
return;
}
const first_room_id = document.querySelector("li.room")?.id.substring(14);
const first_zone_id = document.querySelector("li.zone")?.id.substring(14);
// #/chat/room/{room_id}
// #/chat/zone/{zone_id}
// ^ 12
const room_id = hash.substring(12) || first_room_id;
const zone_id = hash.substring(12) || first_zone_id;
if (!room_id) {
setTimeout(check_for_room_in_url, 100);
if (!zone_id) {
setTimeout(check_for_zone_in_url, 100);
return;
}
const room_chat_container = document.getElementById("room-chat-container");
const zone_chat_container = document.getElementById("zone-chat-container");
if (room_chat_container.dataset.room_id !== room_id) {
window.location.hash = `/chat/room/${room_id}`;
room_chat_container.dataset.room_id = room_id;
load_room(room_id);
if (zone_chat_container.dataset.zone_id !== zone_id) {
window.location.hash = `/chat/zone/${zone_id}`;
zone_chat_container.dataset.zone_id = zone_id;
load_zone(zone_id);
}
}
window.addEventListener("locationchange", check_for_room_in_url);
window.addEventListener("locationchange", check_for_zone_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_rooms();
check_for_room_in_url();
await update_chat_zones();
check_for_zone_in_url();
});