node-red-contrib-chronos
Version:
Time-based Node-RED scheduling, repeating, queueing, routing, filtering and manipulating nodes
493 lines (443 loc) • 21.6 kB
HTML
<!--
Copyright (c) 2020 - 2026 Jens-Uwe Rossbach
This code is licensed under the MIT License.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<script type="text/html" data-template-name="chronos-config">
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red-contrib-chronos/chronos-config:common.label.name"></span></label>
<input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red-contrib-chronos/chronos-config:common.label.name">
</div>
<div class="form-row" style="margin-bottom: 0px;">
<ul style="min-width: 520px; margin-bottom: 20px;" id="tab-row"></ul>
</div>
<div id="tabs-content">
<div id="tab-location" style="display: none;">
<div class="form-row">
<div style="display: inline-block; width: auto; vertical-align: middle;">
<div>
<label for="node-config-input-latitude"><i class="fa fa-arrows-v" style="width: 14px; text-align: center;"></i> <span data-i18n="config.label.latitude"></span></label>
<input type="text" id="node-config-input-latitude" style="width: 60%;">
<input id="node-config-input-latitudeType" type="hidden">
</div>
<div style="margin-top: 12px;">
<label for="node-config-input-longitude"><i class="fa fa-arrows-h"></i> <span data-i18n="config.label.longitude"></span></label>
<input type="text" id="node-config-input-longitude" style="width: 60%;">
<input id="node-config-input-longitudeType" type="hidden">
</div>
</div>
<div style="display: inline-block; width: auto; margin-left: 10px;">
<button type="button" id="node-config-input-locationDetection" class="red-ui-button" style="border-radius: 50%;" data-i18n="[title]config.label.locationDetection"><i class='fa fa-location-arrow'></i></button>
</div>
</div>
<div class="form-row">
<iframe id="node-config-input-map" width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border: 1px solid #CCCCCC; border-radius: 4px;"></iframe>
</div>
</div>
<div id="tab-time" style="display: none;">
<div class="form-row">
<label for="node-config-input-timezone"><i class="fa fa-globe"></i> <span data-i18n="config.label.timezone"></span></label>
<input type="text" id="node-config-input-timezone" style="width: 70%;">
<input id="node-config-input-timezoneType" type="hidden">
</div>
<div class="form-row" style="margin-bottom: 4px;">
<label for="node-config-input-missingHour" style="width: auto;"><i class="fa fa-clock-o"></i> <span data-i18n="config.label.missingHour"></span></label>
</div>
<div class="form-row">
<select id="node-config-input-missingHour" style="margin-left: 104px; width: auto;">
<option value="skip" data-i18n="config.list.missingHour.skip"></option>
<option value="offset" data-i18n="config.list.missingHour.offset"></option>
<option value="insert" data-i18n="config.list.missingHour.insert"></option>
</select>
</div>
<div class="form-row">
<input id="node-config-input-skipRepeatedHour" type="checkbox" style="margin-top: 0px; margin-bottom: 1px; width: auto;">
<label for="node-config-input-skipRepeatedHour" style="margin-bottom: 0px; width: auto;" data-i18n="config.label.skipRepeatedHour"></label>
</div>
</div>
<div id="tab-sunPositions" style="display: none;">
<div class="form-row list-row" style="margin-bottom: 20px;">
<div class="form-row">
<ol id="node-input-sunPositionList"></ol>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript">
(function()
{
RED.nodes.registerType("chronos-config",
{
category: "config",
icon: "chronos_config.svg",
label: function()
{
return (this.name || ((this.credentials && (this.latitudeType == "num") && (this.longitudeType == "num") && this.credentials.latitude && this.credentials.longitude) ? (this.credentials.latitude + ", " + this.credentials.longitude) : this._("config.label.node")));
},
defaults:
{
name:
{
value: ""
},
latitudeType:
{
value: "num"
},
longitudeType:
{
value: "num"
},
timezone:
{
value: "",
validate: function(v, opt)
{
let res = true;
if ((this.timezoneType != "str") && !v)
{
res = opt ? this._("node-red-contrib-chronos/chronos-config:common.error.invalidTimeZone") : false;
}
return res;
}
},
missingHour:
{
value: "insert"
},
skipRepeatedHour:
{
value: false
},
timezoneType:
{
value: "str"
},
sunPositions:
{
value: [],
validate: function(v)
{
if (v && (v.length > 0))
{
const EXP = /^[0-9a-zA-Z_]+$/;
let valid = true;
let names = [];
// check for invalid names
for (let i=0; i<v.length; ++i)
{
if (!EXP.test(v[i].riseName) || !EXP.test(v[i].setName))
{
valid = false;
break;
}
names.push(v[i].riseName);
names.push(v[i].setName);
if (hasDuplicates(names))
{
valid = false;
break;
}
}
return valid;
}
else
{
return true;
}
function hasDuplicates(arr)
{
return arr.some(item =>
{
return (arr.indexOf(item) !== arr.lastIndexOf(item));
});
}
}
}
},
credentials:
{
latitude:
{
type: "text",
value: ""
},
longitude:
{
type: "text",
value: ""
}
},
oneditprepare: function()
{
const node = this;
let latitude = undefined;
let longitude = undefined;
let noMapUpdate = false;
const latitudeInput = $("#node-config-input-latitude")
.typedInput({types: ["num", "env", "global"], typeField: "#node-config-input-latitudeType"});
const longitudeInput = $("#node-config-input-longitude")
.typedInput({types: ["num", "env", "global"], typeField: "#node-config-input-longitudeType"});
const timezoneInput = $("#node-config-input-timezone")
.typedInput({types: ["str", "env", "global"], typeField: "#node-config-input-timezoneType"});
const tabs = RED.tabs.create(
{
id: "tab-row",
onchange: function(tab)
{
$("#tabs-content").children().hide();
$("#" + tab.id).show();
RED.tray.resize();
}
});
tabs.addTab({id: "tab-location", iconClass: "fa fa-map-marker", label: node._("config.label.location")});
tabs.addTab({id: "tab-time", iconClass: "fa fa-clock-o", label: node._("config.label.time")});
tabs.addTab({id: "tab-sunPositions", iconClass: "fa fa-sun-o", label: node._("config.label.sunPositions")});
tabs.activateTab("tab-locaton");
const updateMap = function(force = false)
{
let prevLatitude = latitude;
let prevLongitude = longitude;
if (latitudeInput.typedInput("type") == "num")
{
latitude = parseFloat(latitudeInput.typedInput("value"));
}
else if (latitudeInput.typedInput("type") == "env")
{
$.getJSON(
"chronos_config", {
command: "getenv",
varname: latitudeInput.typedInput("value")})
.done(result =>
{
latitude = parseFloat(result);
if ((latitude != prevLatitude) || (longitude != prevLongitude))
{
relocateMap();
}
});
}
else if (latitudeInput.typedInput("type") == "global")
{
latitude = undefined;
}
if (longitudeInput.typedInput("type") == "num")
{
longitude = parseFloat(longitudeInput.typedInput("value"));
}
else if (longitudeInput.typedInput("type") == "env")
{
$.getJSON(
"chronos_config", {
command: "getenv",
varname: longitudeInput.typedInput("value")})
.done(result =>
{
longitude = parseFloat(result);
if ((latitude != prevLatitude) || (longitude != prevLongitude))
{
relocateMap();
}
});
}
else if (longitudeInput.typedInput("type") == "global")
{
longitude = undefined;
}
if ((latitude != prevLatitude) || (longitude != prevLongitude) || force)
{
relocateMap();
}
};
const relocateMap = function()
{
const map = $("#node-config-input-map");
if ((latitude !== undefined) && (longitude !== undefined) &&
!Number.isNaN(latitude) && !Number.isNaN(longitude))
{
map.attr("src", "https://www.openstreetmap.org/export/embed.html?bbox="
+ (longitude - 0.001) + ","
+ (latitude - 0.001) + ","
+ (longitude + 0.001) + ","
+ (latitude + 0.001)
+ "&layer=mapnik&marker="
+ latitude + ","
+ longitude);
map.show();
}
else
{
map.hide();
}
};
const validateInput = function(event, ui)
{
if (/^(\+|-)?\d+(\.\d+)?$/.test($(this).spinner("value")))
{
let value = parseFloat($(this).spinner("value"));
let min = $(this).spinner("option", "min");
let max = $(this).spinner("option", "max");
if (value < min)
{
$(this).spinner("value", min);
}
else if (value > max)
{
$(this).spinner("value", max);
}
}
else
{
$(this).spinner("value", 0);
}
};
const sunAngleInput =
{
min: -90,
max: 90,
step: 0.001,
numberFormat: "n",
change: validateInput
};
if (navigator.geolocation)
{
$("#node-config-input-locationDetection").click(function()
{
navigator.geolocation.getCurrentPosition(pos =>
{
noMapUpdate = true;
latitudeInput.typedInput("value", pos.coords.latitude);
longitudeInput.typedInput("value", pos.coords.longitude);
latitudeInput.typedInput("type", "num");
longitudeInput.typedInput("type", "num");
noMapUpdate = false;
updateMap();
});
});
}
else
{
$("#node-config-input-locationDetection").hide();
}
updateMap(true);
let sunPositionList = $("#node-input-sunPositionList").css("min-width", "500px").css("min-height", "150px").editableList(
{
removable: true,
sortable: true,
addItem: function(item, index, data)
{
const fragment = document.createDocumentFragment();
const angleLabel = $("<label/>", {style: "width: auto; margin-left: 5px; margin-bottom: 0px;"})
.text(node._("config.label.angle") + " ")
.appendTo(fragment);
const angle = $("<input/>", {class: "node-input-angle", style: "width: 40px !important; margin-left: 6px;"})
.appendTo(angleLabel)
.spinner(sunAngleInput);
const riseLabel = $("<label/>", {title: node._("config.label.riseName"), style: "width: auto; margin-left: 12px; margin-bottom: 0px;"})
.html("<i class='fa fa-arrow-up' aria-hidden='true'></i>")
.appendTo(fragment);
const riseName = $("<input/>", {type: "text", class: "node-input-riseName", placeholder: node._("config.label.riseName"), style: "width: 110px; margin-left: 6px;"})
.appendTo(riseLabel);
const setLabel = $("<label/>", {title: node._("config.label.setName"), style: "width: auto; margin-left: 12px; margin-bottom: 0px;"})
.html("<i class='fa fa-arrow-down' aria-hidden='true'></i>")
.appendTo(fragment);
const setName = $("<input/>", {type: "text", class: "node-input-setName", placeholder: node._("config.label.setName"), style: "width: 110px; margin-left: 6px;"})
.appendTo(setLabel);
if (!("angle" in data))
{
data = {angle: 0, riseName: "", setName: ""};
}
angle.spinner("value", data.angle);
riseName.val(data.riseName);
setName.val(data.setName);
item[0].appendChild(fragment);
}
});
latitudeInput.on("change", function(event, type, value)
{
if (!noMapUpdate)
{
updateMap();
}
});
longitudeInput.on("change", function(event, type, value)
{
if (!noMapUpdate)
{
updateMap();
}
});
if (!node.sunPositions) // backward compatibility to v1.1.0
{
node.sunPositions = [];
}
// backward compatibility to v1.29.3 and below
if (typeof node.missingHour == "undefined")
{
node.missingHour = "insert";
$("#node-config-input-missingHour").val(node.missingHour);
}
if (typeof node.skipRepeatedHour == "undefined")
{
node.skipRepeatedHour = false;
$("#node-config-input-skipRepeatedHour").prop(node.skipRepeatedHour);
}
node.sunPositions.forEach(data =>
{
sunPositionList.editableList("addItem", data);
});
},
oneditsave: function()
{
const node = this;
const sunPositionList = $("#node-input-sunPositionList").editableList("items");
node.sunPositions = [];
sunPositionList.each(function(index)
{
const data = {};
const angle = $(this).find(".node-input-angle");
const riseName = $(this).find(".node-input-riseName");
const setName = $(this).find(".node-input-setName");
data.angle = angle.spinner("value");
data.riseName = riseName.val();
data.setName = setName.val();
node.sunPositions.push(data);
});
},
oneditresize: function(size)
{
if ($("#tab-sunPositions").is(":visible"))
{
const listRow = $("#node-config-dialog-edit-form div.list-row");
const otherRows = $("#node-config-dialog-edit-form > div");
let height = size.height;
for (let i=0; i<otherRows.length; ++i)
{
let row = $(otherRows[i]);
if (row.is(":visible") && (row.attr("id") != "tabs-content"))
{
height -= row.outerHeight(true);
}
}
height -= (parseInt(listRow.css("margin-top")) + parseInt(listRow.css("margin-bottom")));
$("#node-input-sunPositionList").editableList("height", height);
}
}
});
})();
</script>