ManagementSystem/dist/script.js

/**
 * Definitions
 */

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

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

const messageColors = [
    "#e74c3c",
    "#95a5a6",
    "#ecf0f1"
]

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 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 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) +
    formatMessageType(messageType) +
    formatServiceName(serviceName) +
    formatMessage(message, messageType)
    
    messages.appendChild(li)

    if (autoScroll) {
        li.scrollIntoView()
    }

    deleteOldMessages()
}

function addViewerInfoMessage(joined, timestamp) {
    let li = document.createElement("li")

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

    messages.appendChild(li)

    if (autoScroll) {
        li.scrollIntoView()
    }

    deleteOldMessages()
}

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() {
    ws = new WebSocket(wsAddress)

    ws.onopen = () => {
        console.info("ws open")
    }
    
    ws.onmessage = (msg) => {
        let data = JSON.parse(msg.data)

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

        console.log(timestamp)

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

            addViewerInfoMessage(serviceType == 1, timestamp)
        } 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)
        if (e.reason.code === 1005) return

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

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