godash/static/js/app.js

// 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");

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;
}