<!DOCTYPE html>
<html>
  <head>
    <script>
      var currentUserVarIndex = 0;
      window.onload = function () {
        getUserVars(doUserVars);
      };

      function getUserVars(callback) {
        console.log('getUserVars');
        sUrl = '/GetUserVars';
        var varlist = new Array();
        fetch(sUrl)
          .then((response) => response.text())
          .then((str) =>
            new window.DOMParser().parseFromString(str, 'text/xml')
          )
          .then((data) => {
            const nodes = data.getElementsByTagName('BrightSignVar');
            for (let i = 0; i < nodes.length; i++) {
              const name = nodes[i].getAttribute('name');
              const val = nodes[i]?.childNodes[0]?.nodeValue ?? '';
              uv = new userVar(name, val);
              printObj(uv);
              varlist.push(uv);
            }
            callback(varlist);
          });
      }

      function userVar(key, value) {
        this.key = key;
        this.value = value;
      }

      function doUserVars(us) {
        printObj(us);

        if (typeof us === 'undefined') {
          console.log('userVars not defined');
          setTimeout(function () {
            getUserVars(doUserVars);
          }, 1000);
          return;
        }

        // create the form
        const form = document.createElement('form');
        form.setAttribute('method', 'post');
        form.setAttribute('action', '/SetValues');

        // iterate through key/value pair and create inputs with labels
        for (let t = 0; t < us.length; t++) {
          const keyTest = us[t].key;
          const valueTest = us[t].value;

          form.appendChild(document.createElement('br'));

          const lbl = document.createElement('LABEL');
          lbl.textContent = keyTest;

          const inp = document.createElement('input');
          inp.setAttribute('class', 'bs_input');
          inp.setAttribute('type', 'text');
          inp.setAttribute('name', keyTest);
          inp.setAttribute('value', valueTest);

          form.appendChild(lbl);
          form.appendChild(document.createElement('br'));
          form.appendChild(inp);
        }

        form.appendChild(document.createElement('br'));
        form.appendChild(document.createElement('br'));

        // create and add submit button for the form
        const sbm = document.createElement('input');
        sbm.setAttribute('id', 'button');
        sbm.setAttribute('type', 'submit');
        sbm.setAttribute('value', 'Set Values');
        form.appendChild(sbm);

        const varForm = document.querySelector('div.varform');
        varForm.appendChild(form);
      }

      function printObj(obj) {
        console.log(JSON.stringify(obj));
      }
    </script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>User Variables</title>

    <style>
      body {
        background-color: rgba(184, 177, 218, 1);
        background-size: auto;
        font-family: Verdana, Geneva, sans-serif;
      }

      .bs_input {
        width: 90%;
        font: Verdana, Geneva, sans-serif;
        font-size: 16px;
        font-family: Verdana, Geneva, sans-serif;
        color: rgba(0, 0, 0, 1);
      }

      .bs_uservariable {
        font: Verdana, Geneva, sans-serif;
        font-size: 16px;
      }
      #header {
        font: Verdana, Geneva, sans-serif;
        font-size: 36px;
        text-align: center;
        text-color: rgba(255, 255, 255, 1);
        font-family: Verdana, Geneva, sans-serif;
        padding-bottom: 2%;
      }

      #button {
        font: Verdana, Geneva, sans-serif;
        font-size: 16px;
        font-family: Verdana, Geneva, sans-serif;
        color: rgba(0, 0, 0, 1);
      }

      #logo {
        position: inherit;
        alignment-adjust: middle;
        width: 100%;
        height: 64px;
        background-position: center;
        padding-top: 5%;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,[encoded data, 20660 characters]);
      }
    </style>
  </head>

  <body>
    <div id="header">User Variables</div>
    <center>
      <div class="varform"></div>
      <div id="logo"></div>
    </center>
  </body>
</html>
