Function createLayout

ts/menu_ts.ts:1115–1205

()

}

function createLayout() {
  console.log("createLayout: Function called");
  console.log("createLayout: SERVER object:", SERVER);
  
  // Check if SERVER object has required data
  if (!SERVER || !SERVER["clientInfo"]) {
    console.log("createLayout: Proceeding without clientInfo; rendering menu skeleton");
  }

  console.log("createLayout: Proceeding with menu creation");
  console.log("createLayout: clientInfo keys:", getObjKeys(SERVER["clientInfo"]));

  // Client Info (only if available)
  if (SERVER && SERVER["clientInfo"]) {
    var obj = SERVER["clientInfo"]
    var keys = getObjKeys(obj);
    console.log("createLayout: clientInfo keys:", keys);
    console.log("createLayout: clientInfo values:", obj);
    
    for (var i = 0; i < keys.length; i++) {
      var elementId = keys[i];
      var element = document.getElementById(elementId);
      if (element) {
        console.log("createLayout: Setting element", elementId, "to value:", obj[elementId]);
        (<HTMLInputElement>element).value = obj[elementId];
      } else {
        console.log("createLayout: Element not found for ID:", elementId);
      }
    }
  } else {
    console.log("createLayout: No clientInfo available in SERVER object");
    console.log("createLayout: SERVER object:", SERVER);
  }

  if (SERVER && SERVER["clientInfo"] && document.getElementById("playlist-connection-information")) {
    let activeClass = "text-primary"
    if (SERVER["clientInfo"]["activePlaylist"] / SERVER["clientInfo"]["totalPlaylist"] >= 0.6 && SERVER["clientInfo"]["activePlaylist"] / SERVER["clientInfo"]["totalPlaylist"] < 0.8) {
      activeClass = "text-warning"
    } else if (SERVER["clientInfo"]["activePlaylist"] / SERVER["clientInfo"]["activePlaylist"] >= 0.8) {
      activeClass = "text-danger"
    }
    document.getElementById("playlist-connection-information").innerHTML = "Playlist Connections: <span class='" + activeClass + "'>" + SERVER["clientInfo"]["activePlaylist"] + " / " + SERVER["clientInfo"]["totalPlaylist"] + "</span>"
  }

  if (SERVER && SERVER["clientInfo"] && document.getElementById("client-connection-information")) {
    let activeClass = "text-primary"
    if (SERVER["clientInfo"]["activeClients"] / SERVER["clientInfo"]["totalClients"] >= 0.6 && SERVER["clientInfo"]["activeClients"] / SERVER["clientInfo"]["totalClients"] < 0.8) {
      activeClass = "text-warning"
    } else if (SERVER["clientInfo"]["activeClients"] / SERVER["clientInfo"]["totalClients"] >= 0.8) {
      activeClass = "text-danger"
    }
    document.getElementById("client-connection-information").innerHTML = "Client Connections: <span class='" + activeClass + "'>" + SERVER["clientInfo"]["activeClients"] + " / " + SERVER["clientInfo"]["totalClients"] + "</span>"
  }

  if (!document.getElementById("main-menu")) {
    console.log("createLayout: main-menu element not found, returning");
    return
  }