eventcally/project/templates/planing/list.html

{% extends "layout.html" %}
{% from "_macros.html" import render_form_styles, render_form_scripts, render_jquery_steps_header, render_field, render_field_with_errors, render_event_dates_date_field, render_event_dates_location_field, render_google_filter_autocomplete_header, render_pagination, render_place, render_events_sub_menu %}

{%- block title -%}
{{ _('Event Planing') }}
{%- endblock -%}

{% block content_container_attribs %}{% endblock %}

{% block styles %}
{{ render_form_styles() }}
{% endblock %}

{% block header_before_site_js %}
{{ render_form_scripts() }}
{%- endblock -%}

{% block header %}
{{ render_jquery_steps_header() }}
{{ render_google_filter_autocomplete_header() }}
{% set max_events = 50 %}
<script>

$( function() {

    $("#filter_form").submit(function(e) {
        e.stopPropagation();
        handle_request_start();

        var tbody = $("#result_table tbody");
        tbody.empty();

        $.ajax({
            url: "{{ url_for('api_v1_event_date_search', per_page=max_events) }}",
            type: "get",
            dataType: "json",
            data: $(this).serialize(),
            error: function(xhr, status, error) {
                handle_request_error(xhr, status, error);
            },
            success: function (data) {

                var date_from = moment($('#date_from').val());
                var date_to = moment($('#date_to').val());
                var current_day = date_from;

                var event_dates = data.items;
                var event_date_count = event_dates.length;
                var event_date_index = 0;

                if (event_date_count == {{ max_events }}) {
                    tbody.append('<tr class="table-warning"><td colspan="5">Es wurde die maximale Anzahl von {{ max_events }} Veranstaltungen geladen. Verfeinere die Suche für bessere Ergebnisse.</td></tr>');
                }

                var no_weekday_checked = ($('input[name="weekday"]:checked').length == 0);

                while (current_day <= date_to) {
                    var weekday = current_day.weekday();
                    var current_weekday_checked = $("#weekday-" + weekday).is(':checked');

                    if (current_weekday_checked || no_weekday_checked) {
                        tbody.append('<tr class="table-secondary"><td colspan="5">' + current_day.format("dd. DD.MM.YYYY") + '</td></tr>');

                        var no_events = true;
                        var same_day = true;
                        while (same_day && (event_date_index < event_date_count)) {
                            var event_date = event_dates[event_date_index];
                            var event = event_date.event;
                            var start = moment(event_date.start);

                            if (!start.isSame(current_day, 'day')) {
                                same_day = false;
                            } else {
                                tbody.append('<tr>' +
                                        '<td class="fit">' + start.format("LT") + '</td>' +
                                        '<td colspan="3"><a href="eventdate/' + event_date.id + '">' + event.name + '</a> ' + render_event_warning_pills(event) + '</td>' +
                                        '<td class="small text-muted">' + event.organizer.name + '</td>' +
                                    '</tr>');
                                no_events = false;
                                event_date_index++;
                            }
                        }

                        if (no_events) {
                            tbody.append('<tr class="table-success"><td></td><td colspan="4" class="p-2"><i class="fa fa fa-calendar-check"></i> Frei</td></tr>');
                        }
                    }

                    current_day = current_day.add(1, 'days');
                }

                handle_request_success();
            }
        });

        return false;
    });
});

</script>
{% endblock %}
{% block content %}

    <div class="p-3">
        <h1 class="mb-1">{{ _('Event Planing') }}</h1>
        <p class="text-muted">Finde einen freien Termin im Kalender für deine Veranstaltung.</p>

        <div>
            <form action="" id="filter_form" class="form" method="GET" autocomplete="off">
                {{ form.hidden_tag() }}
                {{ render_event_dates_location_field(form.location, form.distance) }}
                {{ render_field_with_errors(form.category_id) }}
                {{ render_event_dates_date_field(form.date_from, form.date_to) }}
                {{ render_field_with_errors(form.weekday, ri="multicheckbox-inline") }}
                {{ render_field(form.submit) }}
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md">
            <div id="result_container">
                <div class="m-1 small text-center text-secondary" id="result_info"></div>
                <div class="table-responsive" style="min-height: 300px;">
                    <table class="table table-hover table-sm table-striped" id="result_table">
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="spinner-border m-3" role="status" id="spinner" style="display: none;">
                <span class="sr-only">Loading&hellip;</span>
            </div>
            <div class="alert alert-danger m-3" role="alert" id="error_alert" style="display: none;"></div>
        </div>
    </div>

{% endblock %}