diff --git a/.vscode/settings.json b/.vscode/settings.json index 5b3225f..966bcc8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,7 @@ { "cSpell.words": [ "TAUTH", + "tcommon", "tmessage" ] } diff --git a/tmessage/settings.py b/tmessage/settings.py index 7132d3f..7ff0c76 100644 --- a/tmessage/settings.py +++ b/tmessage/settings.py @@ -19,6 +19,7 @@ SECRET_KEY = config["services"]["message"]["token"] BASE_DIR = Path(__file__).resolve().parent.parent +STATIC_DIR = BASE_DIR / "tmessage/static" ALLOWED_HOSTS = ["*"] INSTALLED_APPS = [ @@ -74,6 +75,4 @@ LANGUAGE_CODE = "en-us" TIME_ZONE = "UTC" USE_I18N = True USE_TZ = True -STATIC_URL = "/static/" DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField" -STATIC_ROOT = BASE_DIR / "collected-static" diff --git a/tmessage/static/css/messages.css b/tmessage/static/css/messages.css new file mode 100644 index 0000000..d490f7a --- /dev/null +++ b/tmessage/static/css/messages.css @@ -0,0 +1,17 @@ +.message-container { + width: calc(90vw - 40px); + max-width: 400px; + padding: 20px; + margin: 0 auto; + margin-bottom: 30px; + border-radius: 6px; + outline: 1px solid rgb(var(--accent)); + text-align: left; +} + +.message-container textarea { + width: calc(90vw - 52px); + max-width: 388px; + resize: vertical; + height: 100px; +} diff --git a/tmessage/static/js/messages.js b/tmessage/static/js/messages.js new file mode 100644 index 0000000..b08a081 --- /dev/null +++ b/tmessage/static/js/messages.js @@ -0,0 +1,80 @@ +let offset; +let timelineElement = document.getElementById("messages"); + +function escapeHTML(content) { + return content.replaceAll("&", "&").replaceAll("<", ">").replaceAll(">", "<"); +} + +function getMessageHTML(messageJSON, canRespond) { + return `
`; +} + +function _updateURL_replaceElement(element, to) { + let newElement = document.createElement(to); + newElement.dataset.url = element.dataset.url; + newElement.dataset.id = element.dataset.id; + newElement.innerHTML = element.innerHTML; + newElement.setAttribute("href", element.getAttribute("href")); + + if (to == "a") { + newElement.classList.add("not-bold"); + } + + element.replaceWith(newElement); +} + +function updateURL(switchID) { + let switchElement = document.getElementById("switch").querySelector(`[data-id="${switchID}"]`); + + for (const el of document.getElementById("switch").querySelectorAll("b")) { + _updateURL_replaceElement(el, "a"); + } + + _updateURL_replaceElement(switchElement, "b"); + url = switchElement.dataset.url; + fetchMessages(true); +} + +function fetchMessages(fetchFromStart=false) { + document.getElementById("refresh").setAttribute("disabled", ""); + timelineElement.innerHTML = "Loading..." + + fetch(url + (fetchFromStart === true ? "" : `${url.includes("?") ? "&" : "?"}offset=${offset}`)) + .then((response) => (response.json())) + .then((json) => { + if (json.success) { + out = ""; + + if (json.messages.length == 0) { + out = "No messages"; + } else { + for (const message of json.messages) { + out += getMessageHTML(message, json.canRespond); + offset = message.id; + } + } + + timelineElement.innerHTML = out; + } else { + timelineElement.innerText = "Something went wrong!"; + } + }) + .catch((err) => { + timelineElement.innerText = `Couldn't fetch timeline: ${err}`; + document.getElementById("refresh").removeAttribute("disabled"); + }); +} + +fetchMessages(true); +document.getElementById("refresh").addEventListener("click", (() => { fetchMessages(true); })); diff --git a/tmessage/templates/message.html b/tmessage/templates/message.html index 8412010..b996a6d 100644 --- a/tmessage/templates/message.html +++ b/tmessage/templates/message.html @@ -6,7 +6,7 @@