529 lines
22 KiB
JavaScript
529 lines
22 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
|
|
|
|
// based on https://stackoverflow.com/a/56279295/8967590
|
|
Audio.prototype.play = (function(play) {
|
|
return function () {
|
|
let audio = this;
|
|
let promise = play.apply(audio, arguments);
|
|
if (promise !== undefined) {
|
|
promise.catch(_ => {
|
|
console.log("autoplay of audiofile failed :(");
|
|
});
|
|
}
|
|
};
|
|
}) (Audio.prototype.play);
|
|
|
|
let audio_files = [];
|
|
|
|
function load_audio_files() {
|
|
audio_files["computer_work_beep"] = new Audio('/static/lcars/audio/computer_work_beep.mp3');
|
|
audio_files["computer_error"] = new Audio('/static/lcars/audio/computer_error.mp3');
|
|
audio_files["keyok1"] = new Audio('/static/lcars/audio/keyok1.mp3');
|
|
audio_files["keyok1"].volume = 0.05;
|
|
audio_files["input_ok_2_clean"] = new Audio('/static/lcars/audio/input_ok_2_clean.mp3');
|
|
audio_files["processing"] = new Audio('/static/lcars/audio/processing.mp3');
|
|
audio_files["processing"].volume = 0.25;
|
|
audio_files["computerbeep_11"] = new Audio('/static/lcars/audio/computerbeep_11.mp3');
|
|
audio_files["computerbeep_11"].volume = 0.5;
|
|
audio_files["computerbeep_38"] = new Audio('/static/lcars/audio/computerbeep_38.mp3');
|
|
audio_files["computerbeep_38"].volume = 0.1;
|
|
audio_files["computerbeep_65"] = new Audio('/static/lcars/audio/computerbeep_65.mp3');
|
|
audio_files["alarm01"] = new Audio('/static/lcars/audio/alarm01.mp3');
|
|
audio_files["alarm03"] = new Audio('/static/lcars/audio/alarm03.mp3');
|
|
audio_files["alert12"] = new Audio('/static/lcars/audio/alert12.mp3');
|
|
}
|
|
|
|
function play_audio_file(identifier) {
|
|
try {
|
|
if (audio_files[identifier].readyState === 4) { // 4 = HAVE_ENOUGH_DATA
|
|
if (!audio_files[identifier].ended) {
|
|
audio_files[identifier].currentTime = 0;
|
|
audio_files[identifier].play();
|
|
} else {
|
|
audio_files[identifier].play();
|
|
}
|
|
}
|
|
} catch(err) {
|
|
console.error("[AUDIO] Failed to play audio file:", identifier, err);
|
|
}
|
|
}
|
|
|
|
/* found on https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript/49041392#49041392
|
|
* slightly modified
|
|
*/
|
|
let index; // cell index
|
|
let toggleBool; // sorting asc, desc
|
|
window.sorting = function sorting(th, tbody, index) {
|
|
function compareCells(a, b) {
|
|
let aVal = a.cells[index].innerText.replace(/,/g, '');
|
|
let bVal = b.cells[index].innerText.replace(/,/g, '');
|
|
|
|
if (toggleBool) {
|
|
let temp = aVal;
|
|
aVal = bVal;
|
|
bVal = temp;
|
|
}
|
|
|
|
if (aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)) {
|
|
return parseFloat(aVal) - parseFloat(bVal);
|
|
} else {
|
|
if (aVal < bVal) {
|
|
return -1;
|
|
} else if (aVal > bVal) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.index = index;
|
|
toggleBool = !toggleBool;
|
|
|
|
let datas = [];
|
|
for (let i = 0; i < tbody.rows.length; i++) {
|
|
datas[i] = tbody.rows[i];
|
|
}
|
|
|
|
// sort by cell[index]
|
|
datas.sort(compareCells);
|
|
for (let i = 0; i < tbody.rows.length; i++) {
|
|
// rearrange table rows by sorted rows
|
|
tbody.appendChild(datas[i]);
|
|
}
|
|
};
|
|
|
|
/* found on https://stackoverflow.com/a/21648508/8967590
|
|
* slightly modified to only return the rgb value and getting rid of type-warnings
|
|
*/
|
|
function hexToRgb(hex){
|
|
let char;
|
|
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
|
char = hex.substring(1).split('');
|
|
if (char.length === 3) {
|
|
char = [char[0], char[0], char[1], char[1], char[2], char[2]];
|
|
}
|
|
char = '0x' + char.join('');
|
|
return [(char >> 16) & 255, (char >> 8) & 255, char & 255].join(', ');
|
|
} else {
|
|
alert(hex);
|
|
throw new Error('Bad Hex');
|
|
}
|
|
}
|
|
|
|
let lcars_colors = [];
|
|
function load_lcars_colors() {
|
|
/* https://davidwalsh.name/css-variables-javascript */
|
|
lcars_colors["lcars-pale-canary"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-pale-canary').trim()
|
|
);
|
|
lcars_colors["lcars-tanoi"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-tanoi').trim()
|
|
);
|
|
lcars_colors["lcars-golden-tanoi"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-golden-tanoi').trim()
|
|
);
|
|
lcars_colors["lcars-neon-carrot"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-neon-carrot').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-eggplant"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-eggplant').trim()
|
|
);
|
|
lcars_colors["lcars-lilac"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-lilac').trim()
|
|
);
|
|
lcars_colors["lcars-anakiwa"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-anakiwa').trim()
|
|
);
|
|
lcars_colors["lcars-mariner"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-mariner').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-bahama-blue"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-bahama-blue').trim()
|
|
);
|
|
lcars_colors["lcars-blue-bell"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-blue-bell').trim()
|
|
);
|
|
lcars_colors["lcars-melrose"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-melrose').trim()
|
|
);
|
|
lcars_colors["lcars-hopbush"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-hopbush').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-chestnut-rose"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-chestnut-rose').trim()
|
|
);
|
|
lcars_colors["lcars-orange-peel"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-orange-peel').trim()
|
|
);
|
|
lcars_colors["lcars-atomic-tangerine"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-atomic-tangerine').trim()
|
|
);
|
|
lcars_colors["lcars-danub"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-danub').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-indigo"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-indigo').trim()
|
|
);
|
|
lcars_colors["lcars-lavender-purple"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-lavender-purple').trim()
|
|
);
|
|
lcars_colors["lcars-cosmic"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-cosmic').trim()
|
|
);
|
|
lcars_colors["lcars-red-damask"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-red-damask').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-medium-carmine"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-medium-carmine').trim()
|
|
);
|
|
lcars_colors["lcars-bourbon"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-bourbon').trim()
|
|
);
|
|
lcars_colors["lcars-sandy-brown"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-sandy-brown').trim()
|
|
);
|
|
lcars_colors["lcars-periwinkle"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-periwinkle').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-dodger-pale"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-dodger-pale').trim()
|
|
);
|
|
lcars_colors["lcars-dodger-soft"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-dodger-soft').trim()
|
|
);
|
|
lcars_colors["lcars-near-blue"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-near-blue').trim()
|
|
);
|
|
lcars_colors["lcars-navy-blue"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-navy-blue').trim()
|
|
);
|
|
|
|
lcars_colors["lcars-husk"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-husk').trim()
|
|
);
|
|
lcars_colors["lcars-rust"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-rust').trim()
|
|
);
|
|
lcars_colors["lcars-tamarillo"] = hexToRgb(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--lcars-tamarillo').trim()
|
|
);
|
|
}
|
|
|
|
// https://stackoverflow.com/a/38311629/8967590
|
|
$.fn.setClass = function(classes) {
|
|
this.attr('class', classes);
|
|
return this;
|
|
};
|
|
|
|
// https://stackoverflow.com/a/46308265,
|
|
// slightly modified for better readability
|
|
$.fn.selectText = function(){
|
|
let element = this[0], range, selection;
|
|
if (document.body.createTextRange) {
|
|
range = document.body.createTextRange();
|
|
range.moveToElementText(element);
|
|
range.select();
|
|
document.execCommand('copy');
|
|
} else if (window.getSelection) {
|
|
selection = window.getSelection();
|
|
range = document.createRange();
|
|
range.selectNodeContents(element);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
document.execCommand('copy');
|
|
}
|
|
};
|
|
|
|
$.fn.upsert = function(target_element_id, htmlString) {
|
|
// upsert - find or create new element
|
|
let $el = $(this).find(target_element_id);
|
|
if ($el.length === 0) {
|
|
// didn't exist, create and add to caller
|
|
$el = $(htmlString);
|
|
$(this).prepend($el);
|
|
}
|
|
return $el;
|
|
};
|
|
|
|
let flash = function(elements, color=false) {
|
|
let opacity = 40;
|
|
if (color === false) {
|
|
color = lcars_colors["lcars-tanoi"]; // has to be in this format since we use rgba
|
|
}
|
|
let interval = setInterval(function() {
|
|
opacity -= 2.5;
|
|
if (opacity <= 0) {
|
|
clearInterval(interval);
|
|
$(elements).removeAttr('style');
|
|
} else {
|
|
$(elements).css({
|
|
"background-color": "rgba(" + color + ", " + (opacity / 50) + ")"
|
|
});
|
|
}
|
|
}, 20)
|
|
};
|
|
|
|
//connect to the socket server.
|
|
window.socket = io.connect(
|
|
'http://' + document.domain + ':' + location.port, {
|
|
'sync disconnect on unload': true
|
|
}
|
|
);
|
|
|
|
window.socket.on('connected', function() {
|
|
window.socket.emit('ding');
|
|
});
|
|
|
|
let start_time = (new Date).getTime();
|
|
const PING_TIMEOUT_THRESHOLD = 5000; // Only log if ping takes >5 seconds
|
|
|
|
window.setInterval(function() {
|
|
start_time = (new Date).getTime();
|
|
socket.emit('ding');
|
|
play_audio_file("processing");
|
|
// No log for normal ping - would be spam (every 10 seconds)
|
|
}, 10000);
|
|
|
|
window.socket.on('dong', function() {
|
|
let latency = (new Date).getTime() - start_time;
|
|
play_audio_file("keyok1");
|
|
|
|
// Only log slow pings
|
|
if (latency > PING_TIMEOUT_THRESHOLD) {
|
|
console.warn("[PING] Slow response: " + latency + "ms (threshold: " + PING_TIMEOUT_THRESHOLD + "ms)");
|
|
}
|
|
});
|
|
|
|
// Session conflict handling
|
|
window.socket.on('session_conflict', function(data) {
|
|
console.log('[SESSION] Conflict detected:', data);
|
|
play_audio_file("alert12");
|
|
|
|
let message = data.message + '\n\nAktive Sessions: ' + data.existing_sessions;
|
|
if (confirm(message)) {
|
|
// User wants to take over
|
|
console.log('[SESSION] Taking over existing session');
|
|
window.socket.emit('session_takeover_accept');
|
|
} else {
|
|
// User declined
|
|
console.log('[SESSION] Takeover declined');
|
|
window.socket.emit('session_takeover_decline');
|
|
}
|
|
});
|
|
|
|
window.socket.on('session_accepted', function() {
|
|
console.log('[SESSION] Session accepted');
|
|
play_audio_file("computerbeep_11");
|
|
});
|
|
|
|
window.socket.on('session_declined', function(data) {
|
|
console.log('[SESSION] Session declined:', data.message);
|
|
play_audio_file("computer_error");
|
|
alert(data.message);
|
|
// Browser will be disconnected by server
|
|
});
|
|
|
|
window.socket.on('session_taken_over', function(data) {
|
|
console.log('[SESSION] Session taken over by another browser');
|
|
play_audio_file("alarm01");
|
|
alert(data.message);
|
|
// Connection will be closed by server
|
|
// Show a visual indicator that session is no longer active
|
|
document.body.style.opacity = '0.5';
|
|
document.body.style.pointerEvents = 'none';
|
|
});
|
|
|
|
load_audio_files();
|
|
load_lcars_colors();
|
|
|
|
window.socket.on('data', function(data) {
|
|
try {
|
|
// Log event for debugging (can be disabled in production)
|
|
if (window.socketDebugMode) {
|
|
console.log('[SOCKET] Received event:', data.data_type, data);
|
|
}
|
|
|
|
if ([
|
|
"element_content",
|
|
"widget_content",
|
|
"modal_content",
|
|
"remove_table_row",
|
|
"table_row",
|
|
"table_row_content"
|
|
].includes(data["data_type"])) {
|
|
/* target element needs to be present for these operations */
|
|
|
|
// Validate data structure before accessing
|
|
if (!data["target_element"]) {
|
|
console.error('[SOCKET] Missing target_element in data:', data);
|
|
return false;
|
|
}
|
|
|
|
let target_element_id = data["target_element"]["id"];
|
|
if (target_element_id == null) {
|
|
console.warn('[SOCKET] target_element.id is null for data_type:', data["data_type"]);
|
|
return false;
|
|
}
|
|
|
|
if (data["data_type"] === "widget_content") {
|
|
/* widget content requires a selector, in case the widget is not yet rendered in the browser
|
|
* with the help of the selector, we can create it in the right place
|
|
*/
|
|
let html_string = '<div id="' + target_element_id + '" class="widget"></div>';
|
|
let selector = data["target_element"]["selector"];
|
|
let target_element = $(selector).upsert(
|
|
'#' + target_element_id,
|
|
html_string
|
|
);
|
|
|
|
if (data["method"] === "update") {
|
|
target_element.html(data["payload"]);
|
|
} else if (data["method"] === "append") {
|
|
target_element.append(data["payload"]);
|
|
} else if (data["method"] === "prepend") {
|
|
play_audio_file("computerbeep_38");
|
|
let target_table = $('#' + target_element_id + ' ' + data["target_element"]["type"]);
|
|
/* prepend adds a row on top */
|
|
target_table.prepend(data["payload"]);
|
|
let $entries = target_table.find('tr');
|
|
if ($entries.length >= 50) {
|
|
$entries.last().remove();
|
|
}
|
|
}
|
|
}
|
|
if (data["data_type"] === "element_content") {
|
|
let target_element = document.getElementById(target_element_id);
|
|
if (target_element == null) {
|
|
return false;
|
|
}
|
|
if (data["method"] === "update") {
|
|
if (target_element.innerHTML !== data["payload"]) {
|
|
target_element.innerHTML = data["payload"];
|
|
} else {
|
|
return false;
|
|
}
|
|
} else if (data["method"] === "replace") {
|
|
// Note: After outerHTML replacement, target_element reference becomes invalid
|
|
// Flash BEFORE replacing, or flash the parent element
|
|
let parent = target_element.parentElement;
|
|
target_element.outerHTML = data["payload"];
|
|
if (parent) {
|
|
// Flash the new element by finding it in the parent
|
|
let new_element = document.getElementById(target_element_id);
|
|
if (new_element) {
|
|
flash(new_element);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (data["data_type"] === "modal_content") {
|
|
let target_element = document.getElementById(target_element_id);
|
|
if (target_element == null) {
|
|
return false;
|
|
}
|
|
|
|
let modal_container = target_element.parentElement;
|
|
modal_container.classList.toggle("open");
|
|
|
|
$(target_element).html(data["payload"])
|
|
}
|
|
if (data["data_type"] === "table_row") {
|
|
/* the whole row will be swapped out, not very economic ^^
|
|
* can be suitable for smaller widgets, not needing the hassle of sub-element id's and stuff
|
|
* table_row content requires a selector, in case the row is not yet rendered in the browser
|
|
* with the help of the selector, we can create it in the right place
|
|
*/
|
|
play_audio_file("processing");
|
|
let parent_element = $(data["target_element"]["selector"]);
|
|
|
|
let target_element = parent_element.find("#" + target_element_id);
|
|
|
|
if (target_element.length === 0) {
|
|
/* If the row doesn't exist, append it */
|
|
parent_element.append(data["payload"]);
|
|
} else {
|
|
target_element.replaceWith(data["payload"]);
|
|
}
|
|
}
|
|
if (data["data_type"] === "table_row_content") {
|
|
play_audio_file("keyok1");
|
|
let parent_element = $('#' + target_element_id);
|
|
if (parent_element.length === 0) {
|
|
return false;
|
|
}
|
|
if (data["target_element"]["class"].length >= 1) {
|
|
parent_element.setClass(data["target_element"]["class"]);
|
|
} else {
|
|
parent_element[0].removeAttribute("class");
|
|
}
|
|
|
|
let elements_to_update = data["payload"];
|
|
$.each(elements_to_update, function (key, value) {
|
|
if ($.type(value) === 'object') {
|
|
$.each(value, function (sub_key, sub_value) {
|
|
let element_to_update = $('#' + target_element_id + '_' + key + '_' + sub_key);
|
|
if (element_to_update.length !== 0 && element_to_update.text() !== sub_value.toString()) {
|
|
element_to_update.html(sub_value);
|
|
}
|
|
});
|
|
} else {
|
|
let element_to_update = $('#' + target_element_id + '_' + key);
|
|
if (element_to_update.length !== 0 && element_to_update.text() !== value.toString()) {
|
|
element_to_update.html(value);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (data["data_type"] === "remove_table_row") {
|
|
let target_element = document.getElementById(target_element_id);
|
|
if (target_element && target_element.parentElement) {
|
|
target_element.parentElement.removeChild(target_element);
|
|
} else {
|
|
console.warn('[SOCKET] Cannot remove table row - element not found:', target_element_id);
|
|
}
|
|
}
|
|
} else if (data["data_type"] === "status_message") {
|
|
/* this does not require any website containers. we simply play sounds and echo logs */
|
|
if (data['status']) {
|
|
let json = data["status"];
|
|
if (json["status"]) {
|
|
let status = json["status"];
|
|
let action = data["payload"][0];
|
|
if (status === "success") {
|
|
play_audio_file("computerbeep_11");
|
|
} else if (status === "fail") {
|
|
play_audio_file("computer_error");
|
|
flash(document.body, lcars_colors["lcars-chestnut-rose"])
|
|
}
|
|
console.log(
|
|
"received status\n\"" + status + ":" + json["uuid4"] + "\"\n" +
|
|
"for action\n\"" + action + "\""
|
|
);
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// Catch any errors to prevent handler from breaking
|
|
console.error('[SOCKET ERROR] Failed to process event:', {
|
|
error: error.message,
|
|
stack: error.stack,
|
|
data_type: data ? data.data_type : 'unknown',
|
|
data: data
|
|
});
|
|
|
|
// Play error sound to alert user
|
|
play_audio_file("computer_error");
|
|
|
|
// Flash screen red to indicate error
|
|
flash(document.body, lcars_colors["lcars-chestnut-rose"]);
|
|
}
|
|
});
|
|
});
|