{% extends "base.html" %}


{% block header-extras %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/hmi.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/site.css" />
<script>
	var HMI_IDLE_TIMEOUT = 30000;
	
	function materialUpdate() {
		$.ajax({
			url : "/hmi/checkstatus/",
			type : "POST",
			data : {
				csrfmiddlewaretoken : '{{csrf_token}}'
			},
			success : function(data, status, jqXHR) {
				$('#status-display').html(data);
				var sysStat = 'Operational Status: ' + $('#overallStatusAbbr').val();
				$('#system-text-status').html(sysStat);
                var card_que_txt = 'Queue:';
                if ($('#maint_overdue').val() === 'Y') {
                    card_que_txt = "<span class='blink'>Clean!</span> &nbsp;";
                    if ($('#annoying_mode').val() === 'Y') {
                        $('#maintenance-overdue-bounce-base').show();
                        $('#maintenance-overdue-bounce').show();
                    }
                } else {
                    $('#maintenance-overdue-bounce-base').hide();
                    $('#maintenance-overdue-bounce').hide();
                }
				if ($('#show_cycle_and_demand').val() === 'True') {
					let queueStat = card_que_txt + ' DMD: ' + $('#dmd_run').val() + '/' + $('#dmd_que').val() + ' CYC: ' + $('#cyc_run').val() + '/' + $('#cyc_que').val() + ' PP: ' + $('#prepackRunnable').val() + '/' + $('#prepackQueued').val() + ' ALL: ' + $('#totalRunnable').val() + '/' + $('#totalQueued').val();
					$('#queue-text-status').html(queueStat);
				} else {
					let queueStat = card_que_txt + ' RX: ' + $('#rxRunnable').val() + ' / ' + $('#rxQueued').val() + ' PP: ' + $('#prepackRunnable').val() + ' / ' + $('#prepackQueued').val() + ' ALL: ' + $('#totalRunnable').val() + ' / ' + $('#totalQueued').val();
					$('#queue-text-status').html(queueStat);
				}
			}
		});
	}


	$(document).ready(function() {
        {% if auth_site_settings.security_enabled %}
            DosisAuth.Util.setupAjax();
        {% endif %}

		materialUpdate();

		var materialtimer;

		materialtimer = setInterval(function() {
			materialUpdate()
		}, 3000);
		/*3 seconds*/

		$.idleTimer(HMI_IDLE_TIMEOUT);

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

        $("#canister-tab").click(function() {
            $("*").css("cursor", "wait");
            window.location = "/hmi/canister_page/";
            return false;
        });

        $("#status-tab").click(function() {
            $("*").css("cursor", "wait");
            window.location = "/hmi/status_page/";
            return false;
        });

        $("#maintenance-tab").click(function() {
            $("*").css("cursor", "wait");
            window.location = "/hmi/maintenance_page/";
            return false;
        });

        $("#settings-tab").click(function() {
            $("*").css("cursor", "wait");
            window.location = "/hmi/settings_page/";
            return false;
        });

		if (window.screen.width === 800 && window.screen.height === 600){
			$("*").css("cursor", "none");
		}

        {# DosisAuth.Components is set up even when security is not enabled, so it can be used on pages #}
        {# that do not require security to be enabled. #}
        DosisAuth.Components.setup();

        {% if auth_site_settings.security_enabled %}
        DosisAuth.Navbar.setup({
            URLs: {
                user_controls: "{% url 'L60:user-controls' %}"
            },
            user_controls_interval: {{ auth_site_settings.user_controls_refresh_rate }}
        });
        DosisAuth.HMI.setup({});
        {% endif %}

	});

</script>
{% endblock %}

{% block body %}
<form class="hidden-form" action="/hmi/showidlestatus/" method="post" id="frmIdle">
	{% csrf_token %}
	<input type="hidden" id="currPage" name="currPage" value="{{ currentPage }}"/>
</form>
    <div id="maintenance-overdue-bounce-base" style="display: none;" class="ball"></div>
<table id="hmi-screen-content">
	<tr>
		<td style="width: 150px; height: 565px;">
		<div id="status-display" class="well well-small material-status-container">
			{%include 'hmi-material-status.html' %}
		</div></td>
		<td style="width: 650px; height: 565px;">
		<table style="width: 100%;">
			<tr>
				<td style="height: 60px;">
				<div class="nav-tab-div">
					<ul class="nav nav-tabs nav-tab-ul">
						<li {% if currentPage == 'canisters' %}class="active" {% endif %}>
							<a id="canister-tab" class="{% if currentPage != 'canisters' %}well {% endif %}nav-tab-text {% if currentPage == 'canisters' %}top-tab-selected{% else %}top-tab-normal{% endif %}"
                               href="/hmi/canister_page/">Canisters</a>
						</li>
						<li {% if currentPage == 'status' %}class="active"{% endif %}>
							<a id="status-tab" class="{% if currentPage != 'status' %}well {% endif %}nav-tab-text {% if currentPage == 'status' %}top-tab-selected{% else %}top-tab-normal{% endif %}"
                               href="/hmi/status_page/">Status</a>
						</li>
						<li {% if currentPage == 'maintenance' %}class="active"{% endif %}>
							<a id="maintenance-tab" class="{% if currentPage != 'maintenance' %}well {% endif %}nav-tab-text {% if currentPage == 'maintenance' %}top-tab-selected{% else %}top-tab-normal{% endif %}"
                               href="/hmi/maintenance_page/">Maintenance</a>
						</li>
						<li {% if currentPage == 'settings' %}class="active"{% endif %}>
							<a id="settings-tab" class="{% if currentPage != 'settings' %}well {% endif %}nav-tab-text {% if currentPage == 'settings' %}top-tab-selected{% else %}top-tab-normal{% endif %}"
                               href="/hmi/settings_page/">Settings</a>
						</li>
					</ul>
				</div></td>
			</tr>
			<tr>
				<td>
				<div id="main-content" class="main-content-container">
					{% block content %}{% endblock %}
				</div></td>
			</tr>
		</table></td>
	</tr>
	<tr>
		<td colspan="2" style="width: 100%; height: 20px;">
		<div class="well well-small status-bar-container">
            <table style="width: 100%;">
                <tr>
                    <td id="queue-text-status" name="queue-text-status" class="status-bar-text" style="float: left;">
                        Cards In Queue: 0
                    </td>
                    {% if auth_site_settings.security_enabled %}
                    <td class="user-controls-container-auth" id="hmi-user-controls-container-auth" style="margin-right: auto; margin-left: auto;"></td>
                    {% endif %}
                    <td class="status-bar-text" style="margin-right: auto; margin-left: auto;">
                        {{ dafe_name }} - {{ customer_number }}
                    </td>
                    <td id="system-text-status" name="system-text-status" class="status-bar-text" style="float: right;">
                        Operational Status: Unk
                    </td>
                </tr>
            </table>
		</div></td>
	</tr>
</table>
{% endblock %}