feat: 设置页面支持配置多设备
This commit is contained in:
涵曦
parent
96e3b8c2ff
commit
eaa159c5cb
@ -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,6 +22,14 @@
|
||||
</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>
|
||||
@ -21,12 +37,6 @@
|
||||
<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>
|
||||
|
||||
|
||||
@ -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
|
||||
});
|
||||
select.val(selectedOption);
|
||||
};
|
||||
|
||||
let isChanging = false;
|
||||
// 更新下拉菜单的函数
|
||||
const updateSelect = (selectId, value) => {
|
||||
if (!isChanging) {
|
||||
isChanging = true;
|
||||
$(selectId).val(value);
|
||||
isChanging = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 联动逻辑
|
||||
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]);
|
||||
}
|
||||
}
|
||||
// 创建标签元素
|
||||
var label = $('<label>', {
|
||||
for: did,
|
||||
class: 'checkbox-label', // 添加样式类
|
||||
text: `【${hardware}】 ${did}` // 设定标签内容为did和hardware的拼接
|
||||
});
|
||||
};
|
||||
|
||||
// 将复选框和标签添加到目标选择器元素中
|
||||
$(selector).append(checkbox).append(label);
|
||||
});
|
||||
}
|
||||
|
||||
function getSelectedDidsAndHardware(containerSelector) {
|
||||
var selectedDids = [];
|
||||
var selectedHardware = [];
|
||||
|
||||
// 仅选择给定容器中选中的复选框
|
||||
$(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({
|
||||
|
||||
@ -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; /* 方块字体大小，视清晰度需调整 */
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user