ebc4c89143
This adds the possibility to use a datepicker in the modal after clicking the start button to schedule when the kiln should start running by itself automatically. The timer is implemented in the backend and the start is triggered there so closing or refreshing the browser does not stop it. In the state when it's "waiting to start", the frontend state changes so that the glowing timer icon is now shown instead of the previously unused door icon. The state is also displayed as SCHEDULED and above it the info states when it's due to start: "Start at: ..."
164 lines
8.1 KiB
HTML
164 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<title>Kiln Controller</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<script src="assets/js/jquery-1.10.2.min.js"></script>
|
|
<script src="assets/js/jquery.event.drag-2.2.js"></script>
|
|
<script src="assets/js/jquery.flot.js"></script>
|
|
<script src="assets/js/jquery.flot.resize.js"></script>
|
|
<script src="assets/js/jquery.flot.draggable.js"></script>
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/jquery.bootstrap-growl.min.js"></script>
|
|
<script src="assets/js/select2.min.js"></script>
|
|
<script src="assets/js/picoreflow.js"></script>
|
|
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css"/>
|
|
<link rel="stylesheet" href="assets/css/bootstrap-modal.css"/>
|
|
<link rel="stylesheet" href="assets/css/select2.css"/>
|
|
<link rel="stylesheet" href="assets/css/picoreflow.css"/>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div id="status">
|
|
<div class="ds-title-panel">
|
|
<div class="ds-title">Sensor Temp</div>
|
|
<div class="ds-title">Target Temp</div>
|
|
<div id="schedule-status" class="ds-title"></div>
|
|
<div class="ds-title ds-state pull-right" style="border-left: 1px solid #ccc;">Status</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
<div class="ds-panel">
|
|
<div class="display ds-num"><span id="act_temp">25</span><span class="ds-unit" id="act_temp_scale" >°C</span></div>
|
|
<div class="display ds-num ds-target"><span id="target_temp">---</span><span class="ds-unit" id="target_temp_scale">°C</span></div>
|
|
<div class="display ds-num ds-text" id="state"></div>
|
|
<div class="display pull-right ds-state" style="padding-right:0"><span class="ds-led" id="heat">\</span><span class="ds-led" id="cool">l</span><span class="ds-led" id="air">[</span><span class="ds-led" id="hazard">I</span><span class="ds-led" id="timer">⧖</span></div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
<div>
|
|
<div class="progress progress-striped active">
|
|
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
|
|
<span class="sr-only"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<div id="profile_selector" class="pull-left">
|
|
<select id="e2" class="select2" style="margin-top: 4px"></select>
|
|
<button id="btn_edit" type="button" class="btn btn-default" onclick="enterEditMode()"><span class="glyphicon glyphicon-edit"></span></button>
|
|
<button id="btn_new" type="button" class="btn btn-default" onclick="enterNewMode(selected_profile)"><span class="glyphicon glyphicon-plus"></span></button>
|
|
</div>
|
|
<div id="btn_controls" class="pull-right" style="margin-top: 3px">
|
|
<div id="nav_start" class="btn-group" style="display:none">
|
|
<button type="button" class="btn btn-default" style="visibility: hidden;" onclick="runTaskSimulation();">Simulate</button>
|
|
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#jobSummaryModal"><span class="glyphicon glyphicon-play"></span> Start</button>
|
|
</div>
|
|
<button id="nav_stop" type="button" class="btn btn-danger" onclick="abortTask()" style="display:none" ><span class="glyphicon glyphicon-stop"></span> Stop</button>
|
|
</div>
|
|
<div id="edit" style="display:none;">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">Schedule Name</span>
|
|
<input id="form_profile_name" type="text" class="form-control" />
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-success" type="button" onclick="saveProfile();">Save</button>
|
|
<button id="btn_exit" type="button" class="btn btn-default" onclick="leaveEditMode()"><span class="glyphicon glyphicon-remove"></span></button>
|
|
</span>
|
|
</div>
|
|
<div class="btn-group btn-group-sm" style="margin-top: 10px">
|
|
<button id="btn_newPoint" type="button" class="btn btn-default" onclick="newPoint()"><span class="glyphicon glyphicon-plus"></span></button>
|
|
<button id="btn_delPoint" type="button" class="btn btn-default" onclick="delPoint()"><span class="glyphicon glyphicon-minus"></span></button>
|
|
</div>
|
|
<div class="btn-group btn-group-sm" style="margin-top: 10px">
|
|
<button id="btn_table" type="button" class="btn btn-default" onclick="toggleTable()"><span class="glyphicon glyphicon-list"></span></button>
|
|
<button id="btn_live" type="button" class="btn btn-default" onclick="toggleLive()"><span class="glyphicon glyphicon-eye-open"></span></button>
|
|
</div>
|
|
<div class="btn-group btn-group-sm" style="margin-top: 10px">
|
|
<button id="btn_delProfile" type="button" class="btn btn-danger" data-toggle="modal" data-target="#delProfileModal"><span class="glyphicon glyphicon-trash"></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="graph_container" class="graph"></div>
|
|
</div>
|
|
<div id="profile_table" class="panel-footer" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="jobSummaryModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h3 class="modal-title" id="jobSummaryModalLabel">Task Overview</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-bordered">
|
|
<tr><td>Selected Profile</td><td><b><span id="sel_prof"></span></b></td></tr>
|
|
<tr><td>Estimated Runtime</td><td><b><span id="sel_prof_eta"></span></b></td></tr>
|
|
<tr><td>Estimated Power consumption</td><td><b><span id="sel_prof_cost"></span></b></td></tr>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="btn-group" style="width: 100%">
|
|
<button type="button" class="btn btn-danger" style="width: 50%" data-dismiss="modal">No, take me back</button>
|
|
<button type="button" class="btn btn-success" style="width: 50%" data-dismiss="modal" onclick="runTask()">Yes, start the Run now</button>
|
|
</div>
|
|
<div class="schedule-group">
|
|
<input type="datetime-local" id="scheduled-run-time">
|
|
<button type="button" class="btn btn-primary" style="width: 50%" data-dismiss="modal" onclick="scheduleTask()">Schedule start for later</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="delProfileModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h3 class="modal-title" id="delProfileModalLabel">Delete this profile?</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
Do your really want to delete this profile?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="btn-group" style="width: 100%">
|
|
<button type="button" class="btn btn-danger" style="width: 50%" data-dismiss="modal">No, take me back</button>
|
|
<button type="button" class="btn btn-success" style="width: 50%" data-dismiss="modal" onclick="deleteProfile()">Yes, delete the profile</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="overwriteProfileModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h3 class="modal-title" id="overwriteProfileModalLabel">Overwrite this profile?</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
Do your really want to overwrite this profile?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="btn-group" style="width: 100%">
|
|
<button type="button" class="btn btn-danger" style="width: 50%" data-dismiss="modal">No, take me back</button>
|
|
<button type="button" class="btn btn-success" style="width: 50%" data-dismiss="modal" onclick="deleteProfile()">Yes, delete the profile</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|