114 lines
2.7 KiB
JavaScript
114 lines
2.7 KiB
JavaScript
/**
|
|
* Definitions
|
|
*/
|
|
|
|
const colorClamp = "#34495e"
|
|
const colorTime = "#95a5a6"
|
|
|
|
const serverTypes = [
|
|
"API",
|
|
"StorageServer"
|
|
]
|
|
const serverTypesColors = [
|
|
"yellow",
|
|
"orange"
|
|
]
|
|
const messageTypes = [
|
|
"ERR",
|
|
"DEB",
|
|
"INFO"
|
|
]
|
|
const messageTypesColors = [
|
|
"#e74c3c",
|
|
"#95a5a6",
|
|
"#ecf0f1"
|
|
]
|
|
const messageColors = [
|
|
"#e74c3c",
|
|
"#95a5a6",
|
|
"#ecf0f1"
|
|
]
|
|
|
|
/**
|
|
* Begin of code
|
|
*/
|
|
const messages = document.getElementById("messages")
|
|
let autoScroll = true;
|
|
|
|
function addMessage(serverType, messageType, message) {
|
|
let li = document.createElement("li")
|
|
|
|
li.innerHTML = formatDate() +
|
|
formatMessageType(messageType) +
|
|
formatServerType(serverType) +
|
|
formatMessage(message, messageType)
|
|
|
|
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() {
|
|
const date = new Date()
|
|
|
|
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 formatServerType(serverType) {
|
|
return clampOn() + "<span style='color: " + serverTypesColors[serverType] + "'>" + serverTypes[serverType] + "</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"
|
|
}
|
|
}) |