121 lines
8.1 KiB
HTML
121 lines
8.1 KiB
HTML
<div class="form-popup" id="new_sig_form">
|
|
<form action="/new_signal" class="form-container">
|
|
<!-- Panel 1 of 3 (5 rows, 2 columns) -->
|
|
<div id="panel_1" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: repeat(5,1fr);">
|
|
<!-- Panel title (row 1/5)-->
|
|
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Adds New Signal</h1>
|
|
<!-- Name Input field (row 2/5)-->
|
|
<div id = "SigName_div" style="grid-column: 1 / span 2; grid_row:2;">
|
|
<label for='signal_name' >Signal Name:</label>
|
|
<input type="text" id="signal_name" name="signal_name" />
|
|
</div>
|
|
<!-- Source Input field (row 3/5)-->
|
|
<label for="sig_source" style="grid-column: 1; grid-row: 3;"><b>Signal source</b></label>
|
|
<select name="sig_source" id="sig_source" style="grid-column: 2; grid-row: 3;" onchange= "UI.signals.fill_prop('sig_prop', this.value)">
|
|
<!-- Jinja2 loop through and populate the options -->
|
|
<!-- Uses namespace to set a var in global scope, so we can pass info to javascript later. -->
|
|
{% set ns = namespace(optonVal=0) %}
|
|
{% for each in indicator_list %}
|
|
<option>{{each}}</option>
|
|
{% if loop.index0 == 0 %}
|
|
{% set ns.optonVal = each %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
<!-- Property Input field (row 4/5)-->
|
|
<label style="grid-column: 1; grid-row: 4;" for="sig_prop"><b>Property</b></label>
|
|
<select style="grid-column: 2; grid-row: 4;" id="sig_prop" name="sig_prop" >
|
|
</select>
|
|
<script>UI.signals.fill_prop('sig_prop', '{{ns.optonVal}}')</script>
|
|
<!-- Input controls (row 5/5)-->
|
|
<div style="grid-column: 1 / span 2; grid-row: 5;">
|
|
<button type="button" class="btn cancel" onclick="UI.signals.close_signal_Form()">Close</button>
|
|
<button type="button" class="btn next" onclick="UI.signals.ns_next(1)">Next</button>
|
|
</div>
|
|
</div><!----End panel 1--------->
|
|
<!-- Panel 2 of 3 (6 rows, 2 columns) -->
|
|
<div id="panel_2" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: 1fr 35px 35px repeat(3,1fr);">
|
|
<!-- Panel title(Signal_type) (row 1/6)-->
|
|
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Signal Type</h1>
|
|
<!-- Type Input field (row 2/6) -->
|
|
<div id = "Signal_type" style="grid-column: 1 / span 2; grid_row:2;">
|
|
<label for="signal_type"><b>Signal Type:</b></label>
|
|
<select name="signal_type" id="select_s_type" onchange="UI.signals.hideIfTrue(this.value,'Value','subpanel_1');UI.signals.hideIfTrue(this.value,'Comparison','subpanel_2');">
|
|
<option>Value</option>
|
|
<option>Comparison</option>
|
|
</select>
|
|
</div>
|
|
<!-- display signal (row 3/6) -->
|
|
<span id="sig_display" style="grid-column: 1 / span 2; grid_row: 3;">name:{property}(operator)name:{property}</span>
|
|
<!-- Operator field (row 4/6) -->
|
|
<div id="sig_operator" style="grid-column: 1 / span 2; grid_row: 4;">
|
|
|
|
<input type = "radio" id="gt" name="Operator" value=">">
|
|
<label for = "gt">Greater than</label>
|
|
|
|
<input type="radio" id="lt" name="Operator" value="<">
|
|
<label for = "lt">lessthan</label><br>
|
|
|
|
<input type = "radio" id="eq" name="Operator" value="==" checked="checked">
|
|
<label for = "eq">Equals</label>
|
|
|
|
<input type="radio" id="within" name="Operator" value="+/-">
|
|
<label for = "within">Within range</label>
|
|
<input type="range" id="rangeSlider" min="0" max="1000" value="100" onchange="document.getElementById('rangeVal').value=this.value;">
|
|
<input type="text" id="rangeVal" value="100" onchange="document.getElementById('rangeSlider').value=this.value;"/>
|
|
</div>
|
|
<!-- Compare sub-panel (row 5,6) -->
|
|
<div id="subpanel_2" style="grid-column: 1 / span 2; grid_row: 5 / span 3;">
|
|
<label for="value">Value:</label>
|
|
<input id="value" name="value" type="number" value="100"/>
|
|
</div>
|
|
|
|
<div id="subpanel_1" style="grid-column: 1 / span 2; grid_row: 5 / span 3;">
|
|
<!-- Source Input field -->
|
|
<label for="sig2_source" ><b>Signal source</b></label>
|
|
<select name="sig2_source" id="sig2_source" onchange= "UI.signals.fill_prop('sig2_prop', this.value)">
|
|
<!-- Jinja2 loop through and populate the options -->
|
|
<!-- Uses namespace to set a var in global scope, so we can pass info to javascript later. -->
|
|
{% set ns = namespace(optonVal=0) %}
|
|
{% for each in indicator_list %}
|
|
<option>{{each}}</option>
|
|
{% if loop.index0 == 0 %}
|
|
{% set ns.optonVal = each %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select><br>
|
|
<!-- Property Input field -->
|
|
<label for="sig2_prop"><b>Property</b></label>
|
|
<select id="sig2_prop" name="sig2_prop" >
|
|
</select>
|
|
<script>UI.signals.fill_prop('sig2_prop', '{{ns.optonVal}}')</script>
|
|
</div>
|
|
<!-- Input controls (row 6/6) -->
|
|
<div class="padDiv" style="grid-column: 1/3; grid-row: 6;">
|
|
<button type="button" class="btn" onclick="UI.signals.switch_panel('panel_2','panel_1')">Back</button>
|
|
<button type="button" class="btn submit" onclick="UI.signals.ns_next(2)">Next</button>
|
|
</div>
|
|
</div><!----End panel 2--------->
|
|
<!-- Panel 3 of 3 (6 rows, 2 columns) -->
|
|
<div id="panel_3" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: 1fr 35px 35px repeat(3,1fr);">
|
|
<!-- Panel title(Create Signal) (row 1/6)-->
|
|
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Create Signal</h1>
|
|
<!-- display signal (row 2/6) -->
|
|
<span id="sig_display2" style="grid-column: 1 / span 2; grid_row: 2;"></span>
|
|
<!-- display current Values (row 3/6) -->
|
|
<span style="grid-column: 1 / span 2; grid_row: 3;">Current values</span>
|
|
<!-- display realtime values (row 4/6) -->
|
|
<span id="sig_realtime" style="grid-column: 1 / span 2; grid_row: 4;"></span>
|
|
<!-- display current evaluation (row 4/6) -->
|
|
<span style="grid-column: 1; grid_row: 4;">Currently evaluates to :</span>
|
|
<span id="sig_eval" style="grid-column: 2; grid_row: 4;"></span>
|
|
|
|
<!-- Input controls (row 6/6) -->
|
|
<div class="padDiv" style="grid-column: 1/3; grid-row: 6;">
|
|
<button type="button" class="btn" onclick="UI.signals.switch_panel('panel_3','panel_2')">Back</button>
|
|
<button type="button" class="btn submit" onclick="UI.signals.submitNewSignal()">Next</button>
|
|
</div>
|
|
</div><!----End panel 3--------->
|
|
</form>
|
|
</div>
|