feat: 设置页面支持配置多设备

hanxi · Jul 5, 2024 · eaa159c · eaa159c
1 parent 96e3b8c
commit eaa159c
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 39 deletions.
diff --git a/xiaomusic/static/setting.html b/xiaomusic/static/setting.html
@@ -6,6 +6,14 @@
     <script src="/static/jquery-3.7.1.min.js"></script>
     <script src="/static/setting.js"></script>
     <link rel="stylesheet" type="text/css" href="/static/style.css">
+
+    <!--
+<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+<script>
+var vConsole = new window.VConsole();
+</script>
+-->
+
   </head>
   <body>
     <h2>小爱音箱设置面板
@@ -14,19 +22,21 @@ <h2>小爱音箱设置面板
       </a>)
     </h2>
     <hr>
+
+    <div class="rows">
+      <label for="mi_did_hardware">*勾选设备(至少勾选1个):</label>
+      <div id="mi_did_hardware">
+      </div>
+    </div>
+    <br>
+
     <div id="setting" class="rows">
       <label for="account">*小米账号:</label>
       <input id="account" type="text" placeholder="填写小米登录账号"></input>
 
       <label for="password">*小米密码:</label>
       <input id="password" type="password" placeholder="填写小米登录密码"></input>
 
-      <label for="mi_did">*MI_DID:</label>
-      <select id="mi_did"></select>
-
-      <label for="hardware">*MI_HARDWARE(型号):</label>
-      <select id="hardware" disabled></select>
-
       <label for="hostname">*XIAOMUSIC_HOSTNAME(IP或域名):</label>
       <input id="hostname" type="text"></input>
 

diff --git a/xiaomusic/static/setting.js b/xiaomusic/static/setting.js
@@ -16,48 +16,63 @@ $(function(){
     });
   };
 
-  const updateSelectOptions = (selectId, optionsList, selectedOption) => {
-    const select = $(selectId);
-    select.empty();
-    optionsList.forEach(option => {
-      select.append(new Option(option, option));
+  function updateCheckbox(selector, mi_did_list, mi_did, mi_hardware_list) {
+    // 清除现有的内容
+    $(selector).empty();
+
+    // 将 mi_did 字符串通过逗号分割转换为数组，以便于判断默认选中项
+    var selected_dids = mi_did.split(',');
+
+    // 遍历传入的 mi_did_list 和 mi_hardware_list
+    $.each(mi_did_list, function(index, did) {
+      // 获取硬件标识，假定列表是一一对应的
+      var hardware = mi_hardware_list[index];
+
+      // 创建复选框元素
+      var checkbox = $('<input>', {
+        type: 'checkbox',
+        id: did,
+        value: `${did}|${hardware}`,
+        class: 'custom-checkbox', // 添加样式类
+        // 如果mi_did中包含了该did，则默认选中
+        checked: selected_dids.indexOf(did) !== -1
+      });
+
+      // 创建标签元素
+      var label = $('<label>', {
+        for: did,
+        class: 'checkbox-label', // 添加样式类
+        text: `【${hardware}】 ${did}` // 设定标签内容为did和hardware的拼接
+      });
+
+      // 将复选框和标签添加到目标选择器元素中
+      $(selector).append(checkbox).append(label);
     });
-    select.val(selectedOption);
-  };
+  }
 
-  let isChanging = false;
-  // 更新下拉菜单的函数
-  const updateSelect = (selectId, value) => {
-    if (!isChanging) {
-      isChanging = true;
-      $(selectId).val(value);
-      isChanging = false;
-    }
-  };
+  function getSelectedDidsAndHardware(containerSelector) {
+    var selectedDids = [];
+    var selectedHardware = [];
 
-  // 联动逻辑
-  const linkSelects = (sourceSelect, sourceList, targetSelect, targetList) => {
-    $(sourceSelect).change(function() {
-      if (!isChanging) {
-        const selectedValue = $(this).val();
-        const selectedIndex = sourceList.indexOf(selectedValue);
-        console.log(selectedIndex, selectedValue,sourceList,targetList)
-        if (selectedIndex !== -1) {
-          updateSelect(targetSelect, targetList[selectedIndex]);
-        }
-      }
+    // 仅选择给定容器中选中的复选框
+    $(containerSelector + ' .custom-checkbox:checked').each(function() {
+      // 解析当前复选框的值（值中包含了 did 和 hardware，使用 '|' 分割）
+      var parts = this.value.split('|');
+      selectedDids.push(parts[0]);
+      selectedHardware.push(parts[1]);
     });
-  };
 
+    // 返回包含 did_list 和 hardware_list 的对象
+    return {
+      did_list: selectedDids.join(','),
+      hardware_list: selectedHardware.join(',')
+    };
+  }
 
   // 拉取现有配置
   $.get("/getsetting", function(data, status) {
     console.log(data, status);
-    updateSelectOptions("#mi_did", data.mi_did_list, data.mi_did);
-    updateSelectOptions("#hardware", data.mi_hardware_list, data.hardware);
-
-    // 初始化联动
-    linkSelects('#mi_did', data.mi_did_list, '#hardware', data.mi_hardware_list);
+    updateCheckbox("#mi_did_hardware", data.mi_did_list, data.mi_did, data.mi_hardware_list);
 
     // 初始化显示
     for (const key in data) {
@@ -82,6 +97,9 @@ $(function(){
         data[id] = $(this).val();
       }
     });
+    var selectedData = getSelectedDidsAndHardware("#mi_did_hardware");
+    data["mi_did"] = selectedData.did_list;
+    data["hardware"] = selectedData.hardware_list;
     console.log(data)
 
     $.ajax({

diff --git a/xiaomusic/static/style.css b/xiaomusic/static/style.css
@@ -77,3 +77,41 @@ footer {
   width: 300px;
   height: 200px;
 }
+
+/* 隐藏原生复选框 */
+.custom-checkbox {
+  display: none;
+}
+
+/* 修改后的自定义复选框外观 */
+.checkbox-label {
+  display: inline-block;
+  width: 200px; /* 宽度 */
+  height: 20px; /* 高度 */
+  background-color: #fff; /* 背景颜色 */
+  border: 0px solid #ccc; /* 边框 */
+  border-radius: 3px; /* 圆角边框 */
+  position: relative; /* 设置相对定位 */
+  cursor: pointer; /* 鼠标形状 */
+  padding-left: 40px; /* 给左边的复选框图标留下空位 */
+}
+
+/* 对勾的样式 */
+.custom-checkbox:checked + .checkbox-label::after {
+  content: '✔';
+  position: absolute;
+  left: 10px; /* 对勾图标靠左侧位置 */
+  color: #000; /* 对勾颜色 */
+  font-size: 18px; /* 对勾字体大小，视清晰度需调整 */
+}
+
+/* 标签文本样式，使用 ::before 伪元素表示复选框未选中时的样式 */
+.custom-checkbox + .checkbox-label::before {
+  content: '⬜'; /* 表示未选中时的复选框样式，这里用了白色方块 */
+  position: absolute;
+  left: 8px; /* 方块图标靠左侧位置 */
+  top: 1px; /* 方块图标顶部位置 */
+  color: #000; /* 方块颜色 */
+  font-size: 18px; /* 方块字体大小，视清晰度需调整 */
+}
+