@thingweb/node-red-node-wot
Version:
Web of Things nodes for Node-RED using node-wot
257 lines (239 loc) • 10.5 kB
HTML
<script type="text/javascript">
RED.nodes.registerType("read-property", {
category: "Web of Things",
color: "#5fa2a2",
defaults: {
name: { value: "" },
topic: { value: "" },
thing: { value: "", type: "consumed-thing", required: true },
property: { value: "", required: true },
uriVariables: { value: "" },
observe: { value: false },
},
inputs: 1,
outputs: 1,
icon: "arrow-in.png",
paletteLabel: "Read Property",
align: "left",
label: function () {
if (this.name) {
return this.name
} else if (this.property) {
return "Property: " + this.property
} else {
return "read-property"
}
},
oneditprepare: function () {
let node = this
$("#node-input-uriVariables").typedInput({
type: "json",
types: ["json"],
})
// Should be hidden only after typedInput is created
// Otherwise the json input field for uriVariables is not drawn properly
$("div#property-row").hide()
$("#node-input-property").change(function () {
showOrHideObserveCheckbox()
})
$("select#node-input-thing").change(function () {
if (this.value !== "_ADD_") {
showOptions()
} else {
hideOptions()
}
})
function showOrHideObserveCheckbox() {
let property = $("#node-input-property").val()
let thingID = $("select#node-input-thing").val()
if (thingID) {
RED.nodes.eachConfig((config) => {
if (config.id === thingID && config.td) {
let properties = JSON.parse(config.td).properties || {}
if (properties[property] && properties[property].observable) {
$("div#property-observe").show()
} else {
$("#node-input-observe").removeAttr("checked").prop("checked", false).change()
$("div#property-observe").hide()
}
}
})
}
}
function showOptions() {
let thingID = $("select#node-input-thing").val()
if (thingID) {
RED.nodes.eachConfig((config) => {
if (config.id === thingID && config.td) {
// parse TD
let properties = JSON.parse(config.td).properties || {}
// delete old properties
let select = document.getElementById("node-input-property")
while (select.firstChild) select.removeChild(select.firstChild)
// Populate with new properties
let indx = 0
Object.keys(properties).forEach((property) => {
if (properties[property].writeOnly) return
let opt = document.createElement("option")
opt.value = property
opt.innerHTML = property
select.appendChild(opt)
if (property === node.property) {
select.selectedIndex = indx
}
indx++
})
// Show containing div
$("div#property-row").show()
showOrHideObserveCheckbox()
}
})
}
}
function hideOptions() {
let select = (document.getElementById("node-input-property").innerText = "")
node.property = ""
$("div#property-row").hide()
}
},
})
</script>
<script type="text/x-red" data-template-name="read-property">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag "></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-topic"><i class="fa fa-tag "></i> Topic:</label>
<input type="text" id="node-input-topic" placeholder="Topic"/><br/>
</div>
<div class="form-row">
<label for="node-input-thing"><i class="fa fa-gears "></i> Thing</label>
<input type="text" id="node-input-thing" placeholder="Thing">
</div>
<div id="property-row">
<div class="form-row">
<label for="node-input-property"><i class="fa fa-info "></i> Property</label>
<select id="node-input-property"></select>
</div>
<div class="form-row">
<label for="node-input-uriVariables"><i class="fa fa-gear "></i> uriVariables</label>
<input type="text" id="node-input-uriVariables" placeholder='{"foo": "bar"}'>
</div>
<div class="form-row" id="property-observe" style="display:none">
<label for="node-input-observe"><i class="fa fa-bell"></i> Observe</label>
<input type="checkbox" id="node-input-observe">
</div>
</div>
</script>
<script type="text/x-red" data-help-name="read-property">
<p>A node that reads a WoT property and returns the received data.</p>
</script>
<script type="text/javascript">
RED.nodes.registerType("write-property", {
category: "Web of Things",
color: "#5fa2a2",
defaults: {
name: { value: "" },
topic: { value: "" },
thing: { value: "", type: "consumed-thing", required: true },
property: { value: "", required: true },
uriVariables: { value: "" },
},
inputs: 1,
outputs: 0,
icon: "arrow-in.png",
paletteLabel: "Write Property",
align: "right",
label: function () {
if (this.name) {
return this.name
} else if (this.property) {
return "Property: " + this.property
} else {
return "write-property"
}
},
oneditprepare: function () {
let node = this
$("#node-input-uriVariables").typedInput({
type: "json",
types: ["json"],
})
// Should be hidden only after typedInput is created
// Otherwise the json input field for uriVariables is not drawn properly
$("div#property-write-row").hide()
$("select#node-input-thing").change(function () {
if (this.value !== "_ADD_") {
showOptions()
} else {
hideOptions()
}
})
function showOptions() {
let thingID = $("select#node-input-thing").val()
if (thingID) {
RED.nodes.eachConfig((config) => {
if (config.id === thingID && config.td) {
// parse TD
let properties = JSON.parse(config.td).properties || {}
// delete old properties
let select = document.getElementById("node-input-property")
while (select.firstChild) select.removeChild(select.firstChild)
// Populate with properties
let indx = 0
Object.keys(properties).forEach((property) => {
if (properties[property].readOnly) return
let opt = document.createElement("option")
opt.value = property
opt.innerHTML = property
select.appendChild(opt)
if (property === node.property) {
select.selectedIndex = indx
}
indx++
})
// Show containing div
if (!select.firstChild) {
$("div#property-write-row").text("ConsumedThing has no writable properties")
}
$("div#property-write-row").show()
}
})
}
}
function hideOptions() {
let select = (document.getElementById("node-input-property").innerText = "")
node.property = ""
$("div#property-write-row").hide()
}
},
})
</script>
<script type="text/x-red" data-template-name="write-property">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag "></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-topic"><i class="fa fa-tag "></i> Topic:</label>
<input type="text" id="node-input-topic" placeholder="Topic"/><br/>
</div>
<div class="form-row">
<label for="node-input-thing"><i class="fa fa-gears "></i> Thing</label>
<input type="text" id="node-input-thing" placeholder="Thing">
</div>
<div id="property-write-row">
<div class="form-row">
<label for="node-input-property"><i class="fa fa-info "></i> Property</label>
<select id="node-input-property"></select>
</div>
<div class="form-row">
<label for="node-input-uriVariables"><i class="fa fa-gear "></i> uriVariables</label>
<input type="text" id="node-input-uriVariables" placeholder='{"foo": "bar"}'>
</div>
</div>
</script>
<script type="text/x-red" data-help-name="write-property">
<p>A node that writes to a WoT property with the message payload as input data.</p>
</script>