Modify the port_handler more the Vue way

betaflight · May 15, 2024 · f3a9541 · f3a9541
1 parent 61904e8
commit f3a9541
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 187 deletions.
diff --git a/src/components/init.js b/src/components/init.js
@@ -13,6 +13,7 @@ import StatusBar from "./status-bar/StatusBar.vue";
 import BatteryIcon from "./quad-status/BatteryIcon.vue";
 import FC from '../js/fc.js';
 import MSP from '../js/msp.js';
+import PortHandler from '../js/port_handler.js';
 import PortUsage from '../js/port_usage.js';
 import PortPicker from './port-picker/PortPicker.vue';
 import CONFIGURATOR from '../js/data_storage.js';
@@ -26,6 +27,7 @@ const betaflightModel = {
     FC,
     MSP,
     PortUsage,
+    PortHandler,
 };
 
 i18next.on('initialized', function() {

diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="web-port-picker">
-    <FirmwareVirtualOption :is-virtual="port === 'virtual'" />
-    <PortsInput v-model="port" />
+    <FirmwareVirtualOption :is-virtual="value.selectedPort === 'virtual'" />
+    <PortsInput 
+      v-model="value" 
+      :connected-devices="connectedDevices"
+      :read-only="readOnly" />
   </div>
 </template>
 
@@ -10,15 +13,27 @@ import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
 
 export default {
+  props: {
+      value: {
+        type: Object,
+        default: {
+          selectedPort: "manual", 
+          selectedBaud: 115200,
+        },
+      },
+      connectedDevices: {
+        type: Array,
+        default: () => [],
+      },
+      readOnly: {
+        type: Boolean,
+        default: false,
+      },
+  },
   components: {
     FirmwareVirtualOption,
     PortsInput,
   },
-  data() {
-    return {
-      port: 'manual',
-    };
-  },
 };
 </script>
 

diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
@@ -8,8 +8,9 @@
         id="port"
         class="dropdown-select"
         :title="$t('firmwareFlasherManualPort')"
-        @value="value"
-        @input="$emit('input', $event.target.value)"
+        :disabled="readOnly"
+        v-model="value.selectedPort"
+        @change="onChange"
       >
         <option value="manual">
           {{ $t("portsSelectManual") }}
@@ -20,16 +21,27 @@
         >
           {{ $t("portsSelectVirtual") }}
         </option>
+        <option
+          v-for="connectedDevice in connectedDevices"
+          :key="connectedDevice.path"
+          :value="connectedDevice.path"
+        >
+          {{ connectedDevice.displayName }}
+        </option>
+        <option value="requestpermission">
+          {{ $t("portsSelectPermission") }}
+        </option>
       </select>
     </div>
     <div id="auto-connect-and-baud">
       <div id="baudselect">
         <div class="dropdown dropdown-dark">
           <select
             id="baud"
-            v-model="selectedBaudRate"
+            v-model="value.selectedBauds"
             class="dropdown-select"
             :title="$t('firmwareFlasherBaudRate')"
+            :disabled="readOnly"
           >
             <option
               v-for="baudRate in baudRates"
@@ -52,15 +64,25 @@ import { EventBus } from '../eventBus';
 export default {
     props: {
       value: {
-        type: String,
-        default: 'manual',
+        type: Object,
+        default: {
+          selectedPort: 'manual', 
+          selectedBaud: 115200,
+        },
+      },
+      connectedDevices: {
+        type: Array,
+        default: () => [],
+      },
+      readOnly: {
+        type: Boolean,
+        default: false,
       },
     },
 
     data() {
         return {
             showVirtual: false,
-            selectedBaudRate: "115200",
             baudRates: [
                 { value: "1000000", label: "1000000" },
                 { value: "500000", label: "500000" },
@@ -88,6 +110,14 @@ export default {
       setShowVirtual() {
         this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
       },
+      onChange(event) {
+        if (event.target.value === 'requestpermission') {
+          event.target.value = 'manual';
+          EventBus.$emit('ports-input:request-permission');
+        } else {
+          EventBus.$emit('ports-input:change', event.target.value);
+        }
+      },
     },
 };
 </script>

diff --git a/src/index.html b/src/index.html
@@ -26,7 +26,11 @@
             :firmware-id="FC.CONFIG.flightControllerIdentifier"
             :hardware-id="FC.CONFIG.hardwareName"
         ></betaflight-logo>
-        <port-picker></port-picker>
+        <port-picker
+            v-model="PortHandler.portPicker"
+            :connected-devices="PortHandler.currentPorts"
+            :read-only="PortHandler.readOnly"
+        ></port-picker>
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
                 <battery-icon