Issue #282 improved interface. added status to popover. added finished and...

Issue #282 improved interface. added status to popover. added finished and cancelled events as read-only events

smash/web/static/js/daily_planning.js

@@ -97,7 +97,7 @@ function add_event(event, color, subjectId, locationId, boxBody) {
 }
 
 function get_subjects_events(day) {
-    $.get('/api/events/' + day, function (data) {
+    $.get(`/api/events/${day}/include_all`, function (data) {
         $("#subjects").empty();
         var availabilities = data.availabilities;
         $.each(availabilities, function (index, event) {
@@ -153,6 +153,14 @@ function get_subjects_events(day) {
             title_subject.find('a[title]').tooltip();
             $.each(subject.events, function (index_event, event) {
                 if (event.link_when) {
+                    if(event.status == 'SCHEDULED'){
+                        event.editable = true;
+                        event.eventStartEditable = true;
+                    }else{
+                        event.editable = false;
+                        event.eventStartEditable = false;
+                        event.className = 'stripes';
+                    }
                     event.title = event.short_title;
                     event.color = subject.color + ' !important';
                     event.start = $.fullCalendar.moment(event.link_when);
@@ -188,7 +196,7 @@ function get_subjects_events(day) {
             var boxSubject = $("<div class='box box-primary'/>").css('border-top-color', location.color);
             var boxBody = $("<div class='box-body' id='location_" + location.id + "'>");
             var boxHeader = $("<div class='box-header with-border'/>");
-            var title_location = $(`<h4>${location.name}<span style='padding-right:5px;'>${location.location}</span></h4>
+            var title_location = $(`<h4>${location.name}</h4><span style='padding-right:5px;'>${location.location}</span>
                 <span style='padding-right:5px;'>
                     <a title="Edit Appointment" target="_blank" href="/appointments/edit/${location.id}">
                         <i class="fa fa-pencil-square"></i>
@@ -198,6 +206,14 @@ function get_subjects_events(day) {
             title_location.find('a[title]').tooltip();
             $.each(location.events, function (index_event, event) {
                 if (event.link_who) {
+                    if(event.status == 'SCHEDULED'){
+                        event.editable = true;
+                        event.eventStartEditable = true;
+                    }else{
+                        event.editable = false;
+                        event.eventStartEditable = false;
+                        event.className = 'stripes';
+                    }
                     event.title = event.short_title;
                     event.color = location.color + ' !important';
                     event.start = $.fullCalendar.moment(event.link_when);
@@ -366,8 +382,7 @@ function addDailyPlanningCalendar(calendar_selector, replace_all, calendar_dict_
         schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
         defaultView: 'agendaDay',
         eventDurationEditable: false,
-        eventStartEditable: true,
-        editable: true,
+        editable: false,
         selectable: true,
         droppable: true,
         weekends: false,
@@ -451,7 +466,15 @@ function addDailyPlanningCalendar(calendar_selector, replace_all, calendar_dict_
         },
         eventRender: function (event, element) {
             if (event.rendering !== 'background') {
-                var content =
+                    if(event.className == 'stripes'){
+                        var color = event.color.replace('!important', '').trim();
+                        element.css({
+                            'background': `repeating-linear-gradient( -45deg, ${color}, ${color} 10px, #333 10px, #333 20px )`,
+                            'font-weight': 'bold',
+                            'text-shadow': '0px 0px 12px #000000'
+                        });
+                    }
+                    
                     element.popover({
                         title: event.short_title,
                         container: 'body',
@@ -462,6 +485,7 @@ function addDailyPlanningCalendar(calendar_selector, replace_all, calendar_dict_
                         '<li>' + event.start.format(TIME_FORMAT) + ' - ' + event.end.format(TIME_FORMAT) + '</li>' +
                         (event.subject !== undefined ? '<li>Appointment starts: ' + event.constraint.start.format(TIME_FORMAT) + '</li>' : '') +
                         '<li>Location: ' + (event.location !== FLYING_TEAM_LABEL ? event.location : event.flying_team_location + ' (FT)') + '</li>' +
+                        '<li>Status: ' + event.status + 
                         '</ul>',
                         html: true
                     });