vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 09:36:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🔄Cache + Settings work

Browse Source
This commit is contained in:
jokob-sk
2024-08-03 21:07:12 +10:00
parent 4b2b8d6dd1
commit 1f7a38593d
17 changed files with 370 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
front/js/common.js
View File

@@ -10,9 +10,10 @@
// -----------------------------------------------------------------------------
var timerRefreshData = ''
var emptyArr = ['undefined', "", undefined, null, 'null'];
var UI_LANG = "English";
var settingsJSON = {}
var emptyArr = ['undefined', "", undefined, null, 'null'];
var UI_LANG = "English";
const allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "zh_cn"]; // needs to be same as in lang.php
var settingsJSON = {}
// -----------------------------------------------------------------------------
@@ -207,98 +208,123 @@ function getSetting (key) {
// -----------------------------------------------------------------------------
// Get language string
// -----------------------------------------------------------------------------
function cacheStrings()
{
function cacheStrings() {
return new Promise((resolve, reject) => {
if(!getCache('completedCalls').includes('cacheStrings'))
{
// handle core strings and translations
var allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "zh_cn"]; // needs to be same as in lang.php
allLanguages.forEach(function (language_code) {
$.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`, function (res) {
// Iterate over each language
Object.entries(res).forEach(([key, value]) => {
// Store translations for each key-value pair
setCache(`pia_lang_${key}_${language_code}`, value)
});
// handle strings and translations from plugins
$.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`, function(res) {
data = res["data"];
data.forEach((langString) => {
setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value)
});
}).then(() => handleSuccess('cacheStrings', resolve())).catch(() => handleFailure('cacheStrings', reject("cacheStrings already completed"))); // handle AJAX synchronization
// Create a promise for each language
const languagePromises = allLanguages.map((language_code) => {
return new Promise((resolveLang, rejectLang) => {
// Fetch core strings and translations
$.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`)
.done((res) => {
// Iterate over each key-value pair and store the translations
Object.entries(res).forEach(([key, value]) => {
setCache(`pia_lang_${key}_${language_code}`, value);
});
// Fetch strings and translations from plugins
$.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`)
.done((pluginRes) => {
const data = pluginRes["data"];
// Store plugin translations
data.forEach((langString) => {
setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value);
});
// Handle successful completion of language processing
handleSuccess(`cacheStrings[${language_code}]`, resolveLang);
})
.fail((pluginError) => {
// Handle failure in plugin strings fetching
rejectLang(pluginError);
});
})
.fail((error) => {
// Handle failure in core strings fetching
rejectLang(error);
});
});
});
}
// Wait for all language promises to complete
Promise.all(languagePromises)
.then(() => {
// All languages processed successfully
resolve();
})
.catch((error) => {
// Handle failure in any of the language processing
handleFailure('cacheStrings', reject);
});
});
}
// -----------------------------------------------------------------------------
// Get translated language string
function getString (key) {
function getString(key) {
// handle initial load to make sure everything is set-up and cached
handleFirstLoad(getString)
UI_LANG = getSetting("UI_LANG");
function fetchString(key) {
UI_LANG = getSetting("UI_LANG");
lang_code = 'en_us';
let lang_code = 'en_us';
switch(UI_LANG)
{
case 'English':
lang_code = 'en_us';
break;
case 'Spanish':
lang_code = 'es_es';
break;
case 'German':
lang_code = 'de_de';
break;
case 'French':
lang_code = 'fr_fr';
break;
case 'Norwegian':
lang_code = 'nb_no';
break;
case 'Polish (pl_pl)':
lang_code = 'pl_pl';
break;
case 'Portuguese (pt_br)':
lang_code = 'pt_br';
break;
case 'Turkish (tr_tr)':
lang_code = 'tr_tr';
break;
case 'Italian (it_it)':
lang_code = 'it_it';
break;
case 'Russian':
lang_code = 'ru_ru';
break;
case 'Chinese (zh_cn)':
lang_code = 'zh_cn';
break;
}
result = getCache(`pia_lang_${key}_${lang_code}`, true);
switch (UI_LANG) {
case 'English':
lang_code = 'en_us';
break;
case 'Spanish':
lang_code = 'es_es';
break;
case 'German':
lang_code = 'de_de';
break;
case 'French':
lang_code = 'fr_fr';
break;
case 'Norwegian':
lang_code = 'nb_no';
break;
case 'Polish (pl_pl)':
lang_code = 'pl_pl';
break;
case 'Portuguese (pt_br)':
lang_code = 'pt_br';
break;
case 'Turkish (tr_tr)':
lang_code = 'tr_tr';
break;
case 'Italian (it_it)':
lang_code = 'it_it';
break;
case 'Russian':
lang_code = 'ru_ru';
break;
case 'Chinese (zh_cn)':
lang_code = 'zh_cn';
break;
}
let result = getCache(`pia_lang_${key}_${lang_code}`, true);
if(isEmpty(result))
{
result = getCache(`pia_lang_${key}_en_us`, true);
if (isEmpty(result)) {
result = getCache(`pia_lang_${key}_en_us`, true);
}
return result;
}
return result;
if (isAppInitialized()) {
return fetchString(key);
} else {
callAfterAppInitialized(() => fetchString(key));
}
}
// -----------------------------------------------------------------------------
// String utilities
// -----------------------------------------------------------------------------
@@ -334,6 +360,15 @@ function isValidBase64(str) {
}
function isValidJSON(jsonString) {
try {
JSON.parse(jsonString);
return true;
} catch (e) {
return false;
}
}
// -----------------------------------------------------------------------------
// General utilities
// -----------------------------------------------------------------------------
@@ -835,7 +870,7 @@ function getDeviceDataByMac(macAddress, dbColumn) {
}
// -----------------------------------------------------------------------------
// Cache teh devices as one JSON
// Cache the devices as one JSON
function cacheDevices()
{
@@ -918,6 +953,8 @@ function showSpinner(stringKey='Loading')
text = getString(stringKey)
}
text = isEmpty(text) ? "Loading" : text;
if($("#loadingSpinner").length)
{
$("#loadingSpinner").show();
@@ -1102,6 +1139,8 @@ function arraysContainSameValues(arr1, arr2) {
const sessionStorageKey = "myScriptExecuted_common_js";
var completedCalls = []
var completedCalls_final = ['cacheSettings', 'cacheStrings', 'cacheDevices'];
var completedCallsCount = 0;
var completedCallsCount_final = allLanguages.length + 2; // number of language files + cacheDevices + cacheSettings
// -----------------------------------------------------------------------------
// Clearing all the caches
@@ -1139,10 +1178,24 @@ async function handleFirstLoad(callback) {
}
}
// -----------------------------------------------------------------------------
// Execute callback once app initialized
function callAfterAppInitialized(callback) {
if (!isAppInitialized()) {
setTimeout(() => {
callAfterAppInitialized(callback)
}, 500);
} else
{
callback();
}
}
// -----------------------------------------------------------------------------
// Check if the code has been executed before by checking sessionStorage
function isAppInitialized() {
return arraysContainSameValues(getCache("completedCalls").split(',').filter(Boolean), completedCalls_final);
// return arraysContainSameValues(getCache("completedCalls").split(',').filter(Boolean), completedCalls_final);
return (parseInt(getCache("completedCallsCount")) == completedCallsCount_final);
}
// Define a function that will execute the code only once
@@ -1151,9 +1204,10 @@ async function executeOnce() {
if (!isAppInitialized()) {
try {
await cacheStrings();
await cacheSettings();
await cacheDevices();
await cacheSettings();
await cacheStrings();
console.log("✅ All AJAX callbacks have completed");
onAllCallsComplete();
} catch (error) {
@@ -1166,8 +1220,20 @@ async function executeOnce() {
// Function to handle successful completion of an AJAX call
const handleSuccess = (callName) => {
console.log(`AJAX call successful: ${callName}`);
completedCalls.push(callName);
setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]));
// completedCalls.push(callName);
// setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]));
val = getCache('completedCallsCount');
if(val == "")
{
val = 0;
} else
{
val = parseInt(val)
}
setCache('completedCallsCount', val + 1)
};
// -----------------------------------------------------------------------------
@@ -1190,6 +1256,10 @@ const onAllCallsComplete = () => {
sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
console.log('✔ Cache initialized');
// setTimeout(() => {
// location.reload()
// }, 10);
} else {
// If not all strings are initialized, retry initialization
console.log('❌ Not all strings are initialized. Retrying...');
@@ -1199,14 +1269,13 @@ const onAllCallsComplete = () => {
// Call any other initialization functions here if needed
// No need for location.reload() here
};
// Function to check if all necessary strings are initialized
const areAllStringsInitialized = () => {
// Implement logic to check if all necessary strings are initialized
// Return true if all strings are initialized, false otherwise
return getString('UI_LANG') != ""
return getString('UI_LANG_name') != ""
};
// Call the function to execute the code

2
front/js/db_methods.js
View File

@@ -89,7 +89,7 @@ function checkDbLock() {
type: "GET",
success: function (response) {
console.log(response);
// console.log(response);
if (response == 0) {
// console.log('Database is not locked');
$(".header-status-locked-db").hide();

31
front/js/settings_utils.js
View File

@@ -259,7 +259,8 @@ function addList(element, clearInput = true) {
.attr("value", input)
.text(input);
const el = $(`#${toId}`).append(newOption);
// add new option
$(`#${toId}`).append(newOption);
// clear input
if (clearInput) {
@@ -269,6 +270,7 @@ function addList(element, clearInput = true) {
// Initialize interaction options only for the newly added option
initListInteractionOptions(newOption);
// flag something changes to prevent navigating from page
settingsChanged();
}
@@ -279,31 +281,6 @@ function removeFromList(element) {
.find("option:last")
.remove();
}
// ---------------------------------------------------------
function addInterface() {
ipMask = $("#ipMask").val();
ipInterface = $("#ipInterface").val();
full = ipMask + " --interface=" + ipInterface;
console.log(full);
if (ipMask == "" || ipInterface == "") {
showModalOk(
"Validation error",
"Specify both, the network mask and the interface"
);
} else {
$("#SCAN_SUBNETS").append(
$("<option disabled></option>").attr("value", full).text(full)
);
$("#ipMask").val("");
$("#ipInterface").val("");
settingsChanged();
}
}
// -------------------------------------------------------------------
// Function to remove an item from the select element
@@ -555,7 +532,7 @@ function generateOptionsOrSetOptions(
transformers = [] // Transformers to be applied to the values
) {
console.log(codeName);
// console.log(codeName);
// NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
options = arrayToObject(createArray(getSettingOptions(codeName)))

136
front/js/ui_components.js
View File

@@ -11,16 +11,7 @@
// -----------------------------------------------------------------------------
// Initialize device selectors / pickers fields
// -----------------------------------------------------------------------------
function initDeviceSelectors() {
// console.log(devicesList)
// Retrieve device list from session variable
var devicesListAll_JSON = getCache('devicesListAll_JSON');
var devicesList = JSON.parse(devicesListAll_JSON);
// console.log(devicesList);
function initDeviceSelectors(devicesListAll_JSON) {
// Check if both device list exists
if (devicesListAll_JSON) {
@@ -78,52 +69,6 @@ function initDeviceSelectors() {
// // -----------------------------------------------------------------------------
// // (ASYNC) Initiate dropdown
// function generateSetOptions(settingKey, // Identifier for the setting
// valuesArray, // Array of values to be pre-selected in the dropdown
// targetLocation, // ID of the HTML element where dropdown should be rendered (will be replaced)
// callbackToGenerateEntries, // Callback function to generate entries based on options
// targetField, // Target field or element where selected value should be applied or updated
// nameTransformer) // callback to transform the name (e.g. base64)
// {
// var optionsHtml = ""
// // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
// optionsArray = createArray(getSettingOptions(settingKey))
// // check if the result is a SQL query
// if(optionsArray.length > 0 && isSQLQuery(optionsArray[0]))
// {
// if (settingKey == "NEWDEV_dev_Network_Node_MAC_ADDR") {
// console.log("isSQLQuery in generateSetOptions");
// }
// readData(optionsArray[0], callbackToGenerateEntries, valuesArray, targetLocation, targetField, nameTransformer);
// } else // this should be already an array, e.g. from a setting or pre-defined
// {
// optionsArray.forEach(option => {
// let selected = valuesArray.includes(option) ? 'selected' : '';
// optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
// });
// // Replace the specified placeholder div with the resulting HTML
// setTimeout(() => {
// $("#" + targetLocation).replaceWith(optionsHtml);
// }, 50);
// }
// }
// -----------------------------------------------------------------------------
// Hide elements on the page based on the supplied setting
function hideUIelements(settingKey) {
@@ -290,42 +235,57 @@ function getCellValue(row, index) {
// initialize
// -----------------------------------------------------------------------------
function initSelect2() {
setTimeout(() => {
// Retrieve device list from session variable
var devicesListAll_JSON = getCache('devicesListAll_JSON');
initDeviceSelectors();
// check if cache ready
if(isValidJSON(devicesListAll_JSON))
{
// prepare HTML DOM before initializing the frotend
initDeviceSelectors(devicesListAll_JSON)
// --------------------------------------------------------
//Initialize Select2 Elements and make them sortable
$(function () {
// Iterate over each Select2 dropdown
$('.select2').each(function() {
var selectEl = $(this).select2();
// Apply sortable functionality to the dropdown's dropdown-container
selectEl.next().children().children().children().sortable({
containment: 'parent',
update: function () {
var sortedValues = $(this).children().map(function() {
return $(this).attr('title');
}).get();
var sortedOptions = selectEl.find('option').sort(function(a, b) {
return sortedValues.indexOf($(a).text()) - sortedValues.indexOf($(b).text());
});
// Replace all options in selectEl
selectEl.empty().append(sortedOptions);
// Trigger change event on Select2
selectEl.trigger('change');
}
});
// --------------------------------------------------------
//Initialize Select2 Elements and make them sortable
$(function () {
// Iterate over each Select2 dropdown
$('.select2').each(function() {
var selectEl = $(this).select2();
// Apply sortable functionality to the dropdown's dropdown-container
selectEl.next().children().children().children().sortable({
containment: 'parent',
update: function () {
var sortedValues = $(this).children().map(function() {
return $(this).attr('title');
}).get();
var sortedOptions = selectEl.find('option').sort(function(a, b) {
return sortedValues.indexOf($(a).text()) - sortedValues.indexOf($(b).text());
});
// Replace all options in selectEl
selectEl.empty().append(sortedOptions);
// Trigger change event on Select2
selectEl.trigger('change');
}
});
});
});
});
} else // cache not ready try later
{
setTimeout(() => {
initSelect2()
}, 1000);
}
}
// try to initialize select2
setTimeout(() => {
initSelect2()
}, 500);