Move some code of portOverride from serial_backend to vue (#3992)

src/components/port-picker/PortOverrideOption.vue

@@ -5,18 +5,28 @@
     ><span>{{ $t("portOverrideText") }}</span>
       <input
         id="port-override"
-        v-model="value"
+        :value="value"
         type="text"
+        @change="inputValue($event)"
       ></label>
   </div>
 </template>
 
 <script>
+import { set as setConfig } from '../../js/ConfigStorage';
+
 export default {
-  data() {
-    return {
-      value: "/dev/rfcomm0",
-    };
+  props: {
+    value: {
+      type: String,
+      default: "/dev/rfcomm0",
+    },
+  },
+  methods: {
+    inputValue(event) {
+      setConfig({'portOverride': event.target.value});
+      this.$emit("input", event.target.value);
+    },
   },
 };
 </script>

src/components/port-picker/PortsInput.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import { get as getConfig, set as setConfig } from '../../js/ConfigStorage';
+import { set as setConfig } from '../../js/ConfigStorage';
 import { EventBus } from '../eventBus';
 
 export default {

src/js/port_handler.js

@@ -20,7 +20,7 @@ const PortHandler = new function () {
     this.portPicker = {
         selectedPort: DEFAULT_PORT,
         selectedBauds: DEFAULT_BAUDS,
-        portOverride: "/dev/rfcomm0",
+        portOverride: getConfig('portOverride', '/dev/rfcomm0').portOverride,
         virtualMspVersion: "1.46.0",
         autoConnect: getConfig('autoConnect').autoConnect,
     };

src/js/serial_backend.js

@@ -54,17 +54,6 @@ function disconnectHandler(event) {
 
 export function initializeSerialBackend() {
 
-    // TODO move to Vue
-    $('#port-override').change(function () {
-        setConfig({'portOverride': $('#port-override').val()});
-    });
-
-    // TODO move to Vue
-    const data = getConfig('portOverride');
-    if (data.portOverride) {
-        $('#port-override').val(data.portOverride);
-    }
-
     $("div.connect_controls a.connect").on('click', connectDisconnect);
 
     EventBus.$on('port-handler:auto-select-serial-device', function(device) {