node-red-contrib-voice-assistant
Version:
一个小度-小爱-猫精音箱控制NODE-RED自定义设备的节点
337 lines (305 loc) • 11.8 kB
HTML
<style>
table {
width: 100%;
border-collapse: collapse;
margin-right: 20px;
}
table,
th,
td {
border: 1px solid #ccc;
}
</style>
<script type="text/x-red" data-template-name="hass link">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> 名称</label>
<input type="text" id="node-input-name" >
</div>
<div class="form-row">
<label for="node-input-broker"><i class="fa fa-globe"></i> 服务配置</label>
<input type="text" id="node-input-broker">
</div>
<div class="form-row">
<label for="node-input-address"><i class="fa fa-tag"></i> HA地址</label>
<input type="text" id="node-input-address" >
</div>
<div class="form-row">
<label for="node-input-token"><i class="fa fa-tag"></i> HA-TOKEN</label>
<input type="text" id="node-input-token" >
</div>
<div class="form-row" >
<label for="node-input-devlist"><i class="fa fa-tag"></i>设备列表</label>
<table id = "devtable" >
<tr>
<th style="width:30px;"><input type="checkbox" id="check"></th>
<th>设备名</th>
<th>entity_id</th>
</tr>
</table>
</div>
</script>
<script type="text/javascript">
var deviceData = []
RED.nodes.registerType('hass link', {
category: '语音控制',
defaults: {
name: { value: "" },
address: { value: "", validate: RED.validators.regex(/^ws{1,2}:\/\/.*[:]{1}[0-9]{2,5}$/) },
token: { value: "", required: true },
broker: { type: "ServiceConfig", required: true },
devdata: { value: [] }
},
color: "#038fc7",
inputs: 0,
outputs: 1,
icon: "hass.png",
label: function () {
return this.name || "hass link";
},
oneditprepare: function () {
console.log(this.devdata)
$("#check").click(function () {
if ($(this).prop("checked")) {
$("input[type='checkbox']").attr("checked", true);
} else {
$("input[type='checkbox']").attr("checked", false);
}
})
let n = this
$.getJSON('GetVoiceDeviceList', function (data) {
data = data.data
console.log(data)
for (let i = 0; i < data.length; i++) {
if (!data[i].entity_id)
continue;
const obj = n.devdata.find(it => it.id === data[i].entity_id)
let $row = $("<tr></tr>")
if (!obj) $row.append($('<td><input type="checkbox"></td>'));
if (obj) {
if (!obj.enable)
$row.append($('<td><input type="checkbox"></td>'));
else
$row.append($('<td><input type="checkbox" checked></td>'));
$row.append($("<td contenteditable='true'>" + obj.name + "</td>"));
} else $row.append($("<td contenteditable='true'>" + data[i].name + "</td>"));
$row.append($("<td>" + data[i].entity_id + "</td>"));
$('#devtable').append($row)
}
})
},
oneditsave: function () {
this.devdata = []
let n = this
console.log(this)
$('#devtable tr').each(function (i, row) {
if (i > 0) {
n.devdata.push({
enable: $(this).find('td:eq(0) input').is(":checked"),
name: $(this).find('td:eq(1)').text(),
id: $(this).find('td:eq(2)').text()
})
}
})
// $.post("PostHaDevList", { data: deviceData }, function (data) { })
}
});
</script>
<script type="text/x-red" data-template-name="cmd in">
<div class="form-row">
<label for="node-input-broker"><i class="fa fa-globe"></i> 服务配置</label>
<input type="text" id="node-input-broker">
</div>
<div class="form-row">
<label for="node-input-devtype"><i class="fa fa-tag"></i> 设备类型</label>
<select id="node-input-devtype" style="width:125px !important">
<option value="light">灯</option>
<option value="switch">开关</option>
<option value="cover">窗帘</option>
<option value="climate">空调</option>
<option value="fan">风扇</option>
</select>
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> 设备名</label>
<input type="text" id="node-input-name" >
</div>
</script>
<script type="text/javascript">
RED.nodes.registerType('cmd in', {
category: '语音控制',
defaults: {
name: { value: "", required: true },
devtype: { value: "light", required: true },
broker: { type: "ServiceConfig", required: true }
},
color: "#3FADB5",
inputs: 0,
outputs: 1,
icon: "arrow-in.svg",
label: function () {
return this.name || "";
},
oneditprepare: function () {
}
});
</script>
<script type="text/x-red" data-template-name="state out">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> 名称</label>
<input type="text" id="node-input-name" >
</div>
<div class="form-row">
<label for="node-input-broker"><i class="fa fa-globe"></i> 服务配置</label>
<input type="text" id="node-input-broker">
</div>
</script>
<script type="text/javascript">
RED.nodes.registerType('state out', {
category: '语音控制',
defaults: {
name: { value: "" },
datatype: { value: "json" },
broker: { type: "ServiceConfig", required: true }
},
color: "#3FADB5",
inputs: 1,
outputs: 0,
icon: "link-out.svg",
label: function () {
return this.name || "";
},
});
</script>
<script type="text/x-red" data-template-name="frpc">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> 名称</label>
<input type="text" id="node-input-name" >
</div>
<div class="form-row" style="margin-bottom:0;">
<label><i class="fa fa-list"></i> 映射配置<span data-i18n="change.label.rules"></span></label>
</div>
<div class="form-row node-input-rule-container-row">
<ol id="node-input-rule-container"></ol>
</div>
<div class="form-row">
<label for="node-input-broker"><i class="fa fa-globe"></i> 服务配置</label>
<input type="text" id="node-input-broker">
</div>
</script>
<script type="text/javascript">
RED.nodes.registerType('frpc', {
category: '语音控制',
defaults: {
name: { value: "" },
options: { value: [{ url: "127.0.0.1", port: 0 }],required:true },
broker: { type: "ServiceConfig", required: true }
},
color: "#3FADB5",
inputs: 0,
outputs: 1,
icon: "link-out.svg",
label: function () {
return this.name || "";
},
oneditprepare: function () {
console.log(this.options)
function resizeRule(rule) {
var newWidth = rule.width();
rule.find('.red-ui-typedInput').typedInput("width", newWidth - 130);
}
$('#node-input-rule-container').css('min-height', '300px').css('min-width', '300px').editableList({
addItem: function (container, i, opt) {
container.css({
overflow: 'hidden',
whiteSpace: 'nowrap'
});
var row2 = $('<div/>', { style: "margin-top:8px;" }).appendTo(container);
var row3 = $('<div/>', { style: "margin-top:8px;" }).appendTo(container);
// row2_1 text Addr:
$('<div/>',
{ style: "display:inline-block;text-align:right; width:80px; margin-right:10px; box-sizing:border-box;" })
.text("本地IP:")
.appendTo(row2);
// row2_2 address input:
var url = $('<input/>',
{
class: "node-input-rule-url",
type: "text"
})
.appendTo(row2)
.typedInput({ types: ['str'] });
//row3_1 text Number:
$('<div/>',
{ style: "display:inline-block;text-align:right; width:80px; margin-right:10px; box-sizing:border-box;" })
.text("本地端口:")
.appendTo(row3);
//row3_2 regs_number input:
var port = $('<input/>',
{
class: "node-input-rule-port",
type: "text"
})
.appendTo(row3)
.typedInput({ types: ['num'] });
//row3_1 text Number:
url.typedInput('value', opt.url);
port.typedInput('value', opt.port);
console.log(opt)
//selectField.change();
var newWidth = $("#node-input-rule-container").width();
resizeRule(container);
},
resizeItem: resizeRule,
removable: true,
sortable: true
});
for (var i = 0; i < this.options.length; i++) {
var rule = this.options[i];
$("#node-input-rule-container").editableList('addItem', rule);
}
},
oneditsave: function () {
var rules = $("#node-input-rule-container").editableList('items');
var node = this;
node.options = [];
rules.each(function (i) {
var rule = $(this);
var r = {
url: rule.find(".node-input-rule-url").typedInput('value'),
port: rule.find(".node-input-rule-port").typedInput('value'),
};
node.options.push(r);
console.log(r);
console.log(node.options)
});
},
});
</script>
<script type="text/html" data-template-name="ServiceConfig">
<div class="form-row">
<label for="node-config-input-username"><i class="fa fa-user"></i> 用户名</label>
<input type="text" id="node-config-input-username" placeholder="输入米家APP及其它语音平台第三方绑定的用户名">
</div>
<div class="form-row">
<label for="node-config-input-password"><i class="fa fa-lock"></i>密码</label>
<input type="password" id="node-config-input-password" >
</div>
<!-- <div class="form-row">
<label>帐号注册:</label><a href="https://www.abc.top">点击注册用户</a>
</div> -->
</script>
<script type="text/javascript">
RED.nodes.registerType('ServiceConfig', {
category: 'config',
defaults: {
name: { value: "" },
},
credentials: {
username: { type: "text" },
password: { type: "password" }
},
label: function () {
return this.name || "服务配置";
}
});
</script>