PROSUME
/
WEB


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<?php
$this->layout = false;
?>
<!DOCTYPE html>
<html>
<?= $this->element('Eprosume/header') ?>
<body class="hold-transition skin-green sidebar-mini">
<div class="wrapper">

    <?= $this->element('Eprosume/mainHeader') ?>

    <!-- Left side column. contains the logo and sidebar -->
    <?= $this->element('Eprosume/leftSideColumn') ?>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Balance <?= $meter_id ?>
                <br />
                <small><?= $balance['location'] ?></small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/web"><i class="fa fa-dashboard"></i> <?= $app_name ?></a></li>
                <li><a href="/web/meter">balance</a></li>
                <li class="active"><?= $meter_id; ?></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <!-- /.col -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="ion ion-ios-paper"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">TFT</span>
                            <span class="info-box-number"><?= $balance['TFT'] ?></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="ion ion-ios-pulse"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">PRS</span>
                            <span class="info-box-number"><?= $balance['PRS'] ?></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="ion ion-card"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">BuyPrice</span>
                            <span class="info-box-number"><?= @$prices[$meter_id]['buyPrice'] ?></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="ion ion-card"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">SellPrice</span>
                            <span class="info-box-number"><?= @$prices[$meter_id]['sellPrice'] ?></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- fix for small devices only -->
                <div class="clearfix visible-sm-block"></div>

            </div>            <!-- /.row -->
            <div class="row">
                <blockquote>Last reading: <?php echo($balance['timestamp']); ?></blockquote>
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
        <!-- Main content -->
        <?php if($meter_id != $utility_account && $app_charts): ?>
        <section class="content">
            <div class="box">
                <div class="box-body">
                    <?= $this->element('Eprosume/chartsToolbar') ?>
                </div>
                <div class="row">
                    <!-- /.col -->
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div id="chart-1"></div>
                        <div id="chart-line"></div>
                    </div>
                </div>
            </div>
        </section>
        <?php endif; ?>

    </div>
    <!-- /.content-wrapper -->
    <?= $this->element('Eprosume/footer') ?>
</div>
<!-- ./wrapper -->
<?= $this->element('Eprosume/scripts') ?>
<script>
    $('tr.blockRow').on('click touch',function(){
    })
</script>
<?php if($meter_id != $utility_account && $app_charts): ?>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    $(document).ready(function() {

        // pickerSelect element and event listener
        pickerElement = document.getElementById('pickerSelect');
        if(pickerElement != null) {
            var date = getDate();
            let minDate = new Date(date.getTime());
            minDate.setDate(minDate.getDate()-14);
            var today = getDateString(date);
            var yesterday = getDateString(minDate);

            pickerElement.setAttribute("data-from", yesterday);
            pickerElement.setAttribute("data-to", today);
            var picker = flatpickr(pickerElement, {
                enableTime: true,
                defaultDate: [ minDate, today ],
                maxDate: today,
                minDate: minDate,
                mode: 'range',
                time_24hr: true,
                onClose: function(selectedDates) {
                    let dates = selectedDates.map(d => getDate(d));
                    dates[0] == null && dates.push(today);
                    dates[1] == null && dates.push(dates[0]);
                    pickerElement.setAttribute("data-from", getDateString(dates[0]));
                    pickerElement.setAttribute("data-to", getDateString(dates[1]));
                    drawChart();
                },
                onChange: function(selectedDates, dateStr, instance) {
                    if(selectedDates[0] != null && selectedDates[1] == undefined) {
                        var maxDate = new Date(selectedDates[0].getTime());
                        maxDate.setDate(maxDate.getDate()+14);
                        var minDate = new Date(selectedDates[0].getTime());
                        minDate.setDate(minDate.getDate()-14);
                        instance.set({
                            maxDate : (maxDate > date) ? today : maxDate,
                            minDate
                        });
                    }
                }

            });
            $('#pickerReset').click( function() {
                picker.clear();
                pickerElement.setAttribute("data-from", "");
                pickerElement.setAttribute("data-to", "");
            });
        }


        var data = [];
        var min, max;

        var options = {
            series: [],
            chart: {
                id: 'chart2',
                type: 'bar',
                height: 230,
                toolbar: {
                    autoSelected: 'pan',
                    show: false
                }
            },
            colors: [
                '#00C0EF'
            ],
            stroke: {
                width: 3
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                opacity: 1,
            },
            markers: {
                size: 0
            },
            xaxis: {
                labels: {
                    formatter: function (value, timestamp) {
                        const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
                        var x = new Date();
                        return (new Date((timestamp * 1000) + (x.getTimezoneOffset() * 60 * 1000))).toLocaleDateString('en-US', options);
                    }, 
                },
                tickAmount: 12
            },
            tooltip: {
                x: {
                    formatter: function (value) {
                        const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
                        var x = new Date();
                        return (new Date((value * 1000) + (x.getTimezoneOffset() * 60 * 1000))).toLocaleDateString('en-US', options);
                    }, 
                }
            },
            noData: {
                text: 'Loading...'
            },
            yaxis: {
                seriesName: 'PRS',
                tickAmount: 4
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart-1"), options);
        chart.render();
            
        var optionsLine = {
            series: [],
            chart: {
                id: 'chart1',
                height: 130,
                type: 'bar',
                brush:{
                    target: 'chart2',
                    enabled: true
                },
                selection: {
                    enabled: true,
                    xaxis: {
                        min: min,
                        max: max
                    }
                },
            },
            colors: [
                '#008FFB'
            ],
            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.91,
                    opacityTo: 0.1,
                }
            },
            xaxis: {
                labels: {
                    formatter: function (value, timestamp) {
                        const options = { month: 'short', day: 'numeric' };
                        var x = new Date();
                        return (new Date((timestamp * 1000) + (x.getTimezoneOffset() * 60 * 1000))).toLocaleDateString('en-US', options);
                    }, 
                },
                tickAmount: 12
            },
            yaxis: {
                tickAmount: 2
            },
            noData: {
                text: 'Loading...'
            }
        };

        var chartLine = new ApexCharts(document.querySelector("#chart-line"), optionsLine);
        chartLine.render();

        var periodRadio = $('input[name=periodRadio]'); 
        periodRadio.change( function() {
            drawChart();
        });


        function drawChart() {
            var input = {};
            input.period = $('input[name=periodRadio]:checked').val();
            input.from = pickerElement.getAttribute("data-from");
            input.to = pickerElement.getAttribute("data-to");
            var qs = jQuery.param(input);
            var settings = {
                type: "GET",
                contentType: "application/json",
                headers: {
                    "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
                },
                dataType : "json"
            };
            var promise = $.ajax(
                '/xhr/charts/payments/' + '<?= $meter_id; ?>?'+qs,
                settings
            ).then(function(data) {
                var series = {
                    data: data,
                    name: 'PRS'
                }
                if(data.length == 0) {
                    min = 0;
                    max = 0;
                    chart.updateOptions({
                        noData: { text: 'No data'}
                    });
                    chartLine.updateOptions({
                        noData: { text: 'No data'}
                    });
                } else {
                    min = data[0][0];
                    max = data[(data.length-1)][0];

                }
                chart.updateSeries([series]);
                chartLine.updateSeries([series]);
                chartLine.updateOptions({
                    chart: {
                        selection: {
                            xaxis: {
                                min: min,
                                max: max
                            }
                        },
                    },
                });
            });
        }

        drawChart();
    });
</script>
<?php endif; ?>

</body>
</html>