From 9a0fb31dce223017c4883bd806a23a06b607ca4e Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Sun, 14 Jul 2024 14:13:23 +0200
Subject: [PATCH] Hide firmware version dropdown for virtual mode (#4097)

* Hide firmware version dropdown for virtual mode

* Another try

* Cleanup
---
 src/components/port-picker/PortPicker.vue |  8 +++-
 src/js/serial_backend.js                  | 28 +++++--------
 src/main.html                             | 49 +----------------------
 3 files changed, 17 insertions(+), 68 deletions(-)

diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index add7a2e23f..5a57c36377 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -6,7 +6,7 @@
       @input="updateValue('portOverride', $event)"
     />
     <FirmwareVirtualOption
-      v-if="value.selectedPort === 'virtual'"
+      v-if="value.selectedPort === 'virtual' && !isConnected"
       :value="value.virtualMspVersion"
       @input="updateValue('virtualMspVersion', $event)"
     />
@@ -27,6 +27,7 @@
 import PortOverrideOption from "./PortOverrideOption.vue";
 import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
+import CONFIGURATOR from "../../js/data_storage";
 
 export default {
   components: {
@@ -70,6 +71,11 @@ export default {
         default: false,
       },
   },
+  computed: {
+    isConnected() {
+      return CONFIGURATOR.connectionValid;
+    },
+  },
   methods: {
     updateValue(key, value) {
       if (key != null) {
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index e3165379f0..694a3a0ebb 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -642,14 +642,10 @@ function onConnect() {
         }
     }
 
-    const sensorState = $('#sensor-status');
-    sensorState.show();
-
-    const portPicker = $('#portsinput');
-    portPicker.hide();
-
-    const dataflash = $('#dataflash_wrapper_global');
-    dataflash.show();
+    // header bar
+    $('#sensor-status').show();
+    $('#portsinput').hide();
+    $('#dataflash_wrapper_global').show();
 }
 
 function onClosed(result) {
@@ -659,17 +655,11 @@ function onClosed(result) {
     $('#tabs ul.mode-connected-cli').hide();
     $('#tabs ul.mode-disconnected').show();
 
-    const sensorState = $('#sensor-status');
-    sensorState.hide();
-
-    const portPicker = $('#portsinput');
-    portPicker.show();
-
-    const dataflash = $('#dataflash_wrapper_global');
-    dataflash.hide();
-
-    const battery = $('#quad-status_wrapper');
-    battery.hide();
+    // header bar
+    $('#sensor-status').hide();
+    $('#portsinput').show();
+    $('#dataflash_wrapper_global').hide();
+    $('#quad-status_wrapper').hide();
 
     clearLiveDataRefreshTimer();
 
diff --git a/src/main.html b/src/main.html
index a7745098d5..b398fca823 100644
--- a/src/main.html
+++ b/src/main.html
@@ -76,54 +76,7 @@
             :firmware-id="FC.CONFIG.flightControllerIdentifier"
             :hardware-id="FC.CONFIG.hardwareName"
         ></betaflight-logo>
-        <div id="port-picker">
-            <div id="port-override-option">
-                <label for="port-override">
-                    <span i18n="portOverrideText">Port:</span>
-                    <input id="port-override" type="text" value="/dev/rfcomm0"/>
-                </label>
-            </div>
-            <div id="firmware-virtual-option">
-                <div class="dropdown dropdown-dark">
-                    <select id="firmware-version-dropdown" class="dropdown-select" i18n_title="virtualMSPVersion"></select>
-                </div>
-            </div>
-            <div id="portsinput">
-                <div class="dropdown dropdown-dark">
-                    <select class="dropdown-select" id="port" i18n_title="firmwareFlasherManualPort">
-                        <option value="loading" i18n="serialPortLoading">Loading</option>
-                        <!-- port list gets generated here -->
-                    </select>
-                </div>
-                <div id="auto-connect-and-baud">
-                    <div id="auto-connect-switch">
-                        <label>
-                            <input class="auto_connect togglesmall" type="checkbox"/>
-                            <span class="auto_connect" i18n="autoConnect"></span>
-                        </label>
-                    </div>
-                    <div id="baudselect">
-                        <div class="dropdown dropdown-dark">
-                            <select class="dropdown-select" id="baud" i18n_title="firmwareFlasherBaudRate">
-                                <option value="1000000">1000000</option>
-                                <option value="500000">500000</option>
-                                <option value="250000">250000</option>
-                                <option value="115200" selected="selected">115200</option>
-                                <option value="57600">57600</option>
-                                <option value="38400">38400</option>
-                                <option value="28800">28800</option>
-                                <option value="19200">19200</option>
-                                <option value="14400">14400</option>
-                                <option value="9600">9600</option>
-                                <option value="4800">4800</option>
-                                <option value="2400">2400</option>
-                                <option value="1200">1200</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <!-- PortPicker was here -->
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
                 <battery-icon