2020-07-05 06:43:38 +00:00
|
|
|
|
var loadingNewData = false;
|
2020-07-05 10:40:39 +00:00
|
|
|
|
var indexFromWebSocket = false;
|
2020-07-16 03:11:22 +00:00
|
|
|
|
var acceptingRemoteSettings = false;
|
2020-07-05 06:43:38 +00:00
|
|
|
|
var currentForm = document.getElementById('currentForm');
|
|
|
|
|
var currentDisplayIndex = 0;
|
|
|
|
|
var nbsp = ' ';
|
|
|
|
|
|
2020-07-05 10:40:39 +00:00
|
|
|
|
setTimeout(
|
|
|
|
|
() => sendThroughWebSocket(JSON.stringify({
|
|
|
|
|
type: 'SettingsRequest'
|
|
|
|
|
})),
|
|
|
|
|
50
|
|
|
|
|
);
|
2020-07-05 06:43:38 +00:00
|
|
|
|
|
2020-07-03 07:24:20 +00:00
|
|
|
|
function handleMessage(message) {
|
2020-07-05 06:43:38 +00:00
|
|
|
|
if (message.type == 'MessageBroadcast')
|
|
|
|
|
try {
|
|
|
|
|
handleBroadcastedMessage(JSON.parse(message.message));
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(message);
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleBroadcastedMessage(message) {
|
|
|
|
|
if (message.type == 'SettingsRequest')
|
|
|
|
|
sendThroughWebSocket(JSON.stringify({
|
|
|
|
|
type: 'Settings',
|
|
|
|
|
settings: getSettings()
|
|
|
|
|
}));
|
2020-07-16 03:15:01 +00:00
|
|
|
|
else if (message.type == 'SetCurrentlyOnScreen' || message.type == 'CurrentlyOnScreen') {
|
2020-07-05 10:40:39 +00:00
|
|
|
|
indexFromWebSocket = true;
|
2020-07-16 03:11:22 +00:00
|
|
|
|
updateCurrentlyOnScreen(message.index);
|
2020-07-05 10:40:39 +00:00
|
|
|
|
indexFromWebSocket = false;
|
2020-07-16 03:11:22 +00:00
|
|
|
|
} else if ((message.type == 'NewSettings') || (message.type == 'Settings' && acceptingRemoteSettings)) {
|
|
|
|
|
acceptingRemoteSettings = true;
|
2020-07-05 06:43:38 +00:00
|
|
|
|
applyLoadedSettings(message.settings);
|
2020-07-16 03:11:22 +00:00
|
|
|
|
acceptingRemoteSettings = false;
|
2020-07-05 06:43:38 +00:00
|
|
|
|
}
|
2020-07-03 07:24:20 +00:00
|
|
|
|
console.log(message);
|
2020-07-05 06:43:38 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function downloadTextFile(filename, text) {
|
|
|
|
|
var element = document.createElement('a');
|
|
|
|
|
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
|
|
|
|
element.setAttribute('download', filename);
|
|
|
|
|
element.style.display = 'none';
|
|
|
|
|
document.body.appendChild(element);
|
|
|
|
|
element.click();
|
|
|
|
|
document.body.removeChild(element);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getSettings() {
|
|
|
|
|
var settings = {};
|
|
|
|
|
for (var form of Array.from(document.querySelectorAll('form.form')))
|
|
|
|
|
for (var keyPair of Array.from((new FormData(form)).entries()))
|
|
|
|
|
settings[keyPair[0]] = keyPair[1];
|
|
|
|
|
return settings;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveSettings() {
|
|
|
|
|
var token = window.location.hash.substr(1);
|
|
|
|
|
downloadTextFile(
|
|
|
|
|
`text-scroller_settings_${token}.json`,
|
|
|
|
|
JSON.stringify(getSettings())
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadSettings(input) {
|
|
|
|
|
var file = input.files[0];
|
|
|
|
|
input.value = null;
|
|
|
|
|
if (file) {
|
|
|
|
|
var fr = new FileReader();
|
|
|
|
|
fr.onload = () => {
|
|
|
|
|
var text = fr.result;
|
|
|
|
|
applyLoadedSettings(JSON.parse(text));
|
|
|
|
|
};
|
|
|
|
|
fr.readAsText(file);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function applyLoadedSettings(settings) {
|
|
|
|
|
loadingNewData = true;
|
|
|
|
|
for (var setting of Object.entries(settings)) {
|
|
|
|
|
var key = setting[0];
|
|
|
|
|
var value = setting[1];
|
|
|
|
|
var field = document.querySelector(`[name="${key}"]`);
|
|
|
|
|
if (!!field) {
|
|
|
|
|
if (field.type == 'radio' || field.type == 'checkbox') {
|
2020-07-16 03:11:22 +00:00
|
|
|
|
field = document.querySelector(`[name="${key}"][value="${value}"]`);
|
|
|
|
|
field.checked = true;
|
2020-07-05 06:43:38 +00:00
|
|
|
|
} else {
|
|
|
|
|
field.value = value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
loadingNewData = false;
|
2020-07-16 03:11:22 +00:00
|
|
|
|
if (!acceptingRemoteSettings)
|
|
|
|
|
broadcastChanges(); // only once
|
2020-07-05 06:43:38 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function textAreaAdjust(elem) {
|
|
|
|
|
elem.style.height = Math.max(1, elem.scrollHeight - 20) + "px";
|
|
|
|
|
elem.style.height = (18 + elem.scrollHeight) + "px";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function keepDisplayContentUpdated() {
|
|
|
|
|
setTimeout(keepDisplayContentUpdated, 100);
|
|
|
|
|
try {
|
2020-07-05 11:33:12 +00:00
|
|
|
|
textAreaAdjust(document.querySelector('[name="displayContentVisible"]'));
|
2020-07-05 06:43:38 +00:00
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setTimeout(keepDisplayContentUpdated, 10);
|
|
|
|
|
|
|
|
|
|
function broadcastChanges() {
|
|
|
|
|
if (!loadingNewData)
|
|
|
|
|
sendThroughWebSocket(JSON.stringify({
|
|
|
|
|
type: 'NewSettings',
|
|
|
|
|
settings: getSettings()
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getDisplayContent() {
|
|
|
|
|
var dcInput = document.querySelector('[name="displayContent"]');
|
|
|
|
|
var dcText = dcInput.value.trim().replace(/\r/g, '');
|
|
|
|
|
var dcCards = dcText.trim().split('\n\n').map(
|
|
|
|
|
x => x.trim().split('\n').map(
|
|
|
|
|
y => y.trim()
|
|
|
|
|
).filter(
|
|
|
|
|
y => y.length
|
|
|
|
|
)
|
|
|
|
|
).filter(x => x.length);
|
|
|
|
|
var maxLength = Math.max(...dcCards.map(x => x.length));
|
|
|
|
|
for (var dcCard of dcCards)
|
|
|
|
|
while (dcCard.length < maxLength)
|
|
|
|
|
dcCard.push(nbsp);
|
|
|
|
|
return dcCards;
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-05 11:33:12 +00:00
|
|
|
|
function compareDisplayContentTextAreas() {
|
|
|
|
|
var dcStore = document.querySelector('[name="displayContent"]');
|
|
|
|
|
var dcInput = document.querySelector('[name="displayContentVisible"]');
|
|
|
|
|
var btn = document.getElementById('btn-update-dc-internal');
|
|
|
|
|
if (dcStore.value != dcInput.value)
|
|
|
|
|
btn.style.display = 'block';
|
|
|
|
|
else
|
|
|
|
|
btn.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateInternalDisplayContent() {
|
|
|
|
|
var dcStore = document.querySelector('[name="displayContent"]');
|
|
|
|
|
var dcInput = document.querySelector('[name="displayContentVisible"]');
|
|
|
|
|
dcStore.value = dcInput.value;
|
|
|
|
|
compareDisplayContentTextAreas();
|
|
|
|
|
broadcastChanges();
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-05 06:43:38 +00:00
|
|
|
|
var escapeHtml = (unsafe) => (unsafe
|
|
|
|
|
.replace(/&/g, "&")
|
|
|
|
|
.replace(/</g, "<")
|
|
|
|
|
.replace(/>/g, ">")
|
|
|
|
|
.replace(/"/g, """)
|
|
|
|
|
.replace(/'/g, "'"));
|
|
|
|
|
|
|
|
|
|
function updateCurrentForm() {
|
|
|
|
|
var dc = getDisplayContent();
|
|
|
|
|
var s = '';
|
|
|
|
|
s += '<label class="f6 b db mb1 mt3 sans-serif mid-gray">';
|
|
|
|
|
s += 'Click to change';
|
|
|
|
|
s += '</label>';
|
2020-07-05 12:19:12 +00:00
|
|
|
|
s += '<button class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate ';
|
|
|
|
|
s += `${(null === currentDisplayIndex) ? 'bg-black' : 'bg-gray'}`;
|
|
|
|
|
s += '" ';
|
|
|
|
|
s += `onclick="setCurrentlyOnScreen(null)" style="cursor: pointer;">`;
|
|
|
|
|
s += '<em>Hide everything</em>';
|
|
|
|
|
s += '</button>';
|
2020-07-05 06:43:38 +00:00
|
|
|
|
for (var i = 0; i < dc.length; i++) {
|
|
|
|
|
s += '<button class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate ';
|
|
|
|
|
s += `${(i == currentDisplayIndex) ? 'bg-black' : 'bg-gray'}`;
|
|
|
|
|
s += '" ';
|
|
|
|
|
s += `onclick="setCurrentlyOnScreen(${i})" style="cursor: pointer;">`;
|
|
|
|
|
s += dc[i].map(x => escapeHtml(x)).join('<br>');
|
|
|
|
|
s += '</button>';
|
|
|
|
|
}
|
|
|
|
|
s += '';
|
|
|
|
|
currentForm.innerHTML = s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function keepCurrentFormUpdated() {
|
|
|
|
|
setTimeout(keepCurrentFormUpdated, 250);
|
|
|
|
|
updateCurrentForm();
|
|
|
|
|
}
|
|
|
|
|
setTimeout(keepCurrentFormUpdated, 250);
|
|
|
|
|
|
|
|
|
|
function setCurrentlyOnScreen(index) {
|
2020-07-05 10:40:39 +00:00
|
|
|
|
if (!indexFromWebSocket)
|
|
|
|
|
sendThroughWebSocket(JSON.stringify({
|
|
|
|
|
type: 'SetCurrentlyOnScreen',
|
|
|
|
|
index: index
|
|
|
|
|
}));
|
2020-07-16 03:11:22 +00:00
|
|
|
|
updateCurrentlyOnScreen(index);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateCurrentlyOnScreen(index) {
|
2020-07-05 06:43:38 +00:00
|
|
|
|
currentDisplayIndex = index;
|
|
|
|
|
}
|