ar0c/xiaomusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
涵曦 2024-07-05 10:34:38 +00:00
parent 96e3b8c2ff
commit eaa159c5cb
3 changed files with 105 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
xiaomusic/static/setting.html
View File

@ -6,6 +6,14 @@
<script src="/static/jquery-3.7.1.min.js"></script> <script src="/static/jquery-3.7.1.min.js"></script>
<script src="/static/setting.js"></script> <script src="/static/setting.js"></script>
<link rel="stylesheet" type="text/css" href="/static/style.css"> <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> </head>
<body> <body>
<h2>小爱音箱设置面板 <h2>小爱音箱设置面板
@ -14,6 +22,14 @@
</a>) </a>)
</h2> </h2>
<hr> <hr>
<div class="rows">
<label for="mi_did_hardware">*勾选设备(至少勾选1个):</label>
<div id="mi_did_hardware">
</div>
</div>
<br>
<div id="setting" class="rows"> <div id="setting" class="rows">
<label for="account">*小米账号:</label> <label for="account">*小米账号:</label>
<input id="account" type="text" placeholder="填写小米登录账号"></input> <input id="account" type="text" placeholder="填写小米登录账号"></input>
@ -21,12 +37,6 @@
<label for="password">*小米密码:</label> <label for="password">*小米密码:</label>
<input id="password" type="password" placeholder="填写小米登录密码"></input> <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> <label for="hostname">*XIAOMUSIC_HOSTNAME(IP或域名):</label>
<input id="hostname" type="text"></input> <input id="hostname" type="text"></input>

84
xiaomusic/static/setting.js
View File

@ -16,48 +16,63 @@ $(function(){
}); });
}; };
const updateSelectOptions = (selectId, optionsList, selectedOption) => { function updateCheckbox(selector, mi_did_list, mi_did, mi_hardware_list) {
const select = $(selectId); // 清除现有的内容
select.empty(); $(selector).empty();
optionsList.forEach(option => {
select.append(new Option(option, option)); // 将 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; function getSelectedDidsAndHardware(containerSelector) {
// 更新下拉菜单的函数 var selectedDids = [];
const updateSelect = (selectId, value) => { var selectedHardware = [];
if (!isChanging) {
isChanging = true;
$(selectId).val(value);
isChanging = false;
}
};
// 联动逻辑 // 仅选择给定容器中选中的复选框
const linkSelects = (sourceSelect, sourceList, targetSelect, targetList) => { $(containerSelector + ' .custom-checkbox:checked').each(function() {
$(sourceSelect).change(function() { // 解析当前复选框的值（值中包含了 did 和 hardware，使用 '|' 分割）
if (!isChanging) { var parts = this.value.split('|');
const selectedValue = $(this).val(); selectedDids.push(parts[0]);
const selectedIndex = sourceList.indexOf(selectedValue); selectedHardware.push(parts[1]);
console.log(selectedIndex, selectedValue,sourceList,targetList)
if (selectedIndex !== -1) {
updateSelect(targetSelect, targetList[selectedIndex]);
}
}
}); });
};
// 返回包含 did_list 和 hardware_list 的对象
return {
did_list: selectedDids.join(','),
hardware_list: selectedHardware.join(',')
};
}
// 拉取现有配置 // 拉取现有配置
$.get("/getsetting", function(data, status) { $.get("/getsetting", function(data, status) {
console.log(data, status); console.log(data, status);
updateSelectOptions("#mi_did", data.mi_did_list, data.mi_did); updateCheckbox("#mi_did_hardware", data.mi_did_list, data.mi_did, data.mi_hardware_list);
updateSelectOptions("#hardware", data.mi_hardware_list, data.hardware);
// 初始化联动
linkSelects('#mi_did', data.mi_did_list, '#hardware', data.mi_hardware_list);
// 初始化显示 // 初始化显示
for (const key in data) { for (const key in data) {
@ -82,6 +97,9 @@ $(function(){
data[id] = $(this).val(); data[id] = $(this).val();
} }
}); });
var selectedData = getSelectedDidsAndHardware("#mi_did_hardware");
data["mi_did"] = selectedData.did_list;
data["hardware"] = selectedData.hardware_list;
console.log(data) console.log(data)
$.ajax({ $.ajax({

38
xiaomusic/static/style.css
View File

@ -77,3 +77,41 @@ footer {
width: 300px; width: 300px;
height: 200px; 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; /* 方块字体大小，视清晰度需调整 */
}