From f09ffccb4dde5b5f44d903220bf13fac2a58e3b7 Mon Sep 17 00:00:00 2001
From: Brian Sharon <brian@floatplane.us>
Date: Mon, 15 Jul 2024 10:56:08 -0600
Subject: [PATCH 1/2] Display old and new firmware names when upgrading

---
 scripts/webserver.rb                 |  4 +++-
 src/frontend/en-us/views/upgrade.mst | 34 +++++++++++++++++++++++++---
 src/main.cpp                         |  1 +
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/scripts/webserver.rb b/scripts/webserver.rb
index 2add48e..89238ef 100755
--- a/scripts/webserver.rb
+++ b/scripts/webserver.rb
@@ -157,7 +157,9 @@ def render(path, context = {})
         mode_selection_all: false,
         login_password: "abc123",
     })
-    when "/upgrade" then res.body = render("upgrade")
+    when "/upgrade" then res.body = render("upgrade", {
+        firmware: 'mitsuqtt-WEMOS_D1_Mini-SPIFFS-2024.07.10-2bc2afc.bin'
+    })
     when "/upload" then res.body = render("upload")
     when "/wifi" then res.body = render("wifi", {access_point: "the_ssid", hostname: "the_hostname", password: "abc123"})
         
diff --git a/src/frontend/en-us/views/upgrade.mst b/src/frontend/en-us/views/upgrade.mst
index fb789e7..60df931 100644
--- a/src/frontend/en-us/views/upgrade.mst
+++ b/src/frontend/en-us/views/upgrade.mst
@@ -3,17 +3,45 @@
     function eb(s) {
         return document.getElementById(s);
     }
+    function ready(fn) {
+        if (document.readyState !== 'loading') {
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+    ready(function() {
+        eb('firmware').addEventListener('change', function() {
+            const fileName = eb('firmware').files[0].name;
+            if (fileName.length > 0) {
+                eb('selectedFileName').innerText = fileName;
+                eb('selectedFile').style.display = 'block';
+                eb('selectFile').style.display = 'none';
+                eb('upgrade').disabled = false;
+            }
+        });
+    });
 </script>
 <main>
 <h2>Upgrade</h2>
     <div id='f1' style='display:block;'>
         <form method='post' action='upload' enctype='multipart/form-data'>
-            <label for='upload'>Select a BIN file containing new firmware</label>
-            <input type='file' accept='.bin' name='upload'>
+            <div style="min-height: 120px">
+                <div id="selectFile">
+                    <label for='upload'>Select a BIN file containing new firmware</label>
+                    <input type='file' accept='.bin' name='upload' id="firmware" >
+                </div>
+                <div id="selectedFile" style="display:none">
+                    <div><b>Current firmware:</b></div>
+                    <div style="margin-bottom: 8px;">{{firmware}}</div>
+                    <div><b>New firmware:</b></div>
+                    <div id="selectedFileName">No file selected</div>
+                </div>
+            </div>
             <br>
             <div class="buttons">
+                <button id="upgrade" disabled type='submit' onclick="eb('f1').style.display='none';eb('f2').style.display='block';this.form.submit();" class='button bgrn'>Start upgrade</button>
                 <a class="buttonLink" href='/setup'>&lt; Back</a>
-                <button type='submit' onclick="eb('f1').style.display='none';eb('f2').style.display='block';this.form.submit();" class='button bgrn'>Start upgrade</button>
             </div>
         </form>
     </div>
diff --git a/src/main.cpp b/src/main.cpp
index 4e2576d..b2bc3a6 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -1302,6 +1302,7 @@ void handleUpgrade() {
 
   uploaderror = UploadError::noError;
   JsonDocument data;
+  data[F("firmware")] = F(MITSUQTT_PROGNAME);
   renderView(views::upgrade, data, {{"header", partials::header}, {"footer", partials::footer}});
 }
 

From 4ebbfc8a0b2354775baf16673660e05aaaffc634 Mon Sep 17 00:00:00 2001
From: Brian Sharon <brian@floatplane.us>
Date: Mon, 15 Jul 2024 19:52:36 -0600
Subject: [PATCH 2/2] Display firmware name with extension consistently

---
 scripts/webserver.rb                 | 2 +-
 src/frontend/en-us/views/status.mst  | 2 +-
 src/frontend/en-us/views/upgrade.mst | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/webserver.rb b/scripts/webserver.rb
index 89238ef..abd0d73 100755
--- a/scripts/webserver.rb
+++ b/scripts/webserver.rb
@@ -158,7 +158,7 @@ def render(path, context = {})
         login_password: "abc123",
     })
     when "/upgrade" then res.body = render("upgrade", {
-        firmware: 'mitsuqtt-WEMOS_D1_Mini-SPIFFS-2024.07.10-2bc2afc.bin'
+        firmware: 'mitsuqtt-WEMOS_D1_Mini-SPIFFS-2024.07.10-2bc2afc'
     })
     when "/upload" then res.body = render("upload")
     when "/wifi" then res.body = render("wifi", {access_point: "the_ssid", hostname: "the_hostname", password: "abc123"})
diff --git a/src/frontend/en-us/views/status.mst b/src/frontend/en-us/views/status.mst
index 61471e0..94d3336 100644
--- a/src/frontend/en-us/views/status.mst
+++ b/src/frontend/en-us/views/status.mst
@@ -30,7 +30,7 @@
         </tr>
         <tr>
             <td class="bold">Firmware</td>
-            <td class="left wrap-text"><code>{{progname}}</code></td>
+            <td class="left wrap-text"><code>{{progname}}.bin</code></td>
         </tr>
         <tr>
             <td class="bold">Build date</td>
diff --git a/src/frontend/en-us/views/upgrade.mst b/src/frontend/en-us/views/upgrade.mst
index 60df931..a5e4292 100644
--- a/src/frontend/en-us/views/upgrade.mst
+++ b/src/frontend/en-us/views/upgrade.mst
@@ -33,9 +33,9 @@
                 </div>
                 <div id="selectedFile" style="display:none">
                     <div><b>Current firmware:</b></div>
-                    <div style="margin-bottom: 8px;">{{firmware}}</div>
+                    <div style="margin-bottom: 8px;"><code>{{firmware}}.bin</code></div>
                     <div><b>New firmware:</b></div>
-                    <div id="selectedFileName">No file selected</div>
+                    <div><code id="selectedFileName">No file selected</code></div>
                 </div>
             </div>
             <br>