qm-compare-support
Version:
Node Component - Node-RED -> Compare Support
220 lines (191 loc) • 6.22 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('compare_support',{
category: 'Processing Module',
color: '#ff0028',
defaults: {
compare_select: {value:"equalTo", required:true},
equalTo: {value: ''},
maxValue: {value: null},
minValue: {value: null},
name:{value:""}
},
inputs:1,
outputs:1,
icon: "CPU.svg",
label: function() {
return this.name? "Compare Support - " + this.name: "Compare Support";
},
oneditprepare: function() {
var node = this;
var scope = node.scope || [];
$("#node-input-compare_select").on("change", function(e) {
var compare = $(this).val();
if (compare === "equalTo") {
$(".node-input-equal-to").show();
$(".node-input-max-value").hide();
$(".node-input-min-value").hide();
}
if (compare === "interval") {
$(".node-input-equal-to").hide();
$(".node-input-max-value").show();
$(".node-input-min-value").show();
}
if (compare === "maxValue") {
$(".node-input-equal-to").hide();
$(".node-input-max-value").show();
$(".node-input-min-value").hide();
}
if (compare === "minValue") {
$(".node-input-equal-to").hide();
$(".node-input-max-value").hide();
$(".node-input-min-value").show();
}
// node._resize();
});
}
});
</script>
<style>
label{
width: 100% ;
margin-bottom: 2px ;
}
.columm{
display: flex ;
flex-direction: column ;
}
hr {
width: 40% ;
float: left ;
}
.hr-div-compare{
display: flex ;
justify-content: space-between ;
/* margin-top: 250px !important; */
}
.optional{
height: max-content ;
margin-top: 10px ;
}
.descript{
text-align: center;
}
.columm-50{
display: flex ;
flex-direction: column ;
width: 50% ;
float: left ;
}
.columm-30{
display: flex ;
flex-direction: column ;
width: 30% ;
float: left ;
}
.columm-70{
display: flex ;
flex-direction: column ;
width: 70% ;
float: left ;
}
hr {
width: 40% ;
float: left ;
}
.hr-div-get{
display: flex ;
justify-content: space-between ;
margin-top: 250px ;
}
.optional{
height: max-content ;
margin-top: 10px ;
}
.descript{
text-align: center;
}
.descript-div{
max-width: 444px ;
}
span.red-ui-typedInput-type-label {
/* background: chartreuse; */
/* display: block; */
width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.btn-aln{
display: flex ;
flex-direction: row-reverse ;
/* padding-left: 30px; */
align-content: center;
align-items: flex-end;
}
</style>
<script type="text/html" data-template-name="compare_support">
<div class="form-row columm descript-div">
<strong class="descript">
Makes the rest of the comparisons adjacent to the “get command message”.
</strong>
</div>
<div style=" position: relative; display:flex;">
<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 class="form-row columm-30" style="align-items: flex-end !important;">
<label style="width: max-content !important; padding-right: 24px;"><i class="fa fa-list-ul"></i> Item</label>
<div class="form-row btn-aln" >
<a id="addSetPhase" class="red-ui-button" ><i class="fa fa-plus"></i></a>
<a id="remSetPhase" class="red-ui-button" style="margin-right: 5px;" ><i class="fa fa-minus"></i></a>
</div>
</div> -->
</div>
<div class="hr-div-compare">
<hr>Compare<hr>
</div>
<div class="form-row columm">
<label style="width: auto" for="node-input-compare_select"><i class="fa fa-list"></i> Comparison Type:</label>
<select id="node-input-compare_select" >
<option value="equalTo">Equal to</option>
<option value="interval">Interval</option>
<option value="maxValue">Maximum value (<)</option>
<option value="minValue">Minimum value (>)</option>
</select>
</div>
<div class="form-row columm" style="display: flex;">
<div class="node-input-equal-to">
<div class="columm">
<label for="node-input-equalTo" style="width: max-content; !important"><i class="fa fa-exchange"></i> Equal To: </label>
<input type="text" id="node-input-equalTo" style=" width:70px !important ">
</div>
</div>
<div class=box>
<div class="node-input-min-value" style="display: none; width: min-content; float: left; margin-right: 40px;">
<div class="columm">
<label for="node-input-minValue" style="width: max-content !important;"><i class="fa fa-minus-circle"></i> Minimum Value: </label>
<input type="number" id="node-input-minValue" style=" width:100px !important ">
</div>
</div>
<div class="node-input-max-value" style="display: none;">
<div class="columm">
<label for="node-input-maxValue" style="width: max-content !important"><i class="fa fa-plus-circle"></i> Maximum Value: </label>
<input type="number" id="node-input-maxValue" style=" width:100px !important ">
</div>
</div>
</div>
</div>
<!-- <div class="hr-div-compare">
<hr>
<span class="optional">Optional</span>
<hr>
</div>
<div class="form-row columm">
<label style="width: 50% !important;" for="node-input-name" ><i class="fa fa-tag"></i> Component Nickname</label>
<input type="text" id="node-input-name" placeholder="Name">
</div> -->
</script>
<script type="text/html" data-help-name="compare_support">
<p>Makes the rest of the comparisons adjacent to the “get command message”.</p>
</script>