refactor: initial async web server

src_data/pages/upgrade.html

@@ -62,19 +62,19 @@
 
           <form action="/api/upgrade" id="upgrade">
             <fieldset class="primary">
-              <label for="firmware-file">
+              <label>
                 <span data-i18n>upgrade.fw</span>:
                 <div class="grid">
-                  <input type="file" name="firmware" id="firmware-file" accept=".bin">
-                  <button type="button" class="upgrade-firmware-result hidden" disabled></button>
+                  <input type="file" name="fw[file]" accept=".bin">
+                  <button type="button" class="fwResult hidden" disabled></button>
                 </div>
               </label>
 
-              <label for="filesystem-file">
+              <label>
                 <span data-i18n>upgrade.fs</span>:
                 <div class="grid">
-                  <input type="file" name="filesystem" id="filesystem-file" accept=".bin">
-                  <button type="button" class="upgrade-filesystem-result hidden" disabled></button>
+                  <input type="file" name="fs[file]" accept=".bin">
+                  <button type="button" class="fsResult hidden" disabled></button>
                 </div>
               </label>
             </fieldset>
@@ -108,7 +108,125 @@
         lang.build();
 
         setupRestoreBackupForm('#restore');
-        setupUpgradeForm('#upgrade');
+
+        const upgradeForm = document.querySelector('#upgrade');
+        if (upgradeForm) {
+          upgradeForm.reset();
+          const statusToText = (status) => {
+            switch (status) {
+              case 0:
+                return "None";
+              case 1:
+                return "No file";
+              case 2:
+                return "Success";
+              case 3:
+                return "Prohibited";
+              case 4:
+                return "Size mismatch";
+              case 5:
+                return "Error on start";
+              case 6:
+                return "Error on write";
+              case 7:
+                return "Error on finish";
+              default:
+                return "Unknown";
+            }
+          };
+
+          upgradeForm.addEventListener('submit', async (event) => {
+            event.preventDefault();
+
+            hide('.fwResult');
+            hide('.fsResult');
+
+            let button = upgradeForm.querySelector('button[type="submit"]');
+            button.textContent = i18n('button.uploading');
+            button.setAttribute('disabled', true);
+            button.setAttribute('aria-busy', true);
+
+            try {
+              let fd = new FormData();
+
+              const fw = upgradeForm.querySelector("[name='fw[file]']").files;
+              if (fw.length > 0) {
+                fd.append("fw[name]", fw[0].name);
+                fd.append("fw[size]", fw[0].size);
+                fd.append("fw[file]", fw[0]);
+              }
+
+              const fs = upgradeForm.querySelector("[name='fs[file]']").files;
+              if (fs.length > 0) {
+                fd.append("fs[name]", fs[0].name);
+                fd.append("fs[size]", fs[0].size);
+                fd.append("fs[file]", fs[0]);
+              }
+
+              let response = await fetch(upgradeForm.action, {
+                method: "POST",
+                cache: "no-cache",
+                credentials: "include",
+                body: fd
+              });
+              
+              if (response.status != 202 && response.status != 406) {
+                throw new Error('Response not valid');
+              }
+
+              const result = await response.json();
+              let resItem = upgradeForm.querySelector('.fwResult');
+              if (resItem && result.firmware.status > 1) {
+                resItem.textContent = statusToText(result.firmware.status);
+                resItem.classList.remove('hidden');
+
+                if (result.firmware.status == 2) {
+                  resItem.classList.remove('failed');
+                  resItem.classList.add('success');
+                } else {
+                  resItem.classList.remove('success');
+                  resItem.classList.add('failed');
+
+                  if (result.firmware.error != "") {
+                    resItem.textContent += `: ${result.firmware.error}`;
+                  }
+                }
+              }
+
+              resItem = upgradeForm.querySelector('.fsResult');
+              if (resItem && result.filesystem.status > 1) {
+                resItem.textContent = statusToText(result.filesystem.status);
+                resItem.classList.remove('hidden');
+
+                if (result.filesystem.status == 2) {
+                  resItem.classList.remove('failed');
+                  resItem.classList.add('success');
+                } else {
+                  resItem.classList.remove('success');
+                  resItem.classList.add('failed');
+
+                  if (result.filesystem.error != "") {
+                    resItem.textContent += `: ${result.filesystem.error}`;
+                  }
+                }
+              }
+
+            } catch (err) {
+              console.log(err);
+              button.textContent = i18n('button.error');
+              button.classList.add('failed');
+
+            } finally {
+              setTimeout(() => {
+                button.removeAttribute('aria-busy');
+                button.removeAttribute('disabled');
+                button.classList.remove('success', 'failed');
+                button.textContent = i18n(button.dataset.i18n);
+                upgradeForm.reset();
+              }, 10000);
+            }
+          });
+        }
       });
     </script>
   </body>