在后台增加 1到10击 功能设置

TC1/http_server/web/index.html

@@ -119,7 +119,9 @@
                 <div class="demo-options mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
                     <div class="mdl-card__supporting-text">
 
-                        <h3>插座控制</h3>
+                        <div class="mdl-card__title mdl-card--expand">
+                            <h2 class="mdl-card__title-text">插座控制</h2>
+                        </div>
                         <!--
                         <span class="mdl-list__item-secondary-action">
                           <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-0">
@@ -283,10 +285,33 @@
                     </div>
                 </div>
             </div>
+            <div class="page page1 demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
+                <div class="demo-options mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
+                    <div class="mdl-card__supporting-text">
+                        <div class="mdl-card__title mdl-card--expand">
+                            <h2 class="mdl-card__title-text">按键自定义</h2>
+                        </div>
+                        <table id="short_click_events_tb" class="mdl-data-table mdl-js-data-table">
+                            <tr>
+                                <th>按键类型</th>
+                                <th>执行操作</th>
+                            </tr>
+                            <tr>
+                                <td>连续短按1次</td>
+                                <td><a>总开关</a></td>
+                            </tr>
+                        </table>
+
+                </div>
+                </div></div>
+
 
             <div id="ct-chart-par"
                  class="page page1 mdl-card__supporting-text mdl-shadow--2dp mdl-cell mdl-cell--6-col"
                  style="height:315px;overflow-x:scroll;overflow-y:hidden;">
+                <div class="mdl-card__title mdl-card--expand">
+                    <h2 class="mdl-card__title-text">功率图表</h2>
+                </div>
                 <table class="pw">
                     <tr>
                         <td>当前功率: <span id="p" class="success">0</span> W</td>
@@ -296,7 +321,7 @@
                     </tr>
                 </table>
                 <div id="ct-chart" class="ct-chart ct-perfect-fourth"
-                     style="height:280px;margin-top:20px;"></div>
+                     style="height:280px;margin-top:40px;"></div>
             </div>
 
             <div class="page page2 mdl-cell mdl-cell--5-col demo-card-square mdl-card mdl-shadow--2dp"
@@ -539,8 +564,8 @@
                         <td id="uptime">10:13:43</td>
                     </tr>
                 </table>
-                <div class="mdl-card__actions mdl-card--border">
-                    <span>提示：长按电源按钮5s，指示灯闪烁3次可开启热点重新配网，10s指示灯保持闪烁恢复出厂设置</span>
+                <div class="mdl-card__actions mdl-card--border" style="display: flex; align-items: center; flex-wrap: wrap;">
+                    <span style="font-size:0.8em;">提示：长按电源按钮5s，指示灯闪烁3次可开启热点重新配网，10s指示灯保持闪烁恢复出厂设置</span>
                     <div class="mdl-layout-spacer"></div>
                     <i class="material-icons">
                         <svg>
@@ -837,6 +862,46 @@
       $("#info_mask").html(status.mask);
       $("#info_gateway").html(status.gateway);
       $("#uptime").html(status.up_time);
+
+
+      var actions=status.shortClicks.split(",");
+    //按键操作功能定义
+    var BTN_OPERATIONS=["切换总开关"];
+    for (var i = 0; i < names_arr.length; i++) {
+      BTN_OPERATIONS.push(`切换${names_arr[i]}`);
+    }
+    BTN_OPERATIONS.push("切换电源指示灯启用");
+var tb_html = `
+  <tr>
+    <th>按键类型</th>
+    <th>执行操作</th>
+  </tr>
+`;
+
+for (var i = 0; i < actions.length; i++) {
+  var rowId = `select-${i}`;
+  tb_html += `
+    <tr>
+      <td>${i > 0 ? '连续' : ''}短按${i + 1}次</td>
+      <td>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
+          <input class="mdl-textfield__input" type="text" id="${rowId}-input" readonly value="${BTN_OPERATIONS[actions[i]]}">
+          <input type="hidden" id="${rowId}-value" value="${actions[i]}">
+          <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="${rowId}-input">
+  ${BTN_OPERATIONS.map((op, idx) =>
+    `<li class="mdl-menu__item" data-val="${idx}" onclick="selectOperation('${rowId}', ${idx}, BTN_OPERATIONS)"> ${op} </li>`
+  ).join('')}
+</ul>
+        </div>
+      </td>
+    </tr>
+  `;
+}
+document.getElementById("short_click_events_tb").innerHTML = tb_html;
+// 刷新 MDL 元素
+componentHandler.upgradeDom();
+
+
     });
     $("#st-date").html((new Date()).Format("yyyy-MM-dd"));
 
@@ -1145,6 +1210,42 @@
             switch_lables[i+3].MaterialSwitch.off();
           }
         }
+var actions=power.shortClicks.split(",");
+    //按键操作功能定义
+    var BTN_OPERATIONS=["切换总开关"];
+    for (var i = 0; i < names_arr.length; i++) {
+      BTN_OPERATIONS.push(`切换${names_arr[i]}`);
+    }
+    BTN_OPERATIONS.push("切换电源指示灯启用");
+var tb_html = `
+  <tr>
+    <th>按键类型</th>
+    <th>执行操作</th>
+  </tr>
+`;
+
+for (var i = 0; i < actions.length; i++) {
+  var rowId = `select-${i}`;
+  tb_html += `
+    <tr>
+      <td>${i > 0 ? '连续' : ''}短按${i + 1}次</td>
+      <td>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
+          <input class="mdl-textfield__input" type="text" id="${rowId}-input" readonly value="${BTN_OPERATIONS[actions[i]]}">
+          <input type="hidden" id="${rowId}-value" value="${actions[i]}">
+          <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="${rowId}-input">
+  ${BTN_OPERATIONS.map((op, idx) =>
+    `<li class="mdl-menu__item" data-val="${idx}" onclick="selectOperation('${rowId}', ${idx}, BTN_OPERATIONS)"> ${op} </li>`
+  ).join('')}
+</ul>
+        </div>
+      </td>
+    </tr>
+  `;
+}
+document.getElementById("short_click_events_tb").innerHTML = tb_html;
+// 刷新 MDL 元素
+componentHandler.upgradeDom();
 
         window.setTimeout(GetPowerRecord, 3000);
       }, power_idx.toString());
@@ -1222,6 +1323,16 @@
         GetTimedTask();
       }, cmd);
     }
+function selectOperation(rowId, index, operations) {
+var witch = parseInt(rowId.split('-')[1]);
+  const selectedText = operations[index];
+  document.getElementById(`${rowId}-input`).value = selectedText;
+  document.getElementById(`${rowId}-value`).value = index;
+HttpDel("/shortClickEvent", function (re) {
+        ShowToast("已设置按钮事件");
+      }, `${witch} index`);
+}
+
     function DelTimedTask(timestamp) {
       HttpDel("/task/"+timestamp, function (re) {
         ShowToast("Delete timed task OK!");