andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: finish UX refactor and move events storage

Browse source
This commit is contained in:
Andy Burke 2025-09-12 09:24:22 -07:00
parent 4347d20263
commit f760156651
10 changed files with 269 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

163
public/tabs/forum/forum.html
View file

@ -16,8 +16,165 @@
<div class="label">Forum</div></label
>
<div class="tab-content forum-container">
<button>
<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Thread
</button>
<div id="forum-thread-list"></div>
<div id="thread-creation-container" data-requires-permission="topics.threads.write">
<button
onclick="(() => { document.querySelector( '#thread-creation' ).classList.toggle( 'collapsed' ); })()"
class="mockup"
>
<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New
Thread
</button>
<form
id="thread-creation"
data-smart="true"
action="/api/topics"
method="POST"
class="collapsed mockup"
style="
margin-top: 1rem;
width: 100%;
overflow: hidden;
overflow: hidden;
transition: all 0.5s;
"
>
<input
id="new-thread-subject"
type="text"
name="data.subject"
value=""
placeholder="Thread subject..."
style="margin-bottom: 1rem"
class="mockup"
/>
<input
id="file-upload-and-share-input-for-thread"
aria-label="Upload and share file"
type="file"
multiple
/>
<label for="file-upload-and-share-input-for-thread" class="mockup">
<div class="icon attachment"></div>
</label>
<textarea
id="new-thread-content"
type="text"
name="data.content"
value=""
placeholder=" ... "
class="mockup"
></textarea>
<input type="submit" hidden />
<script>
{
const form = document.currentScript.closest("form");
const file_input = document.querySelector('input[type="file"]');
const subject_input = document.getElementById('input[name="subject"]');
const content_input = document.getElementById('input[name="content"]');
const parent_id_input = document.getElementById("parent-id");
const forum_thread_list = document.getElementById("forum-thread-list");
let threads_in_flight = {};
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const topic_id = document.body.dataset.topic;
if (!topic_id) {
alert("Failed to get topic_id!");
return false;
}
form.uploaded_urls = [];
form.errors = [];
for await (const file of file_input.files) {
const body = new FormData();
body.append("file", file, encodeURIComponent(file.name));
const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
const file_upload_response = await api.fetch(file_path, {
method: "PUT",
body,
});
if (!file_upload_response.ok) {
const error = await file_upload_response.json();
form.errors.push(error?.error?.message ?? "Unknown error.");
continue;
}
const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
form.uploaded_urls.push(file_url);
}
if (form.errors.length) {
const errors = form.errors.join("\n\n");
alert(errors);
return false;
}
const message = chat_input.value.trim();
if (form.uploaded_urls.length === 0 && message.length === 0) {
return false;
}
form.action = `/api/topics/${topic_id}/events`;
};
form.on_parsed = (json) => {
const now = new Date().toISOString();
const temp_id = `TEMP-${now}`;
json.id = temp_id;
json.type = "chat";
json.meta = {
temp_id,
};
json.timestamps = {
created: now,
updated: now,
};
if (form.uploaded_urls.length) {
json.data = json.data ?? {};
json.data.content =
(typeof json.data.content === "string" &&
json.data.content.trim().length
? json.data.content.trim() + "\n"
: "") + form.uploaded_urls.join("\n");
}
const user = JSON.parse(document.body.dataset.user);
render_text_event(topic_chat_content, json, user);
document.getElementById(`chat-${temp_id}`)?.classList.add("sending");
};
form.on_error = (error) => {
// TODO: mark the temporary message element with the failed class?
alert(error);
chat_input.focus();
};
form.on_reply = (sent_message) => {
document
.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
?.classList.remove("sending");
append_topic_events([sent_message]);
parent_id_input.value = "";
chat_input.value = "";
chat_input.focus();
};
}
</script>
</form>
</div>
</div>
</div>