From 064204b34380a1fe53141b0152f024aeb162e246 Mon Sep 17 00:00:00 2001
From: Daniel Grams <grams.daniel@gmail.com>
Date: Wed, 13 Jan 2021 08:28:33 +0100
Subject: [PATCH] Setup Rest API with Swagger #50

---
 project/templates/event_date/list.html | 62 +++++++++++++-------------
 project/templates/layout.html          | 15 +++++++
 project/templates/planing/list.html    | 25 ++++++-----
 3 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/project/templates/event_date/list.html b/project/templates/event_date/list.html
index cac92a5..ea74e4d 100644
--- a/project/templates/event_date/list.html
+++ b/project/templates/event_date/list.html
@@ -8,11 +8,11 @@
 <script>
 
     var page = 1;
-    var per_page = 20;
+    var per_page = 18; // 3*6
 
     var leaflet_map = null;
     var map_cluster_group = null;
-    var events = null;
+    var event_dates = null;
     var arrayOfMarkers = [];
 
     function init_leaflet_map() {
@@ -71,10 +71,12 @@
         init_leaflet_map();
         clear_events_from_map();
 
-        $.each(events, function(index, event) {
-            if (event.location != null && event.location.geo != null) {
-                var start = moment(event.startDate);
-                var title = start.format("dd. DD.MM.YYYY LT") + ' ' + '<a href="#" onclick="show_event_in_list(\'' + event.identifier + '\'); return false;">' + event.name + '</a>';
+        $.each(event_dates, function(index, event_date) {
+            event = event_date.event;
+            if (event.place != null && event.place.location != null && event.place.location.latitude != null) {
+                var location = event.place.location;
+                var start = moment(event_date.start);
+                var title = start.format("dd. DD.MM.YYYY LT") + ' ' + '<a href="#" onclick="show_event_in_list(\'' + event_date.id + '\'); return false;">' + event.name + '</a>';
 
                 var icon = new L.DivIcon.SVGIcon({
                     color: "#000",
@@ -84,8 +86,7 @@
                     circleRatio: 0.35
                 });
 
-                var geo = event.location.geo;
-                var marker = L.marker([geo.latitude, geo.longitude], { icon: icon }).bindPopup(title);
+                var marker = L.marker([location.latitude, location.longitude], { icon: icon }).bindPopup(title);
                 arrayOfMarkers.push(marker);
             }
         });
@@ -126,10 +127,10 @@
         result_list.empty();
 
         var req_data = $("#filter_form").serialize();
-        req_data += '&page=' + page;
+        req_data += '&page=' + page + '&per_page=' + per_page;
 
         $.ajax({
-            url: "{{ url_for('api_event_dates') }}",
+            url: "{{ url_for('eventdatesearchresource') }}",
             type: "get",
             dataType: "json",
             data: req_data,
@@ -139,11 +140,12 @@
             success: function (data) {
 
                 var content = '';
-                events = data.event;
-                var event_count = events.length;
+                event_dates = data.items;
+                var event_date_count = event_dates.length;
                 var cols = 3;
 
-                $.each(events, function(index, event) {
+                $.each(event_dates, function(index, event_date) {
+                    event = event_date.event;
                     var is_card_deck = (index % cols == 0);
 
                     if (is_card_deck) {
@@ -153,38 +155,38 @@
                         content += '<div class="card-deck">';
                     }
 
-                    var start = moment(event.startDate);
+                    var start = moment(event_date.start);
                     var img_tag = '';
 
-                    if (event.image != null) {
-                        img_tag = '<img src="' + event.image + '" class="card-img-top" style="object-fit: cover; height: 12vh; border-radius: 0;" />';
+                    if (event.photo != null) {
+                        img_tag = '<img src="' + event.photo.image_url + '" class="card-img-top" style="object-fit: cover; height: 12vh; border-radius: 0;" />';
                     }
 
                     var map_link_start = '';
                     var map_link_end = '';
 
-                    if (event.location != null && event.location.geo != null) {
-                        var geo = event.location.geo;
-                        map_link_start = '<a href="#" onclick="fly_to_event(' + geo.latitude + ', ' + geo.longitude + '); return false;">';
+                    if (event.place != null && event.place.location != null && event.place.location.latitude != null) {
+                        var location = event.place.location;
+                        map_link_start = '<a href="#" onclick="fly_to_event(' + location.latitude + ', ' + location.longitude + '); return false;">';
                         map_link_end = '</a>';
                     }
 
-                    content += '<div class="card mb-3" id="event_card_' + event.identifier + '">' +
+                    content += '<div class="card mb-3" id="event_card_' + event_date.id + '">' +
                                         '<div class="card-header">' + start.format("dd. DD.MM.YYYY LT") + '</div>' +
                                         img_tag +
                                         '<div class="card-body" style="padding:1rem">' +
-                                            '<h5 class="card-title"><a href="' + event.url[0] + '">' + event.name + render_event_status_pill(event) + '</a></h5>' +
+                                            '<h5 class="card-title"><a href="eventdate/' + event_date.id + '">' + event.name + '</a> <span class="small" style="vertical-align: middle;">' + render_event_status_pill(event) + '</span></h5>' +
                                             '<p class="card-text">' + event.description.truncate(100) + '</p>' +
                                         '</div>' +
                                         '<div class="card-footer text-muted small">' +
-                                            '<div class="text-muted mr-2"><i class="fa fa-database"></i> ' + event.organizer[0].name + '</div>' +
-                                            '<div class="text-muted">' + map_link_start + '<i class="fa fa-map-marker"></i>  ' + event.location.name + map_link_end + '</div>' +
+                                            '<div class="text-muted mr-2"><i class="fa fa-database"></i> ' + event.organizer.name + '</div>' +
+                                            '<div class="text-muted">' + map_link_start + '<i class="fa fa-map-marker"></i>  ' + event.place.name + map_link_end + '</div>' +
                                         '</div>' +
                                 '</div>';
                 });
 
                 if (content != '') {
-                    var remaining_cols = cols - (event_count % cols);
+                    var remaining_cols = (cols - (event_date_count % cols)) % cols;
 
                     for (i = 0; i < remaining_cols; i++) {
                         content += '<div class="card mb-3"></div>';
@@ -195,16 +197,16 @@
 
                 result_list.append(content);
 
-                if (page == 1) {
-                    $('#prev_item').addClass('disabled');
-                } else {
+                if (data.has_prev) {
                     $('#prev_item').removeClass('disabled');
+                } else {
+                    $('#prev_item').addClass('disabled');
                 }
 
-                if (event_count < per_page) {
-                    $('#next_item').addClass('disabled');
-                } else {
+                if (data.has_next) {
                     $('#next_item').removeClass('disabled');
+                } else {
+                    $('#next_item').addClass('disabled');
                 }
 
                 handle_request_success();
diff --git a/project/templates/layout.html b/project/templates/layout.html
index d1d5c2b..72d2cf4 100644
--- a/project/templates/layout.html
+++ b/project/templates/layout.html
@@ -58,6 +58,21 @@
             }
         }
 
+        if (event.status != null) {
+            if (event.status == "cancelled") {
+                return '<span class="badge badge-pill badge-warning">{{ _('EventStatus.cancelled') }}</span>';
+            }
+            if (event.status == "movedOnline") {
+                return '<span class="badge badge-pill badge-warning">{{ _('EventStatus.movedOnline') }}</span>';
+            }
+            if (event.eventStatus == "postponed") {
+                return '<span class="badge badge-pill badge-warning">{{ _('EventStatus.postponed') }}</span>';
+            }
+            if (event.eventStatus == "rescheduled") {
+                return '<span class="badge badge-pill badge-warning">{{ _('EventStatus.rescheduled') }}</span>';
+            }
+        }
+
         return '';
     }
     </script>
diff --git a/project/templates/planing/list.html b/project/templates/planing/list.html
index af27b05..d65f3cf 100644
--- a/project/templates/planing/list.html
+++ b/project/templates/planing/list.html
@@ -6,7 +6,7 @@
 {% block content_container_attribs %}{% endblock %}
 {% block header %}
 {{ render_google_filter_autocomplete_header() }}
-{% set max_events = 500 %}
+{% set max_events = 50 %}
 <script>
 
 $( function() {
@@ -19,7 +19,7 @@ $( function() {
         tbody.empty();
 
         $.ajax({
-            url: "{{ url_for('api_event_dates', per_page=max_events) }}",
+            url: "{{ url_for('eventdatesearchresource', per_page=max_events) }}",
             type: "get",
             dataType: "json",
             data: $(this).serialize(),
@@ -32,11 +32,11 @@ $( function() {
                 var date_to = moment($('#date_to').val());
                 var current_day = date_from;
 
-                var events = data.event;
-                var event_count = events.length;
-                var event_index = 0;
+                var event_dates = data.items;
+                var event_date_count = event_dates.length;
+                var event_date_index = 0;
 
-                if (event_count == {{ max_events }}) {
+                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>');
                 }
 
@@ -51,20 +51,21 @@ $( function() {
 
                         var no_events = true;
                         var same_day = true;
-                        while (same_day && (event_index < event_count)) {
-                            var event = events[event_index];
-                            var start = moment(event.startDate);
+                        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="' + event.url[0] + '">' + event.name + '</a></td>' +
-                                        '<td class="small text-muted">' + event.organizer[0].name + '</td>' +
+                                        '<td colspan="3"><a href="eventdate/' + event_date.id + '">' + event.name + '</a> ' + render_event_status_pill(event) + '</td>' +
+                                        '<td class="small text-muted">' + event.organizer.name + '</td>' +
                                     '</tr>');
                                 no_events = false;
-                                event_index++;
+                                event_date_index++;
                             }
                         }