From 3dd1a98f1bc3f0135b2ecdd49013aeee5e9fcb27 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 21 Sep 2022 20:41:42 +0300
Subject: [PATCH] refactored

---
 web/app.js     |  7 +++++--
 web/index.html | 18 ++++++------------
 web/style.css  |  2 +-
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/web/app.js b/web/app.js
index c0cfddd..efdf78e 100644
--- a/web/app.js
+++ b/web/app.js
@@ -26,8 +26,8 @@ class Application {
     this.$terminalForm = this.$root.querySelector('#terminal_form');
     this.$serialLog = this.$root.querySelector('#serial_log');
     this.$status = this.$root.querySelector('#status');
-    this.$vendorId = this.$root.querySelector('#vendorId');
-    this.$productId = this.$root.querySelector('#productId');
+    this.$vendorId = this.$root.querySelector('#vendor_id');
+    this.$productId = this.$root.querySelector('#product_id');
 
     this.#setupEvents();
   }
@@ -51,6 +51,7 @@ class Application {
       const info = await this.serialPortHandler.open();
       console.log('Port opened: ', info);
       this.$terminalForm.elements.input.removeAttribute('disabled');
+      this.$terminalForm.elements.send.removeAttribute('disabled');
       this.$vendorId.textContent = '0x' + info.usbVendorId.toString(16);
       this.$productId.textContent = '0x' + info.usbProductId.toString(16);
       this.$status.textContent = 'CONNECTED';
@@ -66,6 +67,8 @@ class Application {
   async #disconnectHandler() {
     if (!this.serialPortHandler.isOpened) return;
     await this.serialPortHandler.close();
+    this.$terminalForm.elements.input.setAttribute('disabled', 'true');
+    this.$terminalForm.elements.send.setAttribute('disabled', 'true');
     this.$vendorId.textContent = '-';
     this.$productId.textContent = '-';
     this.$status.textContent = 'NOT CONNECTED';
diff --git a/web/index.html b/web/index.html
index 24665ce..d437828 100644
--- a/web/index.html
+++ b/web/index.html
@@ -15,16 +15,10 @@
         <button id="disconnect">Disconnect</button>
       </div>
       <form id="terminal_form" action="#">
-        <label for="terminal">Enter command name:</label><br />
-        <div class="flex">
-          <input
-            id="input"
-            name="input"
-            placeholder="e.g led_toggle"
-            type="text"
-            disabled
-          />
-          <button type="submit">Send</button>
+        <label for="input">Enter command name:</label><br />
+        <div>
+          <input id="input" name="input" placeholder="e.g led_toggle" type="text" disabled />
+          <button name="send" type="submit" disabled>Send</button>
         </div>
       </form>
       <textarea id="serial_log" placeholder=">" readonly></textarea>
@@ -33,8 +27,8 @@
           <p id="status">not connected</p>
         </div>
         <div>
-          <span>vendorId: <span id="vendorId">-</span>&nbsp;|</span>
-          <span>deviceId: <span id="productId">-</span></span>
+          <span>vendorId: <span id="vendor_id">-</span>&nbsp;|</span>
+          <span>deviceId: <span id="product_id">-</span></span>
         </div>
       </div>
     </div>
diff --git a/web/style.css b/web/style.css
index 7583b79..8933579 100644
--- a/web/style.css
+++ b/web/style.css
@@ -69,7 +69,7 @@ button {
   padding: 5px 15px;
 }
 
-button:hover {
+button:hover:not(:disabled) {
   border: 1px solid var(--border-color-hover);
 }