qm-ac-power-set-voltage
Version:
Component set voltage | AC Power Source | Node-RED
274 lines (243 loc) • 15.1 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('set_voltage', {
category: 'AC Power Module',
color: '#FA8072',
defaults: {
name: { value: "" },
mapeamento: { value: "", type: "ac-power-mapping" },
max_voltage: {value: ""},
type_mode: {value: 'mono'},
v_select: { value: 'VA' },
VA: { value: false },
VB: { value: false },
VC: { value: false },
VN: { value: false },
VA_value: { value: "" },
VB_value: { value: "" },
VC_value: { value: "" },
VA_value_solo: { value: ""},
VB_value_solo: { value: ""},
VC_value_solo: { value: ""},
},
inputs: 1,
outputs: 1,
icon: "AC_Power.svg",
label: function () { return this.name ? "Set Voltage - " + this.name : "Set Voltage" },
paletteLabel: "Set Voltage",
oneditprepare: function () {
var node = this;
var ports = []
var config_mapeamento = RED.nodes.node(this.mapeamento);
if (config_mapeamento) {
document.getElementById("VN").innerHTML = `VN - PIN - 1 <br> ${config_mapeamento.connectorVN}`;
document.getElementById("VA").innerHTML = `VA - PIN - 2 <br> ${config_mapeamento.connectorVA}`;
document.getElementById("VB").innerHTML = `VB - PIN - 3 <br> ${config_mapeamento.connectorVB}`;
document.getElementById("VC").innerHTML = `VC - PIN - 4 <br> ${config_mapeamento.connectorVC}`;
$("#node-input-VA_value").prop("max",config_mapeamento.voltage_limit);
$("#node-input-VB_value").prop("max",config_mapeamento.voltage_limit);
$("#node-input-VC_value").prop("max",config_mapeamento.voltage_limit);
$("#node-input-VA_value_solo").prop("max",config_mapeamento.voltage_limit);
$("#node-input-VB_value_solo").prop("max",config_mapeamento.voltage_limit);
$("#node-input-VC_value_solo").prop("max",config_mapeamento.voltage_limit);
}else {
document.getElementById("VA").innerText = "VA";
document.getElementById("VB").innerText = "VB";
document.getElementById("VC").innerText = "VC";
document.getElementById("VN").innerText = "VN";
$("#node-input-VA_value").prop("max","");
$("#node-input-VB_value").prop("max","");
$("#node-input-VC_value").prop("max","");
$("#node-input-VA_value_solo").prop("max","");
$("#node-input-VB_value_solo").prop("max","");
$("#node-input-VC_value_solo").prop("max","");
}
$(".type_mode").on("change", function(e) {
var mode = $(this).val();
if (mode === "mono") {$(".MONO").show();$(".TRI").hide();}
if (mode === "tri") {$(".TRI").show();$(".MONO").hide(); }
});
$(".v_select").on("change", function(e) {
var selected = $(this).val();
if (selected === "VA") {$("#node-input-VA_value_solo").show(); $("#node-input-VB_value_solo").hide(); $("#node-input-VC_value_solo").hide();}
if (selected === "VB") {$("#node-input-VA_value_solo").hide(); $("#node-input-VB_value_solo").show(); $("#node-input-VC_value_solo").hide();}
if (selected === "VC") {$("#node-input-VA_value_solo").hide(); $("#node-input-VB_value_solo").hide(); $("#node-input-VC_value_solo").show();}
});
$(".voltage_values").keyup(function(e){
var who = $(this).data('v');
var value = $(this).val();
if(who === 'VA_value'){
if(value > 0){
$('#node-input-VA').prop( "checked", true );
$('#node-input-VB').prop( "checked", true );
$('#node-input-VC').prop( "checked", true );
$('#node-input-VN').prop( "checked", true );
} else if(value === ''){
$('#node-input-VA').prop( "checked", false );
$('#node-input-VB').prop( "checked", false );
$('#node-input-VC').prop( "checked", false );
$('#node-input-VN').prop( "checked", false );
}
$("#node-input-VA_value").val(value);
$("#node-input-VB_value").val(value);
$("#node-input-VC_value").val(value);
$("#node-input-VA_value_solo").val(value);
$("#node-input-VB_value_solo").val(value);
$("#node-input-VC_value_solo").val(value);
}
if(who === 'VB_value'){
if(value > 0){
$('#node-input-VB').prop( "checked", true );
$('#node-input-VC').prop( "checked", true );
$('#node-input-VN').prop( "checked", true );
}else if(value === ''){
$('#node-input-VB').prop( "checked", false );
$('#node-input-VC').prop( "checked", false );
$('#node-input-VN').prop( "checked", false );
}
$("#node-input-VB_value").val(value);
$("#node-input-VB_value_solo").val(value);
$("#node-input-VC_value").val(value);
$("#node-input-VC_value_solo").val(value);
}
if(who === 'VC_value'){
if(value > 0){
$('#node-input-VC').prop( "checked", true );
$('#node-input-VN').prop( "checked", true );
}else if(value === ''){
$('#node-input-VC').prop( "checked", false );
$('#node-input-VN').prop( "checked", false );
}
$("#node-input-VC_value").val(value);
$("#node-input-VC_value_solo").val(value);
}
});
},
oneditresize: function () {
if (!$("#red-ui-header-button-deploy").hasClass("disabled")) {
$("#node-dialog-ok").click()
$("#red-ui-header-button-deploy").click()
$("#red-ui-deploy-dialog-confirm-deploy-deploy").click()
}
},
oneditsave: function () {
}
});
</script>
<style>
label { width: 100% ; margin-bottom: 2px ; }
.columm { display: flex ; flex-direction: column ; }
hr { width: 40% ; float: left ; }
.hr-div-setVoltage { display: flex ; justify-content: space-between ; }
.optional { height: max-content ; margin-top: 10px ; }
.descript { text-align: center; }
.columm { display: flex ; flex-direction: column ; }
.columm-25 { display: flex ; flex-direction: column ; width: 25% ; float: left ; align-items: center; justify-content: space-between; }
.columm-30 { display: flex ; flex-direction: column ; width: 30% ; float: left ; }
.columm-50 { display: flex ; flex-direction: column ; width: 50% ; float: left ; }
.columm-70 { display: flex ; flex-direction: column ; width: 70% ; float: left ; }
.descript-div { max-width: 444px ; }
span.red-ui-typedInput-type-label { width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.btn-aln { display: flex ; flex-direction: row-reverse ; align-content: center; align-items: flex-end; }
.check{ width: 20px ; margin-top: 0px ; margin-bottom: 3px; }
.label-check{ width: 200px ; margin: 0px ; }
.row { display: flex; flex-direction: row; align-items: center; }
.row label { margin: 0; margin-left: 5px; text-align: center;}
.form-row2 { display: flex; flex-direction: row; justify-content: space-between;}
.box-style { background: #e0e0e0; padding: 18px; border-radius: 4px; box-shadow: 0px 0px 7px 0px #868686; }
.container-tester { display: flex; min-width: 620px; width: 100%; flex-direction: column; }
.OBS { padding: 12px; background: #f9b9b2; text-align: left; font-weight: 600; border-radius: 4px; margin-top: 15px ;}
</style>
<script type="text/html" data-template-name="set_voltage">
<div class="form-row columm descript-div">
<strong class="descript">
Bloco para configuração do valor de tensão e chaveamento de reles de tensão das fases A, B e C, há também a opção de chavear o relé do neutro.
<p class="OBS">
Obs: Os relés VA, VB e VC podem estar recebendo sinal de apenas um canal de tensão dependendo da configuração utilizada no hardware.
</p>
</strong>
</div>
<div style=" position: relative; display:flex; margin-top: 20px;">
<div class="form-row columm-70">
<label style="width: 50% !important;" for="node-input-name" ><i class="fa fa-tag"></i> Identification Note</label>
<input type="text" id="node-input-name" placeholder="Name" style="width: 100%">
</div>
</div>
<div class="form-row columm">
<label for="node-input-mapeamento"><i class="fa fa-map"></i> PCI Connection Map</label>
<input type="text" id="node-input-mapeamento">
</div>
<div class="container-teste">
<div class="hr-div-setVoltage">
<hr> <span class="optional">Voltage 0</span> <hr>
</div>
<div class='form-row columm-50' style='margin-top: 8px;'>
<label for='node-input-type_mode'><i class='fa fa-bars'></i> Mode:</label>
<select class='type_mode' id='node-input-type_mode' style='width: 140px;'>
<option value='mono'>MONO</option>
<option value='tri'>TRI</option>
</select>
</div>
<div class="form-row" style='max-width: 500px;'>
<div class='form-row MONO' style='margin-top: 8px;'>
<label for='node-input-v_select'><i class='fa fa-bolt'></i> Type:</label>
<select class='v_select' id='node-input-v_select' style='width: 140px;'>
<option value='VA' selected>VA</option>
<option value='VB'>VB</option>
<option value='VC'>VC</option>
</select>
<input type="number" step="any" min="0" max="" id="node-input-VA_value_solo" class="voltage_values" data-v="VA_value" placeholder="VA value" style="width: 140px; margin-left: 10px;">
<input type="number" step="any" min="0" max="" id="node-input-VB_value_solo" class="voltage_values" data-v="VB_value" placeholder="VB value" style="width: 140px; margin-left: 10px; display:none">
<input type="number" step="any" min="0" max="" id="node-input-VC_value_solo" class="voltage_values" data-v="VC_value" placeholder="VC value" style="width: 140px; margin-left: 10px; display:none">
</div>
<div class='form-row2 TRI' style='margin-top: 8px; margin-bottom: 20px; display:none;'>
<div class='columm' style='margin-top: 8px;'>
<select class='v_select' id='node-input-_select1' disabled style='width: 140px;'>
<option value='VA'selected>VA</option>
</select>
<input type="number" step="any" min="0" max="" class="voltage_values" id="node-input-VA_value" data-v="VA_value" placeholder="VA value" style="width: 140px; margin-top: 10px;">
</div>
<div class='columm' style='margin-top: 8px;'>
<select class='v_select' id='node-input-_select2' disabled style='width: 140px;'>
<option value='VB' selected>VB</option>
</select>
<input type="number" step="any" min="0" max="" class="voltage_values" id="node-input-VB_value" data-v="VB_value" placeholder="VB value" style="width: 140px; margin-top: 10px;">
</div>
<div class='columm' style='margin-top: 8px;'>
<select class='v_select' id='node-input-_select3' disabled style='width: 140px;'>
<option value='VC' selected>VC</option>
</select>
<input type="number" step="any" min="0" max="" class="voltage_values" id="node-input-VC_value" data-v="VC_value" placeholder="VC value" style="width: 140px; margin-top: 10px;">
</div>
</div>
<div class= "form-row2 box-style">
<div class="columm-25">
<div class="row">
<input class="check" type="checkbox" id="node-input-VA">
<label id="VA" for="node-input-VA"slyle="margin-bottom: 0px; text-align: center;">VA</label>
</div>
</div>
<div class="columm-25">
<div class="row">
<input class="check" type="checkbox" id="node-input-VB">
<label id="VB" for="node-input-VB" slyle="margin-bottom: 0px; text-align: center;">VB</label>
</div>
</div>
<div class="columm-25">
<div class="row">
<input class="check" type="checkbox" id="node-input-VC">
<label id="VC" for="node-input-VC" slyle="margin-bottom: 0px; text-align: center;">VC</label>
</div>
</div>
<div class="columm-25">
<div class="row">
<input class="check" type="checkbox" id="node-input-VN">
<label id="VN" for="node-input-VN" slyle="margin-bottom: 0px; text-align: center;">VN</label>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" data-help-name="set_voltage">
<p>Program a voltage value that will be used.</p>
</script>