ClickandJoin
/
ManagementSystem
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dot to represent connection status

alpha
alex 2023-02-18 14:34:22 +01:00
parent d5a08e816f
commit 8bb3864a77
3 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@ -8,6 +8,10 @@
<link rel="stylesheet" href="/dist/style.css">
</head>
<body>
<div class="connection-status-container">
<span id="connection-status"></span>
</div>
<div class="viewers-container">
<span id="viewers-count">0 viewers</span>
</div>

13
dist/script.js vendored
View File

@ -48,6 +48,12 @@ const serviceTypesColors = [
"#2ecc71"
]
const connectionStatusColors = [ // dot color for connection status
"#2ecc71", // connected
"#e74c3c", // disconnected
"#e67e22" // reconnecting
]
const wsAddress = "ws://192.168.178.93:50000/ws?auth=aksmdaksdmaskdm213askm"
/**
@ -57,6 +63,7 @@ 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 connectionStatus = document.getElementById("connection-status")
const messages = document.getElementById("messages")
let autoScroll = true;
@ -171,10 +178,13 @@ window.onload = () => {
}
function connectWS() {
connectionStatus.style.backgroundColor = connectionStatusColors[2]
ws = new WebSocket(wsAddress)
ws.onopen = () => {
console.info("ws open")
connectionStatus.style.backgroundColor = connectionStatusColors[0]
}
ws.onmessage = (msg) => {
@ -202,6 +212,9 @@ function connectWS() {
ws.onclose = (e) => {
console.log("closed", e.reason.code)
connectionStatus.style.backgroundColor = connectionStatusColors[1]
if (e.reason.code === 1005) return
console.log("ws closed", e)

19
dist/style.css vendored
View File

@ -93,4 +93,23 @@ input[type="checkbox" i] {
position: absolute;
top: 65px;
right: 0;
}
.connection-status-container {
position: absolute;
top: 10px;
position: -webkit-sticky; /* Safari */
position: sticky;
color: #fff;
}
#connection-status {
position: absolute;
top: 16px;
right: 180px;
height: 20px;
width: 20px;
background-color: gray;
border-radius: 50%;
display: inline-block;
}