feat: add serial port config params

lnbits/extensions/watchonly/static/components/serial-port-config/serial-port-config.html

@@ -0,0 +1,67 @@
+<div>
+  <div class="row q-mt-md">
+    <div class="col-12">
+      <q-input
+        filled
+        dense
+        v-model.trim="config.baudRate"
+        type="number"
+        label="Baud Rate"
+      ></q-input>
+    </div>
+  </div>
+  <div class="row q-mt-md">
+    <div class="col-12">
+      <q-input
+        filled
+        dense
+        v-model.trim="config.bufferSize"
+        type="number"
+        label="Buffer Size"
+      ></q-input>
+    </div>
+  </div>
+  <div class="row q-mt-md">
+    <div class="col-12">
+      <q-input
+        filled
+        dense
+        v-model.trim="config.flowControl"
+        label="Flow Control"
+      ></q-input>
+    </div>
+  </div>
+  <div class="row q-mt-md">
+    <div class="col-12">
+      <q-input
+        filled
+        dense
+        v-model.trim="config.parity"
+        label="Parity"
+      ></q-input>
+    </div>
+  </div>
+  <div class="row q-mt-md">
+    <div class="col-12">
+      <q-input
+        filled
+        dense
+        v-model.trim="config.dataBits"
+        type="number"
+        label="Data Bits"
+      ></q-input>
+    </div>
+  </div>
+
+  <div class="row q-mt-md">
+    <div class="col-12">
+      <q-input
+        filled
+        dense
+        v-model.trim="config.stopBits"
+        type="number"
+        label="Stop Bits"
+      ></q-input>
+    </div>
+  </div>
+</div>

lnbits/extensions/watchonly/static/components/serial-port-config/serial-port-config.js

@@ -0,0 +1,24 @@
+async function serialPortConfig(path) {
+  const t = await loadTemplateAsync(path)
+  Vue.component('serial-port-config', {
+    name: 'serial-port-config',
+    template: t,
+    data() {
+      return {
+        config: {
+          baudRate: 9600,
+          bufferSize: 255,
+          dataBits: 8,
+          flowControl: 'none',
+          parity: 'none',
+          stopBits: 1
+        }
+      }
+    },
+    methods: {
+      getConfig: function () {
+        return this.config
+      }
+    }
+  })
+}

lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.html

@@ -5,18 +5,9 @@
     color="primary"
     icon="usb"
     :text-color="selectedPort ? hww.authenticated ? 'green' : 'orange' : 'white'"
-    @click="openSerialPort"
+    @click="openSerialPortDialog"
   >
     <q-list>
-      <q-item v-if="!selectedPort" clickable v-close-popup>
-        <q-item-section>
-          <q-item-label>Configure</q-item-label>
-          <q-item-label caption
-            >Set the Serial Port communication parameters</q-item-label
-          >
-        </q-item-section>
-      </q-item>
-
       <q-item
         v-if="selectedPort && !hww.authenticated"
         clickable
@@ -46,11 +37,13 @@
         v-if="!selectedPort"
         clickable
         v-close-popup
-        @click="openSerialPort"
+        @click="openSerialPortConfig"
       >
         <q-item-section>
           <q-item-label>Connect</q-item-label>
-          <q-item-label caption>Connect Serial Port device.</q-item-label>
+          <q-item-label caption
+            >Set the Serial Port communication parameters.</q-item-label
+          >
         </q-item-section>
       </q-item>
       <q-item
@@ -125,6 +118,27 @@
       </q-item>
     </q-list>
   </q-btn-dropdown>
+
+  <q-dialog v-model="hww.showConfigDialog" position="top">
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <q-form @submit="hwwConfigAndConnect" class="q-gutter-md">
+        <span>Enter Config</span>
+
+        <serial-port-config
+          ref="serialPortConfig"
+          :config="hww.config"
+        ></serial-port-config>
+
+        <div class="row q-mt-lg">
+          <q-btn unelevated color="primary" type="submit">Connect</q-btn>
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+            >Cancel</q-btn
+          >
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
   <q-dialog v-model="hww.showPasswordDialog" position="top">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="hwwLogin" class="q-gutter-md">

lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js

@@ -22,6 +22,7 @@ async function serialSigner(path) {
           showMnemonic: false,
           authenticated: false,
           showPasswordDialog: false,
+          showConfigDialog: false,
           showWipeDialog: false,
           showRestoreDialog: false,
           showConfirmationDialog: false,
@@ -48,9 +49,19 @@ async function serialSigner(path) {
       satBtc(val, showUnit = true) {
         return satOrBtc(val, showUnit, this.satsDenominated)
       },
-      openSerialPort: async function () {
+      openSerialPortDialog: async function () {
+        await this.openSerialPort()
+      },
+      openSerialPort: async function (config = {baudRate: 9600}) {
         if (!this.checkSerialPortSupported()) return false
-        if (this.selectedPort) return true
+        if (this.selectedPort) {
+          this.$q.notify({
+            type: 'warning',
+            message: 'Already connected. Disconnect first!',
+            timeout: 10000
+          })
+          return true
+        }
 
         try {
           navigator.serial.addEventListener('connect', event => {
@@ -68,7 +79,7 @@ async function serialSigner(path) {
           })
           this.selectedPort = await navigator.serial.requestPort()
           // Wait for the serial port to open.
-          await this.selectedPort.open({baudRate: 9600})
+          await this.selectedPort.open(config)
           this.startSerialPortReading()
 
           const textEncoder = new TextEncoderStream()
@@ -89,6 +100,9 @@ async function serialSigner(path) {
           return false
         }
       },
+      openSerialPortConfig: async function () {
+        this.hww.showConfigDialog = true
+      },
       closeSerialPort: async function () {
         try {
           if (this.writer) this.writer.close()
@@ -275,6 +289,12 @@ async function serialSigner(path) {
           })
         }
       },
+      hwwConfigAndConnect: async function () {
+        this.hww.showConfigDialog = false
+        const config = this.$refs.serialPortConfig.getConfig()
+        await this.openSerialPort(config)
+        return true
+      },
       hwwLogin: async function () {
         try {
           await this.writer.write(

lnbits/extensions/watchonly/static/js/index.js

@@ -10,6 +10,9 @@ const watchOnly = async () => {
   await sendTo('static/components/send-to/send-to.html')
   await payment('static/components/payment/payment.html')
   await serialSigner('static/components/serial-signer/serial-signer.html')
+  await serialPortConfig(
+    'static/components/serial-port-config/serial-port-config.html'
+  )
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy

lnbits/extensions/watchonly/templates/watchonly/index.html

@@ -235,5 +235,6 @@
 <script src="{{ url_for('watchonly_static', path='components/send-to/send-to.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='components/payment/payment.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='components/serial-signer/serial-signer.js') }}"></script>
+<script src="{{ url_for('watchonly_static', path='components/serial-port-config/serial-port-config.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}