node-red-contrib-mog
Version:
mog
405 lines (339 loc) • 18.7 kB
HTML
<script type="text/javascript">
var init = 0;
var database = {
nodes: [],
};
var this_index;
RED.nodes.registerType('input-distributer',{
category: 'mog',
color: '#f3b567',
defaults: {
name: {value:"input-distributer"},
device: {value:"", validate:RED.validators.regex(/\w*[0-9]\w*/)},
devices: {value:""},
current_device: {value:""},
validate_outputs: {value:"", validate:RED.validators.regex(/[1]{2}/)},
audio_ips: {value:""},
audio_ports: {value:""},
audio_services: {value: ""},
video_ips: {value:""},
video_ports: {value:""},
video_services: {value: ""}
},
inputs:0,
outputs:2,
outputLabels: ["video", "audio"],
icon: "icons/funnel.png",
label: function() {
return this.name||"input-distributer";
},
oneditsave: function(){
var selectedDevice = $("select#node-input-devices option:checked").val();
this.current_device = $("input#node-input-device").val();
database.nodes[this_index].audio_ips = [];
database.nodes[this_index].video_ips = [];
database.nodes[this_index].audio_ports = [];
database.nodes[this_index].video_ports = [];
database.nodes[this_index].audio_services = [];
database.nodes[this_index].video_services = [];
$('#node-input-validate_outputs').val('1');
for(var i=0; i<database.nodes[this_index].n_audio_outputs; i++) {
var n = parseInt(i)+1;
var insertedAudioIP = $("input#node-input-audio_ip_"+n).val();
var insertedAudioPort = $("input#node-input-audio_port_"+n).val();
var insertedAudioService = $("select#node-input-audio_services"+n+" option:checked").val();
var check_a_ip = /([0-9]{1,3}\.){3}[0-9]{1,3}/.test(insertedAudioIP);
var check_a_port = /[0-9]{4}/.test(insertedAudioPort);
var check_service = /\w*[0-9]\w*/.test(insertedAudioService);
database.nodes[this_index].audio_ips.push(insertedAudioIP);
database.nodes[this_index].audio_ports.push(insertedAudioPort);
database.nodes[this_index].audio_services.push(insertedAudioService);
if(!(check_a_ip && check_a_port && check_service)){
$('#node-input-validate_outputs').val('');
}
}
if(database.nodes[this_index].n_audio_outputs == 0){
$('#node-input-validate_outputs').val('1');
}
this.audio_ips = database.nodes[this_index].audio_ips;
this.audio_ports = database.nodes[this_index].audio_ports;
this.audio_services = database.nodes[this_index].audio_services;
for(var i=0; i<database.nodes[this_index].n_video_outputs; i++) {
var n = parseInt(i)+1;
var insertedVideoIP = $("input#node-input-video_ip_"+n).val();
var insertedVideoPort = $("input#node-input-video_port_"+n).val();
var insertedVideoService = $("select#node-input-video_services"+n+" option:checked").val();
var check_a_ip = /([0-9]{1,3}\.){3}[0-9]{1,3}/.test(insertedVideoIP);
var check_a_port = /[0-9]{4}/.test(insertedVideoPort);
var check_service = /\w*[0-9]\w*/.test(insertedVideoService);
database.nodes[this_index].video_ips.push(insertedVideoIP);
database.nodes[this_index].video_ports.push(insertedVideoPort);
database.nodes[this_index].video_services.push(insertedVideoService);
if(!(check_a_ip && check_a_port && check_service)){
$('#node-input-validate_outputs').val('');
}
}
var check = $('#node-input-validate_outputs').val();
$('#node-input-validate_outputs').val(check +'1');
this.video_ips = database.nodes[this_index].video_ips;
this.video_ports = database.nodes[this_index].video_ports;
this.video_services = database.nodes[this_index].video_services;
const url = "http://localhost:3000/";
fetch(url, {
method : "POST",
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body : JSON.stringify(database.nodes[this_index])
})
.then(response => console.log('Status code:', response.status))
.catch(error => console.error('Error:', error));
if(selectedDevice != undefined && selectedDevice != "") {
document.getElementById("node-input-device").value = selectedDevice;
database.nodes[this_index].device = selectedDevice;
}
},
oneditprepare: function(){
var exec = async() => {
const url = 'http://localhost:3000/database';
const request = async() => {
const response = await fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson));
database = data;
})
.catch(error => console.error(error));
}
await request();
}
async function start() {
if(init == 0) {
init = 1;
await exec();
}
};
async function proceed(id) {
await start();
console.log(database);
var find = 0;
for(var i = 0; i<database.nodes.length;i++){
if(database.nodes[i].id == id){
find = 1;
this_index = i;
break;
}
}
if(!find){
database.nodes.push({
id: id,
type: "input",
device: "",
n_audio_outputs: 1,
n_video_outputs: 1,
audio_ips: [],
video_ips: [],
audio_ports: [],
video_ports: [],
audio_services: [],
video_services: []
});
this_index = database.nodes.length-1;
}
$('input#node-input-validate_outputs').hide();
loadOutputs();
const url = 'http://localhost:3000/devices/?type=tcp';
fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson)).devices;
console.log(data);
for (i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'> " + data[i] + "</option>").appendTo("#node-input-devices");
}
})
.catch(error => console.error(error));
}
proceed(this.id);
}
});
</script>
<script type="text/x-red" data-template-name="input-distributer">
<div class="form-row">
<label for="node-input-name-device"><i class="icon-tag"></i> Current Device</label>
<input type="text" id="node-input-device" placeholder="Not defined" readonly>
</div>
<div class="form-row">
<label for="node-input-devices"><i class="icon-tag"></i> Available Devices</label>
<select id="node-input-devices" onchange="readServices();">
<option value></option>
</select>
</div>
<input type="text" id="node-input-validate_outputs">
<div class="form-row">
<br/><br/>
<label for="node-input-number_audio_outputs"> #audio_outputs</label>
<select id="node-input-number_audio_outputs" onchange="showAudioOutputProperties();">
</select>
<div id="audio"></div>
</div>
<div class="form-row">
<br/><br/>
<label for="node-input-number_video_outputs"> #video_outputs</label>
<select id="node-input-number_video_outputs" onchange="showVideoOutputProperties();">
</select>
<div id="video"></div>
</div>
</script>
<script type="text/javascript">
function readServices() {
if(database.nodes[this_index]!=undefined){
var aux = document.getElementById("node-input-devices");
var device = aux.options[aux.selectedIndex];
if(device != undefined && device != ""){
device = device.value;
}
if(device == undefined || device == "") {
device = database.nodes[this_index].device;
}
if(device != ""){
const url = 'http://localhost:3000/services/?type=input&deviceID=' + device;
fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson));
console.log(data);
for(var k = 0; k<database.nodes[this_index].n_audio_outputs; k++){
var num = k+1;
$("#node-input-audio_services"+num).find("option").not(":selected").remove();
for (i = 0; i < data.services.length; i++) {
if(data.available[i]){
$("<option value='" + data.services[i] + "'> " + data.services[i] + "</option>").appendTo("#node-input-audio_services"+num);
} else {
$("<option disabled value='" + data.services[i] + "' style=\"background-color: grey; color: white\">" + data.services[i] + "</option>").appendTo("#node-input-audio_services"+num);
}
}
}
for(var x = 0; x<database.nodes[this_index].n_video_outputs; x++){
var num = x+1;
$("#node-input-video_services"+num).find("option").not(":selected").remove();
for (i = 0; i < data.services.length; i++) {
if(data.available[i]){
$("<option value='" + data.services[i] + "'> " + data.services[i] + "</option>").appendTo("#node-input-video_services"+num);
} else {
$("<option disabled value='" + data.services[i] + "' style=\"background-color: grey; color: white\">" + data.services[i] + "</option>").appendTo("#node-input-video_services"+num);
}
}
}
})
.catch(error => console.error(error));
}
}
}
</script>
<script>
function showAudioOutputProperties() {
var e = document.getElementById("node-input-number_audio_outputs");
var numInputs = e.options[e.selectedIndex].value;
var prev_num = database.nodes[this_index].n_audio_outputs;
database.nodes[this_index].n_audio_outputs = parseInt(numInputs);
if(numInputs>=prev_num) {
for (var i = prev_num; i < numInputs; i++){
var n = parseInt(i)+1;
$("<div id='audio" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Service</label><select id='node-input-audio_services" + n + "'></select></div>"+
"<div class='form-row'><label for='node-input-audio-ip'>IP " + n + "</label>"+
"<input type='text' id='node-input-audio_ip_" + n + "' placeholder='Not defined' pattern='([0-9]{1,3}\.){3}[0-9]{1,3}' required></div>"+
"<div class='form-row'><label for='node-input-audio-port'>Port " + n + "</label>"+
"<input type='text' id='node-input-audio_port_" + n + "' placeholder='Not defined' pattern='[0-9]{4}' required></div></div>").appendTo("#audio");
}
readServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#audio" + i).remove();
}
}
}
</script>
<script>
function showVideoOutputProperties() {
var e = document.getElementById("node-input-number_video_outputs");
var numInputs = e.options[e.selectedIndex].value;
var prev_num = database.nodes[this_index].n_video_outputs;
database.nodes[this_index].n_video_outputs = parseInt(numInputs);
if(numInputs>=prev_num) {
for (var i = prev_num; i < numInputs; i++){
var n = parseInt(i)+1;
$("").appendTo("#video");
$("<div id='video" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Service</label><select id='node-input-video_services" + n + "'></select></div>"+
"<div class='form-row'><label for='node-input-video-ip'>IP " + n + "</label>"+
"<input type='text' id='node-input-video_ip_" + n + "' placeholder='Not defined' pattern='([0-9]{1,3}\.){3}[0-9]{1,3}' required></div>"+
"<div class='form-row'><label for='node-input-video-port'>Port " + n + "</label>"+
"<input type='text' id='node-input-video_port_" + n + "' placeholder='Not defined' pattern='[0-9]{4}' required></div></div>").appendTo("#video");
}
readServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#video" + i).remove();
}
}
}
</script>
<script>
function loadOutputs() {
for(var i = 1; i <= 5; i++){
if(i == database.nodes[this_index].n_audio_outputs){
$("<option selected='selected' value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_audio_outputs");
} else {
$("<option value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_audio_outputs");
}
}
if(database.nodes[this_index].n_audio_outputs!=0){
$("#audio").append("<br/><p id='audio_title'>AUDIO OUTPUTS ADRESSES AND PORTS</p>");
for (var i = 0; i < database.nodes[this_index].n_audio_outputs; i++){
var n = parseInt(i)+1;
$("<div id='audio" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Service</label><select id='node-input-audio_services" + n + "'></select></div>"+
"<div class='form-row'><label for='node-input-audio-ip'>IP " + n + "</label>"+
"<input type='text' id='node-input-audio_ip_" + n + "' value='"+ database.nodes[this_index].audio_ips[n-1] + "' pattern='([0-9]{1,3}\.){3}[0-9]{1,3}' required></div>"+
"<div class='form-row'><label for='node-input-audio-port'>Port " + n + "</label>"+
"<input type='text' id='node-input-audio_port_" + n + "' value='"+database.nodes[this_index].audio_ports[n-1] + "' pattern='[0-9]{4}' required></div></div>").appendTo("#audio");
$("<option selected='selected' value='" + database.nodes[this_index].audio_services[n-1] + "'> " + database.nodes[this_index].audio_services[n-1] + "</option>").appendTo("#node-input-audio_services"+n);
}
}
for(var i = 1; i <= 5; i++){
if(i == database.nodes[this_index].n_video_outputs){
$("<option selected='selected' value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_outputs");
} else {
$("<option value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_outputs");
}
}
if(database.nodes[this_index].n_video_outputs!=0){
$("#video").append("<br/><p id='video_title'>VIDEO OUTPUTS ADRESSES AND PORTS</p>");
for (var i = 0; i < database.nodes[this_index].n_video_outputs; i++){
var n = parseInt(i)+1;
$("<div id='video" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Service</label><select id='node-input-video_services" + n + "'></select></div>"+
"<div class='form-row'><label for='node-input-video-ip'>IP " + n + "</label>"+
"<input type='text' id='node-input-video_ip_" + n + "' value='"+ database.nodes[this_index].video_ips[n-1] + "' pattern='([0-9]{1,3}\.){3}[0-9]{1,3}' required></div>"+
"<div class='form-row'><label for='node-input-video-port'>Port " + n + "</label>"+
"<input type='text' id='node-input-video_port_" + n + "' value='"+ database.nodes[this_index].video_ports[n-1] + "' pattern='[0-9]{4}' required></div></div>").appendTo("#video");
$("<option selected='selected' value='" + database.nodes[this_index].video_services[n-1] + "'> " + database.nodes[this_index].video_services[n-1] + "</option>").appendTo("#node-input-video_services"+n);
}
}
readServices();
}
</script>
<script type="text/x-red" data-help-name="input-distributer">
<p></p>
</script>
<script type="text/x-red" data-description-name="input-distributer">
<p></p>
</script>