新增定时关机命令，新增控制面板界面

2025-12-18 16:53:33 +08:00 · 2024-01-28 18:17:45 +08:00
parent f1938b9096
commit c7ab57c06a
8 changed files with 383 additions and 54 deletions
--- a/xiaomusic/static/app.js
+++ b/xiaomusic/static/app.js
@@ -0,0 +1,44 @@
+$(function(){
+  // 拉取所有可操作的命令
+  $.get("/allcmds", function(data, status) {
+    console.log(data, status);
+
+    $container=$("#cmds");
+    // 遍历数据
+    for (const [key, value] of Object.entries(data)) {
+      append_op_button(key);
+    }
+
+    append_op_button("5分钟后关机");
+    append_op_button("10分钟后关机");
+    append_op_button("30分钟后关机");
+    append_op_button("60分钟后关机");
+  });
+
+  function append_op_button(name) {
+      // 创建按钮
+      const $button = $("<button>");
+      $button.text(name);
+      $button.attr("type", "button");
+
+      // 设置按钮点击事件
+      $button.on("click", () => {
+        // 发起post请求
+        $.ajax({
+          type: "POST",
+          url: "/cmd",
+          contentType: "application/json",
+          data: JSON.stringify({cmd: name}),
+          success: () => {
+            // 请求成功时执行的操作
+          },
+          error: () => {
+            // 请求失败时执行的操作
+          }
+        });
+      });
+
+      // 添加按钮到容器
+      $container.append($button);
+  }
+});
--- a/xiaomusic/static/index.html
+++ b/xiaomusic/static/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width">
+    <title>小爱音箱操控面板</title>
+    <script src="/static/jquery-3.7.1.min.js"></script>
+    <script src="/static/app.js"></script>
+    <style>
+      button {
+          margin: 10px;
+          width: 100px;
+          height: 50px;
+      }
+    </style>
+</head>
+<body>
+    <h2>小爱音箱操控面板</h2>
+    <hr>
+    <div id="cmds">
+    </div>
+</body>
+</html>
--- a/xiaomusic/static/jquery-3.7.1.min.js
+++ b/xiaomusic/static/jquery-3.7.1.min.js