FCC/Applications/UniversalApi_WebConsole_App/Views/VeederRoot_Device_Console_Handler/Index.cshtml

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@model Applications.UniversalApi_WebConsole_App.Models.VeederRoot_ATG_Console_Handler_Models.AtgController
@{
    ViewData["Title"] = "Auto Tank Gauge System";

    Layout = null;
}

<script>
    function clearCanvas(canvas) {
        var cxt = canvas.getContext("2d");
        cxt.clearRect(0, 0, canvas.width, canvas.height);
    }

</script>
<script src="~/js/Chart.bundle.js"></script>
<script src="~/js/jquery-3.4.1.min.js"></script>


@*<div class="text-center">
        <h3 class="display-4">This is the ATG Console Web App</h3>
    </div>*@
@if (Model == null || Model.Tanks == null)
{
    <h1>The console is <b>NOT ready</b> for connection, will auto reload once it's done...</h1>
    <script>
        setInterval(function () { location.reload() }, 3000);
    </script>
}
@if (Model.Tanks != null && Model.Tanks.Any())
    @foreach (var tank in Model.Tanks)
    {
        var atgConsoleLengthUnitDisplayStr = "mm";
        var atgConsoleVolumeUnitDisplayStr = "L";
        if (Model.SystemUnit == Edge.Core.IndustryStandardInterface.ATG.SystemUnit.US)
            atgConsoleLengthUnitDisplayStr = "inches";
        else if (Model.SystemUnit == Edge.Core.IndustryStandardInterface.ATG.SystemUnit.ImperialGallons)
            atgConsoleLengthUnitDisplayStr = "yard";
        <div>
            <div id="TankNumber">
                <p style="margin-top:@(10*(tank.TankNumber-1))px">
                    Tank No.: <b>@tank.TankNumber</b>, has product: <b>@(tank.Product?.ProductLabel ?? "")(code: @(tank.Product?.ProductCode ?? ""))</b>
                    is in tank state: <b>@(tank.State)</b>, Diameter: @(tank.Diameter ?? -1)@atgConsoleLengthUnitDisplayStr
                </p>
            </div>
            <div id="TankImage">
                <img src="" alt="Smiley face" width="42" height="42">
            </div>
            <div id="DetailList">
                <div id="RealtimeFuelAmount">
                    <img src="" alt="Smiley face" width="42" height="42">
                </div>
                <div id="RealtimeFuelVolume">
                </div>
                <div id="RemainingSpace">
                </div>
                <div id="RealtimeFuelTemperature">
                </div>
                <div id="RealtimeWaterLevel">
                </div>
            </div>
        </div>
        <script>

        </script>
    }


<script>
    var productHeight = 0;
    var waterHeight = 0;
    var maxChartStackDataCount = 30;
    function add_Height_Water_Data(__chart, tankNumber) {
        $.getJSON('Details/?tankNumber=' + tankNumber, function (datas) {
            if (datas == null) {
                console.log('response datas is null'); return;
            }

            //console.log(datas);
            datas.forEach(function (d) {
                var chartName = 'tank_' + d.tankNumber + '_Height_Water_Chart';
                var chart = window[chartName];
                if (chart == null) return;
                //console.log(chart);



                /*
                 *  purge line chart data
                 */
                chart.data.datasets.forEach((purgeDataset) => {
                    if (purgeDataset.data.length > maxChartStackDataCount) {
                        //console.log(chartName + '.data in datasets[' + purgeDataset.label + '] has its length of ' + purgeDataset.data.length + ', will truncate');
                        purgeDataset.data = purgeDataset.data.slice(purgeDataset.data.length - maxChartStackDataCount, purgeDataset.data.length);
                        //chart.data.labels = chart.data.labels.slice(chart.data.labels.length - maxChartStackDataCount, chart.data.labels.length);
                        //console.log('   ' + chartName + ' has truncated and the dataset.data.length now is ' + purgeDataset.data.length);
                        //for (var i = 0; i < dataset.data.length - maxChartStackDataCount; i++)
                        //dataset.data.pop();
                    }
                });
                if (chart.data.labels.length > maxChartStackDataCount) {
                    chart.data.labels = chart.data.labels.slice(chart.data.labels.length - maxChartStackDataCount, chart.data.labels.length);
                }



                //each batch will adding a new x axis value, most likely a time str.
                chart.data.labels.push(d.timeStamp);
                chart.data.datasets.forEach((dataset) => {
                    if (dataset.label === "油高") {
                        dataset.data.push(d.height);
                        productHeight = d.height;
                    }
                    else if (dataset.label === "水高") {
                        dataset.data.push(d.water);
                        waterHeight = d.water;
                    } else return;

                    chart.update({
                        duration: 600,
                        easing: 'easeOutBounce'
                    });

                    var sectionalViewCanvas = document.getElementById('tank_' + d.tankNumber + '_Height_Water_SectionalView');
                    this.clearCanvas(sectionalViewCanvas);
                    this.drawTank(sectionalViewCanvas, 150, 80, 60, [
                        { height: productHeight / 1800 * 60 * 2, color: 'orange', text: '92#' },
                        { height: waterHeight / 1800 * 60 * 2, color: '#00ced1', text: 'water' }],
                        [{ height: 90, strokeColor: 'red', text: 'fuel high' },
                        { height: 30, strokeColor: 'blue', text: 'water high' }]);
                });
            });

        })

    }

    function removeData(chart) {
        chart.data.labels.pop();
        chart.data.datasets.forEach((dataset) => {
            dataset.data.pop();
        });
        chart.update();
    }

    setInterval(function () { add_Height_Water_Data(null, null) }, 1500);
</script>