Merge pull request #1 from webduinoio/feature/3940

Feature/3940

Author: Rin-kingkit

css/main.css

@@ -329,6 +329,52 @@ body {
   pointer-events: none;
 }
 
+#main02 .input-group {
+  display: inline-flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 77%;
+  margin-bottom: 2rem;
+}
+
+#main02 .input-group-input {
+  display: block;
+  font-size: 1.5rem;
+  line-height: 1;
+  width: 1%;
+  flex: 1 1 auto;
+  background: none;
+  color: #ddd;
+  margin: 0 auto;
+  padding: 10px 1rem;
+  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  border-radius: 10px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#main02 .input-group-button {
+  display: inline-block;
+  font-size: 1.5rem;
+  line-height: 1;
+  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .1);
+  color: #fff;
+  vertical-align: top;
+  transition:.3s;
+  padding: 10px 1rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin: 0 0 0 3px;
+}
+
+#main02 .input-group-button.click {
+  background: rgba(255, 255, 255, .4);
+  box-shadow:inset #ccc 0 0 0 3px, #ccc 0 0 0 0;
+}
+
 #main02 .btn {
   display: inline-block;
   width: 38%;

index.html

@@ -371,6 +371,10 @@
       </footer>
     </div>
     <div id="main02" class="panel hide">
+      <div class="input-group">
+        <input type="text" class="input-group-input" id="customMessage" placeholder="輸入文字">
+        <button class="input-group-button">傳送</button>
+      </div>
       <div id="btn0n" msg="btn0" class="btn"></div>
       <div id="btn1n" msg="btn1" class="btn"></div>
       <div id="btn2n" msg="btn2" class="btn"></div>
@@ -441,27 +445,27 @@ <h3>怪獸廣播訊息</h3>
         <h3>按鈕廣播訊息</h3>
         <table>
           <tr>
-            <th><input class="btn-name" m="btn0n"></th>
+            <th><input class="btn-name" m="btn0n" placeholder="按鈕 1"></th>
             <td><input class="btn-msg" m="btn0"></td>
           </tr>
           <tr>
-            <th><input class="btn-name" m="btn1n"></th>
+            <th><input class="btn-name" m="btn1n" placeholder="按鈕 2"></th>
             <td><input class="btn-msg" m="btn1"></td>
           </tr>
           <tr>
-            <th><input class="btn-name" m="btn2n"></th>
+            <th><input class="btn-name" m="btn2n" placeholder="按鈕 3"></th>
             <td><input class="btn-msg" m="btn2"></td>
           </tr>
           <tr>
-            <th><input class="btn-name" m="btn3n"></th>
+            <th><input class="btn-name" m="btn3n" placeholder="按鈕 4"></th>
             <td><input class="btn-msg" m="btn3"></td>
           </tr>
           <tr>
-            <th><input class="btn-name" m="btn4n"></th>
+            <th><input class="btn-name" m="btn4n" placeholder="按鈕 5"></th>
             <td><input class="btn-msg" m="btn4"></td>
           </tr>
           <tr>
-            <th><input class="btn-name" m="btn5n"></th>
+            <th><input class="btn-name" m="btn5n" placeholder="按鈕 6"></th>
             <td><input class="btn-msg" m="btn5"></td>
           </tr>
           <tr>
@@ -477,7 +481,7 @@ <h3>按鈕廣播訊息</h3>
             <td><input class="btn-msg" m="btn8"></td>
           </tr>
           <tr>
-            <th><input class="btn-name" m="btn9n" placeholder="按鈕 910"></th>
+            <th><input class="btn-name" m="btn9n" placeholder="按鈕 10"></th>
             <td><input class="btn-msg" m="btn9"></td>
           </tr>
         </table>

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,6 +238,8 @@
     });
   });
 
+  handleCustomButton();
+
   let send = {
     center: false,
     top: false,