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

<section class="content-wrapper" data-heading="depth" id="depth-page">
	<!--Heading-->
	<div class="page-title">
		<h1>
			Depth Input
		</h1>
		<p>
			Configuration and calibration for connected depth source(s). Two sources can be
			configured, to cover offset transducers, aft depth and so forth.
		</p>
	</div>
	
	<!--Source Selection-->
	<div id="source-selection-container">
		<div class="box box-top">
			<div class="flex-row">
				<div class="flex-heading">
					<h2>Depth Name:</h2>
				</div>
				<input id="sensor-name">
			</div>
		</div>
		
		<div class="box box-stack">
			<div class="flex-row">
				<div class="flex-half">
					<div class="flex-heading">
						<h2>Input Source:</h2>
					</div>
					<select id="sensor-source-select"></select>
				</div>
				<div class="flex-half">
					<div class="flex-heading">
						<div class="tooltip-wrapper">
							<h2>Datum:</h2>
							<div class="tooltip">
								<p>
									This is the offset to allow depth to be shown below waterline or below keel.
									The offset is added to the source value, so will be a positive number to
									calibrate to waterline and a negative number to calibrate below keel.
								</p>
							</div>
						</div>
					</div>
					<div class="input-unit">
						<input type="number" id="offset" 
							data-section="DepthSource" data-key="Datum" data-default="0"
							value="" step="0.1">
						<span>m</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="box box-bottom">
		<!--NMEA Instance Selection-->
		<div id="nmea-instance-selection-container" hidden>
			<div class="flex-row">
				<div class="flex-heading">
					<h2>NMEA0183 Channel</h2>
				</div>
				<select id="nmea-instance-select"></select>
			</div>
			<a class="button button-gray button-medium redirect-button" id="nmea-configuration-redirect">NMEA0183 Settings</a>
		</div>
		<!--CANbus Device-->
		<div id="canbus-device-container" hidden></div>
		<!--Min Depth -->
		<div id="min-depth-container">
			<div class="flex-half">
				<div class="flex-heading">
					<div class="tooltip-wrapper">
						<h2>Min Depth:</h2>
						<div class="tooltip">
							<p> Values less than this distance below the transducer (before the datum is applied) will be ignored. Use to avoid readings from e.g. a bulb keel.</p>
						</div>
					</div>
				</div>
				<div class="input-unit">
					<input id="min-depth" class="database-input" type="number" step="0.1">
					<span>m</span>
				</div>
			</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>

	<div class="bottom-wrapper box" id="measured-value-container">
		<div class="flex-row" id="ATStats">
			<div class="flex-heading">
				<div class="tooltip-wrapper">
					<h2>Signal</h2>
					<div class="tooltip">
						<p>
							The amplitude of the valid depth response.
							Signal should always be higher than noise, in shallow calm water it should be
							significantly higher than noise but in deeper rougher water both signal and noise
							will increase.
						</p>
					</div>
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="signal" data-field="<?php echo fieldEnum::Depth_Signal;?>"
					data-sender="" data-instance="">
					&nbsp;
				</div>
			</div>
			<div class="flex-heading">
				<div class="tooltip-wrapper">
					<h2>Noise</h2>
					<div class="tooltip">
						<p>
							The amplitude of the invalid depth response, caused by debris, turbulent water, etc.
							This will naturally increase in deeper, rougher water.
						</p>
					</div>
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="noise" data-field="<?php echo fieldEnum::Depth_Noise;?>"
					data-sender="" data-instance="">
					&nbsp;
				</div>
			</div>
			<div class="flex-heading">
				<div class="tooltip-wrapper">
					<h2>Reliability</h2>
					<div class="tooltip" tooltip-position="left">
						<p>
							The higher the reliability, the better the chances of depth being accurate. This
							number is based on the number of consecutive readings deemed to be correct.
						</p>
					</div>
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="reliability" data-field="<?php echo fieldEnum::Depth_Reliability;?>"
					data-sender="" data-instance="">
					&nbsp;
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Raw Depth</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="depthRaw" data-field="<?php echo fieldEnum::Depth_Metres;?>"
					data-sender="" data-instance="">
					&nbsp;
				</div>
			</div>
			<div class="flex-heading">
				<h2>Corrected Depth</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="depthCorrected" data-field="<?php echo fieldEnum::Calc_Depth_Metres;?>"
					data-sender="" data-instance="">
					&nbsp;
				</div>
			</div>
		</div>
	</div>

</section>

<script type="text/javascript" src="js/utils.string.js" defer></script>
<script type="text/javascript" src="js/atp.data-sources.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-model.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-controller.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-view.js" defer></script>

<script>
$(document).ready(function() {
	let url = new URL(window.location.href);
	
	let model = new DepthSensorModel(url.searchParams.get("src"));
	let controller = new DepthSensorController(model)
	let view = new DepthSensorView(controller)
});
</script>

<?php require_once "footer.php"?>
