From 94e444b7e28e6c75015055596e79dc80f97b111a Mon Sep 17 00:00:00 2001 From: alex Date: Thu, 16 Feb 2023 21:07:02 +0100 Subject: [PATCH] website for live console --- dist/index.html | 30 +++++++++++++ dist/script.js | 114 ++++++++++++++++++++++++++++++++++++++++++++++++ dist/style.css | 82 ++++++++++++++++++++++++++++++++++ main.go | 4 ++ 4 files changed, 230 insertions(+) create mode 100644 dist/index.html create mode 100644 dist/script.js create mode 100644 dist/style.css diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..526ef75 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,30 @@ + + + + + + + Console + + + +
+ +
+ +
+
+ +
+ +
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/dist/script.js b/dist/script.js new file mode 100644 index 0000000..6487718 --- /dev/null +++ b/dist/script.js @@ -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 "[" +} + +function clampClosed() { + return "] " +} + +function formatDate() { + const date = new Date() + + return clampOn() + + "" + + 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') + " " + + "" + clampClosed() +} + +function formatServerType(serverType) { + return clampOn() + "" + serverTypes[serverType] + "" + clampClosed() +} + +function formatMessage(message, messageType) { + return ""+message+"" +} + +function formatMessageType(messageType) { + return clampOn() + "" + messageTypes[messageType] + "" + 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" + } +}) \ No newline at end of file diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..1f34c33 --- /dev/null +++ b/dist/style.css @@ -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); +} \ No newline at end of file diff --git a/main.go b/main.go index 6d58415..b303d29 100644 --- a/main.go +++ b/main.go @@ -38,6 +38,10 @@ func init() { func main() { app := fiber.New() + //app.Use(cors.New()) + + app.Static("/dist", "dist") + cfg := config.Cfg if cfg.Debug {