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

{% block searchBar %}{% endblock %}

{% block searchBtn %}{% endblock %}

{% block searchTerm %}{% endblock %}

{% block breadcrumbMenu %}{% endblock %}

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

{% block body %}
    <div class="row">
        <div class="col-12">
            <b>Tank: </b>{{ tank.name }}
        </div>
        <div class="col-12">
            <b>Tanktyp: </b>{{ tank.tanktype.name }}
        </div>
        <div class="col-12">
            <b>Topas ID:</b> {{ tank.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 class="col-12 my-2">
            <button class="btn btn-sm btn-outline-primary noload" data-coreui-toggle="collapse" data-coreui-target="#reorderForm">
                <b>Füllmedium jetzt nachbestellen</b>
            </button>
            <a href="{{ path('tanklist_refill',{'id':tank.id}) }}" class="btn btn-sm btn-outline-primary">
                Füllhistorie anzeigen
            </a>
            <a href="{{ path('tanklist_reorder_form',{'id':tank.id}) }}" class="btn btn-sm btn-outline-primary noload"
               target="_blank">
                Nachbestellschein anzeigen
            </a>
        </div>
        <div class="col-md-6 collapse" id="reorderForm">
            <div class="card">
                <div class="card-header py-1 d-flex align-items-center justify-content-between">
                    <b>Bestellformular</b>
                    <button class="btn btn-sm btn-light float-right noload" data-coreui-toggle="collapse"
                            data-coreui-target="#reorderForm">
                        <i class="fas fa-times text-dark"></i>
                    </button>
                </div>
                <div class="card-body">
                    <form action="{{ path('tanklist_reorder') }}" method="post">
                        <input type="hidden" value="{{ tank.id }}" name="reorderTankID">
                        <div class="mb-2">
                            <b>Kunde:</b> {{ company.name }}
                        </div>
                        <div class="mb-2">
                            <b>Tankname:</b> {{ tank.name }}
                        </div>
                        <div class="mb-2">
                            <b>Inhalt:</b> {{ tank.gastype.name|raw }}
                        </div>
                        <div class="mb-2">
                            <b>Name:</b>
                            <input class="form-control" type="text" name="reorderName"
                                   value="{{ app.user.firstname }} {{ app.user.lastname }}" required>
                        </div>
                        <div class="mb-2">
                            <b>E-Mail:</b>
                            <input class="form-control" type="text" name="reorderEmail" value="{{ app.user.email }}"
                                   required>
                        </div>
                        <button type="submit" class="btn btn-sm btn-outline-primary float-right noload">
                            Jetzt bestellen
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 mt-3">
            <div class="row">
                {% for port in analogports %}
                    {% set portName = 'A'~ port.number %}
                    {% if tank.ports[portName] is defined and tank.ports[portName] == true %}
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div>
                                <b>Port:</b> {{ portName }} - {{ port.description }}
                            </div>
                            {% if lastmeasurement %}
                                <div>
                                    <b>
                                        Messwert mA:
                                    </b>
                                    {{ attribute(lastmeasurement, portName) }} mA
                                </div>
                                {% if port.diagram == true %}
                                    <div>
                                        <b>Füllstand:</b> {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                    </div>
                                    <div>
                                        <b>Soll Min:</b> {{ port.capacityMin|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>
                                        {% if port.realMeasure is defined %}
                                            {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                        {% else %}
                                            Keine Daten vorhanden
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                {% else %}
                    <div class="col-12 mt-3">
                        <b>Keine definierten analogen Ports vorhanden</b>
                    </div>
                {% endfor %}
                {% for port in virtualports %}
                    {% 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 %}
                                {% if 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>
                                        {% if port.realMeasure is defined %}
                                            {{ port.realMeasure|number_format(port.unit.decimalPlaces,',','.') }} {{ port.unit.name }}
                                        {% else %}
                                            Keine Daten vorhanden
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                {% else %}
                    <div class="col-12 mt-3">
                        <b>Keine definierten virtuellen Ports vorhanden</b>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 mt-5">
            <b>Graphen</b>
        </div>
        <div class="col-12">
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="input-group input-group-sm mt-3 me-3">
                    <div class="input-group-text">
                        Letzte X anzeigen
                    </div>
                </div>
                <div class="btn-group mt-3 me-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="btn-group me-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="btn-group me-3 mt-3">
                    <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="2190"
                            data-toggle="tooltip" title="Längere Ladezeiten">3 Monate
                    </button>
                    <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="4380"
                            data-toggle="tooltip" title="Längere Ladezeiten">6 Monate
                    </button>
                    <button class="btn btn-sm btn-outline-primary rangeButton noload" data-range="8760"
                            data-toggle="tooltip" title="Längere Ladezeiten">12 Monate
                    </button>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-lg-9 mt-3">
            <div class="input-group">
                <div class="input-group-text">Von</div>
                <input type="text" class="form-control d-inline-block bg-light" id="fromDate" readonly
                       data-toggle="datepicker">
                <div class="input-group-text">Bis</div>
                <input type="text" class="form-control d-inline-block bg-light" id="toDate" readonly
                       data-toggle="datepicker">
                <button class="btn btn-info text-white noload btn-date-range" type="button"><i class="fas fa-search"></i></button>
            </div>
            <div class="alert alert-danger d-none invalid-dates mt-3">
                <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>
        {% for key, tankport in tank.ports %}
            {% if tankport == true %}
                {% for port in analogports %}
                    {% if key == 'A'~ port.number %}
                        <div class="col-3 mt-3">
                            <b>Port:</b> {{ 'A'~ port.number }} - {{ port.description }}
                        </div>
                        <div class="col-9 mt-3">
                            <div class="chartdiv spinner-loading" id="chartdiv-analog{{ key }}" data-portnumber="{{ key }}"></div>
                        </div>
                        <div class="col-12">
                            <hr class="my-1">
                        </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
        {% for key, tankport in tank.ports %}
            {% if tankport == true %}
                {% for port in virtualports %}
                    {% if key == 'V'~ 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 spinner-loading" id="chartdiv-virtual{{ key }}" data-portnumber="{{ key }}"></div>
                        </div>
                        <div class="col-12">
                            <hr class="my-1">
                        </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
        {% for key, tankport in tank.ports %}
            {% if tankport == true %}
                {% for port in digitalports %}
                    {% if key == 'D'~ 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 spinner-loading" id="chartdiv-digital{{ key }}" data-portnumber="{{ key }}"></div> #}
                        </div>
                        <div class="col-12">
                            <hr class="my-1">
                        </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('_resources/css/flatpickr.min.css') }}">
    <script src="{{ asset('_resources/js/flatpickr.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('_resources/js/flatpickr.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;
        let charts = [];

        $(function () {

            flatpickr('[data-toggle="datepicker"]', {
                "locale"  : "de",
                altInput  : true,
                altFormat : "d.m.Y",
                dateFormat: "Y-m-d",
                onChange  : function () {
                    let from = document.querySelector("#fromDate")._flatpickr.selectedDates[0];
                    let to = document.querySelector("#toDate")._flatpickr.selectedDates[0];
                    $('.btn-date-range').prop('disabled', from > to);
                    $('.invalid-dates').toggleClass('d-none', !(from > to));
                    let diff = to.getTime() - from.getTime();
                    let daydiff = diff / (1000 * 60 * 60 * 24);
                    $('.long-dates').toggleClass('d-none', !(daydiff > 90));
                },
            })

            getGraphData(168);

            $('.btn-date-range').on('click', function () {
                let from = document.querySelector("#fromDate")._flatpickr.selectedDates[0];
                let to = document.querySelector("#toDate")._flatpickr.selectedDates[0];
                from = [from.getFullYear(),('0' + (from.getMonth() + 1)).slice(-2),('0' + from.getDate()).slice(-2)].join('-')
                to = [to.getFullYear(),('0' + (to.getMonth() + 1)).slice(-2),('0' + to.getDate()).slice(-2)].join('-')
                getGraphData(null, from, to);
            });

            $('.rangeButton').on('click', function () {
                getGraphData($(this).data('range'));
            });
        });

        function getGraphData(hoursBack = null, from = null, to = null) {
            for (let chart in charts) {
                charts[chart].dispose();
            }
            charts = [];
            $('.chartdiv').addClass('spinner-loading');

            let data = {
                topasID: '{{ tank.topasID }}',
            };

            if (hoursBack) {
                data.hoursBack = hoursBack;
            }

            if (from && to) {
                data.from = from;
                data.to = to;
            }

            $.ajax({
                method: 'POST',
                url   : '{{ path('tanklist_getgraphdata') }}',
                data  : data
            }).done(function (data) {
                if (data.success == true) {
                    graphData = data.graphData;
                    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');
                        });
                        $('.chartdiv').removeClass('spinner-loading');
                    });

                } else {
                    alert('Es ist ein Fehler beim Laden der Graphendaten aufgetreten. Bitte wenden Sie sich mit den Angaben zum Tank an einen Systemadministrator.');
                }
            });
        }

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

        function generateGraph(i, type) {
            if ($('#chartdiv-' + type + i).length === 0)
                return;

            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>
{% endblock %}