switch update notification

web/kvm/index.html

@@ -904,6 +904,20 @@
             </tr>
           </table>
           <hr>
+          <div class="hidden" id="switch-message-update">
+                <div class="text">
+                  <table>
+                    <tr>
+                      <td rowspan="2"><img class="sign " src="/share/svg/info.svg"></td>
+                      <td style="line-height:1.5"><b>Good news! Your switch is ready to get the firmware update</b></td>
+                    </tr>
+                    <tr>
+                      <td><sup style="line-height:1">Please <a target="_blank" href="https://docs.pikvm.org/switch/#firmware-updating">follow the instructions</a> when you decide to install it.</sup></td>
+                    </tr>
+                  </table>
+                </div>
+            <hr>
+          </div>
               <table class="kv">
                 <tr>
                       <td>Ask ATX click confirmation:</td>

web/kvm/navbar-switch.pug

@@ -14,6 +14,10 @@ li(id="switch-dropdown" class="right feature-disabled")
 					div(class="text")
 						button(data-force-hide-menu data-show-window="switch-window" class="small") • Settings
 		hr
+		div(id="switch-message-update" class="hidden")
+			+menu_message("info", "Good news! Your switch is ready to get the firmware update")
+				| Please #[a(target="_blank" href="https://docs.pikvm.org/switch/#firmware-updating") follow the instructions] when you decide to install it.
+			hr
 		+menu_switch("switch-atx-ask-switch", "Ask ATX click confirmation", true, true)
 		hr
 		table(id="switch-chain" class="kv")

web/share/js/kvm/switch.js

@@ -406,6 +406,10 @@ export function Switch() {
 		}
 		$("switch-chain").innerHTML = content;
 
+		if (model.units.length > 0) {
+			tools.hidden.setVisible($("switch-message-update"), (model.firmware.version > model.units[0].firmware.version));
+		}
+
 		for (let unit = 0; unit < model.units.length; ++unit) {
 			tools.el.setOnClick($(`__switch-beacon-button-u${unit}`), tools.partial(__switchUplinkBeacon, unit));
 			tools.el.setOnClick($(`__switch-beacon-button-d${unit}`), tools.partial(__switchDownlinkBeacon, unit));