Disable backup download during application update on mobile #47

This commit is contained in:
Robert Strouse 2023-06-19 13:00:23 -07:00
parent ec499cbec4
commit 415fec020e
7 changed files with 54 additions and 31 deletions

View file

@ -3,7 +3,7 @@
#ifndef configsettings_h #ifndef configsettings_h
#define configsettings_h #define configsettings_h
#define FW_VERSION "v1.7.1" #define FW_VERSION "v1.7.2"
enum DeviceStatus { enum DeviceStatus {
DS_OK = 0, DS_OK = 0,
DS_ERROR = 1, DS_ERROR = 1,

Binary file not shown.

Binary file not shown.

View file

@ -1 +1 @@
1.7.1 1.7.2

View file

@ -3,10 +3,10 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="main.css?v=1.7.1" type="text/css" /> <link rel="stylesheet" href="main.css?v=1.7.2" type="text/css" />
<link rel="stylesheet" href="icons.css?v=1.7.1" type="text/css" /> <link rel="stylesheet" href="icons.css?v=1.7.2" type="text/css" />
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="index.js?v=1.7.1"></script> <script type="text/javascript" src="index.js?v=1.7.2"></script>
</head> </head>
<body> <body>
<div id="divContainer" class="container" style="user-select:none;position:relative;border-radius:27px;"> <div id="divContainer" class="container" style="user-select:none;position:relative;border-radius:27px;">
@ -435,9 +435,9 @@
</form> </form>
</div> </div>
</fieldset> </fieldset>
<fieldset id="fsUpdates" style="display:none"> <fieldset id="fsUpdates" style="display:none;">
<legend>Software/Firmware Updates</legend> <legend>Software/Firmware Updates</legend>
<form method="post" action="/general" style="margin-top:8px;"> <form method="post" action="/general" style="margin-top:8px;height:327px;">
<div style="font-size:17px;"> <div style="font-size:17px;">
<span style="text-align:right;display:inline-block;color:#00bcd4;width:127px;margin-top:-27px;">Firmware:</span> <span style="text-align:right;display:inline-block;color:#00bcd4;width:127px;margin-top:-27px;">Firmware:</span>
<span id="spanFwVersion" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">v-.--</span> <span id="spanFwVersion" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">v-.--</span>

View file

@ -378,7 +378,7 @@ async function reopenSocket() {
await initSockets(); await initSockets();
} }
class General { class General {
appVersion = 'v1.7.1'; appVersion = 'v1.7.2';
reloadApp = false; reloadApp = false;
async init() { async init() {
this.setAppVersion(); this.setAppVersion();
@ -2038,6 +2038,10 @@ class MQTT {
var mqtt = new MQTT(); var mqtt = new MQTT();
class Firmware { class Firmware {
async init() { } async init() { }
isMobile() {
let agt = navigator.userAgent.toLowerCase();
return /Android|iPhone|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)
};
backup() { backup() {
var link = document.createElement('a'); var link = document.createElement('a');
link.href = '/backup'; link.href = '/backup';
@ -2061,11 +2065,12 @@ class Firmware {
html += `<div id="divInstText"></div>`; html += `<div id="divInstText"></div>`;
html += `<input id="fileName" type="file" name="updateFS" style="display:none;" onchange="document.getElementById('span-selected-file').innerText = this.files[0].name;"/>`; html += `<input id="fileName" type="file" name="updateFS" style="display:none;" onchange="document.getElementById('span-selected-file').innerText = this.files[0].name;"/>`;
html += `<label for="fileName">`; html += `<label for="fileName">`;
html += `<span id="span-selected-file" style="display:inline-block;min-width:257px;border-bottom:solid 2px white;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;text-overflow:ellipsis;"></span>`; html += `<span id="span-selected-file" style="display:inline-block;width:calc(100% - 47px);border-bottom:solid 2px white;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;text-overflow:ellipsis;"></span>`;
html += `<div id="btn-select-file" class="button-outline" style="font-size:.8em;padding:10px;"><i class="icss-upload" style="margin:0px;"></i></div>`; html += `<div id="btn-select-file" class="button-outline" style="font-size:.8em;padding:10px;"><i class="icss-upload" style="margin:0px;"></i></div>`;
html += `</label>`; html += `</label>`;
html += `<div class="progress-bar" id="progFileUpload" style="--progress:0%;margin-top:10px;display:none;"></div>` html += `<div class="progress-bar" id="progFileUpload" style="--progress:0%;margin-top:10px;display:none;"></div>`
html += `<div class="button-container">` html += `<div class="button-container">`
html += `<button id="btnBackupCfg" type="button" style="display:none;width:auto;padding-left:20px;padding-right:20px;margin-right:4px;" onclick="firmware.backup();">Backup</button>`
html += `<button id="btnUploadFile" type="button" style="width:auto;padding-left:20px;padding-right:20px;margin-right:4px;display:inline-block;" onclick="firmware.uploadFile('${service}', document.getElementById('divUploadFile'));">Upload File</button>` html += `<button id="btnUploadFile" type="button" style="width:auto;padding-left:20px;padding-right:20px;margin-right:4px;display:inline-block;" onclick="firmware.uploadFile('${service}', document.getElementById('divUploadFile'));">Upload File</button>`
html += `<button id="btnClose" type="button" style="width:auto;padding-left:20px;padding-right:20px;display:inline-block;" onclick="document.getElementById('divUploadFile').remove();">Cancel</button></div>`; html += `<button id="btnClose" type="button" style="width:auto;padding-left:20px;padding-right:20px;display:inline-block;" onclick="document.getElementById('divUploadFile').remove();">Cancel</button></div>`;
html += `</form><div>`; html += `</form><div>`;
@ -2083,8 +2088,14 @@ class Firmware {
general.reloadApp = true; general.reloadApp = true;
let inst = div.querySelector('div[id=divInstText]'); let inst = div.querySelector('div[id=divInstText]');
inst.innerHTML = '<div style="font-size:14px;">Select a binary file [SomfyController.littlefs.bin] containing the littlefs data for the application then press the Upload File button.</div>'; inst.innerHTML = '<div style="font-size:14px;">Select a binary file [SomfyController.littlefs.bin] containing the littlefs data for the application then press the Upload File button.</div>';
inst.innerHTML += '<hr/><div style="font-size:14px;margin-bottom:10px;">A backup file for your configuration will be downloaded to your browser. If the application update process fails please restore this file using the restore button</div>'; if (this.isMobile()) {
inst.innerHTML += `<div style="width:100%;color:red;text-align:center;font-weight:bold;"><span style="margin-top:7px;width:100%;background:yellow;padding:3px;display:inline-block;border-radius:5px;background:white;">WARNING<span></div>`;
inst.innerHTML += '<hr/><div style="font-size:14px;margin-bottom:10px;">This browser does not support automatic backups. It is highly recommended that you back up your configuration using the backup button before proceeding.</div>';
}
else
inst.innerHTML += '<hr/><div style="font-size:14px;margin-bottom:10px;">A backup file for your configuration will be downloaded to your browser. If the application update process fails please restore this file using the restore button</div>';
document.getElementById('fsUpdates').appendChild(div); document.getElementById('fsUpdates').appendChild(div);
if(this.isMobile()) document.getElementById('btnBackupCfg').style.display = 'inline-block';
}; };
async uploadFile(service, el) { async uploadFile(service, el) {
let field = el.querySelector('input[type="file"]'); let field = el.querySelector('input[type="file"]');
@ -2096,28 +2107,30 @@ class Firmware {
errorMessage(el, 'This file is not a valid littleFS file system.'); errorMessage(el, 'This file is not a valid littleFS file system.');
return; return;
} }
// The first thing we need to do is backup the configuration. So lets do this if (!this.isMobile()) {
// in a promise. // The first thing we need to do is backup the configuration. So lets do this
await new Promise((resolve, reject) => { // in a promise.
firmware.backup(); await new Promise((resolve, reject) => {
try { firmware.backup();
// Next we need to download the current configuration data. try {
getText('/shades.cfg', (err, cfg) => { // Next we need to download the current configuration data.
if (err) getText('/shades.cfg', (err, cfg) => {
reject(err); if (err)
else { reject(err);
resolve(); else {
console.log(cfg); resolve();
} console.log(cfg);
}); }
} catch (err) { });
reject(err); } catch (err) {
serviceError(el, err);
reject(err);
return;
}
}).catch((err) => {
serviceError(el, err); serviceError(el, err);
return; });
} }
}).catch((err) => {
serviceError(el, err);
});
break; break;
case '/updateFirmware': case '/updateFirmware':
if (filename.indexOf('.ino.') === -1 || !filename.endsWith('.bin')) { if (filename.indexOf('.ino.') === -1 || !filename.endsWith('.bin')) {
@ -2135,6 +2148,8 @@ class Firmware {
let formData = new FormData(); let formData = new FormData();
let btnUpload = el.querySelector('button[id="btnUploadFile"]'); let btnUpload = el.querySelector('button[id="btnUploadFile"]');
let btnCancel = el.querySelector('button[id="btnClose"]'); let btnCancel = el.querySelector('button[id="btnClose"]');
let btnBackup = el.querySelector('button[id="btnBackupCfg"]');
btnBackup.style.display = 'none';
btnUpload.style.display = 'none'; btnUpload.style.display = 'none';
field.disabled = true; field.disabled = true;
let btnSelectFile = el.querySelector('div[id="btn-select-file"]'); let btnSelectFile = el.querySelector('div[id="btn-select-file"]');
@ -2153,6 +2168,7 @@ class Firmware {
}; };
xhr.onerror = function (err) { xhr.onerror = function (err) {
console.log(err); console.log(err);
serviceError(el, err);
}; };
xhr.onload = function () { xhr.onload = function () {
console.log('File upload load called'); console.log('File upload load called');

View file

@ -489,6 +489,13 @@ div.waitoverlay > .lds-roller {
.somfyShade { .somfyShade {
text-align:center; text-align:center;
padding-bottom:4px; padding-bottom:4px;
display:inline-table;
padding-left:4px;
padding-right:4px;
}
.somfyShade > div,
.somfyShade > span {
display:table-cell;
} }
.button-outline { .button-outline {
background-color: #00bcd4; background-color: #00bcd4;