pulse-signage/src/player/player-onboarding-form.script.html

<script>
  (function () {
    var deviceKey = "pulse-signage-player-device-id";
    var clientNameKey = "pulse-signage-player-client-name";
    var screenKey = "pulse-signage-player-screen-slug";
    var deviceId = {{DEVICE_ID_JSON}};
    var form = document.getElementById("onboarding-form");
    var message = document.getElementById("onboarding-message");
    var screenSelect = document.getElementById("onboarding-screen-select");
    function setMessage(value) { if (message) { message.textContent = value || ""; } }
      function parseResponseError(response) {
        return response.text().then(function (text) {
          var fallbackMessage = text && text.trim() ? text.trim() : "Unable to save onboarding.";
          try {
            var payload = JSON.parse(text);
            return payload && payload.error ? payload.error : fallbackMessage;
          } catch (_error) {
            return fallbackMessage;
          }
        });
      }
    function loadScreens() {
      return fetch("/api/onboarding/screens", { cache: "no-store" })
        .then(function (response) { return response.ok ? response.json() : null; })
        .then(function (payload) {
          var screens = payload && Array.isArray(payload.screens) ? payload.screens : [];
          if (!screenSelect) { return screens; }
          while (screenSelect.firstChild) { screenSelect.removeChild(screenSelect.firstChild); }
          var placeholder = document.createElement("option");
          placeholder.value = "";
          placeholder.textContent = "Select a screen";
          screenSelect.appendChild(placeholder);
          screens.forEach(function (screen) {
            var option = document.createElement("option");
            option.value = String(screen && screen.slug ? screen.slug : "");
            option.textContent = String(screen && (screen.name || screen.slug) ? (screen.name || screen.slug) : "Screen");
            screenSelect.appendChild(option);
          });
          return screens;
        });
    }
    if (!deviceId) { setMessage("Missing device id. Scan the QR code from the player screen again."); return; }
    try { window.localStorage.setItem(deviceKey, deviceId); } catch (_error) {}
    loadScreens().then(function () {
      try {
        var storedClientName = window.localStorage.getItem(clientNameKey) || "";
        var storedScreenSlug = window.localStorage.getItem(screenKey) || "";
        var clientNameInput = form.querySelector("input[name=\"clientName\"]");
        if (clientNameInput && storedClientName) { clientNameInput.value = storedClientName; }
        if (screenSelect && storedScreenSlug) { screenSelect.value = storedScreenSlug; }
      } catch (_error) {}
    });
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      var formData = new FormData(form);
      var clientName = String(formData.get("clientName") || "").trim();
      var screenSlug = String(formData.get("screenSlug") || "").trim();
      if (!clientName) { setMessage("Client name is required."); return; }
      if (!screenSlug) { setMessage("Screen is required."); return; }
      setMessage("Saving client...");
      fetch("/api/onboarding", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ deviceId: deviceId, clientName: clientName, screenSlug: screenSlug })
      })
         .then(function (response) {
           if (response.ok) {
             return response.json();
           }
           return parseResponseError(response).then(function (messageText) {
             throw new Error(messageText);
           });
         })
        .then(function (payload) {
          if (!payload || !payload.screenSlug) { throw new Error("Unable to save onboarding."); }
          if (payload.clientName) { try { window.localStorage.setItem(clientNameKey, payload.clientName); } catch (_error) {} }
          try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
          setMessage("Onboarding complete.");
          if (form) {
            Array.prototype.slice.call(form.querySelectorAll("input, select, button")).forEach(function (control) {
              control.disabled = true;
            });
          }
        })
        .catch(function (error) { setMessage(error && error.message ? error.message : "Unable to save onboarding."); });
    });
  }());
</script>