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/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>
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
});
|
});
|
||||||
select.val(selectedOption);
|
|
||||||
};
|
|
||||||
|
|
||||||
let isChanging = false;
|
// 创建标签元素
|
||||||
// 更新下拉菜单的函数
|
var label = $('<label>', {
|
||||||
const updateSelect = (selectId, value) => {
|
for: did,
|
||||||
if (!isChanging) {
|
class: 'checkbox-label', // 添加样式类
|
||||||
isChanging = true;
|
text: `【${hardware}】 ${did}` // 设定标签内容为did和hardware的拼接
|
||||||
$(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]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
|
// 将复选框和标签添加到目标选择器元素中
|
||||||
|
$(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) {
|
$.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({
|
||||||
|
|||||||
@ -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; /* 方块字体大小，视清晰度需调整 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user