{% extends "base.html" %}


{% block header-extras %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/hmi.css" />
<script>
	function numpadcallback(key) {
		oskcallback(key, '#osknumpadtext');
	}

	function keyboardcallback(key) {
		oskcallback(key, '#osktext');
	}

	function oskcallback(key, tbox) {
		var box = $(tbox);
		var text = box.val();
		var pos = box.caret();
		switch (key) {
			case '\b':
				box.val(text.substring(0, pos - 1) + text.substring(pos));
				box.caret(pos - 1);
				break;
			case '\3':
				box.caret(pos - 1);
				break;
			case '\4':
				box.caret(pos + 1);
				break;
			default:
				box.val(text.substring(0, pos) + key + text.substring(pos));
				box.caret(pos + 1);
		}
		$(tbox).focus();
	}

	$(function() {
		$('input:radio').screwDefaultButtons({
			image : 'url("{{ STATIC_URL }}img/radioSmall.jpg")',
			width : 43,
			height : 43
		});

		$("#oskdialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 785,
			position : {
				my : "left top",
				at : "left top",
				of : window
			},
			draggable : false,
			buttons : [{
				text : "Cancel",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Save",
				"class" : 'dialog-button-left',
				click : function() {
					var retfield = $("#oskeditfield").val();
					$(retfield).val($("#osktext").val());
					$(this).dialog("close");
				}
			}, {
				text : "Clear",
				"class" : 'dialog-button-center',
				click : function() {
					$('#osktext').val('');
					$('#osktext').focus();
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
				$('#osk').loadLayout('{{ STATIC_URL }}js/layouts/hmi-default.json', keyboardcallback)
			}
		});

		$("#osknumpaddialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 500,
			position : {
				my : "center top",
				at : "center top",
				of : window
			},
			draggable : false,
			buttons : [{
				text : "Cancel",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Save",
				"class" : 'dialog-button-left',
				click : function() {
					var retfield = $("#numpadeditfield").val();
					$(retfield).val($("#osknumpadtext").val());
					$(this).dialog("close");
				}
			}, {
				text : "Clear",
				"class" : 'dialog-button-center',
				click : function() {
					$('#osknumpadtext').val('');
					$('#osknumpadtext').focus();
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
				$('#osknumpad').loadLayout('{{ STATIC_URL }}js/layouts/hmi-numpad.json', numpadcallback)
			}
		});

		$("#routedialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 785,
			position : {
				my : "left top",
				at : "left top",
				of : window
			},
			draggable : false,
			buttons : [{
				text : "Close",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
			}
		});

		$("#pingdialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 785,
			position : {
				my : "left top",
				at : "left top",
				of : window
			},
			draggable : false,
			buttons : [{
				text : "Close",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Ping",
				"class" : 'dialog-button-left',
				click : function() {
					var pingaddr = $("#pingtext").val();
					$('#pingdialogtext').html('Working...');
					$.ajax({
						url : "/hmi/networkping/",
						type : "POST",
						data : {
							pingtext : pingaddr,
							csrfmiddlewaretoken : $("input[name=csrfmiddlewaretoken]").val()
						},
						success : function(data, status, jqXHR) {
							$('#pingdialogtext').html(data);
						}
					})
				}
			}, {
				text : "Clear",
				"class" : 'dialog-button-center',
				click : function() {
					$('#pingtext').val('');
					$('#pingdialogtext').html('');
					$('#pingtext').focus();
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
			}
		});

		$("#tracedialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 785,
			position : {
				my : "left top",
				at : "left top",
				of : window
			},
			draggable : false,
			buttons : [{
				text : "Close",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Trace",
				"class" : 'dialog-button-left',
				click : function() {
					var traceaddr = $("#tracetext").val();
					$('#tracedialogtext').html('Working...');
					$.ajax({
						url : "/hmi/networktrace/",
						type : "POST",
						data : {
							tracetext : traceaddr,
							csrfmiddlewaretoken : $("input[name=csrfmiddlewaretoken]").val()
						},
						success : function(data, status, jqXHR) {
							$('#tracedialogtext').html(data);
						}
					})
				}
			}, {
				text : "Clear",
				"class" : 'dialog-button-center',
				click : function() {
					$('#tracetext').val('');
					$('#tracedialogtext').html('');
					$('#tracetext').focus();
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
			}
		});

		$("#applydialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 400,
			draggable : false,
			buttons : [{
				text : "Close",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
				$('#applystatus').html('Applying Network Settings. Please Wait...');
				$.ajax({
					url : "/hmi/networkapply/",
					type : "POST",
					data : 	$("#networkForm").serialize(),
					success : function(data, status, jqXHR) {
						$('#applystatus').html("Network Settings updated. Press Close to continue.");
					}
				})
			}
		});

		$("input[name='ipaddrtype']").change(function() {
			if ($(this).val() == 'static') {
				$('#fieldset-static-ip').removeAttr('disabled');
				$("#manualdns").click();
				$("#autodns").attr('disabled', 'disabled');
			} else {
				$('#fieldset-static-ip').attr('disabled', 'disabled');
				$("#autodns").removeAttr('disabled');
			}
		});

		$("input[name='dnstype']").change(function() {
			if ($(this).val() == 'manual') {
				$('#fieldset-manual-dns').removeAttr('disabled');
			} else {
				$('#fieldset-manual-dns').attr('disabled', 'disabled');
			}
		});

		$('#btn_static_ip').click(function() {
			$('#osknumpaddialog').dialog("option", "title", 'Enter Static IP Address');
			$('#numpadeditfield').val('#static_ip_address');
			$('#osknumpadtext').val($('#static_ip_address').val());
			$('#osknumpaddialog').dialog("open");
		});

		$('#btn_static_subnet').click(function() {
			$('#osknumpaddialog').dialog("option", "title", 'Enter Subnet Mask');
			$('#numpadeditfield').val('#static_subnet_mask');
			$('#osknumpadtext').val($('#static_subnet_mask').val());
			$('#osknumpaddialog').dialog("open");
		});

		$('#btn_static_gateway').click(function() {
			$('#osknumpaddialog').dialog("option", "title", 'Enter Default Gateway');
			$('#numpadeditfield').val('#static_gateway');
			$('#osknumpadtext').val($('#static_gateway').val());
			$('#osknumpaddialog').dialog("open");
		});

		$('#btn_dns1').click(function() {
			$('#osknumpaddialog').dialog("option", "title", 'Enter Preferred DNS');
			$('#numpadeditfield').val('#manual_dns1');
			$('#osknumpadtext').val($('#manual_dns1').val());
			$('#osknumpaddialog').dialog("open");
		});

		$('#btn_dns2').click(function() {
			$('#osknumpaddialog').dialog("option", "title", 'Enter Alternate DNS');
			$('#numpadeditfield').val('#manual_dns2');
			$('#osknumpadtext').val($('#manual_dns2').val());
			$('#osknumpaddialog').dialog("open");
		});

		$('#btn_dns_suffix').click(function() {
			$('#oskdialog').dialog("option", "title", 'Enter DNS Suffix');
			$('#oskeditfield').val('#manual_dns_suffix');
			$('#osktext').val($('#manual_dns_suffix').val());
			$('#oskdialog').dialog("open");
		});

		$('#btn_hostname').click(function() {
			$('#oskdialog').dialog("option", "title", 'Enter Hostname');
			$('#oskeditfield').val('#hostname');
			$('#osktext').val($('#hostname').val());
			$('#oskdialog').dialog("open");
		});

		$('#btn_ping_keyboard').click(function() {
			$('#oskdialog').dialog("option", "title", 'Enter IP Address to ping');
			$('#oskeditfield').val('#pingtext');
			$('#osktext').val($('#pingtext').val());
			$('#oskdialog').dialog("open");
		});

		$('#btn_trace_keyboard').click(function() {
			$('#oskdialog').dialog("option", "title", 'Enter IP Address to trace');
			$('#oskeditfield').val('#tracetext');
			$('#osktext').val($('#tracetext').val());
			$('#oskdialog').dialog("open");
		});

		$('#btn_route').click(function() {
			$('#routedialog').dialog("open");
		});

		$('#btn_ping').click(function() {
			$('#pingtext').val('');
			$('#pingdialogtext').html('');
			$('#pingtext').focus();
			$('#pingdialog').dialog("open");
		});

		$('#btn_trace').click(function() {
			$('#tracetext').val('');
			$('#tracedialogtext').html('');
			$('#tracetext').focus();
			$('#tracedialog').dialog("open");
		});
		
		$('#savenw').click(function() {
			$('#applydialog').dialog("open");
		});

		{% if currentIPType == 'dhcp' %}
		$('#dhcpip').click();
		{% endif %}
		{% if currentIPType == 'static' %}
		$('#staticip').click();
		{% endif %}
		{% if currentDNSType == 'auto' %}
		$('#autodns').click();
		{% endif %}
		{% if currentDNSType == 'manual' %}
		$('#manualdns').click();
		{% endif %}
	});

</script>
{% endblock %}

{% block body %}
<form name="networkForm" class="full-screen-form" id="networkForm" method="post">
	{% csrf_token %}
	<div id="oskdialog" title="">
		<input type="hidden" name="oskeditfield" id="oskeditfield" value=""/>
		<p class="osk-p">
			<input class="osk-text-input" type="text" id="osktext" name="osktext" value="" size="50"/>
		</p>
		<div id="osk"></div>
	</div>
	<div id="osknumpaddialog" title="">
		<input type="hidden" name="numpadeditfield" id="numpadeditfield" value=""/>
		<p class="osk-p">
			<input class="osk-text-input" type="text" id="osknumpadtext" name="osknumpadtext" value="" size="50"/>
		</p>
		<div id="osknumpad"></div>
	</div>
	<div id="routedialog" title="Route Info">
		<textarea id="routedialogtext" cols="100" rows="15" style="font-family: monospace; width: 750px; margin:0; padding:0;">{{ routeDisplay }}</textarea>
	</div>
	<div id="pingdialog" title="Ping Tool">
		<p class="osk-p">
			<input class="osk-text-input" type="text" id="pingtext" name="pingtext" value="" size="50"/>
			<button id="btn_ping_keyboard" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_app_ktouch.png"/>
			</button>
		</p>
		<textarea id="pingdialogtext" cols="100" rows="15" style="font-family: monospace; width: 750px; margin:0; padding:0;"></textarea>
	</div>
	<div id="tracedialog" title="Traceroute Tool">
		<p class="osk-p">
			<input class="osk-text-input" type="text" id="tracetext" name="tracetext" value="" size="50"/>
			<button id="btn_trace_keyboard" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_app_ktouch.png"/>
			</button>
		</p>
		<textarea id="tracedialogtext" cols="100" rows="15" style="font-family: monospace; width: 750px; margin:0; padding:0;"></textarea>
	</div>
	<div id="applydialog" title="Applying Network Settings">
		<p id="applystatus"></p>
	</div>
	<table class="grey-background">
		<tr>
			<td class="full-screen-td">
			<div id="network-display" class="full-screen-container">
				<table style="width: 100%;">
					<tr>
						<td class="network-top-cell">
						<fieldset class="titled-border-fieldset-network-top">
							<legend class="titled-border-legend">
								IP Address
							</legend>
							<table class="user-maintenance-table">
								<tr class="network-radio-tr">
									<td>
									<input type="radio" id="dhcpip" name="ipaddrtype" value="dhcp"/>
									<label for="dhcpip">Obtain IP Address Automatically (DHCP)</label></td>
								</tr>
								<tr class="network-radio-tr">
									<td>
									<input type="radio" id="staticip" name="ipaddrtype" value="static"/>
									<label for="staticip">Use The Following IP Address:</label></td>
								</tr>
								<tr style="height: 100%;">
									<td>
									<fieldset id="fieldset-static-ip" class="titled-border-fieldset-network-subset" disabled="disabled">
										<legend class="titled-border-legend">
											Static Address
										</legend>
										<table class="user-maintenance-table">
											<tr style="height: 45px;">
												<td style="text-align: right;">IP Address:</td>
												<td style="width: 145px;">
												<input id="static_ip_address" name="static_ip_address" type="text" class="network-addr-input" value="{{ currentIP }}"/>
												</td>
												<td>
												<button id="btn_static_ip" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/app_business.png"/>
												</button></td>
											</tr>
											<tr style="height: 45px;">
												<td style="text-align: right;">Subnet Mask:</td>
												<td style="width: 145px;">
												<input id="static_subnet_mask" name="static_subnet_mask" type="text" class="network-addr-input" value="{{ currentNetmask }}"/>
												</td>
												<td>
												<button id="btn_static_subnet" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/app_business.png"/>
												</button></td>
											</tr>
											<tr style="height: 45px;">
												<td style="text-align: right;">Default Gateway:</td>
												<td style="width: 145px;">
												<input id="static_gateway" name='static_gateway' type="text" class="network-addr-input" value="{{ currentGateway }}"/>
												</td>
												<td>
												<button id="btn_static_gateway" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/app_business.png"/>
												</button></td>
											</tr>
										</table>
									</fieldset></td>
								</tr>
							</table>
						</fieldset></td>
						<td class="network-top-cell">
						<fieldset class="titled-border-fieldset-network-top">
							<legend class="titled-border-legend">
								DNS Settings
							</legend>
							<table class="user-maintenance-table">
								<tr class="network-radio-tr">
									<td>
									<input type="radio" id="autodns" name="dnstype" value="auto"/>
									<label for="autodns">Obtain DNS Info Automatically</label></td>
								</tr>
								<tr class="network-radio-tr">
									<td>
									<input type="radio" id="manualdns" name="dnstype" value="manual"/>
									<label for="manualdns">Use The Following DNS Info:</label></td>
								</tr>
								<tr style="height: 100%;">
									<td>
									<fieldset id="fieldset-manual-dns" class="titled-border-fieldset-network-subset" disabled="disabled">
										<legend class="titled-border-legend">
											Manual DNS
										</legend>
										<table class="user-maintenance-table">
											<tr style="height: 45px;">
												<td style="text-align: right;">Preferred DNS:</td>
												<td style="width: 145px;">
												<input type="text" id="manual_dns1" name="manual_dns1" class="network-addr-input" value="{{ currentDNS1 }}"/>
												</td>
												<td>
												<button id="btn_dns1" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/app_business.png"/>
												</button></td>
												<td>&nbsp;</td>
											</tr>
											<tr style="height: 45px;">
												<td style="text-align: right;">Alternate DNS:</td>
												<td style="width: 145px;">
												<input type="text" id="manual_dns2" name="manual_dns2" class="network-addr-input" value="{{ currentDNS2 }}"/>
												</td>
												<td>
												<button id="btn_dns2" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/app_business.png"/>
												</button></td>
												<td>&nbsp;</td>
											</tr>
{#											<tr style="height: 45px;">#}
{#												<td style="text-align: right;">DNS Suffix:</td>#}
{#												<td style="width: 205px;" colspan="2">#}
{#												<input type="text" id="manual_dns_suffix" name="manual_dns_suffix" class="network-suffix-input" value="{{ currentSearchPath }}"/>#}
{#												</td>#}
{#												<td>#}
{#												<button id="btn_dns_suffix" type="button" class="button-numpad"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_app_ktouch.png"/>#}
{#												</button></td>#}
{#											</tr>#}
										</table>
									</fieldset></td>
								</tr>
							</table>
						</fieldset></td>
					</tr>
				</table>
				<table style="width: 100%;">
					<tr>
						<td class="network-bottom-cell">
						<fieldset class="titled-border-fieldset-network-bottom">
							<legend class="titled-border-legend">
								Hostname Settings and Tools
							</legend>
							<table class="user-maintenance-table">
								<tr>
									<td><b>Host Name:</b> {{ currentHostname }}</td>
									<td><b>Network Interface:</b> {{ netIface }}</td>
								</tr>
								<tr>
									<td><b>Current IP Address:</b> {{ currentIP }}</td>
									<td rowspan="2">
									<button id="btn_ping" type="button" class="network-tool-button">
										Ping Tool
									</button> &nbsp;&nbsp;&nbsp;
									<button id="btn_route" type="button" class="network-tool-button">
										Show Route Info
									</button></td>
								</tr>
								<tr>
									<td><b>Current Subnet Mask:</b> {{ currentNetmask }}</td>
								</tr>
								<tr>
									<td><b>Current Gateway:</b> {{ currentGateway }}</td>
									<td rowspan="2">
									<button id="btn_trace" type="button" class="network-tool-button">
										Traceroute Tool
									</button></td>
								</tr>
								<tr>
									<td><b>Current MAC Address:</b> {{ macaddress }}</td>
								</tr>
							</table>
						</fieldset></td>
					</tr>
				</table>
				<div id="formButtons" style="text-align: center;">
					<button style="width: 200px; height: 60px; margin-top: 5px; float: left;" type="button" id="savenw" name="savenw">
						Apply Changes
					</button>
					<button style="width: 200px; height: 60px; margin-top: 5px; float: right;" id="cancelnw" name="cancelnw">
						Close
					</button>
				</div>
			</div></td>
		</tr>
	</table>
</form>
{% endblock %}