ManagementSystem/dist/script.js

/**
 * Definitions
 */

const colorClamp = "#34495e"
const colorTime = "#95a5a6"

const messageTypes = [
    "INFO",
    "DEB",
    "ERR"
]
const messageTypesColors = [
    "#7f8c8d",
    "#1abc9c",
    "#e74c3c"
]

const messageColors = [
    "#7f8c8d",
    "#1abc9c",
    "#e74c3c"
]

const serviceNames = [
    "API",
    "MAILER",
    "STORAGE",
    "SSE",
    "WS"
]
const serviceNamesColors = [
    "#f1c40f",
    "#e67e22",
    "#2980b9",
    "#16a085",
    "#1abc9c"
]

const serviceTypes = [
    "ALPHA",
    "BETA",
    "STABLE"
]
const serviceTypesColors = [
    "#9b59b6",
    "#e67e22",
    "#2ecc71"
]

const connectionStatusColors = [ // dot color for connection status
    "#2ecc71", // connected
    "#e74c3c", // disconnected
    "#e67e22" // reconnecting
]

const wsAddress = "ws://192.168.178.93:50000/ws?auth=aksmdaksdmaskdm213askm"

/**
 * Begin of code
 */
const viewersCount = document.getElementById("viewers-count")
const checkboxAlpha = document.getElementById("checkbox-alpha")
const checkboxBeta = document.getElementById("checkbox-beta")
const checkboxStable = document.getElementById("checkbox-stable")
const connectionStatus = document.getElementById("connection-status")

const messages = document.getElementById("messages")
let autoScroll = true;

function addMessage(messageType, serviceType, serviceName, message, timestamp) {
    let li = document.createElement("li")

    li.innerHTML = formatDate(timestamp) +
    formatServiceType(serviceType) +
    formatServiceName(serviceName) +
    formatMessageType(messageType) +
    formatMessage(message, messageType)
    
    messages.appendChild(li)

    if (autoScroll) {
        li.scrollIntoView()
    }

    deleteOldMessages()
}

function addCustomMessage(message) {
    let li = document.createElement("li")
    li.innerHTML = message

    messages.appendChild(li)

    if (autoScroll) {
        li.scrollIntoView()
    }

    deleteOldMessages()
}

function addViewerInfoMessage(joined, timestamp) {
    if (joined) {
        addCustomMessage(formatDate(timestamp) + "<span style='color: #2ecc71'>A client has joined</span>")
    } else {
        addCustomMessage(formatDate(timestamp) + "<span style='color: #e74c3c'>A client has left</span>")
    }
}

function deleteOldMessages() {
    if (messages.childElementCount > 500) {
        messages.removeChild(messages.getElementsByTagName("li")[0])
    }
}

function clampOn() {
    return "<span style='color: "+colorClamp+"'>[</span>"
}

function clampClosed() {
    return "<span style='color: "+colorClamp+"'>]</span> "
}

function formatDate(timestamp) {
    const date = new Date(timestamp)

    return clampOn() + 
    "<span style='color: "+colorTime+"'>" +
    date.getDate().toString().padStart(2, '0') + "." +
    date.getMonth().toString().padStart(2, '0') + "." +
    date.getFullYear() + " " +
    date.getHours().toString().padStart(2, '0') + ":" +
    date.getMinutes().toString().padStart(2, '0') + ":" +
    date.getSeconds().toString().padStart(2, '0') + ":" +
    date.getMilliseconds().toString().padStart(3, '0') +
    "</span>" + clampClosed()
}

function formatServiceType(serviceType) {
    return clampOn() + "<span style='color: " + serviceTypesColors[serviceType] + "'>" + serviceTypes[serviceType] + "</span>" + clampClosed()
}

function formatServiceName(serviceName) {
    return clampOn() + "<span style='color: " + serviceNamesColors[serviceName] + "'>" + serviceNames[serviceName] + "</span>" + clampClosed()
}

function formatMessage(message, messageType) {
    return "<span style='color: " + messageColors[messageType] + "'>" + message + "</span>"
}

function formatMessageType(messageType) {
    return clampOn() + "<span style='color: " + messageTypesColors[messageType] + "'>" + messageTypes[messageType] + "</span>" + clampClosed()
}

function handleScrollState() {
    console.log("here")
}

let scrollState = document.getElementById('scroll-state')

document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
    console.log("clicked", scrollState.innerHTML)
    
    if (scrollState.innerHTML == "on") {
        autoScroll = false
        scrollState.style.color = "#e74c3c"
        scrollState.innerHTML = "off"
    } else {
        autoScroll = true
        scrollState.style.color = "#27ae60"
        scrollState.innerHTML = "on"
    }
})

// websocket

let ws = null

window.onload = () => {
    connectWS()
}

function connectWS() {
    connectionStatus.style.backgroundColor = connectionStatusColors[2]

    ws = new WebSocket(wsAddress)

    ws.onopen = () => {
        console.info("ws open")
        connectionStatus.style.backgroundColor = connectionStatusColors[0]
    }
    
    ws.onmessage = (msg) => {
        let messages = JSON.parse(msg.data)

        for (i in messages) {
            data = messages[i]

            messageType = data.MessageType
            serviceName = data.ServiceName
            serviceType = data.ServiceType
            timestamp = data.Timestamp

            if (messageType == 100 && serviceName == 100) { // viewer count
                viewersCount.innerHTML = data.Msg + (data.Msg == 1 ? " viewer" : " viewers")

                addViewerInfoMessage(serviceType == 1, timestamp)
            } else if (messageType == 101 && serviceName == 101 && serviceType == 101) {
                lastMessages = JSON.parse(data.Msg)
                
                if (lastMessages != null && lastMessages.length > 0) {
                    addCustomMessage("<span style='color: #7f8c8d'>––––––––– START OF OLD MESSAGES –––––––––</span>")

                    for (const i in lastMessages) {
                        addMessage(lastMessages[i].MessageType, lastMessages[i].ServiceType, lastMessages[i].ServiceName, lastMessages[i].Msg, lastMessages[i].Timestamp)
                    }

                    addCustomMessage("<span style='color: #7f8c8d'>––––––––– END OF OLD MESSAGES –––––––––</span>")
                }
            } else {
                if (serviceType == 0 && !checkboxAlpha.checked) return
                if (serviceType == 1 && !checkboxBeta.checked) return
                if (serviceType == 2 && !checkboxStable.checked) return

                addMessage(messageType, serviceType, serviceName, data.Msg, timestamp)
            }
        }
    }
    
    ws.onclose = (e) => {
        console.log("closed", e.reason.code)

        connectionStatus.style.backgroundColor = connectionStatusColors[1]

        if (e.reason.code === 1005) return

        console.log("ws closed", e)
        setTimeout(() => connectWS(), 100)
    }

    ws.onerror = (err) => {
        console.warn("err:", err)
    }
}