{% extends "index.html.twig" %}

{% block searchBar %}{% endblock %}

{% block searchBtn %}{% endblock %}

{% block searchTerm %}{% endblock %}

{% block breadcrumbMenu %}{% endblock %}

{% block breadcrumb %}
    <a href="{{ path('index') }}">Tankliste</a> > Topas Gerät - <b class="d-md-down-none">{{ company.name }}</b>
{% endblock %}

{% block body %}
    <div class="form-row">
        <div class="col-12">
            <b>Topas ID:</b> {{ device.topasID }}
        </div>
        <div class="col-12">
            <b>Kunde:</b> {{ company.name }}
        </div>
        <div class="col-12">
            <b>Letzter Messzeitpunkt:</b>
            {% if lastmeasurement.time is defined %}
                {{ lastmeasurement.time.format('d.m.Y H:i:s') }}
            {% else %}
                Keine Daten vorhanden
            {% endif %}
        </div>
    </div>
    <div class="form-row">
        <div class="col-12 mt-3">
            <div class="row">
                {% for port in analogports %}
                    {% if device is defined %}
                        {% if device.analogports[port.number - 1].active == true %}
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div>
                                    <b>Port:</b> {{ 'A'~ port.number }} - {{ port.description }}
                                </div>
                                {% if lastmeasurement and port.diagram == true %}
                                    <div>
                                        <b>Füllstand:</b> {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                    </div>
                                    <div>
                                        <b>Füllstand:</b> {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                    </div>
                                    <div>
                                        <div class="tank tank-3D" style="max-width:200px;">
                                            <div class="empty" style="height:{{ 100 -(100 / port.capacityMax * port.realMeasure) }}%"></div>
                                            <div class="fill" style="height:{{ 100 / port.capacityMax * port.realMeasure }}%"></div>
                                            <div class="scale scale0" data-unit="{{ port.capacityMax }} {{ port.unit.name }}"></div>
                                            <div class="scale scale1"></div>
                                            <div class="scale scale2"></div>
                                            <div class="scale scale3"></div>
                                            <div class="scale scale4" data-unit="0"></div>
                                        </div>
                                    </div>
                                {% else %}
                                    <div>
                                        <b>Messwert:</b>
                                    </div>
                                    <div>
                                        <h3>
                                            {% if port.realMeasure is defined %}
                                                {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                            {% else %}
                                                Keine Daten vorhanden
                                            {% endif %}
                                        </h3>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endif %}
                {% else %}
                    <div class="col-12 mt-3">
                        <b>Keine definierten Ports vorhanden</b>
                    </div>
                {% endfor %}
                {% for port in virtualports %}
                    {% if tank %}
                        {% if tank.ports['V'~ port.number] == true %}
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div>
                                    <b>Port:</b> {{ 'V'~ port.number }} - {{ port.description }}
                                </div>
                                {% if lastmeasurement and port.diagram == true %}
                                    <div>
                                        <b>Füllstand:</b> {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                    </div>
                                    <div>
                                        <div class="tank tank-3D" style="max-width:200px;">
                                            <div class="empty" style="height:{{ 100 -(100 / port.capacityMax * port.realMeasure) }}%"></div>
                                            <div class="fill" style="height:{{ 100 / port.capacityMax * port.realMeasure }}%"></div>
                                            <div class="scale scale0" data-unit="{{ port.capacityMax }} {{ port.unit.name }}"></div>
                                            <div class="scale scale1"></div>
                                            <div class="scale scale2"></div>
                                            <div class="scale scale3"></div>
                                            <div class="scale scale4" data-unit="0"></div>
                                        </div>
                                    </div>
                                {% else %}
                                    <div>
                                        <b>Messwert:</b>
                                    </div>
                                    <div>
                                        <h3>
                                            {% if port.realMeasure is defined %}
                                                {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                            {% else %}
                                                Keine Daten vorhanden
                                            {% endif %}
                                        </h3>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endif %}
                {% else %}
                    <div class="col-12 mt-3">
                        <b>Keine definierten Ports vorhanden</b>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% if graphData is not null %}
        <div class="form-row">
            <div class="col-12 mt-5">
                <b>Graphen</b>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="input-group input-group-sm">
                    <div class="input-group-prepend mt-3">
                        <span class="input-group-text">Letzte</span>
                    </div>
                    <div class="input-group-append mt-3">
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="6">6 Stunden</button>
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="12">12 Stunden</button>
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="24">24 Stunden</button>
                    </div>
                    <div class="input-group-append ml-3 mt-3">
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="168">7 Tage</button>
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="336">14 Tage</button>
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="720">30 Tage</button>
                    </div>
                    <div class="input-group-append ml-3 mt-3">
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="2190">3 Monate</button>
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="4380">6 Monate</button>
                        <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="8760">12 Monate</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6 mt-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Von</span>
                    </div>
                    <input type="text" class="form-control d-inline-block bg-light" id="fromDate" readonly data-toggle="datepicker">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Bis</span>
                    </div>
                    <input type="text" class="form-control d-inline-block bg-light" id="toDate" readonly data-toggle="datepicker">
                    <div class="input-group-append">
                        <button class="btn btn-primary noload btn-date-range" type="button"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="alert alert-danger d-none invalid-dates">
                    <i class="fas fa-exclamation-triangle"></i> Kein gültiger Zeitraum
                </div>
                <div class="alert alert-danger d-none long-dates">
                    <i class="fas fa-exclamation-triangle"></i> Durch den eingestellten Zeitraum kann es zu längeren Ladezeiten kommen
                </div>
            </div>
            <div class="col-12">
                <hr class="my-1">
            </div>
            {% if device is defined %}
                {% for tankport in device.analogports %}
                    {% if tankport.active == true %}
                        {% for port in analogports %}
                            {% if tankport.number == port.number %}
                                <div class="col-3">
                                    <b>Port:</b> {{ 'A'~port.number }} - {{ port.description }}
                                </div>
                                <div class="col-9">
                                    <div class="chartdiv" id="chartdiv-analog{{ 'A'~port.number }}"></div>
                                </div>
                                <div class="col-12">
                                    <hr class="my-1">
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
                {% for tankport in device.virtualports %}
                    {% if tankport.active == true %}
                        {% for port in virtualports %}
                            {% if tankport.number == port.number %}
                                <div class="col-3 mt-3">
                                    <b>Port:</b> {{ 'V'~port.number }} - {{ port.description }}
                                </div>
                                <div class="col-9 mt-3">
                                    <div class="chartdiv" id="chartdiv-virtual{{ 'V'~port.number }}"></div>
                                </div>
                                <div class="col-12">
                                    <hr class="my-1">
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
                {% for tankport in device.digitalports %}
                    {% if tankport.active == true %}
                        {% for port in digitalports %}
                            {% if tankport.number == port.number %}
                                <div class="col-3 mt-3">
                                    <b>Port:</b> {{ 'D'~port.number }} - {{ port.description }}
                                </div>
                                <div class="col-9 mt-3">
                                    <div class="chartdiv" id="chartdiv-digital{{ 'D'~port.number }}"></div>
                                </div>
                                <div class="col-12">
                                    <hr class="my-1">
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {% if graphData is not null %}
        <script src="{{ asset('_resources/js/datepicker.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('_resources/js/datepicker.de-DE.js') }}" type="text/javascript"></script>
        <script src="{{ asset('_resources/js/core.js') }}" type="text/javascript"></script>
        <script src="{{ asset('_resources/js/charts.js') }}" type="text/javascript"></script>

        <style>
            .chartdiv {
                width: 100%;
                height: 450px;
            }
        </style>
        <script>
            let graphData = {{ graphData|raw }};
            let charts = [];

            am4core.ready(function () {
                // am4core.useTheme(am4themes_animated);
                $.each(graphData.analog, function (i) {
                    generateGraph(i, 'analog');
                });
                $.each(graphData.virtual, function (i) {
                    generateGraph(i, 'virtual');
                });
                $.each(graphData.digital, function (i) {
                    generateGraph(i, 'digital');
                });

                $('.rangeButton').on('click', function () {
                    for (let chart in charts) {
                        let from = new Date();
                        from.setHours(from.getHours() - $(this).data('range'));
                        let to = new Date();
                        $('#fromDate').datepicker('setDate', from);
                        $('#toDate').datepicker('setDate', to);
                        zoomToDates(from, to)
                    }
                });
            });

            $(function () {
                $('[data-toggle="datepicker"]').datepicker({
                    language: 'de-DE',
                    date    : new Date(),
                    autoPick: true,
                    autoHide: true,
                    format  : 'dd.mm.yyyy'
                }).on('pick.datepicker', function () {
                    let from = $('#fromDate').datepicker('getDate');
                    let to = $('#toDate').datepicker('getDate');
                    console.log(from);
                    console.log(to);
                    $('.btn-date-range').prop('disabled', from > to);
                    $('.invalid-dates').toggleClass('d-none', !(from > to));
                });
                $('.btn-date-range').on('click', function () {
                    let from = $('#fromDate').datepicker('getDate').setHours(0, 0);
                    let to = $('#toDate').datepicker('getDate').setHours(23, 59);
                    zoomToDates(from, to);
                });
            })

            function zoomToDates(from, to) {
                for (let chart in charts) {
                    charts[chart]._xAxes.getIndex(0).zoomToDates(from, to);
                }
            }

            function generateGraph(i, type) {
                charts[i] = am4core.create("chartdiv-" + type + i, am4charts.XYChart);
                charts[i].dateFormatter.dateFormat = "dd.MM.yyyy HH:mm";
                charts[i].data = generateChartData(graphData[type][i]['data']);

                let dateAxis = charts[i].xAxes.push(new am4charts.DateAxis());
                dateAxis.renderer.grid.template.disabled = true;
                dateAxis.dateFormats.setKey("hour", "dd.MM HH:mm");
                dateAxis.dateFormats.setKey("day", "dd.MM.yyyy HH:mm");
                dateAxis.dateFormats.setKey("week", "dd.MM.yyyy HH:mm");
                dateAxis.dateFormats.setKey("month", "dd.MM.yyyy HH:mm");
                dateAxis.dateFormats.setKey("year", "dd.MM.yyyy HH:mm");
                dateAxis.periodChangeDateFormats.setKey("hour", "dd.MM HH:mm");
                dateAxis.periodChangeDateFormats.setKey("day", "dd.MM.yyyy HH:mm");
                dateAxis.periodChangeDateFormats.setKey("week", "dd.MM.yyyy HH:mm");
                dateAxis.periodChangeDateFormats.setKey("month", "dd.MM.yyyy HH:mm");
                dateAxis.periodChangeDateFormats.setKey("year", "dd.MM.yyyy HH:mm");
                dateAxis.tooltipDateFormat = "dd.MM.yyyy HH:mm";

                let valueAxis = charts[i].yAxes.push(new am4charts.ValueAxis());
                valueAxis.renderer.grid.template.disabled = true;
                valueAxis.min = valueAxis.minZoomed < graphData[type][i].ranges.capacity_min ? valueAxis.minZoomed : graphData[type][i].ranges.capacity_min;
                valueAxis.max = valueAxis.maxZoomed > graphData[type][i].ranges.capacity_max ? valueAxis.maxZoomed : graphData[type][i].ranges.capacity_max;

                generateRanges(valueAxis, graphData[type][i].ranges);

                charts[i].zoomOutButton.disabled = true;
                charts[i].legend = new am4charts.Legend();
                charts[i].legend.position = 'top';

                let series = charts[i].series.push(new am4charts.LineSeries());
                series.dataFields.valueY = "value";
                series.dataFields.dateX = "date";
                series.name = graphData[type][i].unit;
                series.stroke = am4core.color('#128248');
                series.strokeWidth = 1;
                series.minBulletDistance = 10;
                series.tooltipText = "{valueY}";
                series.tooltip.pointerOrientation = "vertical";
                series.tooltip.background.cornerRadius = 20;
                series.tooltip.background.fillOpacity = 0.5;
                series.tooltip.label.padding(12, 12, 12, 12);

                charts[i].scrollbarX = new am4charts.XYChartScrollbar();
                charts[i].scrollbarX.series.push(series);
                // charts[i].scrollbarX = new am4core.Scrollbar();
                charts[i].scrollbarX.parent = charts[i].bottomAxesContainer;
                charts[i].scrollbarX.events.on('rangechanged', function (e) {
                    syncCharts(e);
                });
                charts[i].scrollbarY = new am4core.Scrollbar();
                charts[i].scrollbarY.parent = charts[i].leftAxesContainer;
                charts[i].scrollbarY.toBack();

                charts[i].cursor = new am4charts.XYCursor();
                charts[i].cursor.xAxis = dateAxis;
                charts[i].cursor.snapToSeries = series;
            }

            function syncCharts(e) {
                for (let chart in charts) {
                    charts[chart].xAxes.values[0].zoom({
                        start: e.target.start,
                        end  : e.target.end
                    });
                }
            }

            function generateRanges(axis, ranges) {
                $.each(ranges, function (i, rangeData) {
                    let range = axis.axisRanges.create();
                    range.value = rangeData;
                    range.grid.stroke = am4core.color("#c9c9c9");
                    range.grid.strokeWidth = 1;
                    range.grid.strokeOpacity = 1;
                    range.label.inside = true;
                    range.label.text = i;
                    range.label.scale = 0.7;
                    range.label.fill = range.grid.stroke;
                    range.label.verticalCenter = "bottom";
                });
            }

            function generateChartData(data) {
                let chartdata = [];

                for (d of data) {
                    chartdata.push({
                        date : new Date(d.year, d.month - 1, d.day, d.hour, d.minute, d.second),
                        value: d.value
                    });
                }

                return chartdata;
            }
        </script>
    {% endif %}
{% endblock %}