diff --git a/data/preferences.html b/data/preferences.html index aec5f3f9..b4843c2f 100644 --- a/data/preferences.html +++ b/data/preferences.html @@ -6,7 +6,7 @@ - + CO2 Gadget Configuration @@ -533,12 +533,28 @@

CO2 Gadget Preferences

-
+
+ + + +
+ +
+
+ + + + \ No newline at end of file diff --git a/data/preferences.html.gz b/data/preferences.html.gz index 80cbaad3..0e96d37a 100644 Binary files a/data/preferences.html.gz and b/data/preferences.html.gz differ diff --git a/data/preferences.js b/data/preferences.js index 9c99979a..f4118afa 100644 --- a/data/preferences.js +++ b/data/preferences.js @@ -11,161 +11,162 @@ function fetchVersion() { .catch(error => console.error('Error fetching version information:', error)); } -// Function to load preferences from the server and populate the form -function loadPreferencesFromServer() { - let getPreferencesDebug = true; // Set to false to disable debug output - - fetch('/getActualSettingsAsJson') - .then(response => response.json()) - .then(preferences => { - if (getPreferencesDebug) { - console.log('Received preferences:', preferences); - } +function populateFormWithPreferences(preferences) { - // Populate the form with the received preferences + let getPreferencesDebug = true; // Set to false to disable debug output + if (getPreferencesDebug) { + console.log('Loading preferences:', preferences); + } + // Populate the form with the received preferences - if (getPreferencesDebug) console.log('Setting activeWIFI to:', preferences.activeWIFI); - document.getElementById("activeWIFI").checked = preferences.activeWIFI; + if (getPreferencesDebug) console.log('Setting activeWIFI to:', preferences.activeWIFI); + document.getElementById("activeWIFI").checked = preferences.activeWIFI; - if (getPreferencesDebug) console.log('Setting wifiSSID to:', preferences.wifiSSID); - document.getElementById("wifiSSID").value = preferences.wifiSSID; + if (getPreferencesDebug) console.log('Setting wifiSSID to:', preferences.wifiSSID); + document.getElementById("wifiSSID").value = preferences.wifiSSID; - // if (getPreferencesDebug) console.log('Setting wifiPass to:', preferences.wifiPass); - // document.getElementById("wifiPass").value = preferences.wifiPass; + // if (getPreferencesDebug) console.log('Setting wifiPass to:', preferences.wifiPass); + // document.getElementById("wifiPass").value = preferences.wifiPass; - if (getPreferencesDebug) console.log('Setting hostName to:', preferences.hostName); - document.getElementById("hostName").value = preferences.hostName; + if (getPreferencesDebug) console.log('Setting hostName to:', preferences.hostName); + document.getElementById("hostName").value = preferences.hostName; - if (getPreferencesDebug) console.log('Setting selCO2Sensor to:', preferences.selCO2Sensor); - document.getElementById("selCO2Sensor").value = preferences.selCO2Sensor; + if (getPreferencesDebug) console.log('Setting selCO2Sensor to:', preferences.selCO2Sensor); + document.getElementById("selCO2Sensor").value = preferences.selCO2Sensor; - if (getPreferencesDebug) console.log('Setting autoSelfCalibration to:', preferences.autoSelfCal); - document.getElementById("autoSelfCalibration").checked = preferences.autoSelfCal; + if (getPreferencesDebug) console.log('Setting autoSelfCalibration to:', preferences.autoSelfCal); + document.getElementById("autoSelfCalibration").checked = preferences.autoSelfCal; - if (getPreferencesDebug) console.log('Setting customCalValue to:', preferences.customCalValue); - document.getElementById("customCalValue").value = preferences.customCalValue; + if (getPreferencesDebug) console.log('Setting customCalValue to:', preferences.customCalValue); + document.getElementById("customCalValue").value = preferences.customCalValue; - if (getPreferencesDebug) console.log('Setting co2OrangeRange to:', preferences.co2OrangeRange); - document.getElementById("co2OrangeRange").value = preferences.co2OrangeRange; + if (getPreferencesDebug) console.log('Setting co2OrangeRange to:', preferences.co2OrangeRange); + document.getElementById("co2OrangeRange").value = preferences.co2OrangeRange; - if (getPreferencesDebug) console.log('Setting co2RedRange to:', preferences.co2RedRange); - document.getElementById("co2RedRange").value = preferences.co2RedRange; + if (getPreferencesDebug) console.log('Setting co2RedRange to:', preferences.co2RedRange); + document.getElementById("co2RedRange").value = preferences.co2RedRange; - if (getPreferencesDebug) console.log('Setting tempOffset to:', preferences.tempOffset); - document.getElementById("tempOffset").value = preferences.tempOffset; + if (getPreferencesDebug) console.log('Setting tempOffset to:', preferences.tempOffset); + document.getElementById("tempOffset").value = preferences.tempOffset; - if (getPreferencesDebug) console.log('Setting showFahrenheit to:', preferences.showFahrenheit); - document.getElementById("showFahrenheit").checked = preferences.showFahrenheit; + if (getPreferencesDebug) console.log('Setting showFahrenheit to:', preferences.showFahrenheit); + document.getElementById("showFahrenheit").checked = preferences.showFahrenheit; - if (getPreferencesDebug) console.log('Setting altitudeMeters to:', preferences.altitudeMeters); - document.getElementById("altitudeMeters").value = preferences.altitudeMeters; + if (getPreferencesDebug) console.log('Setting altitudeMeters to:', preferences.altitudeMeters); + document.getElementById("altitudeMeters").value = preferences.altitudeMeters; - if (getPreferencesDebug) console.log('Setting measurementInterval to:', preferences.measurementInterval); - document.getElementById("measurementInterval").value = preferences.measurementInterval; + if (getPreferencesDebug) console.log('Setting measurementInterval to:', preferences.measurementInterval); + document.getElementById("measurementInterval").value = preferences.measurementInterval; - if (getPreferencesDebug) console.log('Setting outModeRelay to:', preferences.outModeRelay); - document.getElementById("outModeRelay").checked = preferences.outModeRelay; + if (getPreferencesDebug) console.log('Setting outModeRelay to:', preferences.outModeRelay); + document.getElementById("outModeRelay").checked = preferences.outModeRelay; - if (getPreferencesDebug) console.log('Setting channelESPNow to:', preferences.channelESPNow); - document.getElementById("channelESPNow").value = preferences.channelESPNow; + if (getPreferencesDebug) console.log('Setting channelESPNow to:', preferences.channelESPNow); + document.getElementById("channelESPNow").value = preferences.channelESPNow; - if (getPreferencesDebug) console.log('Setting boardIdESPNow to:', preferences.boardIdESPNow); - document.getElementById("boardIdESPNow").value = preferences.boardIdESPNow; + if (getPreferencesDebug) console.log('Setting boardIdESPNow to:', preferences.boardIdESPNow); + document.getElementById("boardIdESPNow").value = preferences.boardIdESPNow; - if (getPreferencesDebug) console.log('Setting peerESPNowAddress to:', preferences.peerESPNowAddress); - document.getElementById("peerESPNowAddress").value = preferences.peerESPNowAddress; + if (getPreferencesDebug) console.log('Setting peerESPNowAddress to:', preferences.peerESPNowAddress); + document.getElementById("peerESPNowAddress").value = preferences.peerESPNowAddress; - if (getPreferencesDebug) console.log('Setting neopixBright to:', preferences.neopixBright); - document.getElementById("neopixBright").value = preferences.neopixBright; + if (getPreferencesDebug) console.log('Setting neopixBright to:', preferences.neopixBright); + document.getElementById("neopixBright").value = preferences.neopixBright; - if (getPreferencesDebug) console.log('Setting selNeopxType to:', preferences.selNeopxType); - document.getElementById("selNeopxType").value = preferences.selNeopxType; + if (getPreferencesDebug) console.log('Setting selNeopxType to:', preferences.selNeopxType); + document.getElementById("selNeopxType").value = preferences.selNeopxType; - if (getPreferencesDebug) console.log('Setting activeBLE to:', preferences.activeBLE); - document.getElementById("activeBLE").checked = preferences.activeBLE; + if (getPreferencesDebug) console.log('Setting activeBLE to:', preferences.activeBLE); + document.getElementById("activeBLE").checked = preferences.activeBLE; - if (getPreferencesDebug) console.log('Setting activeMQTT to:', preferences.activeMQTT); - document.getElementById("activeMQTT").checked = preferences.activeMQTT; + if (getPreferencesDebug) console.log('Setting activeMQTT to:', preferences.activeMQTT); + document.getElementById("activeMQTT").checked = preferences.activeMQTT; - if (getPreferencesDebug) console.log('Setting activeESPNOW to:', preferences.activeESPNOW); - document.getElementById("activeESPNOW").checked = preferences.activeESPNOW; + if (getPreferencesDebug) console.log('Setting activeESPNOW to:', preferences.activeESPNOW); + document.getElementById("activeESPNOW").checked = preferences.activeESPNOW; - if (getPreferencesDebug) console.log('Setting mqttClientId to:', preferences.mqttClientId); - document.getElementById("mqttClientId").value = preferences.mqttClientId; + if (getPreferencesDebug) console.log('Setting mqttClientId to:', preferences.mqttClientId); + document.getElementById("mqttClientId").value = preferences.mqttClientId; - if (getPreferencesDebug) console.log('Setting rootTopic to:', preferences.rootTopic); - document.getElementById("rootTopic").value = preferences.rootTopic; + if (getPreferencesDebug) console.log('Setting rootTopic to:', preferences.rootTopic); + document.getElementById("rootTopic").value = preferences.rootTopic; - if (getPreferencesDebug) console.log('Setting mqttBroker to:', preferences.mqttBroker); - document.getElementById("mqttBroker").value = preferences.mqttBroker; + if (getPreferencesDebug) console.log('Setting mqttBroker to:', preferences.mqttBroker); + document.getElementById("mqttBroker").value = preferences.mqttBroker; - if (getPreferencesDebug) console.log('Setting mqttUser to:', preferences.mqttUser); - document.getElementById("mqttUser").value = preferences.mqttUser; + if (getPreferencesDebug) console.log('Setting mqttUser to:', preferences.mqttUser); + document.getElementById("mqttUser").value = preferences.mqttUser; - // if (getPreferencesDebug) console.log('Setting mqttPass to:', preferences.mqttPass); - // document.getElementById("mqttPass").value = preferences.mqttPass; + // if (getPreferencesDebug) console.log('Setting mqttPass to:', preferences.mqttPass); + // document.getElementById("mqttPass").value = preferences.mqttPass; - if (getPreferencesDebug) console.log('Setting batDischgd to:', preferences.batDischgd); - document.getElementById("batDischgd").value = preferences.batDischgd; + if (getPreferencesDebug) console.log('Setting batDischgd to:', preferences.batDischgd); + document.getElementById("batDischgd").value = preferences.batDischgd; - if (getPreferencesDebug) console.log('Setting batChargd to:', preferences.batChargd); - document.getElementById("batChargd").value = preferences.batChargd; + if (getPreferencesDebug) console.log('Setting batChargd to:', preferences.batChargd); + document.getElementById("batChargd").value = preferences.batChargd; - if (getPreferencesDebug) console.log('Setting vRef to:', preferences.vRef); - document.getElementById("vRef").value = preferences.vRef; + if (getPreferencesDebug) console.log('Setting vRef to:', preferences.vRef); + document.getElementById("vRef").value = preferences.vRef; - if (getPreferencesDebug) console.log('Setting tToDispOff to:', preferences.tToDispOff); - document.getElementById("tToDispOff").value = preferences.tToDispOff; + if (getPreferencesDebug) console.log('Setting tToDispOff to:', preferences.tToDispOff); + document.getElementById("tToDispOff").value = preferences.tToDispOff; - if (getPreferencesDebug) console.log('Setting tToPubMQTT to:', preferences.tToPubMQTT); - document.getElementById("tToPubMQTT").value = preferences.tToPubMQTT; + if (getPreferencesDebug) console.log('Setting tToPubMQTT to:', preferences.tToPubMQTT); + document.getElementById("tToPubMQTT").value = preferences.tToPubMQTT; - if (getPreferencesDebug) console.log('Setting tToPubESPNow to:', preferences.tToPubESPNow); - document.getElementById("tToPubESPNow").value = preferences.tToPubESPNow; + if (getPreferencesDebug) console.log('Setting tToPubESPNow to:', preferences.tToPubESPNow); + document.getElementById("tToPubESPNow").value = preferences.tToPubESPNow; - if (getPreferencesDebug) console.log('Setting tKeepAlMQTT to:', preferences.tKeepAlMQTT); - document.getElementById("tKeepAlMQTT").value = preferences.tKeepAlMQTT; + if (getPreferencesDebug) console.log('Setting tKeepAlMQTT to:', preferences.tKeepAlMQTT); + document.getElementById("tKeepAlMQTT").value = preferences.tKeepAlMQTT; - if (getPreferencesDebug) console.log('Setting tKeepAlESPNow to:', preferences.tKeepAlESPNow); - document.getElementById("tKeepAlESPNow").value = preferences.tKeepAlESPNow; + if (getPreferencesDebug) console.log('Setting tKeepAlESPNow to:', preferences.tKeepAlESPNow); + document.getElementById("tKeepAlESPNow").value = preferences.tKeepAlESPNow; - if (getPreferencesDebug) console.log('Setting showTemp to:', preferences.showTemp); - document.getElementById("showTemp").checked = preferences.showTemp; + if (getPreferencesDebug) console.log('Setting showTemp to:', preferences.showTemp); + document.getElementById("showTemp").checked = preferences.showTemp; - if (getPreferencesDebug) console.log('Setting showHumidity to:', preferences.showHumidity); - document.getElementById("showHumidity").checked = preferences.showHumidity; + if (getPreferencesDebug) console.log('Setting showHumidity to:', preferences.showHumidity); + document.getElementById("showHumidity").checked = preferences.showHumidity; - if (getPreferencesDebug) console.log('Setting showBattery to:', preferences.showBattery); - document.getElementById("showBattery").checked = preferences.showBattery; + if (getPreferencesDebug) console.log('Setting showBattery to:', preferences.showBattery); + document.getElementById("showBattery").checked = preferences.showBattery; - if (getPreferencesDebug) console.log('Setting showCO2 to:', preferences.showCO2); - document.getElementById("showCO2").checked = preferences.showCO2; + if (getPreferencesDebug) console.log('Setting showCO2 to:', preferences.showCO2); + document.getElementById("showCO2").checked = preferences.showCO2; - // if (getPreferencesDebug) console.log('Setting showPM25 to:', preferences.showPM25); - // document.getElementById("showPM25").checked = preferences.showPM25; + // if (getPreferencesDebug) console.log('Setting showPM25 to:', preferences.showPM25); + // document.getElementById("showPM25").checked = preferences.showPM25; - if (getPreferencesDebug) console.log('Setting dispOffOnExP to:', preferences.dispOffOnExP); - document.getElementById("dispOffOnExP").checked = preferences.dispOffOnExP; + if (getPreferencesDebug) console.log('Setting dispOffOnExP to:', preferences.dispOffOnExP); + document.getElementById("dispOffOnExP").checked = preferences.dispOffOnExP; - if (getPreferencesDebug) console.log('Setting displayReverse to:', preferences.displayReverse); - document.getElementById("displayReverse").checked = preferences.displayReverse; + if (getPreferencesDebug) console.log('Setting displayReverse to:', preferences.displayReverse); + document.getElementById("displayReverse").checked = preferences.displayReverse; - if (getPreferencesDebug) console.log('Setting DisplayBright to:', preferences.DisplayBright); - document.getElementById("DisplayBright").value = preferences.DisplayBright; + if (getPreferencesDebug) console.log('Setting DisplayBright to:', preferences.DisplayBright); + document.getElementById("DisplayBright").value = preferences.DisplayBright; - if (getPreferencesDebug) console.log('Setting debugSensors to:', preferences.debugSensors); - document.getElementById("debugSensors").checked = preferences.debugSensors; + if (getPreferencesDebug) console.log('Setting debugSensors to:', preferences.debugSensors); + document.getElementById("debugSensors").checked = preferences.debugSensors; - if (getPreferencesDebug) console.log('Setting toneBzrBeep to:', preferences.toneBzrBeep); - document.getElementById("toneBzrBeep").value = preferences.toneBzrBeep; + if (getPreferencesDebug) console.log('Setting toneBzrBeep to:', preferences.toneBzrBeep); + document.getElementById("toneBzrBeep").value = preferences.toneBzrBeep; - if (getPreferencesDebug) console.log('Setting durBzrBeep to:', preferences.durBzrBeep); - document.getElementById("durBzrBeep").value = preferences.durBzrBeep; + if (getPreferencesDebug) console.log('Setting durBzrBeep to:', preferences.durBzrBeep); + document.getElementById("durBzrBeep").value = preferences.durBzrBeep; - if (getPreferencesDebug) console.log('Setting timeBtwnBzr to:', preferences.timeBtwnBzr); - document.getElementById("timeBtwnBzr").value = preferences.timeBtwnBzr; + if (getPreferencesDebug) console.log('Setting timeBtwnBzr to:', preferences.timeBtwnBzr); + document.getElementById("timeBtwnBzr").value = preferences.timeBtwnBzr; +} +function loadPreferencesFromServer() { + fetch('/getActualSettingsAsJson') + .then(response => response.json()) + .then(preferences => { + populateFormWithPreferences(preferences); }) .catch(error => console.error('Error retrieving preferences:', error)); } @@ -237,7 +238,7 @@ function showSavingPopup() { }, 2000); } -// Function to save preferences +// Function to save preferences to server NVR function savePreferences() { // Show a popup to indicate that the preferences are being saved showSavingPopup(); @@ -290,6 +291,82 @@ function restartESP32() { } } +// Function to backup preferences +function backupPreferences() { + // Collect preferences data + var preferencesData = collectPreferencesData(); + + // Convert preferences data to JSON format + var jsonData = JSON.stringify(preferencesData); + + // Create a Blob object with the JSON data + var blob = new Blob([jsonData], { type: 'application/json' }); + + // Create a link element + var a = document.createElement('a'); + + // Set the href attribute to a URL representing the Blob data + a.href = URL.createObjectURL(blob); + + // Set the download attribute to specify the filename + a.download = 'preferences_backup.json'; + + // Append the link to the document body + document.body.appendChild(a); + + // Programmatically click the link to trigger the download + a.click(); + + // Remove the link from the document body + document.body.removeChild(a); + + // Show a message to the user indicating that the backup is completed + alert('Preferences backup completed successfully!'); +} + +// Function to trigger file input click and restore preferences +function chooseFileAndRestore() { + document.getElementById('fileInput').click(); +} + +// Function to handle file selection +function handleFileSelection(event) { + var file = event.target.files[0]; + if (file) { + var reader = new FileReader(); + reader.readAsText(file, 'UTF-8'); + reader.onload = function (evt) { + var preferencesData = evt.target.result; + restorePreferencesFromData(preferencesData); + } + reader.onerror = function (evt) { + console.error("Error reading file:", evt.target.error); + alert("Error reading file. Please try again."); + } + } +} + +// Function to restore preferences from data +function restorePreferencesFromData(preferencesData) { + try { + // Parse preferences data from JSON format + var restoredPreferences = JSON.parse(preferencesData); + + // Apply restored preferences to your application + // For demonstration, let's log the restored preferences + console.log("Restored preferences:", restoredPreferences); + + populateFormWithPreferences(restoredPreferences); + + // Once preferences are applied, you can notify the user or perform any other necessary actions + alert("Preferences restored successfully. Must be saved to apply them.!"); + } catch (error) { + // Handle JSON parsing errors or any other exceptions + console.error("Error restoring preferences:", error); + alert("Error restoring preferences. Please check the data format."); + } +} + // Set initial values when the page loads -// document.addEventListener("DOMContentLoaded", loadPreferencesFromServer); -// document.addEventListener("DOMContentLoaded", fetchVersion); +document.addEventListener("DOMContentLoaded", loadPreferencesFromServer); +document.addEventListener("DOMContentLoaded", fetchVersion); diff --git a/data/preferences.js.gz b/data/preferences.js.gz new file mode 100644 index 00000000..7cfd15df Binary files /dev/null and b/data/preferences.js.gz differ diff --git a/data/style.css b/data/style.css index 6e4acd87..67e34936 100644 --- a/data/style.css +++ b/data/style.css @@ -105,6 +105,17 @@ input[type="checkbox"] { font-size: 14px; } +/* Estilos para botones de backup y restore */ +#backupRestoreButtons { + float: left; + /* Alinea los botones a la izquierda */ +} + +/* Estilos para botones de reset y save */ +#resetSaveButtons { + float: right; + /* Alinea los botones a la derecha */ +} button { background-color: #4caf50; color: white; @@ -116,7 +127,6 @@ button { margin-left: 10px; } -/* Style for the reset button */ #resetButton { background-color: red; color: white; @@ -126,10 +136,6 @@ button { cursor: pointer; } -#buttonContainer { - text-align: right; -} - button:hover { background-color: #45a049; } diff --git a/data/style.css.gz b/data/style.css.gz index 0c361e26..c3d2d892 100644 Binary files a/data/style.css.gz and b/data/style.css.gz differ