{% extends "hmi-base.html" %}


{% block header-extras %}
{{ block.super }}
<script>
	function doorUpdate() {
		$.ajax({
			url : "/hmi/checkalerts/",
			type : "POST",
			data : {
				csrfmiddlewaretoken : '{{csrf_token}}'
			},
			success : function(data, status, jqXHR) {
				$('#alert-list-body').html(data);
				var bsfStat = '{{ STATIC_URL}}img/emptyBlisterAccessDoor_' + $('#bsfDoorStatus').val() + '.png';
				$('#bsf-door-button').attr('src', bsfStat);
				var lsuStat = '{{ STATIC_URL}}img/packingUnitAccessDoor_' + $('#lsuDoorStatus').val() + '.png';
				$('#lsu-door-button').attr('src', lsuStat);

				if ($('#bsfDoorStatus').val() == 'opened') {
					$('#bsf-door').prop('disabled', true);
				} else {
					$('#bsf-door').prop('disabled', false);
				}
				if ($('#lsuDoorStatus').val() == 'opened') {
					$('#lsu-door').prop('disabled', true);
				} else {
					$('#lsu-door').prop('disabled', false);
				}
			}
		});
	}


	$(document).ready(function() {
		var ajaxtimer;
		
		$("#cancel-message").dialog({
			{% if showCancel == True %}
			autoOpen : true,
			{% else %}
			autoOpen : false,
			{% endif %}
			closeOnEscape : false,
			modal : true,
			draggable : false,
			buttons : {
				Cancel : function() {
					$("#cancel_door_unlock").val("cancel_unlock");
					$("#alertDisplayForm").submit();
					$(this).dialog("close");
				}
			},
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
				$.idleTimer('destroy');
				ajaxtimer = setInterval(function() {
					$.ajax({
						url : "/hmi/checkdoor/",
						type : "POST",
						data : $("#alertDisplayForm").serialize(),
						success : function(data, status, jqXHR) {
							$('#cancel-message').html(data);
						}
					})
				}, 1000);
				/*1 second*/
			},
			close : function(event, ui) {
				clearInterval(ajaxtimer);
				$.idleTimer(HMI_IDLE_TIMEOUT);

				$(document).bind("idle.idleTimer", function() {
					$("#frmIdle").submit();
				});
			}
		});
		
		doorUpdate();
		var alerttimer;

		alerttimer = setInterval(function() {
			doorUpdate()
		}, 1000);
		/*1 seconds*/
	}); 
</script>
{% endblock %}

{% block content %}
{%include 'hmi-door-cancel.html' %}
<form name="alertDisplayForm" id="alertDisplayForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<p style="font-weight: bold;">
			Current Alerts
		</p>
		<table id="alert-list" name="alert-list" class="alert-table">
			<thead class="alert-table-header">
				<tr>
					<th class="alert-table-header-cell" style="width: 70px;">Code</th>
					<th class="alert-table-header-cell" style="width: 70px;">Location</th>
					<th class="alert-table-header-cell">Instructions</th>
				</tr>
			</thead>
			<tbody id="alert-list-body" name="alert-list-body" class="alert-table-body">
				{% include 'hmi-alert-row.html' %}
			</tbody>
		</table>
		<table id="door-buttons" name="door-buttons" style="width: 100%;">
			<thead class="grey-background">
				<tr>
					<th style="text-align: left;" colspan="2">Tower Door Access</th>
					<th style="text-align: center;">System Control</th>
				</tr>
			</thead>
			<tbody>
				<tr style="height: 120px;">
					<td class="door-button-cell">
					<button id="lsu-door" name="lsu-door" class="door-button">
						<img id="lsu-door-button" name="lsu-door-button" class="img-rounded" src="{{ STATIC_URL}}img/packingUnitAccessDoor_closed.png">
					</button></td>
					<td class="door-button-cell">
					<button id="bsf-door" name="bsf-door" class="door-button">
						<img id="bsf-door-button" name="bsf-door-button" class="img-rounded" src="{{ STATIC_URL}}img/emptyBlisterAccessDoor_closed.png">
					</button></td>
					<td style="text-align: center;">
					<button id="dosis-run" name="dosis-run" class="run-button"><img src="{{ STATIC_URL}}img/cc_run.png"> Run
					</button></td>
				</tr>
			</tbody>
		</table>
	</div>
	<input type="hidden" name="cancel_door_unlock" id="cancel_door_unlock" value=""/>
	<input type="hidden" name="current_door" id="current_door" value="{{ currentDoor }}"/>
</form>
{% endblock %}