67 lines
2.8 KiB
JavaScript
67 lines
2.8 KiB
JavaScript
// webSocket
|
|
const WsType = { Weather: 0, System: 1 };
|
|
const wsUrl = window.location.origin.replace("http", "ws") + "/ws";
|
|
let timeOut = 1;
|
|
connect();
|
|
|
|
// weather elements
|
|
const weatherIcon = document.getElementById("weatherIcon");
|
|
const weatherTemp = document.getElementById("weatherTemp");
|
|
const weatherDescription = document.getElementById("weatherDescription");
|
|
const weatherHumidity = document.getElementById("weatherHumidity");
|
|
const weatherSunrise = document.getElementById("weatherSunrise");
|
|
const weatherSunset = document.getElementById("weatherSunset");
|
|
|
|
// system elements
|
|
const systemCpuPercentage = document.getElementById("systemCpuPercentage");
|
|
const systemRamPercentage = document.getElementById("systemRamPercentage");
|
|
const systemRamValue = document.getElementById("systemRamValue");
|
|
const systemDiskPercentage = document.getElementById("systemDiskPercentage");
|
|
const systemDiskValue = document.getElementById("systemDiskValue");
|
|
const systemUptimePercentage = document.getElementById("systemUptimePercentage");
|
|
const uptimeDays = document.getElementById("uptimeDays");
|
|
const uptimeHours = document.getElementById("uptimeHours");
|
|
const uptimeMinutes = document.getElementById("uptimeMinutes");
|
|
const uptimeSeconds = document.getElementById("uptimeSeconds");
|
|
|
|
function connect() {
|
|
let ws = new WebSocket(wsUrl);
|
|
ws.onopen = () => {
|
|
console.log("WebSocket is open.");
|
|
timeOut = 1;
|
|
};
|
|
ws.onmessage = (event) => handleMessage(JSON.parse(event.data));
|
|
ws.onerror = () => ws.close();
|
|
ws.onclose = () => {
|
|
console.log("WebSocket is closed. Reconnect will be attempted in " + timeOut + " second.");
|
|
setTimeout(() => connect(), timeOut * 1000);
|
|
timeOut += 1;
|
|
};
|
|
}
|
|
|
|
function handleMessage(parsed) {
|
|
if (parsed.ws_type === WsType.Weather) replaceWeather(parsed.message);
|
|
else if (parsed.ws_type === WsType.System) replaceSystem(parsed.message);
|
|
}
|
|
|
|
function replaceWeather(parsed) {
|
|
weatherIcon.setAttribute("xlink:href", "#" + parsed.icon);
|
|
weatherTemp.innerText = parsed.temp;
|
|
weatherDescription.innerText = parsed.description;
|
|
weatherHumidity.innerText = parsed.humidity + "%";
|
|
weatherSunrise.innerText = parsed.sunrise;
|
|
weatherSunset.innerText = parsed.sunset;
|
|
}
|
|
|
|
function replaceSystem(parsed) {
|
|
systemCpuPercentage.style = "width:" + parsed.cpu + "%";
|
|
systemRamPercentage.style = "width:" + parsed.ram.percentage + "%";
|
|
systemRamValue.innerText = parsed.ram.value;
|
|
systemDiskPercentage.style = "width:" + parsed.disk.percentage + "%";
|
|
systemDiskValue.innerText = parsed.disk.value;
|
|
systemUptimePercentage.style = "width:" + parsed.uptime.percentage + "%";
|
|
uptimeDays.style = "--value:" + parsed.uptime.days;
|
|
uptimeHours.style = "--value:" + parsed.uptime.hours;
|
|
uptimeMinutes.style = "--value:" + parsed.uptime.minutes;
|
|
uptimeSeconds.style = "--value:" + parsed.uptime.seconds;
|
|
}
|