SvinChat/src/views/chat.ejs

<div class="chats-container">
    <div class="chat-header">
        <a href="/" class="action">
            <img src="/img/back.png" />
        </a>
        <span class="chat-title"><%- title %></span>
    </div>
    <div id="message-list" class="message-list">
        <% if (empty) { %>
            <p class="empty-label">No messages</p>
        <% } %>
        <% messages.forEach(function(message) { %>
            <% if (message.username === username) { %>
            <div class="message align-end">
                <% if (message.attachment !== null) { %>
                <a href="/preview/<%- message.attachment %>" target="_blank">
                    <img src="/thumbnail/<%- message.attachment %>" />
                </a>
                <% } %>
                <div class="message-text user-message">
            <% } else { %>
            <div class="message align-start">
                <% if (message.attachment !== null) { %>
                <a href="/preview/<%- message.attachment %>" target="_blank">
                    <img src="/thumbnail/<%- message.attachment %>" />
                </a>
                <% } %>
                <div class="message-text friend-message">
            <% } %>
                    <%- message.text %>
                </div>
                <span class="message-datetime"><%- message.datetime %></span>
            </div>
        <% }); %>
        <% if (hasMoreMessages) { %>
            <form id="load-more" onsubmit="return onLoadMoreClick(event)">
                <input type="submit" value="Load More" class="load-more" />
            </form>
        <% } %>
    </div>
    <div id="attachment-preview">
        <span id="attachment-filename"></span>
        <span onclick="onAttachmentClose(event)" id="attachment-close" class="action">
            <img src="/img/close.png" />
        </span>
    </div>
    <form onsubmit="return onMessageSubmit(event)" class="input-form">
        <label for="message-attachment" class="action">
            <img src="/img/clip.png" />
        </label>
        <input type="file" id="message-attachment" name="attachment" onchange="onAttachmentChange(this)" accept=".jpg, .jpeg, .png, .webp, .avif" />
        <input type="text" id="message-input" name="text" placeholder="Enter message..." class="text-input" autocomplete="off" required />
        <input type="submit" value="Send" class="button" />
    </form>
    <span id="version" class="version">SvinChat v<%- version %></span>
</div>
<script>
    var pollRequest = null
    var firstTimestamp = new Date("<%- firstTimestamp %>").toISOString()
    var lastTimestamp = new Date().toISOString()
    var version = document.getElementById("version")
    var loadMoreForm = document.getElementById("load-more")
    var messageList = document.getElementById("message-list")
    var messageInput = document.getElementById("message-input")
    var attachmentInput = document.getElementById("message-attachment")
    var attachmentName = document.getElementById("attachment-filename")
    var timestamps = document.getElementsByClassName("message-datetime")
    for (var i = 0; i < timestamps.length; i++) {
        var timestamp = timestamps[i]
        timestamp.innerText = new Date(timestamp.innerText).toLocaleString()
    }
    function addMessage(message, target) {
        var container = document.createElement("div")
        var textSpan = document.createElement("span")
        var datetimeSpan = document.createElement("span")
        if (message.username === "<%- username %>") {
            container.className = "message align-end"
            textSpan.className = "message-text user-message"
        } else {
            container.className = "message align-start"
            textSpan.className = "message-text friend-message"
        }
        datetimeSpan.className = "message-datetime"
        textSpan.innerHTML = message.text
        datetimeSpan.innerText = new Date(message.datetime).toLocaleString()
        if (message.attachment) {
            var attachmentLink = document.createElement("a")
            attachmentLink.href = "/preview/" + message.attachment
            attachmentLink.target = "_blank"
            var attachmentImg = document.createElement("img")
            attachmentImg.src = "/thumbnail/" + message.attachment
            attachmentLink.appendChild(attachmentImg)
            container.appendChild(attachmentLink)
        }
        container.appendChild(textSpan)
        container.appendChild(datetimeSpan)
        messageList.insertBefore(container, target)
        setTimeout(function () {
            container.scrollIntoView()
        }, 500)
    }
    function onMessageSubmit(event) {
        event.preventDefault()
        var formData = new FormData()
        formData.append("username", "<%- username %>")
        formData.append("text", messageInput.value)
        formData.append("datetime", new Date().toISOString())
        if (attachmentInput.files.length > 0) {
            formData.append("attachment", attachmentInput.files[0])
        }
        var xhr = new XMLHttpRequest()
        xhr.open("POST", "/chat/<%- title %>")
        xhr.send(formData)
        messageInput.value = ""
        messageInput.focus()
        onAttachmentClose()
        return false
    }
    function pollMessages() {
        var data = { timestamp: lastTimestamp }
        pollRequest = new XMLHttpRequest()
        pollRequest.timeout = 30000
        pollRequest.open("POST", "/poll/<%- chatId %>")
        pollRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
        pollRequest.onload = function () {
            var response = JSON.parse(pollRequest.responseText)
            for (var i = 0; i < response["messages"].length; i++) {
                var message = response["messages"][i]
                lastTimestamp = message.datetime
                addMessage(message, messageList.firstChild)
            }
            pollMessages()
        }
        pollRequest.ontimeout = function (e) {
            pollMessages()
        }
        pollRequest.send(JSON.stringify(data))
    }
    function onLoadMoreClick(event) {
        event.preventDefault()
        var data = { timestamp: firstTimestamp }
        var loadMoreRequest = new XMLHttpRequest()
        loadMoreRequest.open("POST", "/chat/<%- title %>/messages")
        loadMoreRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
        loadMoreRequest.onload = function () {
            var response = JSON.parse(loadMoreRequest.responseText)
            if (response.messages.length > 0) {
                for (var i = 0; i < response["messages"].length; i++) {
                    var message = response["messages"][i]
                    addMessage(message, messageList.lastChild)
                }
                firstTimestamp = response.timestamp
                messageList.insertBefore(loadMoreForm, messageList.lastChild)
                if (!response.hasMoreMessages) {
                    loadMoreForm.style.display = "none"
                }
            } else {
                loadMoreForm.style.display = "none"
            }
        }
        loadMoreRequest.send(JSON.stringify(data))
        return false
    }
    function onAttachmentChange(event) {
        attachmentName.textContent = event.files[0].name
    }
    function onAttachmentClose(event) {
        attachmentName.textContent = ""
        attachmentInput.value = ""
    }
    messageInput.addEventListener("focus", function (e) {
        setTimeout(function () {
            version.scrollIntoView()
        }, 500)
    })
    window.addEventListener("pageshow", function (e) {
        messageList.firstElementChild.scrollIntoView(false)
        pollMessages()
    })
    window.addEventListener("pagehide", function (e) {
        pollRequest.abort()
    })
</script>