Kettenoeler/Software/data_src/static/js/websocket.js

var gateway = `ws://${window.location.hostname}/ws`;
var websocket;

var statusMapping;
var staticMapping;

window.addEventListener("load", onLoad);

function initWebSocket() {
  console.log("Trying to open a WebSocket connection...");
  websocket = new WebSocket(gateway);
  websocket.onopen = onOpen;
  websocket.onclose = onClose;
  websocket.onmessage = onMessage; // <-- add this line
}

function initButtons() {
  document
    .getElementById("btn-ws-stop")
    .addEventListener("click", livedebug_stop);
  document
    .getElementById("btn-ws-start")
    .addEventListener("click", livedebug_start);
}

function onOpen(event) {
  console.log("Connection opened");
}

function onClose(event) {
  console.log("Connection closed");
  setTimeout(initWebSocket, 2000);
}

function onMessage(event) {
  var data = event.data;
  console.log("ws_msg:" + event.data + "\n");

  if (data.startsWith("DEBUG:")) {
    var addtext = data.slice(6);
    var livedebug_out = document.getElementById("livedebug-out");
    livedebug_out.value += addtext;
    livedebug_out.scrollTop = livedebug_out.scrollHeight;
    do_resize(livedebug_out);
    return;
  }

  if (data.startsWith("DTC:")) {
    const dtcs = data.slice(4);
    const dtcArray = dtcs.trim() !== "" ? dtcs.split(";").filter(Boolean) : [];

    if (dtcArray[0] != "0") {
      processDTCNotifications(dtcArray);
      fillDTCTable(dtcArray);
    }
    return;
  }

  if (data.startsWith("MAPPING_STATUS:")) {
    const data_sliced = data.slice(15);
    statusMapping = createMapping(data_sliced);
  }

  if (data.startsWith("MAPPING_STATIC:")) {
    const data_sliced = data.slice(15);
    staticMapping = createMapping(data_sliced);
  }

  if (data.startsWith("STATUS:")) {
    const data_sliced = data.slice(7);
    const result = processDataString(data_sliced, statusMapping);
    console.log("STATUS:");
    console.log(JSON.stringify(result, null, 2));
    fillValuesToHTML(result);
    return;
  }

  if (data.startsWith("STATIC:")) {
    const data_sliced = data.slice(7);
    const result = processDataString(data_sliced, staticMapping);
    console.log("STATIC:");
    console.log(JSON.stringify(result, null, 2));
    fillValuesToHTML(result);
    return;
  }
}

function createMapping(mappingString) {
  const mappingArray = mappingString.split(";");
  const mapping = [];

  mappingArray.forEach((variable) => {
    if (variable !== null) mapping.push(variable.trim());
  });
  return mapping;
}

function processDataString(dataString, mapping) {
  const valuesArray = dataString.split(";");
  const dataObject = {};

  valuesArray.forEach((value, index) => {
    const variable = mapping[index];
    if (variable) {
      dataObject[variable] = value.trim();
    }
  });

  return dataObject;
}

function onLoad(event) {
  initWebSocket();
  initButtons();
}

function livedebug_start() {
  websocket.send("start");
}

function livedebug_stop() {
  websocket.send("stop");
}

function do_resize(textbox) {
  var maxrows = 15;
  var minrows = 3;
  var txt = textbox.value;
  var cols = textbox.cols;

  var arraytxt = txt.split("\n");
  var rows = arraytxt.length;

  for (i = 0; i < arraytxt.length; i++)
    rows += parseInt(arraytxt[i].length / cols);

  if (rows > maxrows) textbox.rows = maxrows;
  else if (rows < minrows) textbox.rows = minrows;
  else textbox.rows = rows;
}

function fillValuesToHTML(dataset) {
  for (var key in dataset) {
    var key_prefixed = "data-" + key;
    var elements = document.getElementsByClassName(key_prefixed);

    if (elements.length > 0) {
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];

        if (element.type === "checkbox") {
          // Wenn das Element ein Kontrollkästchen ist
          element.checked = dataset[key] == 1 ? true : false;
        } else if (element.tagName === "SELECT") {
          // Wenn das Element ein Dropdown ist
          setDropdownValue(element, dataset[key]);
        } else if (element.classList.contains("progress-bar")) {
          // Wenn das Element eine Fortschrittsleiste ist
          updateProgressBar(element, dataset[key]);
        } else if (element.classList.contains("removeable")) {
          // Wenn das Element ein Settingsabschnitt-div ist
          if (dataset[key] == 0) element.remove();
        } else {
          // Standardmäßig für Textfelder und andere Elemente
          element.value = dataset[key];
        }
      }
    }
  }
}

// Funktion zum Setzen des ausgewählten Werts für Dropdowns
function setDropdownValue(selectElement, value) {
  for (var i = 0; i < selectElement.options.length; i++) {
    if (selectElement.options[i].value === value) {
      selectElement.selectedIndex = i;
      break;
    }
  }
}

// Funktion zum Aktualisieren der Fortschrittsleiste
function updateProgressBar(progressBar, value) {
  // Wert in das aria-valuenow-Attribut einfügen
  progressBar.setAttribute("aria-valuenow", value);

  // Breite des Fortschrittsbalkens und inneren Text aktualisieren
  progressBar.style.width = value + "%";
  progressBar.textContent = value + "%";
}