Issue #275 Added read-only daily planning view below new appointment form.

Closes #275 (closed)

Fixed problem when the window was too small in the webpage to add new appointment. Moved the creation of the daily planning to a separate function, allowing for custom properties and also total override of the daily planning default properties. Added read-only daily planning view below new appointment form. Added CSS so the small daily planning looks good.

smash/web/static/js/daily_planning.js

@@ -248,148 +248,146 @@ function remove_event(event) {
     add_event(event, event.color, event.subject_id, event.location_id, boxBody);
 }
 
-$(document).ready(function () {
-    $('#calendar').fullCalendar({
+function addDailyPlanningCalendar(calendar_selector, replace_all, calendar_dict_props){
+
+    var customButtons = {
+        datePickerButton: {
+            text: 'select',
+            click: function () {
+                var $btnCustom = $('.fc-datePickerButton-button');
+                if ($(".calendar-datepicker").length > 0) {
+                    $(".calendar-datepicker").remove();
+                }
+                else {
+                    $btnCustom.after('<div class="calendar-datepicker"/>');
+                    $(".calendar-datepicker").datepicker().on('changeDate', function (ev) {
+                        $(calendar_selector).fullCalendar('gotoDate', ev.date);
+                        $(".calendar-datepicker").remove();
+                    });
+                }
+            }
+        },
+        save: {
+            text: 'Save',
+            click: function () {
+                calendarEvents = $(calendar_selector).fullCalendar('clientEvents');
+                eventsToPersist = [];
+                var saveButton = $(".fc-save-button");
+                var currentBorder = saveButton.css('border-color');
+                $.each(calendarEvents, function (i, calendar_event) {
+                    if (calendar_event.rendering !== "background") {
+                        eventsToPersist.push({
+                            'link_id': calendar_event.link_id,
+                            'appointment_id': calendar_event.appointment_id,
+                            'link_who': parseInt(calendar_event.resourceId),
+                            'start': calendar_event.start.format()
+                        });
+                        if (calendar_event.link_id !== undefined) {
+                            var index = eventsCleared.indexOf(calendar_event.link_id);
+                            if (index > -1) {
+                                eventsCleared.splice(index, 1);
+                            }
+                        } else {
+                            var index = appointmentsCleared.indexOf(calendar_event.appointment_id);
+                            if (index > -1) {
+                                appointmentsCleared.splice(index, 1);
+                            }
+                        }
+                    }
+                });
+                $.post({
+                    url: events_url,
+                    data: {
+                        events_to_persist: JSON.stringify(eventsToPersist),
+                        events_to_clear: JSON.stringify(eventsCleared),
+                        appointments_to_clear: JSON.stringify(appointmentsCleared)
+                    },
+                    dataType: "json"
+                }).done(function (data) {
+
+                    saveButton.css('border-color', 'green');
+                    setTimeout(function () {
+                        saveButton.css('border-color', currentBorder);
+                    }, 200);
+                }).error(function (data) {
+
+                    console.log(data);
+                    saveButton.css('border-color', 'red');
+                    showErrorInfo("There was an unexpected problem with saving data. " + "Please contact administrators.");
+                    setTimeout(function () {
+                        saveButton.delay(200).css('border-color', currentBorder);
+                    }, 200);
+                });
+            }
+        },
+        clear: {
+            text: 'Clear',
+            click: function () {
+                calendarEvents = $(calendar_selector).fullCalendar('clientEvents');
+                $.each(calendarEvents, function (i, calendar_event) {
+                    remove_event(calendar_event);
+                });
+            }
+        },
+        toPdf: {
+            text: 'PDF',
+            click: function () {
+                var srcEl = document.getElementById("calendar");
+                var parent = srcEl.parentNode;
+                var container = document.createElement("div");
+                container.style.backgroundColor = "#FFFFFF";
+                container.style.width = "3840px";
+                document.body.appendChild(container);
+                container.appendChild(srcEl);
+
+                var pdf = new jsPDF('l', 'mm', [1485, 270]);
+                pdf.addHTML(container, function () {
+                    pdf.save('daily-planning.pdf');
+                    parent.appendChild(srcEl);
+                    document.body.removeChild(container);
+                });
+            }
+        }
+    };
+
+    var default_properties = {
         schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
         defaultView: 'agendaDay',
         eventDurationEditable: false,
         eventStartEditable: true,
         editable: true,
         selectable: true,
-        eventOverlap: function (stillEvent, movingEvent) {
-            if (stillEvent.rendering === "background") {
-                return true;
-            }
-            return false;
-        },
+        droppable: true,
         weekends: false,
+        selectHelper: true,
+        groupByResource: true,
+        displayEventTime: true,
         scrollTime: '08:00',
         slotDuration: '00:30',
         snapDuration: '00:05',
-        displayEventTime: true,
-        resourceOrder: 'role',
-        resourceGroupField: 'role',
-        dragRevertDuration: 0,
         minTime: "08:00:00",
         maxTime: "19:00:00",
-        groupByResource: true,
-        height: "auto",
-        customButtons: {
-            datePickerButton: {
-                text: 'select',
-                click: function () {
-                    var $btnCustom = $('.fc-datePickerButton-button');
-                    if ($(".calendar-datepicker").length > 0) {
-                        $(".calendar-datepicker").remove();
-                    }
-                    else {
-                        $btnCustom.after('<div class="calendar-datepicker"/>');
-                        $(".calendar-datepicker").datepicker().on('changeDate', function (ev) {
-                            $('#calendar').fullCalendar('gotoDate', ev.date);
-                            $(".calendar-datepicker").remove();
-                        });
-                    }
-                }
-            },
-            save: {
-                text: 'Save',
-                click: function () {
-                    calendarEvents = $('#calendar').fullCalendar('clientEvents');
-                    eventsToPersist = [];
-                    var saveButton = $(".fc-save-button");
-                    var currentBorder = saveButton.css('border-color');
-                    $.each(calendarEvents, function (i, calendar_event) {
-                        if (calendar_event.rendering !== "background") {
-                            eventsToPersist.push({
-                                'link_id': calendar_event.link_id,
-                                'appointment_id': calendar_event.appointment_id,
-                                'link_who': parseInt(calendar_event.resourceId),
-                                'start': calendar_event.start.format()
-                            });
-                            if (calendar_event.link_id !== undefined) {
-                                var index = eventsCleared.indexOf(calendar_event.link_id);
-                                if (index > -1) {
-                                    eventsCleared.splice(index, 1);
-                                }
-                            } else {
-                                var index = appointmentsCleared.indexOf(calendar_event.appointment_id);
-                                if (index > -1) {
-                                    appointmentsCleared.splice(index, 1);
-                                }
-                            }
-                        }
-                    });
-                    $.post({
-                        url: events_url,
-                        data: {
-                            events_to_persist: JSON.stringify(eventsToPersist),
-                            events_to_clear: JSON.stringify(eventsCleared),
-                            appointments_to_clear: JSON.stringify(appointmentsCleared)
-                        },
-                        dataType: "json"
-                    }).done(function (data) {
-
-                        saveButton.css('border-color', 'green');
-                        setTimeout(function () {
-                            saveButton.css('border-color', currentBorder);
-                        }, 200);
-                    }).error(function (data) {
-
-                        console.log(data);
-                        saveButton.css('border-color', 'red');
-                        showErrorInfo("There was an unexpected problem with saving data. " +
-                            "Please contact administrators.");
-                        setTimeout(function () {
-                            saveButton.delay(200).css('border-color', currentBorder);
-                        }, 200);
-                    });
-                }
-            },
-            clear: {
-                text: 'Clear',
-                click: function () {
-                    calendarEvents = $('#calendar').fullCalendar('clientEvents');
-                    $.each(calendarEvents, function (i, calendar_event) {
-                        remove_event(calendar_event);
-                    });
-                }
-            },
-            toPdf: {
-                text: 'PDF',
-                click: function () {
-                    var srcEl = document.getElementById("calendar");
-                    var parent = srcEl.parentNode;
-                    var container = document.createElement("div");
-                    container.style.backgroundColor = "#FFFFFF";
-                    container.style.width = "3840px";
-                    document.body.appendChild(container);
-                    container.appendChild(srcEl);
-
-                    var pdf = new jsPDF('l', 'mm', [1485, 270]);
-                    pdf.addHTML(container, function () {
-                        pdf.save('daily-planning.pdf');
-                        parent.appendChild(srcEl);
-                        document.body.removeChild(container);
-                    });
-                }
-            }
-
-        },
-        viewRender: function (view, element) {
-            var date = view.start.format('YYYY-MM-DD');
-            $('#calendar').fullCalendar('removeEvents');
-            get_subjects_events(date);
-        },
         businessHours: {
             start: '08:00',
             end: '19:00'
         },
+        dragRevertDuration: 0,
+        height: "auto",
+        customButtons: customButtons,
         header: {
             left: 'prev,next today',
             center: 'title, datePickerButton',
             right: 'save, clear, toPdf'
         },
-        droppable: true,
+        // VIEW
+        viewRender: function (view, element) {
+            var date = view.start.format('YYYY-MM-DD');
+            $(calendar_selector).fullCalendar('removeEvents');
+            get_subjects_events(date);
+        },
+        // RESOURCES
+        resourceOrder: 'role',
+        resourceGroupField: 'role',
         resourceAreaWidth: '15%',
         resourceLabelText: 'Workers',
         refetchResourcesOnNavigate: true,
@@ -421,7 +419,7 @@ $(document).ready(function () {
         },
         resources: function(callback){
                         setTimeout(function(){
-                            var view = $('#calendar').fullCalendar('getView');
+                            var view = $(calendar_selector).fullCalendar('getView');
                             $.ajax({
                                 url: resources_url,
                                 type: 'GET',
@@ -431,13 +429,14 @@ $(document).ready(function () {
                                     }
                                 }).then(function(resources){
                                     //Filter out roles
-                                    var checked_roles = $('.role_list_item > input:checked').map( (i,e) => e.value).toArray();
-                                    resources = resources.filter(resource => checked_roles.includes(resource.role));
-                                    callback(resources)
+                                    if($('.role_list_item > input').length > 0){
+                                        var checked_roles = $('.role_list_item > input:checked').map( (i,e) => e.value).toArray();
+                                        resources = resources.filter(resource => checked_roles.includes(resource.role));
+                                    }
+                                    callback(resources);
                                 });                  
                         }, 0);
         },
-        events: [],
         eventRender: function (event, element) {
             if (event.rendering !== 'background') {
                 var content =
@@ -457,6 +456,13 @@ $(document).ready(function () {
             } else {
             }
         },
+        // EVENTS
+        eventOverlap: function (stillEvent, movingEvent) {
+            if (stillEvent.rendering === "background") {
+                return true;
+            }
+            return false;
+        },
         selectAllow: function (selectInfo) {
             return false;
         },
@@ -471,7 +477,6 @@ $(document).ready(function () {
         eventDragStart: function (event, jsEvent, view) {
             $('.popover').popover('hide');
         },
-        selectHelper: true,
         drop: function (date, jsEvent, ui, resourceId) {
             $(this).remove();
         },
@@ -482,9 +487,20 @@ $(document).ready(function () {
             };
             setTimeout(function() {resizeCalendarColumns()}, 100);
         }
-    });
-})
-;
+    };
+
+    // REPLACE DEFAULT PROPERTIES
+    if(replace_all){
+        default_properties = calendar_dict_props;
+    }else{
+        for (var key in calendar_dict_props) {
+            default_properties[key] = calendar_dict_props[key];
+        }
+    }
+
+    $(calendar_selector).fullCalendar(default_properties);
+
+}
 
 //RESIZE COLUMNS AND ENABLE HORIZONTAL SCROLL
 function resizeCalendarColumns(){