node-red-contrib-mog
Version:
mog
399 lines (328 loc) • 15.8 kB
HTML
<script type="text/javascript">
var database = {
nodes: [],
};
var this_index;
RED.nodes.registerType('output-distributer',{
category: 'mog',
color: '#f3b567',
defaults: {
name: {value:"output-distributer"},
device: {value:"", validate:RED.validators.regex(/\w*[0-9]\w*/)},
devices: {value:""},
current_device: {value:""},
validate_inputs: {value:"", validate:RED.validators.regex(/[1]{2}/)},
audio_services: {value:""},
video_services: {value:""}
},
inputs:1,
outputs:0,
inputLabels: ["video/audio"],
icon: "icons/spout.png",
label: function() {
return this.name||"output-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_services = [];
database.nodes[this_index].video_services = [];
$('#node-input-validate_inputs').val('1');
for(var i=0; i<database.nodes[this_index].n_audio_inputs; i++) {
var n = parseInt(i)+1;
var insertedAudioService = $("select#node-input-audio_services"+n+" option:checked").val();
var check_service = /\w*[0-9]\w*/.test(insertedAudioService);
database.nodes[this_index].audio_services.push(insertedAudioService);
if(!check_service){
$('#node-input-validate_inputs').val('');
}
}
if(database.nodes[this_index].n_audio_inputs == 0){
$('#node-input-validate_inputs').val('1');
}
this.audio_services = database.nodes[this_index].audio_services;
for(var i=0; i<database.nodes[this_index].n_video_inputs; i++) {
var n = parseInt(i)+1;
var insertedVideoService = $("select#node-input-video_services"+n+" option:checked").val();
var check_service = /\w*[0-9]\w*/.test(insertedVideoService);
database.nodes[this_index].video_services.push(insertedVideoService);
if(!check_service){
$('#node-input-validate_inputs').val('');
}
}
var check = $('#node-input-validate_inputs').val();
$('#node-input-validate_inputs').val(check +'1');
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: "output",
device: "",
n_audio_inputs: 1,
n_video_inputs: 1,
audio_ips: [],
video_ips: [],
audio_ports: [],
video_ports: [],
audio_services: [],
video_services: []
});
this_index = database.nodes.length-1;
}
$('input#node-input-validate_inputs').hide();
loadInputs();
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="output-distributer">
<div class="form-row">
<label for="node-input-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="readInputServices();">
<option value></option>
</select>
</div>
<input type="text" id="node-input-validate_inputs">
<div class="form-row">
<br/><br/>
<label for="node-input-number_audio_inputs"> #audio_inputs</label>
<select id="node-input-number_audio_inputs" onchange="showAudioInputProperties();">
</select>
<div id="audio"></div>
</div>
<div class="form-row">
<br/><br/>
<label for="node-input-number_video_inputs"> #video_inputs</label>
<select id="node-input-number_video_inputs" onchange="showVideoInputProperties();">
</select>
<div id="video"></div>
</div>
</script>
<script type="text/javascript">
function readInputServices() {
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=output&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_inputs; 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_inputs; 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 showAudioInputProperties() {
var e = document.getElementById("node-input-number_audio_inputs");
var numInputs = e.options[e.selectedIndex].value;
var prev_num = database.nodes[this_index].n_audio_inputs;
database.nodes[this_index].n_audio_inputs = 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>").appendTo("#audio");
}
readInputServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#audio" + i).remove();
}
}
}
</script>
<script>
function showVideoInputProperties() {
var e = document.getElementById("node-input-number_video_inputs");
var numInputs = e.options[e.selectedIndex].value;
var prev_num = database.nodes[this_index].n_video_inputs;
database.nodes[this_index].n_video_inputs = parseInt(numInputs);
if(numInputs>=prev_num) {
for (var i = prev_num; i < numInputs; 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>").appendTo("#video");
}
readInputServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#video" + i).remove();
}
}
}
</script>
<script>
function loadInputs() {
for(var i = 1; i <= 5; i++){
if(i == database.nodes[this_index].n_audio_inputs){
$("<option selected='selected' value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_audio_inputs");
} else {
$("<option value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_audio_inputs");
}
}
if(database.nodes[this_index].n_audio_inputs!=0){
$("#audio").append("<br/><p id='audio_title'>AUDIO INPUT SERVICES</p>");
for (var i = 0; i < database.nodes[this_index].n_audio_inputs; 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>").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_inputs){
$("<option selected='selected' value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_inputs");
} else {
$("<option value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_inputs");
}
}
if(database.nodes[this_index].n_video_inputs!=0){
$("#video").append("<br/><p id='video_title'>VIDEO INPUT SERVICES</p>");
for (var i = 0; i < database.nodes[this_index].n_video_inputs; 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>").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);
}
}
readInputServices();
}
</script>
<script type="text/x-red" data-help-name="output-distributer">
<p></p>
</script>
<script type="text/x-red" data-description-name="output-distributer">
<p></p>
</script>
<script type="text/javascript">
function onDeploy() {
const url = "http://localhost:3000/database";
fetch(url, {
method : "POST",
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body : JSON.stringify(database),
})
.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:', error));
}
function initialize() {
var button = document.getElementById("btn-deploy");
button.addEventListener("click", onDeploy);
}
initialize();
</script>