feat: 🚩 implement the function of custom button

Author: shengyuan

index.html

@@ -372,7 +372,7 @@
     </div>
     <div id="main02" class="panel hide">
       <div class="input-group">
-        <input type="text" class="input-group-input" id="sendMessage">
+        <input type="text" class="input-group-input" id="customMessage">
         <button class="input-group-button">傳送</button>
       </div>
       <div id="btn0n" msg="btn0" class="btn"></div>

js/main.js

@@ -1,4 +1,17 @@
 ~async function () {
+
+  function handleCustomButton() {
+    const sendButton = document.querySelector('.input-group-button');
+    const customMessage = document.getElementById('customMessage');
+    sendButton.addEventListener('click', () => {
+      mqttPush(list.topic1, customMessage.value);
+      sendButton.classList.add('click');
+      setTimeout(() => {
+        sendButton.classList.remove('click');
+      }, 100);
+    });
+  }
+
   // 載入 js 之後顯示所有元件
   const content = document.querySelector('.content');
   content.classList.remove('loading');
@@ -225,13 +238,7 @@
     });
   });
 
-  const sendButton = document.querySelector('.input-group-button');
-  sendButton.addEventListener('click', () => {
-    sendButton.classList.add('click');
-    setTimeout(() => {
-      sendButton.classList.remove('click');
-    }, 100);
-  });
+  handleCustomButton();
 
   let send = {
     center: false,