Split the dashboard into different apps, add tests

JIRA: RELENG-12

Signed-off-by: maxbr <maxbr@mi.fu-berlin.de>

4 files changed, 143 insertions, 0 deletions

diff --git a/tools/pharos-dashboard/static/js/booking-calendar.js b/tools/pharos-dashboard/static/js/booking-calendar.js
new file mode 100644
index 00000000..f8a9a0ff
--- /dev/null
+++ b/tools/pharos-dashboard/static/js/booking-calendar.js
@@ -0,0 +1,36 @@
+function parseCalendarEvents(bookings) {
+    var events = [];
+    for (var i = 0; i < bookings.length; i++) {
+        // convert ISO 8601 timestring to moment, needed for timezone handling
+        start = moment(bookings[i]['start']);
+        end = moment(bookings[i]['end']);
+        event = {
+            id: bookings[i]['id'],
+            title: bookings[i]['purpose'],
+            start: start,
+            end: end,
+        };
+        events.push(event);
+    }
+    return events;
+}
+
+function loadEvents(url) {
+    $.ajax({
+        url: url,
+        type: 'get',
+        success: function (data) {
+            $('#calendar').fullCalendar('addEventSource', parseCalendarEvents(data['bookings']));
+        },
+        failure: function (data) {
+            alert('Error loading booking data');
+        }
+    });
+}
+
+$(document).ready(function () {
+    $('#calendar').fullCalendar(calendarOptions);
+    loadEvents(bookings_url);
+    $('#starttimepicker').datetimepicker(timepickerOptions);
+    $('#endtimepicker').datetimepicker(timepickerOptions);
+});
\ No newline at end of file
diff --git a/tools/pharos-dashboard/static/js/dataTables-sort.js b/tools/pharos-dashboard/static/js/dataTables-sort.js
new file mode 100644
index 00000000..7189ca15
--- /dev/null
+++ b/tools/pharos-dashboard/static/js/dataTables-sort.js
@@ -0,0 +1,26 @@
+/**
+ * This is a sort function for dataTables to sort tables by the status column.
+ * The order should be: online < online/idle < offline
+ */
+jQuery.extend(jQuery.fn.dataTableExt.oSort, {
+    "status-pre": function (a) {
+        switch (a) {
+            case 'online':
+                return 1;
+            case 'online / idle':
+                return 2;
+            case 'offline':
+                return 3;
+            default:
+                return a;
+        }
+    },
+
+    "status-asc": function (a, b) {
+        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+    },
+
+    "status-desc": function (a, b) {
+        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
+    }
+});
\ No newline at end of file
diff --git a/tools/pharos-dashboard/static/js/datetimepicker-options.js b/tools/pharos-dashboard/static/js/datetimepicker-options.js
new file mode 100644
index 00000000..2d19ddae
--- /dev/null
+++ b/tools/pharos-dashboard/static/js/datetimepicker-options.js
@@ -0,0 +1,3 @@
+var timepickerOptions = {
+    format: 'MM/DD/YYYY HH:00'
+};
\ No newline at end of file
diff --git a/tools/pharos-dashboard/static/js/fullcalendar-options.js b/tools/pharos-dashboard/static/js/fullcalendar-options.js
new file mode 100644
index 00000000..85423b86
--- /dev/null
+++ b/tools/pharos-dashboard/static/js/fullcalendar-options.js
@@ -0,0 +1,78 @@
+var tmpevent;
+
+// converts a moment to a readable fomat for the backend
+function convertInputTime(time) {
+    return time;
+    //return moment(time).format('YYYY-MM-DD HH:00 ZZ');
+}
+
+function sendEventToForm(event) {
+    $('#starttimepicker').data("DateTimePicker").date(convertInputTime(event.start));
+    $('#endtimepicker').data("DateTimePicker").date(convertInputTime(event.end));
+}
+
+var calendarOptions = {
+    height: 600,
+    header: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'agendaWeek,month'
+    },
+    timezone: user_timezone, // set in booking_calendar.html
+    defaultView: 'month',
+    slotDuration: '00:60:00',
+    slotLabelFormat: "HH:mm",
+    firstDay: 1,
+    allDaySlot: false,
+    selectOverlap: false,
+    eventOverlap: false,
+    selectable: true,
+    editable: false,
+    eventLimit: true, // allow "more" link when too many events
+    timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
+    unselectAuto: true,
+    nowIndicator: true,
+
+    // selectHelper is only working in the agendaWeek view, this is a workaround:
+    // if an event is selected, the existing selection is removed and a temporary event is added
+    // to the calendar
+    select: function (start, end) {
+        if (tmpevent != undefined) {
+            $('#calendar').fullCalendar('removeEvents', tmpevent.id);
+            $('#calendar').fullCalendar('rerenderEvents');
+        }
+        // the times need to be converted here to make them show up in the agendaWeek view if they
+        // are created in the month view. If they are not converted, the tmpevent will only show
+        // up in the (deactivated) allDaySlot
+        start = convertInputTime(start);
+        end = convertInputTime(end);
+
+        tmpevent = {
+            id: '537818f62bc63518ece15338fb86c8be',
+            title: 'New Booking',
+            start: start,
+            end: end,
+            editable: true
+        };
+
+        $('#calendar').fullCalendar('renderEvent', tmpevent, true);
+        sendEventToForm(tmpevent);
+    },
+
+    eventClick: function (event) {
+        if (tmpevent != undefined) {
+            if (event.id != tmpevent.id) {
+                $('#calendar').fullCalendar('removeEvents', tmpevent.id);
+                $('#calendar').fullCalendar('rerenderEvents');
+            }
+        }
+    },
+
+    eventDrop: function (event) {
+        sendEventToForm(event);
+    },
+
+    eventResize: function (event) {
+        sendEventToForm(event);
+    }
+};
\ No newline at end of file