<?php require_once "atp.header.php"; ?>

<section class="content-wrapper" data-heading="position" data-heading="Position" id="position">
	<div class="page-title">
		<h1>
			Position Input
		</h1>
		<p>
			Configurations for GNSS input sources. The Input selected when OK/Apply is pressed will be used for internal computation.
		</p>
	</div>
	
	<div class="middle-wrapper box box-top">
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Select Input:</h2>
				</div>
				<div class="flex-input" id="input-select-container">
				</div>
			</div>
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Input Name:</h2>
				</div>
				<div class="flex-input">
					<input type="text" id="input-name">
				</div>
			</div>
		</div>
	</div>
	
	<div class="middle-wrapper box box-stack">
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Input Source:</h2>
				</div>
				<div class="flex-input">
					<select id="input-type-select">
					</select>
				</div>
			</div>
			<div class="flex-half">
				
			</div>
		</div>
	</div>
	
	<div class="middle-wrapper box box-bottom">
		<div class="flex-row" id="source-select" name="input-configuration">
			<div hidden id="fastnet-config">
				<p style="margin-top:0">
					Fastnet inputs should be configured <a href="fastnet.php">here.</a>
				</p>
			</div>
			
			<div id="source-config-container" hidden>
				<!--Source Configuration-->
			</div>
		</div>
	</div>
	
	<div class="top-wrapper box" id="stored-position-container">
		<fieldset>
			<legend>
				<div class="tooltip-wrapper">
					<h2>Stored Position</h2>
					<div class="tooltip">
						<p>If GNSS data has not been received recently, these values will be
							used to calculate the variation only.</p>
					</div>
				</div>
			</legend>
			<div class="flex-row">
				<div class="flex-heading">
					<h2>Location:</h2>
				</div>
				<div style="display:flex">
					<input type="text" id="lat-degrees" class='position-input-degress' value="">
					<input type="text" id="lat-minutes" class='position-input-minutes' step="0.001" value="">
					<select id="lat-direction" class='position-input-direction'>
						<option value="North">N</option>
						<option value="South">S</option>
					</select>
					<input type="text" id="long-degrees" class='position-input-degress' value="">
					<input type="text" id="long-minutes" class='position-input-minutes' step="0.001" value="">
					<select id="long-direction" class='position-input-direction'>
						<option value="East">E</option>
						<option value="West">W</option>
					</select>
				</div>
			</div>
		</fieldset>
	</div>
	
	<!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<a id="ok-button" class="button button-gray button-medium">OK</a>
			<a id="cancel-button" class="button button-gray button-medium">Cancel</a>
			<a id="apply-button" class="button button-gray button-medium">Apply</a>
		</div>
	</div>
	
	<div class="top-wrapper box">
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Live Data Position</h2>
				</div>
				<div class="flex-field">
					<div class="field-container" id="latitude" data-field="<?php echo fieldEnum::GPS_Latitude;?>">
						&nbsp;
					</div>
				</div>
				<div class="flex-field">
					<div class="field-container" id="longitude" data-field="<?php echo fieldEnum::GPS_Longitude;?>">
						&nbsp;
					</div>
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-heading">
				<h2>SoG</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="sog" data-field="<?php echo fieldEnum::GPS_SOG_KTS;?>">
					&nbsp;
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-heading">
				<h2>CoG</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="cogTrue" data-field="<?php echo fieldEnum::GPS_COG_TRUE;?>">
					&nbsp;
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="cogMag" data-field="<?php echo fieldEnum::GPS_COG_MAG;?>">
					&nbsp;
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Calculated Variation</h2>				
				</div>
				<div class="flex-field">
					<div class="field-container" id="variation"
						data-field="<?php echo fieldEnum::MagneticVariation;?>"
						data-sender="<?php echo PROCESSOR_ID;?>" 
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<script type="text/javascript" src="js/inputmask.min.js"></script>
<script type="text/javascript" src="js/jquery.inputmask.min.js"></script>
<script type="text/javascript" src="js/utils.lat-long.js"></script>
<script type="text/javascript" src="js/atp.data-sources.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script type="text/javascript" src="js/atp.position.js" defer></script>
<script>
$(document).ready(function() {
	
	var model = new PositionModel();
	var controller = new PositionController(model);
	var view = new PositionView(controller);	
});
</script>

<?php require_once "footer.php"; ?>