digitalfabrik/integreat-cms

{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <h1 class="heading">
                {% translate "Statistics" %}
            </h1>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 2xl:grid-cols-4">
            <div class="lg:col-span-2 2xl:row-span-2 2xl:col-span-3 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="rounded p-4 bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="trending-up" class="pb-1"></i> {% translate "Total accesses" %}
                    </h3>
                </div>
                <div class="p-5 bg-white text-center">
                    <div id="chart-network-error" class="text-red-500 px-4 hidden">
                        <i icon-name="alert-triangle"></i> {% translate "A network error has occurred." %} {% translate "Please try again later." %}
                    </div>
                    <div id="chart-heavy-traffic-error" class="text-red-500 px-4 hidden">
                        <i icon-name="alert-triangle"></i> {% translate "The statistics network is currently experiencing heavy traffic." %} {% translate "Please try again later." %}
                    </div>
                    <div id="chart-server-error" class="text-red-500 px-4 hidden">
                        <i icon-name="alert-triangle"></i> {% translate "A server error has occurred." %} {% translate "Please contact the administrator." %}
                    </div>
                    <div id="chart-loading" class="px-4 hidden">
                        <i icon-name="loader" class="animate-spin"></i> {% translate "Loading..." %}
                    </div>
                    <div id="chart-label-help-text"
                         class="my-2 text-s text-gray-600 text-left hidden">
                        {% translate "Individual languages can be hidden by clicking on the labels." %}
                    </div>
                    <canvas id="statistics"
                            data-statistics-url="{% url 'statistics_visits_per_language' region_slug=request.region.slug %}"></canvas>
                </div>
            </div>
            <div class="rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="rounded p-4 bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="calendar" class="pb-1"></i> {% translate "Adjust time period" %}
                    </h3>
                </div>
                <form id="statistics-form" class="flex flex-col p-4 pt-2">
                    {% csrf_token %}
                    <label for="{{ form.start_date.id_for_label }}">
                        {{ form.start_date.label }}
                    </label>
                    {% render_field form.start_date|add_error_class:"border-red-500" %}
                    <div id="start_date_error"
                         class="chart-client-error text-red-500 pb-2 hidden">
                        <i icon-name="alert-triangle"></i>
                    </div>
                    <label for="{{ form.end_date.id_for_label }}">
                        {{ form.end_date.label }}
                    </label>
                    {% render_field form.end_date|add_error_class:"border-red-500" %}
                    <div id="end_date_error"
                         class="chart-client-error text-red-500 pb-2 hidden">
                        <i icon-name="alert-triangle"></i>
                    </div>
                    <label for="{{ form.period.id_for_label }}">
                        {{ form.period.label }}
                    </label>
                    {% render_field form.period|add_error_class:"border-red-500" %}
                    <div id="period_error" class="chart-client-error text-red-500 pb-2 hidden">
                        <i icon-name="alert-triangle"></i>
                    </div>
                    <button class="btn mt-4">
                        {% translate "Customize view" %}
                    </button>
                </form>
            </div>
            <div class="rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="rounded p-4 bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="download" class="pb-1"></i> {% translate "Export" %}
                    </h3>
                </div>
                <div class="flex flex-col gap-4 p-4 pt-2">
                    <label for="export-format">
                        {% translate "Choose format" %}
                    </label>
                    <select id="export-format"
                            data-filename-prefix="{% translate "Statistics" %} {{ request.region.name }}"
                            data-language-column-title="{% translate "Language" %}">
                        <option value="" selected>
                            --- {% translate "please select" %} ---
                        </option>
                        <option value="image">
                            {% translate "Image/PNG" %}
                        </option>
                        <option value="csv">
                            {% translate "Table Document/CSV" %}
                        </option>
                    </select>
                    <button id="export-button" class="btn" disabled>
                        {% translate "Export" %}
                    </button>
                    <a id="export-download-link" class="hidden"></a>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}