{% extends "base.html" %}

{% set active_page = "sensors" %}

{% block title %} Sensor data {% endblock %}



{% block divs %}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb p-2">
                {% for breadcrumb in breadcrumb_info["ancestors"] %}
                <li class="breadcrumb-item{% if loop.last %} dropdown active{% endif %}" {% if loop.last %}aria-current="page"{% endif %}>
                    {% if breadcrumb["url"] is not none and not loop.last %}
                    <a href="{{ breadcrumb['url'] }}">{{ breadcrumb['name'] }}</a>
                    {% else %}
                    <a href="{{ breadcrumb['url'] }}" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" role="button">{{ breadcrumb['name'] }}</a>
                    <ul class="dropdown-menu">
                        {% for sibling in breadcrumb_info["siblings"] %}
                        <li><a class="p-3 dropdown-item" href="{{ sibling['url'] }}">{{ sibling["name"] }}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}
            </ol>
        </nav>
      <div class="sensor-data charts text-center">
          <div class="row">
              <div class="alert alert-info" id="tzwarn" style="display:none;"></div>
              <div class="alert alert-info" id="dstwarn" style="display:none;"></div>
              <div class="alert alert-info" id="sourcewarn" style="display:none;"></div>
          </div>
          <div class="row on-top-md">
              <div class="col-md-2">
                  <div class="sidepanel-container">
                      <div class="left-sidepanel-label">Select dates</div>
                      <div class="sidepanel left-sidepanel">
                          <div id="datepicker"></div>
                      </div>
                  </div>
                  <div id="chart-type-picker" class="leftside-dropdown dropdown">
                      <button class="btn dropdown-toggle" type="button" id="chartTypeDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Select chart
                      </button>
                      <ul class="dropdown-menu center-aligned" aria-labelledby="chartTypeDropdown">
                          <li><a class="dropdown-item" href="#" data-chart-type="bar_chart">Bar chart</a></li>
                          <li><a class="dropdown-item" href="#" data-chart-type="histogram">Histogram</a></li>
                          <li><a class="dropdown-item" href="#" data-chart-type="daily_heatmap">Daily heatmap</a></li>
                          <li><a class="dropdown-item" href="#" data-chart-type="weekly_heatmap">Weekly heatmap</a></li>
                      </ul>
                  </div>
              </div>
              <div class="col-sm-8">
                  <div id="sensorchart" class="card" style="width: 100%;"></div>
                  <div id="spinner" hidden="hidden">
                      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                      <span class="sr-only">Loading...</span>
                  </div>
                  <div class="row">
                      <div class="card col-lg-5">

                          <h5>Properties</h5>

                          <table class="table table-striped">
                              <tr>
                                  <th>Name</th>
                                  <td>{{ sensor.name }}</td>
                              </tr>
                              <tr>
                                  <th>Unit</th>
                                  <td>{{ sensor.unit }}</td>
                              </tr>
                              <tr>
                                  <th>Event Resolution</th>
                                  <td>{{ sensor.event_resolution }}</td>
                              </tr>
                              <tr>
                                  <th>Timezone</th>
                                  <td>{{ sensor.timezone }}</td>
                              </tr>
                              <tr>
                                  <th>Knowledge Horizon Type</th>
                                  <td>{{ sensor.knowledge_horizon_fnc }}</td>
                              </tr>
                          </table>
                      </div>
                      <div class="card col-lg-5" id="statsContainer">
                        <span id="spinner-run-simulation" class="spinner-border spinner-border-sm d-none" role="status"></span>
                        <h5 id="statsHeader">Statistics</h5>
                        <table id="statsTable" class="table table-striped">
                            <tbody id="statsTableBody">
                            </tbody>
                        </table>
                        <!-- Dropdown for sourceKey -->
                        <div class="dropdown mb-3 d-none" id="sourceKeyDropdownContainer">
                            <small class="text-muted">Select source for statistics</small>
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="sourceKeyDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                Select Source
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="sourceKeyDropdown" id="sourceKeyDropdownMenu">
                            </ul>
                        </div>
                        <!-- Alert for no data -->
                        <div class="alert alert-warning d-none" id="noDataWarning">
                            There is no data for this sensor yet.
                        </div>
                        <!-- Alert for errors -->
                        <div class="alert alert-danger d-none" id="fetchError">
                            There was a problem fetching statistics for this sensor's data.
                        </div>
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const spinner = document.getElementById('spinner-run-simulation');
                                const tableBody = document.getElementById('statsTableBody');
                                const dropdownMenu = document.getElementById('sourceKeyDropdownMenu');
                                const dropdownButton = document.getElementById('sourceKeyDropdown');
                                const dropdownContainer = document.getElementById('sourceKeyDropdownContainer');
                                const propertiesContainer = document.getElementById('propertiesContainer');
                                const statsContainer = document.getElementById('statsContainer');
                                const noDataWarning = document.getElementById('noDataWarning');
                                const fetchError = document.getElementById('fetchError');


                                // Show the spinner
                                spinner.classList.remove('d-none');

                                fetch('/api/v3_0/sensors/' + {{ sensor.id }} + '/stats')
                                    .then(response => response.json())
                                    .then(data => {
                                        // Remove 'status' sourceKey
                                        delete data['status'];

                                        if (Object.keys(data).length > 0) {
                                            // Show the header and dropdown container
                                            dropdownContainer.classList.remove('d-none');

                                            // Populate the dropdown menu with sourceKeys
                                            Object.keys(data).forEach(sourceKey => {
                                                const dropdownItem = document.createElement('li');
                                                const dropdownLink = document.createElement('a');
                                                dropdownLink.className = 'dropdown-item';
                                                dropdownLink.href = '#';
                                                dropdownLink.textContent = sourceKey;
                                                dropdownLink.dataset.sourceKey = sourceKey;

                                                dropdownLink.addEventListener('click', function(event) {
                                                    event.preventDefault();
                                                    const selectedSourceKey = event.target.dataset.sourceKey;
                                                    dropdownButton.textContent = selectedSourceKey;
                                                    updateTable(data[selectedSourceKey]);
                                                });

                                                dropdownItem.appendChild(dropdownLink);
                                                dropdownMenu.appendChild(dropdownItem);
                                            });

                                            // Update the table with the first sourceKey's data by default
                                            const firstSourceKey = Object.keys(data)[0];
                                            dropdownButton.textContent = firstSourceKey;
                                            updateTable(data[firstSourceKey]);
                                        } else {
                                            // If the stats table is empty, make the properties table full width
                                            noDataWarning.classList.remove('d-none');
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Error:', error);
                                        dropdownContainer.classList.add('d-none');
                                        fetchError.textContent = 'There was a problem fetching statistics for this sensor\'s data: ' + error.message;
                                        fetchError.classList.remove('d-none');
                                    })
                                    .finally(() => {
                                        // Hide the spinner
                                        spinner.classList.add('d-none');
                                    });

                                function updateTable(stats) {
                                    tableBody.innerHTML = ''; // Clear the table body

                                    // This list is used to format the table content. Simple sorting is not possible.
                                    const keys = [
                                        "min_event_start",
                                        "max_event_start",
                                        "min_value",
                                        "max_value",
                                        "mean_value",
                                        "sum_values",
                                        "count_values"
                                    ];

                                    keys.forEach(key => {
                                        if (key in stats) {
                                            // Create a display key by removing underscores and capitalizing words
                                            const displayKey = key.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());

                                            const row = document.createElement('tr');
                                            const keyCell = document.createElement('th');
                                            const valueCell = document.createElement('td');

                                            keyCell.textContent = displayKey;
                                            // Round value to 2 decimal points if it's a number
                                            if (typeof stats[key] === 'number' & key != 'count_values') {
                                                valueCell.textContent = stats[key].toFixed(4);
                                            } else {
                                                valueCell.textContent = stats[key];
                                            }

                                            row.appendChild(keyCell);
                                            row.appendChild(valueCell);
                                            tableBody.appendChild(row);
                                        }
                                    });
                                }
                            });
                        </script>
                      </div>
                  </div>
              </div>
              <div class="col-sm-2">
                  <div class="replay-container">
                    <div id="replay" title="Press 'p' to play/pause/resume or 's' to stop." class="stopped"></div>
                    <div id="replay-time"></div>
                  </div>
              </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-md-8 offset-md-1">
                <div class="copy-url" title="Click to copy the URL to the current time range to clipboard.">
                    <script>
                        function toIsoString(date) {
                            var tzo = -date.getTimezoneOffset(),
                                dif = tzo >= 0 ? '+' : '-',
                                pad = function(num) {
                                    return (num < 10 ? '0' : '') + num;
                                };

                            return date.getFullYear() +
                                '-' + pad(date.getMonth() + 1) +
                                '-' + pad(date.getDate()) +
                                'T' + pad(date.getHours()) +
                                ':' + pad(date.getMinutes()) +
                                ':' + pad(date.getSeconds()) +
                                dif + pad(Math.floor(Math.abs(tzo) / 60)) +
                                ':' + pad(Math.abs(tzo) % 60);
                        }

                        $(window).ready(() => {
                            picker.on('selected', (startDate, endDate) => {
                                startDate = encodeURIComponent(toIsoString(startDate.toJSDate()));
                                endDate = encodeURIComponent(toIsoString(endDate.toJSDate()));
                                var base_url = window.location.href.split("?")[0];
                                var new_url = `${base_url}?start_time=${startDate}&end_time=${endDate}`;

                                // change current url without reloading the page
                                window.history.pushState({}, null, new_url);
                            });

                        });

                        function copyUrl(event) {
                            event.preventDefault();

                            if (!window.getSelection) {
                                alert('Please copy the URL from the location bar.');
                                return;
                            }
                            const dummy = document.createElement('p');

                            var startDate = encodeURIComponent(toIsoString(picker.getStartDate().toJSDate()));
                            // add 1 day to end date as datepicker does not include the end date day
                            var endDate = picker.getEndDate();
                            endDate.setDate(endDate.getDate() + 1);
                            endDate = encodeURIComponent(toIsoString(endDate.toJSDate()));
                            var base_url = window.location.href.split("?")[0];
                            dummy.textContent = `${base_url}?start_time=${startDate}&end_time=${endDate}`
                            document.body.appendChild(dummy);

                            const range = document.createRange();
                            range.setStartBefore(dummy);
                            range.setEndAfter(dummy);

                            const selection = window.getSelection();
                            // First clear, in case the user already selected some other text
                            selection.removeAllRanges();
                            selection.addRange(range);

                            document.execCommand('copy');
                            document.body.removeChild(dummy);

                            $("#message").show().delay(1000).fadeOut();
                        }
                    </script>
                    <a href="#" onclick="copyUrl(event)" style="display: block; text-align: center;">
                        <i class="fa fa-link"></i>
                    </a>
                    <div id="message" style="display: none; text-align: center;">The URL to the time range currently shown has been copied to your clipboard.</div>
                </div>
            </div>
          </div>
          <hr>
      </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.7/jstz.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/ranges.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/keyboardnav.js"></script>

    {% block leftsidepanel %} {{ super() }} {% endblock %}
    {% block sensorChartSetup %} {{ super() }} {% endblock %}

{% endblock %}