soruh/centralex
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add connected symbol

Browse Source
This commit is contained in:
soruh
2023-06-11 05:29:59 +02:00
parent 04deb1d89c
commit 75c12677d9
5 changed files with 77 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/connected.svg Normal file
View File

@@ -0,0 +1 @@
<svg><g transform="translate(-38.3 -51.4)"><path d="m98.8 55.1-6.52 6.52-3.78-3.78 6.52-6.52zm-7.49 20.5-8.5 8.5-16.8-16.8 8.5-8.5zm-16.9 0.0741a11.9 11.9 45 0 1 0.0256-16.8 11.9 11.9 45 0 1 16.8-0.0256 11.9 11.9 45 0 1-0.0256 16.8 11.9 11.9 45 0 1-16.8 0.0256zm-36.2 32.6 6.52-6.52 3.78 3.78-6.52 6.52zm19.7-25.3 8.39-8.39 1.88 1.88-8.39 8.39zm7.46 7.5 8.39-8.39 1.88 1.88-8.39 8.39zm-19.7-2.72 8.5-8.5 16.8 16.8-8.5 8.5zm16.9-0.0741a11.9 11.9 45 0 1-0.0256 16.8 11.9 11.9 45 0 1-16.8 0.0256 11.9 11.9 45 0 1 0.0256-16.8 11.9 11.9 45 0 1 16.8-0.0256z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 564 B

2
web/index.html
View File

@@ -9,7 +9,7 @@
</head>
<body>
<div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
<p id="last_update" />
<pre id="data"></pre>
<list id="list" />

20
web/main.css
View File

@@ -1,3 +1,23 @@
body {
background-color: #eee;
}
#connected {
position: absolute;
top: 5%;
right: 5%;
width: 5%;
height: 5%;
}
.visible {
opacity: 1;
/* visibility: visible; */
transition: opacity 500ms linear;
}
.hidden {
/* visibility: hidden; */
opacity: 0.2;
transition: opacity 6000ms linear;
}

61
web/main.js
View File

@@ -1,28 +1,53 @@
window.onload = () => {
const evtSource = new EventSource("/events");
const data = document.getElementById("data");
const last_update = document.getElementById("last_update");
evtSource.addEventListener("change", event => {
console.log(event);
const connected = document.getElementById("connected");
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
const timeout_duration = 10*1000;
const retry_timeout = 5*1000;
const newElement = document.createElement("li");
const eventList = document.getElementById("list");
newElement.textContent = `change at ${+event.data}`;
eventList.appendChild(newElement);
let reconnect_timeout;
let ping_timeout;
let evtSource;
fetch("/data").then(res => res.json().then(res => data.innerText = JSON.stringify(res, null, 1)));
});
evtSource.addEventListener("ping", event => {
console.log(event);
let connect_event_source = () => {
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
clearTimeout(reconnect_timeout);
clearTimeout(ping_timeout);
ping_timeout = setTimeout(connect_event_source, timeout_duration);
evtSource && evtSource.close && evtSource.close();
evtSource = new EventSource("/events");
evtSource.addEventListener("change", event => {
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
fetch("/data")
.then(res => res.json())
.then(res => data.innerText = JSON.stringify(res, null, 1));
});
evtSource.addEventListener("ping", event => {
clearTimeout(ping_timeout);
ping_timeout = setTimeout(connect_event_source, timeout_duration);
console.log("ping", new Date());
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
connected.className = "visible";
setTimeout(() => connected.className = "hidden", 1000);
});
evtSource.onerror = () => {
clearTimeout(reconnect_timeout);
reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
};
}
connect_event_source();
const newElement = document.createElement("li");
const eventList = document.getElementById("list");
newElement.textContent = `ping at ${+event.data}`;
eventList.appendChild(newElement);
});
};