site-progress-bar/static/js/control.js

var latestKnownSettings = {};
var loadingNewData = false;
var indexFromWebSocket = false;
var acceptingRemoteSettings = true;
var nbsp = " ";
var incrementValue = document.getElementById("incrementValue");
var preview_frame = document.getElementById("preview_frame");
var preview_url =
  window.location.origin +
  window.location.pathname.replace(/control\/?$/, "display/?test=1") +
  window.location.hash;
preview_frame?.setAttribute("src", preview_url);

setTimeout(
  () =>
    sendThroughWebSocket(
      JSON.stringify({
        type: "SettingsRequest",
      })
    ),
  50
);

function handleMessage(message) {
  if (message.type == "MessageBroadcast")
    try {
      handleBroadcastedMessage(JSON.parse(message.message));
    } catch (e) {
      console.error(message);
      console.error(e);
    }
}

function handleBroadcastedMessage(message) {
  if (message.type == "SettingsRequest") {
    sendThroughWebSocket(
      JSON.stringify({
        type: "Settings",
        settings: getSettings(),
      })
    );
  } else if (
    message.type == "NewSettings" ||
    (message.type == "Settings" && acceptingRemoteSettings)
  ) {
    acceptingRemoteSettings = true;
    applyLoadedSettings(message.settings);
    acceptingRemoteSettings = false;
  }
  console.log(message);
}

function downloadTextFile(filename, text) {
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);
  element.style.display = "none";
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

function getSettings() {
  var settings = JSON.parse(JSON.stringify(latestKnownSettings));
  for (var form of Array.from(document.querySelectorAll("form.form")))
    for (var keyPair of Array.from(new FormData(form).entries()))
      settings[keyPair[0]] = keyPair[1];
  return settings;
}

function saveSettings() {
  var token = window.location.hash.substr(1);
  downloadTextFile(
    `progress-bar_settings_${token}.json`,
    JSON.stringify(getSettings())
  );
}

function loadSettings(input) {
  var file = input.files[0];
  input.value = null;
  if (file) {
    var fr = new FileReader();
    fr.onload = () => {
      var text = fr.result;
      applyLoadedSettings(JSON.parse(text));
    };
    fr.readAsText(file);
  }
}

function applyLoadedSettings(settings) {
  loadingNewData = true;
  for (var setting of Object.entries(settings)) {
    var key = setting[0];
    var value = setting[1];
    latestKnownSettings[key] = value;
    var field = document.querySelector(`[name="${key}"]:not(.unsynced)`);
    if (!!field) {
      if (field.type == "radio" || field.type == "checkbox") {
        field = document.querySelector(`[name="${key}"][value="${value}"]`);
        field.checked = true;
      } else {
        field.value = value;
      }
    }
  }
  loadingNewData = false;
  if (!acceptingRemoteSettings) broadcastChanges(); // only once
}

function broadcastChanges() {
  if (!loadingNewData)
    sendThroughWebSocket(
      JSON.stringify({
        type: "NewSettings",
        settings: getSettings(),
      })
    );
}

function compareDisplayContent() {
  var nothingChanged = true;
  for (let lazyInput of Array.from(
    document.getElementsByClassName("lazyInput")
  )) {
    let dcStore = lazyInput;
    let dcInput = document.querySelector(`[name="${lazyInput.name}Visible"]`);
    if (dcStore.value != dcInput.value) nothingChanged = false;
  }
  var btn = document.getElementById("btn-update-internal");
  if (!nothingChanged) btn.style.display = "block";
  else btn.style.display = "none";
  broadcastChanges();
}

function updateInternalDisplayContent() {
  for (let lazyInput of Array.from(
    document.getElementsByClassName("lazyInput")
  )) {
    let dcStore = lazyInput;
    let dcInput = document.querySelector(`[name="${lazyInput.name}Visible"]`);
    dcStore.value = dcInput.value;
  }
  compareDisplayContent();
}

function doIncrement() {
  let increment = parseFloat(incrementValue.value);
  incrementValue.value = 0;
  currentValueVisible.value =
    0 + parseFloat(currentValueVisible.value) + increment;
  updateInternalDisplayContent();
  broadcastChanges();
}

var escapeHtml = (unsafe) =>
  unsafe
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");