{% 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="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="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>
                                        <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 analogen 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 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>
        {% 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 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{{ '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 spinner-loading" 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 spinner-loading" id="chartdiv-digital{{ 'D'~port.number }}"></div>
                            </div>
                            <div class="col-12">
                                <hr class="my-1">
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        {% endif %}
    </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: '{{ device.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 %}