From db85a9aeb886a9471f33c6ef36c19c6e6deb2c79 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 15 May 2024 19:05:49 +0200
Subject: [PATCH] Fixes after review

---
 src/components/port-picker/PortPicker.vue |  4 +--
 src/components/port-picker/PortsInput.vue |  6 ++--
 src/index.html                            |  2 +-
 src/js/port_handler.js                    |  2 +-
 src/js/serial_backend.js                  |  6 ++--
 src/js/webSerial.js                       | 34 +++++++++++------------
 6 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 86ad4761aa..3d0c26a668 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -4,7 +4,7 @@
     <PortsInput 
       v-model="value" 
       :connected-devices="connectedDevices"
-      :read-only="readOnly" />
+      :disabled="disabled" />
   </div>
 </template>
 
@@ -25,7 +25,7 @@ export default {
         type: Array,
         default: () => [],
       },
-      readOnly: {
+      disabled: {
         type: Boolean,
         default: false,
       },
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index d7860274c8..2ab2d21b29 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -8,7 +8,7 @@
         id="port"
         class="dropdown-select"
         :title="$t('firmwareFlasherManualPort')"
-        :disabled="readOnly"
+        :disabled="disabled"
         v-model="value.selectedPort"
         @change="onChange"
       >
@@ -41,7 +41,7 @@
             v-model="value.selectedBauds"
             class="dropdown-select"
             :title="$t('firmwareFlasherBaudRate')"
-            :disabled="readOnly"
+            :disabled="disabled"
           >
             <option
               v-for="baudRate in baudRates"
@@ -74,7 +74,7 @@ export default {
         type: Array,
         default: () => [],
       },
-      readOnly: {
+      disabled: {
         type: Boolean,
         default: false,
       },
diff --git a/src/index.html b/src/index.html
index 82ee5e532e..faba7bed1c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,7 +29,7 @@
         <port-picker
             v-model="PortHandler.portPicker"
             :connected-devices="PortHandler.currentPorts"
-            :read-only="PortHandler.readOnly"
+            :disabled="PortHandler.portPickerDisabled"
         ></port-picker>
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 46c0321e6b..e631251461 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -20,7 +20,7 @@ const PortHandler = new function () {
         selectedPort: DEFAULT_PORT,
         selectedBauds: DEFAULT_BAUDS,
     };
-    this.portPickerReadOnly = false;
+    this.portPickerDisabled = false;
     this.port_detected_callbacks = [];
     this.port_removed_callbacks = [];
     this.dfu_available = false;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 98381eb082..09363d877d 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -104,7 +104,7 @@ export function initializeSerialBackend() {
                 GUI.connecting_to = portName;
 
                 // lock port select & baud while we are connecting / connected
-                PortHandler.portPickerReadOnly = true;
+                PortHandler.portPickerDisabled = true;
                 $('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
 
                 const baudRate = selected_baud;
@@ -225,7 +225,7 @@ function finishClose(finishedCallback) {
     $('#dialogReportProblems-closebtn').click();
 
     // unlock port select & baud
-    PortHandler.portPickerReadOnly = false;
+    PortHandler.portPickerDisabled = false;
 
     // reset connect / disconnect button
     $('div.connect_controls a.connect').removeClass('active');
@@ -269,7 +269,7 @@ function abortConnection() {
     $('div#connectbutton a.connect').removeClass('active');
 
     // unlock port select & baud
-    PortHandler.portPickerReadOnly = false;
+    PortHandler.portPickerDisabled = false;
 
     // reset data
     isConnected = false;
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 112957bf26..8b22b1722c 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -31,7 +31,7 @@ class WebSerial extends EventTarget {
         this.logHead = "SERIAL: ";
 
         this.port_counter = 0;
-        this.ports = null;
+        this.ports = [];
         this.port = null;
         this.reader = null;
         this.writer = null;
@@ -39,15 +39,14 @@ class WebSerial extends EventTarget {
 
         this.connect = this.connect.bind(this);
 
-        navigator.serial.addEventListener("connect", e => this.handleNewDevice(e.target).bind(this));
-        navigator.serial.addEventListener("disconnect", e => this.handleRemovedDevice(e.target).bind(this));
+        navigator.serial.addEventListener("connect", e => this.handleNewDevice(e.target));
+        navigator.serial.addEventListener("disconnect", e => this.handleRemovedDevice(e.target));
+
+        this.loadDevices();
     }
 
     handleNewDevice(device) {
         const added = this.createPort(device);
-        if (this.ports === null) {
-            this.ports = [];
-        }
         this.ports.push(added);
         this.dispatchEvent(new CustomEvent("addedDevice", { detail: added }));
     }
@@ -81,6 +80,17 @@ class WebSerial extends EventTarget {
         };
     }
 
+    async loadDevices() {
+        const ports = await navigator.serial.getPorts({
+            filters: webSerialDevices,
+        });
+
+        this.port_counter = 1;
+        this.ports = ports.map(function (port) {
+            return this.createPort(port);
+        }, this);
+    };
+
     async requestPermissionDevice() {
         const permissionPort = await navigator.serial.requestPort({
             filters: webSerialDevices,
@@ -90,18 +100,6 @@ class WebSerial extends EventTarget {
     }; 
 
     async getDevices() {
-
-        if (!this.ports) {
-
-            const ports = await navigator.serial.getPorts({
-                filters: webSerialDevices,
-            });
-
-            this.port_counter = 1;
-            this.ports = ports.map(function (port) {
-                return this.createPort(port);
-            }, this);
-        }
         return this.ports;
     }