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