smithtek-nodered
Version:
NodeRED node to post data on SmithTek using MQTT.
256 lines (229 loc) • 8.97 kB
HTML
<script type="text/x-red" data-template-name="smithtek_in">
<div class="form-row">
<label for="node-input-name">
<i class="fa fa-tag"></i>
<span data-i18n="smithtek.name"></span>
</label>
<input type="text" id="node-input-name" data-i18n="[placeholder]smithtek.name" />
</div>
<div class="form-row">
<label for="node-input-token">
<i class="fa fa-lock"></i>
<span data-i18n="smithtek.token.label"></span>
</label>
<input type="text" id="node-input-token" data-i18n="[placeholder]smithtek.token.placeholder" />
</div>
<div id="device_label" class="form-row">
<label for="node-input-device_label">
<i class="fa fa-tag"></i>
<span data-i18n="smithtek.device_label.label"></span>
</label>
<input type="text" id="node-input-device_label" data-i18n="[placeholder]smithtek.device_label.placeholder" />
</div>
<div class="form-row">
<input type="checkbox" checked id="node-input-tls_checkbox_in" style="display: inline-block; width: auto; vertical-align: top;"></label>
<label for="node-input-tls_checkbox_in" style="width: calc(100% - 170px); margin-left:15px" data-i18n="smithtek.tls.label"></label>
</div>
<hr>
<!-- VARIABLE 1 -->
<div id="variable-1" class="form-row form-row__flex form-row__space-between">
<input type="checkbox" class="variable__selectVariableCheckbox checkbox-hidden" style="opacity:0">
<input type="text" id="node-input-label_variable_1" />
<button class="red-ui-button reset" style="border-color:#ffffff !important; border-top-color:#ffffff"><i style="color:#ffffff" class="fa fa-times"></i></button>
</div>
<hr>
</script>
<script type="text/x-red" data-help-name="smithtek_in">
<p>Subscribes to up to 10 Variable Labels in SMITHTEK Service via MQTT and sends the results as a message to other nodes.</p>
</script>
<script type="text/javascript">
$(document).ready(function () {
RED.nodes.registerType("smithtek_in", {
category: "input",
color: "#B9B6B8",
defaults: {
name: {
value: "SmithTek in",
required: true,
},
token: {
value: "",
required: true,
},
device_label: {
value: "",
required: true,
},
tls_checkbox_in: { value: true },
label_variable_1: {
value: "",
required: true,
},
checkbox_variable_1_last_value: { value: true },
},
inputs: 0,
outputs: 1,
icon: "smithtek.png",
label: function () {
return this.name || this.to || "Smithtek in";
},
labelStyle: function () {
return this.name ? "node_label_italic" : "";
},
oneditprepare: function () {
let activeVariables = [];
let inactiveVariables = [];
let checkedVariables = [];
let auxArray = [];
let genericString = "#variable-";
let genericCheckBoxString = "#ubidots-checkbox-variable-";
let genericLastValueCheckBoxString = "#node-input-checkbox_variable_";
let lastValueString = "_last_value";
let counter = 0;
//hide/show extra variables by default
for (let i = 2; i < 11; i++) {
if (!$("#node-input-label_variable_" + i).val()) {
$(`#variable-${i}`).hide();
inactiveVariables.push(i);
$(`#node-input-checkbox_variable_${i}_last_value`).prop(
"checked",
true
);
}
}
for (let i = 2; i < 11; i++) {
if ($("#node-input-label_variable_" + i).val()) {
counter++;
}
}
if (counter == 9) {
$("#ubidots-add-variable-button").hide();
$("#ubidots-add-variable-button-label").hide();
}
$("#device_label").show();
for (let i = 1; i < 11; i++) {
$(`#node-input-checkbox_variable_${i}_last_value`).show();
$(`#node-input-last-value-label-${i}`).show();
$(`#node-input-label_variable_${i}`).attr(
"placeholder",
"Variable Label " + i
);
}
$("#ubidots-add-variable-button-label").text("Add Variable");
// }
$("#delete-variables-button").hide();
$("#select-all-variables-button").hide();
$("#ubidots-add-variable-button").on("click", function () {
let variableIndex = getMinimum(inactiveVariables);
let index = inactiveVariables.indexOf(variableIndex);
inactiveVariables.splice(index, 1);
activeVariables.push(variableIndex);
$(genericString + variableIndex).show();
showAddButton();
});
//Select All/Unselect All Button
$("#select-all-variables-button").on("click", function () {
//Select All
if (
$("#select-all-variables-button").html().toString() === "Select All"
) {
for (let l = 2; l < 11; l++) {
if ($(`#variable-${l}`).is(":visible")) {
$(genericCheckBoxString + l).prop("checked", true);
let index = checkedVariables.indexOf(l);
if (index < 0) {
checkedVariables.push(l);
}
}
}
$("#select-all-variables-button").html("Unselect All");
} else {
//Unselect All
if (
$("#select-all-variables-button").html().toString() ===
"Unselect All"
) {
for (let l = 2; l < 11; l++) {
if ($(`#variable-${l}`).is(":visible")) {
$(genericCheckBoxString + l).prop("checked", false);
let index = checkedVariables.indexOf(l);
checkedVariables.splice(index, 1);
}
}
$("#select-all-variables-button").html("Select All");
}
}
});
//Delete Button
$("#delete-variables-button").on("click", function () {
auxArray = Array.from(checkedVariables);
for (let i = 0; i < auxArray.length; i++) {
manageArrays(auxArray[i]);
emptyFields(auxArray[i]);
}
auxArray.splice(0, auxArray.length);
showDeleteButton();
showAddButton();
});
function manageCheckBoxes(checkbox, number) {
if ($(checkbox).is(":checked")) {
checkedVariables.push(number);
} else {
let index = checkedVariables.indexOf(number);
checkedVariables.splice(index, 1);
}
}
function manageArrays(number) {
$(genericString + number).hide();
inactiveVariables.push(number);
let index = activeVariables.indexOf(number);
activeVariables.splice(index, 1);
let index2 = checkedVariables.indexOf(number);
checkedVariables.splice(index2, 1);
emptyFields(number);
showAddButton();
}
function emptyFields(number) {
$("#node-input-label_variable_" + number).val("");
$(genericCheckBoxString + number).prop("checked", false);
$(genericLastValueCheckBoxString + number + lastValueString).prop(
"checked",
true
);
}
function showDeleteButton() {
if (checkedVariables.length > 0) {
$("#select-all-variables-button").show();
$("#delete-variables-button").show();
} else {
$("#select-all-variables-button").hide();
$("#delete-variables-button").hide();
}
}
function showAddButton() {
if (inactiveVariables.length > 0) {
document.getElementById("add-button").style.visibility = "visible";
document.getElementById("add-button").style.display = "inline";
document.getElementById("ubidots-add-variable-button").style.visibility = "visible";
document.getElementById("ubidots-add-variable-button").style.display = "inline";
document.getElementById("ubidots-add-variable-button-label").style.visibility = "visible";
document.getElementById("ubidots-add-variable-button-label").style.display = "inline";
document.getElementById("add-button-span").style.visibility = "visible";
document.getElementById("add-button-span").style.display = "inline";
} else {
$("#add-button").hide();
}
}
function getMinimum(array) {
let min = array[0];
for (let i = 1; i < array.length; i++) {
if (array[i] < min) {
min = array[i];
}
}
return min;
}
},
});
});
</script>