node-red-contrib-mog
Version:
mog
392 lines (331 loc) • 17.5 kB
HTML
<script type="text/javascript">
var init = 0;
var database = {
nodes: [],
};
var this_index;
RED.nodes.registerType('audio-switcher',{
category: 'mog',
color: '#f3b567',
defaults: {
name: {value:"audio-switcher"},
device: {value:"", validate:RED.validators.regex(/\w*[0-9]\w*/)},
devices: {value:""},
input_services: {value:""},
output_services: {value:""},
current_device: {value:""},
validate_outputs: {value:"", validate:RED.validators.regex(/[1]{1}/)},
validate_inputs: {value:"", validate:RED.validators.regex(/[1]{1}/)},
audio_ips: {value:""},
audio_ports: {value:""}
},
inputs:1,
outputs:1,
outputLabels: ["audio"],
inputLabels: ["audio"],
icon: "icons/valve.png",
label: function() {
return this.name||"audio-switcher";
},
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].audio_ports = [];
database.nodes[this_index].input_services = [];
database.nodes[this_index].output_services = [];
$('#node-input-validate_outputs').val('1');
$('#node-input-validate_inputs').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-output_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].output_services.push(insertedAudioService);
if(!(check_a_ip && check_a_port && check_service)){
$('#node-input-validate_outputs').val('0');
}
}
this.audio_ips = database.nodes[this_index].audio_ips;
this.audio_ports = database.nodes[this_index].audio_ports;
this.output_services = database.nodes[this_index].output_services;
for(var i=0; i<database.nodes[this_index].n_input_audio_outputs; i++) {
var n = parseInt(i)+1;
var insertedAudioService = $("select#node-input-input_services"+n+" option:checked").val();
var check_service = /\w*[0-9]\w*/.test(insertedAudioService);
database.nodes[this_index].input_services.push(insertedAudioService);
if(!check_service){
$('#node-input-validate_inputs').val('0');
}
}
this.input_services = database.nodes[this_index].input_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: "audio-switcher",
device: "",
input_services: [],
output_services: [],
n_audio_outputs: 1,
audio_ips: [],
audio_ports: [],
n_input_audio_outputs: 1,
input_audio_ips: [],
input_audio_ports: [],
});
this_index = database.nodes.length-1;
}
$('input#node-input-validate_outputs').hide();
$('input#node-input-validate_inputs').hide();
loadaudioOutputs();
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="audio-switcher">
<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="readaudioServices();">
<option value></option>
</select>
</div>
<input type="text" id="node-input-validate_outputs">
<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="audioIn"></div>
</div>
<div class="form-row">
<br/><br/>
<label for="node-input-number_audio_outputs"> #audio_outputs</label>
<select id="node-input-number_audio_outputs" onchange="showaudioProperties();">
</select>
<div id="audio"></div>
</div>
</script>
<script type="text/javascript">
function readaudioServices() {
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 != ""){
var 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_input_audio_outputs; k++){
var num = k+1;
$("#node-input-input_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-input_services"+num);
} else {
$("<option disabled value='" + data.services[i] + "' style=\"background-color: grey; color: white\">" + data.services[i] + "</option>").appendTo("#node-input-input_services"+num);
}
}
}
})
.catch(error => console.error(error));
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-output_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-output_services"+num);
} else {
$("<option disabled value='" + data.services[i] + "' style=\"background-color: grey; color: white\">" + data.services[i] + "</option>").appendTo("#node-input-output_services"+num);
}
}
}
})
.catch(error => console.error(error));
}
}
}
</script>
<script>
function showaudioProperties() {
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> Sender</label><select id='node-input-output_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");
}
readaudioServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#audio" + i).remove();
}
}
}
</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_input_audio_outputs;
database.nodes[this_index].n_input_audio_outputs = parseInt(numInputs);
if(numInputs>=prev_num) {
for (var i = prev_num; i < numInputs; i++){
var n = parseInt(i)+1;
$("<div id='audioIn" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Receiver</label><select id='node-input-input_services" + n + "'></select></div>"+
"</div>").appendTo("#audioIn");
}
readaudioServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#audioIn" + i).remove();
}
}
}
</script>
<script>
function loadaudioOutputs() {
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> Sender</label><select id='node-input-output_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].output_services[n-1] + "'> " + database.nodes[this_index].output_services[n-1] + "</option>").appendTo("#node-input-output_services"+n);
}
}
for(var i = 1; i <= 5; i++){
if(i == database.nodes[this_index].n_input_audio_outputs){
$("<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_input_audio_outputs!=0){
$("#audioIn").append("<br/><p id='audio_title'>AUDIO RECEIVERS</p>");
for (var i = 0; i < database.nodes[this_index].n_input_audio_outputs; i++){
var n = parseInt(i)+1;
$("<div id='audioIn" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Receiver</label><select id='node-input-input_services" + n + "'></select></div>"+
"</div>").appendTo("#audioIn");
$("<option selected='selected' value='" + database.nodes[this_index].input_services[n-1] + "'> " + database.nodes[this_index].input_services[n-1] + "</option>").appendTo("#node-input-input_services"+n);
}
}
readaudioServices();
}
</script>
<script type="text/x-red" data-help-name="audio-switcher">
<p></p>
</script>
<script type="text/x-red" data-description-name="audio-switcher">
<p></p>
</script>