website for live console
parent
e05fab9f33
commit
94e444b7e2
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Console</title>
|
||||||
|
<link rel="stylesheet" href="/dist/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="scroll-container">
|
||||||
|
<button id="btn-toggle-scroll">Auto scroll: <span id="scroll-state" style="color: #27ae60; font-weight: bold;">on</span></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="checkbox-container">
|
||||||
|
<div class="checkbox-container-inside">
|
||||||
|
<input type="checkbox" id="checkbox-alpha" name="alpha" value="alpha" checked>
|
||||||
|
<label for="alpha">Alpha</label><br>
|
||||||
|
<input type="checkbox" id="checkbox-beta" name="beta" value="beta" checked>
|
||||||
|
<label for="beta">Beta</label><br>
|
||||||
|
<input type="checkbox" id="checkbox-stable" name="stable" value="stable" checked>
|
||||||
|
<label for="stable">Stable</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul id="messages"></ul>
|
||||||
|
|
||||||
|
<script src="/dist/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
/**
|
||||||
|
* 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"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: hsl(220, 10%, 32%) hsl(220, 10%, 17%);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: rgb(30, 30, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgb(73, 73, 73);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgb(30, 30, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
position: -webkit-sticky; /* Safari */
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 20px;
|
||||||
|
background-color: #34495e;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 4px 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container{
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
position: -webkit-sticky; /* Safari */
|
||||||
|
position: sticky;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container .checkbox-container-inside {
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox" i] {
|
||||||
|
background-color: initial;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 3px 3px 3px 4px;
|
||||||
|
padding: initial;
|
||||||
|
border: initial;
|
||||||
|
color: rgb(55, 142, 240);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue