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

<section name="current" class="content-wrapper" data-heading="speed" id="current">

	<!-- Heading -->
	<div class="page-title">
		<h1>
			Current
		</h1>
		<p>
			The ATP computes current by comparing over the same period:-<br>
			Dead reckoning, the accumulated distance travelled combined with the course (heading plus leeway),
			Change of ground position (from GNSS).
		</p>
	</div>
	
	<!-- Calculation Time Settings and Information -->
	<div class="top-wrapper box">
		<div class="flex-row">
			<div class="flex-heading" id="current-calc-title">
				<div class="tooltip-wrapper">
					<h2>Calculation Time</h2>
					<div class="tooltip">
						<p>
							Typical time estimation values might be:-<br>
							1-2min in Solent tidal conditions<br>
							5-10min in open sea tidal conditions<br>
							30-60min in oceanic conditions
						</p>
					</div>
				</div>
			</div>
			<div class="input-unit">
				<input type="number" id="calc-hours">
				<span>h</span>
			</div>
			<div class="input-unit">
				<input type="number" id="calc-minutes">
				<span>m</span>
			</div>
			<div class="input-unit">
				<input type="number" id="calc-seconds">
				<span>s</span>
			</div>
			<div id="sog-warning" hidden>
				Boat Speed set to SOG.<br>
				Current cannot be calculated.
			</div>
		</div>
	</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>
	
	<!-- Speed and Direction informational output -->
	<div class="bottom-wrapper box">
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Speed</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="currentSpeed" 
					data-field="<?php echo fieldEnum::Calc_Drift_kts;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<div class="flex-field" id="current-error">
				<div class="field-container" id="current-error"
					data-field="<?php echo fieldEnum::Current_Error;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Direction</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="currentTrue" 
					data-field="<?php echo fieldEnum::Calc_Set_Deg_T;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="curentMag" 
					data-field="<?php echo fieldEnum::Calc_Set_Deg_M;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
		</div>
	</div>
</section>

<script type="text/javascript" src="js/atp.current.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script>
$(document).ready(function() {
	let model = new CurrentModel();
	let controller = new CurrentController(model);
	let view = new CurrentView(controller);
});
</script>

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