Make port_handler work with PWA (#3958)

* Make port_handler work with PWA

* Modify the port_handler more the Vue way

* Fixes after review

* Fix request permission option not being deselected

* Hide baud selection in port picker if virtual port

* Added port override option for manual

* Fix virtual port state when loading the page

* Fix request permission adds the same device several times

* Fix automatic selection of device under Linux

locales/en/messages.json

@@ -62,6 +62,10 @@
         "message": "Virtual Mode (Experimental)",
         "description": "Configure a Virtual Flight Controller without the need of a physical FC."
     },
+    "portsSelectPermission": {
+        "message": "--- I can't find my device ---",
+        "description": "Option in the port selection dropdown to allow the user to give permissions to the system to access the device."
+    },
     "virtualMSPVersion": {
         "message": "Virtual Firmware Version"
     },

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() {

src/components/port-picker/FirmwareVirtualOption.vue

@@ -1,13 +1,13 @@
 <template>
   <div
     id="firmware-virtual-option"
-    :style="{ display: isVirtual ? 'block' : 'none' }"
   >
     <div class="dropdown dropdown-dark">
       <select
         id="firmware-version-dropdown"
         class="dropdown-select"
         :title="$t('virtualMSPVersion')"
+        v-model="value"
       >
         <option
           v-for="(version, index) in firmwareVersions"
@@ -24,9 +24,9 @@
 <script>
 export default {
     props: {
-        isVirtual: {
-            type: Boolean,
-            default: true,
+        value: {
+            type: String,
+            default: "1.46.0",
         },
     },
     data() {
@@ -50,7 +50,7 @@ export default {
     width: 180px;
     margin-right: 15px;
     margin-top: 0px;
-    display: none;
+    display: block;
 }
 .dropdown {
     display: inline-block;

src/components/port-picker/PortOverrideOption.vue

@@ -1,42 +1,43 @@
 <template>
-  <div
-    id="port-override-option"
-    style="display: none"
-    :style="{ display: isManual ? 'flex' : 'none' }"
-  >
+  <div id="port-override-option">
     <label
       for="port-override"
     ><span>{{ $t("portOverrideText") }}</span>
       <input
         id="port-override"
         type="text"
-        value="/dev/rfcomm0"
+        v-model="value"
       ></label>
   </div>
 </template>
 
 <script>
 export default {
-    props: {
-        isManual: {
-            type: Boolean,
-            default: true,
-        },
+  props: {
+    value: {
+      type: String,
+      default: "/dev/rfcomm0",
     },
+    isManual: {
+        type: Boolean,
+        default: true,
+    },
+  },
 };
 </script>
 <style scoped>
 #port-override-option {
     font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
     font-size: 12px;
-    margin-top: 16px;
+    margin-top: 4px;
     margin-right: 15px;
     label {
         background-color: #2b2b2b;
         border-radius: 3px;
         padding: 3px;
         color: var(--subtleAccent);
-    }
+    };
+    display: block;
 }
 
 #port-override-option label {

src/components/port-picker/PortPicker.vue

@@ -1,24 +1,50 @@
 <template>
   <div class="web-port-picker">
-    <FirmwareVirtualOption :is-virtual="port === 'virtual'" />
-    <PortsInput v-model="port" />
+    <PortOverrideOption 
+      v-if="value.selectedPort === 'manual'"
+      v-model="value.portOverride"
+    />
+    <FirmwareVirtualOption 
+      v-if="value.selectedPort === 'virtual'" 
+      v-model="value.virtualMspVersion"
+    />
+    <PortsInput 
+      v-model="value" 
+      :connected-devices="connectedDevices"
+      :disabled="disabled" />
   </div>
 </template>
 
 <script>
+import PortOverrideOption from "./PortOverrideOption.vue";
 import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
 
 export default {
+  props: {
+      value: {
+        type: Object,
+        default: {
+          selectedPort: "manual", 
+          selectedBaud: 115200,
+          portOverride: "/dev/rfcomm0",
+          virtualMspVersion: "1.46.0",
+        },
+      },
+      connectedDevices: {
+        type: Array,
+        default: () => [],
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+  },
   components: {
+    PortOverrideOption,
     FirmwareVirtualOption,
     PortsInput,
   },
-  data() {
-    return {
-      port: 'manual',
-    };
-  },
 };
 </script>
 

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="disabled"
+        v-model="value.selectedPort"
+        @change="onChange"
       >
         <option value="manual">
           {{ $t("portsSelectManual") }}
@@ -20,16 +21,29 @@
         >
           {{ $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 id="baudselect"
+        v-if="value.selectedPort !== 'virtual'"
+      >
         <div class="dropdown dropdown-dark">
           <select
             id="baud"
-            v-model="selectedBaudRate"
+            v-model="value.selectedBauds"
             class="dropdown-select"
             :title="$t('firmwareFlasherBaudRate')"
+            :disabled="disabled"
           >
             <option
               v-for="baudRate in baudRates"
@@ -52,15 +66,25 @@ import { EventBus } from '../eventBus';
 export default {
     props: {
       value: {
-        type: String,
-        default: 'manual',
+        type: Object,
+        default: {
+          selectedPort: 'manual', 
+          selectedBaud: 115200,
+        },
+      },
+      connectedDevices: {
+        type: Array,
+        default: () => [],
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
       },
     },
 
     data() {
         return {
             showVirtual: false,
-            selectedBaudRate: "115200",
             baudRates: [
                 { value: "1000000", label: "1000000" },
                 { value: "500000", label: "500000" },
@@ -80,13 +104,23 @@ export default {
     },
     mounted() {
       EventBus.$on('config-storage:set', this.setShowVirtual);
+      this.setShowVirtual('showVirtualMode');
     },
     destroyed() {
       EventBus.$off('config-storage:set', this.setShowVirtual);
     },
     methods: {
-      setShowVirtual() {
-        this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
+      setShowVirtual(element) {
+        if (element === 'showVirtualMode') {
+          this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
+        }
+      },
+      onChange(event) {
+        if (event.target.value === 'requestpermission') {
+          EventBus.$emit('ports-input:request-permission');
+        } else {
+          EventBus.$emit('ports-input:change', event.target.value);
+        }
       },
     },
 };

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"
+            :disabled="PortHandler.portPickerDisabled"
+        ></port-picker>
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
                 <battery-icon

src/js/ConfigStorage.js

@@ -45,7 +45,7 @@ export function set(input) {
     tmpObj[element] = input[element];
     try {
       localStorage.setItem(element, JSON.stringify(tmpObj));
-      EventBus.$emit(`config-storage:set`, 'element');
+      EventBus.$emit('config-storage:set', element);
     } catch (e) {
       console.error(e);
     }