152 lines
8.0 KiB
HTML
152 lines
8.0 KiB
HTML
<script>
|
|
(function () {
|
|
var deviceKey = "pulse-signage-player-device-id";
|
|
var clientNameKey = "pulse-signage-player-client-name";
|
|
function getSessionStorageItem(key) {
|
|
try { return window.sessionStorage.getItem(key) || ""; } catch (_error) { return ""; }
|
|
}
|
|
function setSessionStorageItem(key, value) {
|
|
try { window.sessionStorage.setItem(key, value); } catch (_error) {}
|
|
}
|
|
function getClientNameStorageKey(_screenSlug) {
|
|
return clientNameKey;
|
|
}
|
|
var screenKey = "pulse-signage-player-screen-slug";
|
|
var qr = document.getElementById("onboarding-qr");
|
|
var status = document.getElementById("onboarding-status");
|
|
var localForm = document.getElementById("onboarding-local-form");
|
|
var localMessage = document.getElementById("onboarding-message");
|
|
var localScreenSelect = document.getElementById("onboarding-screen-select");
|
|
var qrPlaceholderSrc = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22%3E%3Crect width=%22320%22 height=%22320%22 rx=%2224%22 fill=%22%23ffffff%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%22260%22 height=%22260%22 rx=%2218%22 fill=%22%23f8fafc%22 stroke=%22%23cbd5e1%22 stroke-width=%223%22 stroke-dasharray=%2212 10%22/%3E%3Cpath d=%22M106 118h108M106 156h108M106 194h72%22 stroke=%22%2394a3b8%22 stroke-width=%2214%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22128%22 cy=%22248%22 r=%2212%22 fill=%22%2394a3b8%22/%3E%3Ctext x=%22160%22 y=%2278%22 text-anchor=%22middle%22 fill=%22%230f172a%22 font-family=%22Arial,sans-serif%22 font-size=%2224%22 font-weight=%22700%22%3EQR code loading%3C/text%3E%3Ctext x=%22160%22 y=%22266%22 text-anchor=%22middle%22 fill=%22%234b5563%22 font-family=%22Arial,sans-serif%22 font-size=%2214%22%3EPlease wait%3C/text%3E%3C/svg%3E";
|
|
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 getDeviceId() {
|
|
var stored = "";
|
|
try { stored = window.sessionStorage.getItem(deviceKey) || ""; } catch (_error) { stored = ""; }
|
|
if (stored) { return stored; }
|
|
var next = (window.crypto && window.crypto.randomUUID ? window.crypto.randomUUID() : "device-" + Date.now() + "-" + Math.random().toString(16).slice(2));
|
|
try { window.sessionStorage.setItem(deviceKey, next); } catch (_error2) {}
|
|
return next;
|
|
}
|
|
function setStatus(message) { if (status) { status.textContent = message; } }
|
|
function setLocalMessage(message) { if (localMessage) { localMessage.textContent = message || ""; } }
|
|
function setSelectOptions(select, screens, selectedSlug) {
|
|
if (!select) { return; }
|
|
while (select.firstChild) { select.removeChild(select.firstChild); }
|
|
var placeholder = document.createElement("option");
|
|
placeholder.value = "";
|
|
placeholder.textContent = "Select a screen";
|
|
select.appendChild(placeholder);
|
|
(Array.isArray(screens) ? 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");
|
|
if (selectedSlug && String(option.value) === String(selectedSlug)) {
|
|
option.selected = true;
|
|
}
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
function loadScreens(selectedSlug) {
|
|
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 : [];
|
|
setSelectOptions(localScreenSelect, screens, selectedSlug);
|
|
return screens;
|
|
})
|
|
.catch(function () { setSelectOptions(localScreenSelect, [], selectedSlug); return []; });
|
|
}
|
|
function loadQr(deviceId) {
|
|
if (!qr) { return; }
|
|
qr.onerror = function () {
|
|
qr.src = qrPlaceholderSrc;
|
|
};
|
|
qr.src = "/api/onboarding/qr?deviceId=" + encodeURIComponent(deviceId);
|
|
}
|
|
function submitOnboarding(deviceId, clientName, screenSlug) {
|
|
return 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) { setSessionStorageItem(clientNameKey, payload.clientName); }
|
|
if (payload.clientName && payload.screenSlug) { setSessionStorageItem(getClientNameStorageKey(payload.screenSlug), payload.clientName); }
|
|
try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
|
|
setLocalMessage("Onboarding complete.");
|
|
if (localForm) {
|
|
Array.prototype.slice.call(localForm.querySelectorAll("input, select, button")).forEach(function (control) {
|
|
control.disabled = true;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function redirectIfOnboarded(deviceId) {
|
|
return fetch("/api/onboarding/status?deviceId=" + encodeURIComponent(deviceId), { cache: "no-store" })
|
|
.then(function (response) { return response.ok ? response.json() : null; })
|
|
.then(function (payload) {
|
|
if (payload && payload.onboarded && payload.screenSlug) {
|
|
if (payload.clientName) { setSessionStorageItem(clientNameKey, payload.clientName); }
|
|
if (payload.clientName && payload.screenSlug) { setSessionStorageItem(getClientNameStorageKey(payload.screenSlug), payload.clientName); }
|
|
try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
|
|
window.location.replace("/screen/" + encodeURIComponent(payload.screenSlug));
|
|
return true;
|
|
}
|
|
return false;
|
|
})
|
|
.catch(function () { return false; });
|
|
}
|
|
var deviceId = getDeviceId();
|
|
if (localForm) {
|
|
localForm.addEventListener("submit", function (event) {
|
|
event.preventDefault();
|
|
var formData = new FormData(localForm);
|
|
var clientName = String(formData.get("clientName") || "").trim();
|
|
var screenSlug = String(formData.get("screenSlug") || "").trim();
|
|
if (!clientName) { setLocalMessage("Client name is required."); return; }
|
|
if (!screenSlug) { setLocalMessage("Screen is required."); return; }
|
|
setLocalMessage("Saving client...");
|
|
submitOnboarding(deviceId, clientName, screenSlug).catch(function (error) {
|
|
setLocalMessage(error && error.message ? error.message : "Unable to save onboarding.");
|
|
});
|
|
});
|
|
}
|
|
loadScreens().then(function () {
|
|
try {
|
|
var storedClientName = getSessionStorageItem(clientNameKey) || "";
|
|
if (storedClientName && localForm) {
|
|
var clientNameInput = localForm.querySelector("input[name=\"clientName\"]");
|
|
if (clientNameInput) { clientNameInput.value = storedClientName; }
|
|
}
|
|
} catch (_error) {}
|
|
});
|
|
redirectIfOnboarded(deviceId).then(function (redirected) {
|
|
if (redirected) { return; }
|
|
if (qr && !qr.getAttribute("src")) {
|
|
qr.src = qrPlaceholderSrc;
|
|
}
|
|
loadQr(deviceId);
|
|
setStatus("Waiting for onboarding to finish.");
|
|
window.setInterval(function () { redirectIfOnboarded(deviceId); }, 2000);
|
|
});
|
|
}());
|
|
</script> |