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

<section class="content-wrapper" data-heading="other-data" id="barometer">

    <!-- Page Heading -->
    <div class="page-title">
        <h1>Barometer</h1>
        <p>View Barometer Trends.</p>
    </div>

    <!-- Barometer Data -->
    <div class="box top-wrapper">

        <div id="baro-data-grid">
            <h2>Raw Input</h2>
            <h2>Offset (mb)</h2>
            <h2>Corrected Pressure</h2>

            <div class="flex-field">
                <div class="field-container" id="rawPressure"
                    data-field="<?php echo fieldEnum::Barometer;?>"
                    data-sender="Main Interface Board"
                    data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                    &nbsp;
                </div>
            </div>
            
            <div>
                <input class="database-input" id="pressure-offset"
                    data-section="Environment" data-key="BaroOffset"
                    value="<?php echo readDB("Environment", "BaroOffset")?>" 
                    type="number">
            </div>

            <div class="flex-field">
                <div class="field-container" id="offsetPressure"
                        data-field="<?php echo fieldEnum::Calc_Barometer;?>"
                        data-sender="<?php echo PROCESSOR_ID;?>"
                        data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                        &nbsp;
                </div>
            </div>
        </div>

    </div>

    <!-- Barometer Graph -->
    <div class="box box-top top-wrapper">
        <canvas id="baro-chart"></canvas>
    </div>

    <!-- Graph Configuration -->
    <div class="box box-bottom">
        <div class="flex-row">
            
            <!-- Period -->
            <div class="flex-half">
                <div class="flex-heading">
                    <div class="tooltip-wrapper">
                        <h2>Select Period</h2>
                        <div class="tooltip">
                            <p>Uses the most recent data points. Maximum 2000.</p>
                        </div>
                    </div>
                </div>

                <select id="baro-timespan">
                    <option value="3h">3 Hours</option>
                    <option value="1d">1 Day</option>
                    <option value="3d">3 Days</option>
                    <option value="7d">1 Week</option>
                    <option value="14d">2 Weeks</option>
                </select>
            </div>

            <!-- 3 Hour Trend -->
            <div class="flex-half" id="trend-container">

                <div class="flex-heading">
                    <h2>3h Trend</h2>
                </div>

                <div class="flex-field">
					<div class="field-container" id="pressureTrend"
						data-field="<?php echo fieldEnum::Calc_Baro_3H_Change;?>"
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>

                <div class="flex-field">
					<div class="field-container" id="pressureState"
						data-field="<?php echo fieldEnum::Calc_Baro_State;?>"
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</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>

</section>

<script type="text/javascript" src="/js/Chart.min.js" defer></script>
<script type="text/javascript" src="/js/atp.barometer.js" defer></script>
<script>
    $(document).ready(function() {

        /* Setup an empty chart */
        let ctx = $('#baro-chart')[0].getContext('2d');
        let chart = new Chart(ctx, 
        {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: "Barometer Data",
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [],
                    lineTension: 0.1
                }]
            },

            options: {
                animation: {
                    duration: 0
                },
                hover: {
                    animationDuration: 0
                },
                responsive: false,
                responsiveAnimationDuration: 0,
                events: ['click'],
                legend: {
                    display: false
                },
                elements: {
                    point: {
                        radius: 0
                    }
                },
                scales: {
                    y: {
                        title: {
                            display: false,
                            text: "Barometric Pressure (mb)"
                        }
                    },
                    x: {
                        ticks: {
                            autoSkip: false, 
                            maxTicksLimit: 16
                        }
                    }
                }
            }
        });

        /* Setup MVC */
        let model = new BaroModel('0x1720');
        let controller = new BaroController(model);
        let view = new BaroView(controller, chart);
    });
</script>


<?php require_once "footer.php" ?>