347 lines
17 KiB
HTML
347 lines
17 KiB
HTML
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<% for(var i = 1; i<=3; i++){ %>
|
|
<% if (((i == 1) && ([2, 3, 6, 7, 10, 11, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1)) || ((i == 2) && ([4, 5, 6, 7, 12, 13, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1)) || ((i == 3) && ([8, 9, 10, 11, 12, 13, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1))){ %>
|
|
<div class="row row-flex">
|
|
<div class="col-md-12" style="text-align:center;">
|
|
<h2>System <%=i %>: <%= channels["transferstation.system_status_" + i].value %></h2>
|
|
</div>
|
|
<div class="col-md-2 box-me">
|
|
<div class="m levelSensor">
|
|
<h3 class="uppercase">Pond Level</h3>
|
|
<h3 class="uppercase">LT<%= i %>1</h3>
|
|
<hr />
|
|
<br />
|
|
<p><span data-valueupdate="lt<%=i %>1_level" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.lt" + i + "1_level"].value * 100) / 100 %> ft.
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m chargePump">
|
|
<h3 class="uppercase">Charge Pump</h3>
|
|
<h3 class="uppercase">MC<%= i %>1</h3>
|
|
<hr />
|
|
<br />
|
|
<p><span data-valueupdate="mc<%=i %>1_frequency" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.mc" + i + "1_frequency"].value * 100) / 100 %> Hz
|
|
</span></p>
|
|
<p><span data-valueupdate="mc<%=i %>1_current" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.mc" + i + "1_current"].value * 100) / 100 %> A
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m boosterPumpIntakePressure">
|
|
<h3 class="uppercase">BP Intake</h3>
|
|
<h3 class="uppercase">PT<%= i %>1</h3>
|
|
<hr />
|
|
<br />
|
|
<p><span data-valueupdate="pt<%=i %>1_pressure" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.pt" + i + "1_pressure"].value * 100) / 100 %> PSI
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m boosterPump">
|
|
<h3 class="uppercase">Charge Pump</h3>
|
|
<h3 class="uppercase">MC<%= i %>1</h3>
|
|
<hr />
|
|
<br />
|
|
<p><span data-valueupdate="mc<%=i %>2_frequency" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.mc" + i + "2_frequency"].value * 100) / 100 %> Hz
|
|
</span></p>
|
|
<p><span data-valueupdate="mc<%=i %>2_current" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.mc" + i + "2_current"].value * 100) / 100 %> A
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m boosterPumpDischargePressure">
|
|
<h3 class="uppercase">BP Discharge</h3>
|
|
<h3 class="uppercase">PT<%= i %>2</h3>
|
|
<hr />
|
|
<br />
|
|
<p><span data-valueupdate="pt<%=i %>2_pressure" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.pt" + i + "2_pressure"].value * 100) / 100 %> PSI
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m flowSensor">
|
|
<h3 class="uppercase">Flow</h3>
|
|
<h3 class="uppercase">FT<%= i %>1</h3>
|
|
<hr />
|
|
<br />
|
|
<p><span data-valueupdate="ft<%=i %>1_flow" data-refreshonupdate=true>
|
|
<%= Math.round(channels["transferstation.ft" + i + "1_flow"].value * 100) / 100 %> BPD
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-flex">
|
|
<div class="col-md-2 box-me">
|
|
<div class="m priority">
|
|
<h3 class="uppercase">Priority</h3>
|
|
<hr />
|
|
<br />
|
|
|
|
<div class="entry-top-level" id="priority">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<input class="form-control val_box"
|
|
type="number"
|
|
step="any"
|
|
value="<%=channels['transferstation.system_priority_' + i].value %>">
|
|
</div>
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'cfg_StationPriority[<%=i %>]', 'val': <%=channels['transferstation.system_priority_' + i].value %>}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic material-icons">send</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m boosterPumpIntakePressureTarget">
|
|
<h3 class="uppercase">BP Pressure SP</h3>
|
|
<hr />
|
|
<br />
|
|
|
|
<div class="entry-top-level" id="boosterPumpIntakePressureTarget">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<input class="form-control val_box"
|
|
type="number"
|
|
step="any"
|
|
value="<%=channels['transferstation.booster_pump_intake_target_' + i].value %>">
|
|
</div>
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'par_BoosterPumpIntakePressure[<%=i %>]', 'val': <%=channels['transferstation.booster_pump_intake_target_' + i].value %>}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic material-icons">send</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m flowTarget">
|
|
<h3 class="uppercase">Flow Target</h3>
|
|
<hr />
|
|
<br />
|
|
|
|
<div class="entry-top-level" id="flowTarget">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<input class="form-control val_box"
|
|
type="number"
|
|
step="any"
|
|
value="<%=channels['transferstation.flow_target_' + i].value %>">
|
|
</div>
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'par_SystemFlowrate[<%=i %>]', 'val': <%=channels['transferstation.flow_target_' + i].value %>}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic material-icons">send</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m getHelpFrequency">
|
|
<h3 class="uppercase">Get Help Freq.</h3>
|
|
<hr />
|
|
<br />
|
|
|
|
<div class="entry-top-level" id="getHelpFrequency">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<input class="form-control val_box"
|
|
type="number"
|
|
step="any"
|
|
value="<%=channels['transferstation.get_help_frequency_' + i].value %>">
|
|
</div>
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'cfg_getHelpFrequency[<%=i %>]', 'val': <%=channels['transferstation.get_help_frequency_' + i].value %>}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic material-icons">send</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m takeoverFrequency">
|
|
<h3 class="uppercase">Takeover Freq.</h3>
|
|
<hr />
|
|
<br />
|
|
|
|
<div class="entry-top-level" id="takeoverFrequency">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<input class="form-control val_box"
|
|
type="number"
|
|
step="any"
|
|
value="<%=channels['transferstation.takeover_frequency_' + i].value %>">
|
|
</div>
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'cfg_takeoverFrequency[<%=i %>]', 'val': <%=channels['transferstation.takeover_frequency_' + i].value %>}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic material-icons">send</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 box-me">
|
|
<div class="m takeoverFrequency">
|
|
<h3 class="uppercase">Manual Mode</h3>
|
|
<hr />
|
|
<br />
|
|
<% if (channels['transferstation.auto_manual'].value === "Manual"){ %>
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to remotely start the transfer station?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'cmd_ManualStart[<%= i %>]', 'val': 1}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-success animated confirmstatic"
|
|
style="width:90%;">
|
|
Start</a>
|
|
<br />
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to remotely start the transfer station?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend="{'tag': 'cmd_ManualStop[<%= i %>]', 'val': 1}"
|
|
data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
data-techname="<%=channels["transferstation.writeplctag"].techName %>"
|
|
data-name="<%= channels["transferstation.writeplctag"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
|
|
id="<%= channels["transferstation.writeplctag"].channelId %>"
|
|
class="btn btn-large btn-danger animated confirmstatic"
|
|
style="width:90%;margin-top:10px;">
|
|
Stop</a>
|
|
<% } else { %>
|
|
<p>Commands not available in auto mode.</p>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
<% } %>
|
|
|
|
<script>
|
|
|
|
$('.val_box').each(function(topLevel){
|
|
$(this).change(function(){
|
|
var id = "#" + $(this).closest(".entry-top-level").attr('id');
|
|
if (id !== "#undefined"){
|
|
// console.log("before parse", $(id).find('.setstatic').attr('data-staticsend').replace(/'/g, '"'));
|
|
var jsobj = JSON.parse($(id).find('.setstatic').attr('data-staticsend').replace(/'/g, '"'));
|
|
// console.log("after parse", jsobj)
|
|
// var tagStart = $(id).find('.setstatic').attr('data-staticsend').indexOf("tag") + 3;
|
|
// var tagStop = $(id).find('.setstatic').attr('data-staticsend').indexOf("] ]");
|
|
// var tag = $(id).find('.setstatic').attr('data-staticsend').substring(tagStart, tagStop).split(',')[0].replace(/'/g,"");
|
|
var val = $(id).find('.val_box').val();
|
|
var newData = "{'tag': '" + jsobj.tag +"', 'val': " + val.toString() + "}"
|
|
var tag = $(id).find('.setstatic').attr('data-staticsend', newData);
|
|
console.log($(id).find('.setstatic').attr('data-staticsend'));
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
color: #666;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.box-me {
|
|
position: relative;
|
|
padding: 0.5em;
|
|
padding-bottom: 1.5em;
|
|
border: 1px solid #eee;
|
|
/*margin: 1em 0;*/
|
|
}
|
|
.row-flex {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.row-flex > [class*='col-'] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.m {
|
|
text-align: center;
|
|
}
|
|
.val_box {
|
|
width:75% !important;
|
|
}
|
|
|
|
.setstatic {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.25em;
|
|
}
|
|
</style>
|