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

<section data-heading="wind" class="content-wrapper" id="mast-motion"> 
	<!--Heading-->
	<div class="page-title box-top">
        <div class="flex-row">
            <h2 id="wind-source"></h2>
            <a class="button button-medium button-gray" id="modal-open"><i class="fa fa-cog"></i></a>
        </div>
    </div>

    <div class="box box-stack" id="estimated-description">
        <div class="flex-row">
            <p>This sensor is using <em>Estimated Mast Motion</em> calculated from rate gyros and extrapolated to the height of the mast.</p>
            <div id="mast-height-container" class="flex-row">
                Mast Height:
                <div class="input-group">
                    <input id="mast-height" type="number" step=0.1>
                    <span>m</span>
                </div>
            </div>
        </div>
    </div>

    <div class="box box-bottom" id="threshold-container">
        <div class="flex-row">
            <div class="flex-heading">
                <h2>
                    Wind Speed Threshold
                    <div class="tooltip">
                        <p>
                            When wind speed is low, mast motion can dominate the wind signal.
                            This setting can be used to disable mast motion below a set speed.
                        </p>
                    </div>
                </h2>
            </div>
            <div>
                <div class="input-group">
                    <input type="number" step="0.1" id="threshold"><span>kts</span>
                </div>
                <div>
                    <input type=checkbox id="threshold-enable">
                </div>
            </div>
        </div>
    </div>

    <div class="box top-wrapper canvas-container">
        <canvas id="heel-canvas"></canvas>
	</div>

    <div class="box top-wrapper canvas-container">
        <canvas id="aws-canvas"></canvas>
	</div>

    <div class="box top-wrapper canvas-container">
        <canvas id="awa-canvas"></canvas>
	</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>

    <section class="modal" id="motion-modal">
        <div class="modal-content">
            <div class="modal-title-container">
                <div>
                    <h1 class="modal-title">Mast Motion Data</h1>
                </div>
                <span class="modal-close">&times;<span>
            </div>
            <div class="box">
                <div class="flex-row row-wrap">
                    <div class="flex-row row-nowrap">
                        <h2>MAWS</h2>
                        <div class="field-container" id="raw-maws"
                            data-field="0x0306" title="Wind speed received from sensor">
                            &nbsp;
                        </div>
                    </div>
                    <div class="flex-row row-nowrap">
                        <h2>MAWA</h2>
                        <div class="field-container" id="raw-mawa"
                            data-field="0x0303" title="Wind angle received from sensor">
                            &nbsp;
                        </div>
                    </div>
                </div>
                <div class="flex-row row-wrap">
                    <div class="flex-row row-nowrap">
                        <h2>
                            Wind U
                            <div class="tooltip"><div>
                            <p>
                                The component of the wind vector parallel to the direction of the boat
                            </p>
                        </div></div>
                        </h2>
                        <div class="field-container" id="wind-u"
                            data-field="0x0318" title="Wind velocity component parallel to boat">
                            &nbsp;
                        </div>
                    </div>
                    <div class="flex-row row-nowrap">
                        <h2>Wind V</h2>
                        <div class="field-container" id="wind-v"
                            data-field="0x0319" title="Wind velocity component perpendicular to boat">
                            &nbsp;
                        </div>
                    </div>
                </div>
                <div class="flex-row row-wrap">
                    <div class="flex-row row-nowrap">
                        <h2>Heel Gyro</h2>
                        <div class="field-container" id="heel-gyro"
                            data-field="0x0766" title="Heel gyro value"
                            data-sender="ATProcessor" data-instance="0">
                            &nbsp;
                        </div>
                    </div>
                    <div class="flex-row row-nowrap">
                        <h2>Pitch Gyro</h2>
                        <div class="field-container" id="pitch-gyro"
                            data-field="0x0767" title="Pitch gyro value"
                            data-sender="ATProcessor" data-instance="0">
                            &nbsp;
                        </div>
                    </div>
                </div>
                <div class="flex-row row-wrap">
                    <div class="flex-row row-nowrap">
                        <h2>Mast U</h2>
                        <div class="field-container" id="mast-u"
                            data-field="0x031A" title="Mast velocity component parallel to boat">
                            &nbsp;
                        </div>
                    </div>
                    <div class="flex-row row-nowrap">
                        <h2>Mast V</h2>
                        <div class="field-container" id="mast-v"
                            data-field="0x031B" title="Mast velocity component perpendicular to boat">
                            &nbsp;
                        </div>
                    </div>
                </div>
                <div class="flex-row row-wrap">
                    <div class="flex-row row-nowrap">
                        <h2>Total U</h2>
                        <div class="field-container" id="total-u"
                            data-field="0x031C" title="Total velocity component parallel to boat">
                            &nbsp;
                        </div>
                    </div>
                    <div class="flex-row row-nowrap">
                        <h2>Total V</h2>
                        <div class="field-container" id="total-v"
                            data-field="0x031D" title="Total velocity component perpendicular to boat">
                            &nbsp;
                        </div>
                    </div>
                </div>
                <div class="flex-row row-wrap">
                    <div class="flex-row row-nowrap">
                        <h2>MCMAWS</h2>
                        <div class="field-container" id="mcaws"
                            data-field="0x0312" title="Motion corrected MAWS">
                            &nbsp;
                        </div>
                    </div>
                    <div class="flex-row row-nowrap">
                        <h2>MCMAWA</h2>
                        <div class="field-container" id="mcawa"
                            data-field="0x0317" title="Motion corrected MAWA">
                            &nbsp;
                        </div>
                    </div>
                </div>
            </div>
            <div class="box button-container">
                <a class="modal-ok button button-gray button-medium">Ok</a>
            </div>
        </div>
    </section>
</section>

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

<script type="text/javascript" src="/js/Chart.min.js" defer></script>
<script type="text/javascript" src="/js/luxon.min.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="/js/chartjs-adapter-luxon.min.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="/js/chartjs-plugin-streaming.min.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="/js/gyro-chart.js?v=<?php echo VERSION_NUMBERl?>" defer></script>
<script type="text/javascript" src="/js/mawa-chart.js?v=<?php echo VERSION_NUMBERl?>" defer></script>
<script type="text/javascript" src="/js/maws-chart.js?v=<?php echo VERSION_NUMBERl?>" defer></script>
<script type="text/javascript" src="/js/atp.mast-motion.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script>
$(document).ready(function() 
{
	const url = new URL(window.location.href);

	const model = new MastMotionModel(url.searchParams.get("src"));
	const controller = new MastMotionController(model);
	const view = new MastMotionView(controller);
});
</script>