96 lines
2.6 KiB
JavaScript
96 lines
2.6 KiB
JavaScript
// Sunday, February 16 2025, 03:06:20 PM
|
|
|
|
const dateElement = document.getElementById("date");
|
|
|
|
const months = [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December",
|
|
];
|
|
|
|
const daysOfWeek = [
|
|
"Sunday",
|
|
"Monday",
|
|
"Tuesday",
|
|
"Wednesday",
|
|
"Thursday",
|
|
"Friday",
|
|
"Saturday",
|
|
];
|
|
|
|
function updateDateTime() {
|
|
const date = new Date();
|
|
|
|
const seconds = date.getSeconds();
|
|
const minutes = date.getMinutes();
|
|
const hours24 = date.getHours();
|
|
const hours12 = hours24 % 12;
|
|
const ampm = hours24 > 11 && hours24 != 0 ? "PM" : "AM";
|
|
const secondsString = String(seconds).padStart(2, "0");
|
|
const minutesString = String(minutes).padStart(2, "0");
|
|
|
|
const year = date.getFullYear();
|
|
const month = months[date.getMonth()];
|
|
const day = date.getDate();
|
|
const dayOfWeek = daysOfWeek[date.getDay()];
|
|
|
|
dateElement.innerText = `${dayOfWeek}, ${month} ${day} ${year}, ${hours12}:${minutesString}:${secondsString} ${ampm}`;
|
|
}
|
|
|
|
updateDateTime();
|
|
setInterval(updateDateTime, 1000);
|
|
|
|
|
|
|
|
// modified stuff from statusline.js
|
|
// TODO combine both functionalities into the same statusline.js
|
|
const statusLineElement = document.getElementById("status-line");
|
|
const statusLineElement2 = statusLineElement.cloneNode();
|
|
statusLineElement2.id = "status-line2";
|
|
document.body.appendChild(statusLineElement2);
|
|
|
|
let status = { blocks: [{ text: "Streamboy is connecting...", color: "#ffffff" }] };
|
|
let scroll = 0;
|
|
|
|
setInterval(() => {
|
|
let string = "";
|
|
for (const i in status.blocks) {
|
|
string += status.blocks[i].text;
|
|
if (i < status.blocks.length - 1) string += " | ";
|
|
}
|
|
|
|
if (scroll >= string.length + 9) scroll = 0;
|
|
const stringWidth = 16 * string.length + 144;
|
|
if (16 * string.length <= statusLineElement.parentElement.clientWidth) {
|
|
scroll = 0;
|
|
statusLineElement.style.removeProperty("position");
|
|
statusLineElement.style.removeProperty("left");
|
|
statusLineElement2.style.display = "none";
|
|
statusLineElement.textContent = string;
|
|
statusLineElement2.textContent = string;
|
|
} else {
|
|
statusLineElement.style.position = "absolute";
|
|
statusLineElement.style.left = `${-16 * scroll}px`;
|
|
statusLineElement2.style.position = "absolute";
|
|
statusLineElement2.style.left = `${-16 * scroll + stringWidth}px`;
|
|
statusLineElement2.style.removeProperty("display");
|
|
scroll += 1;
|
|
statusLineElement.textContent = string + " | ";
|
|
statusLineElement2.textContent = string + " | ";
|
|
}
|
|
}, 500);
|
|
|
|
const socket = new WebSocket("ws://localhost:8012");
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
status = JSON.parse(event.data);
|
|
});
|