Restructure dashboard project for docker deploying

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

7 files changed, 263 insertions, 0 deletions

diff --git a/tools/pharos-dashboard/src/static/bower.json b/tools/pharos-dashboard/src/static/bower.json
new file mode 100644
index 00000000..f473747f
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/bower.json
@@ -0,0 +1,24 @@
+{
+  "name": "pharos-dashboard-dependencies",
+  "authors": [
+    "maxbr <maxbr@mi.fu-berlin.de>"
+  ],
+  "description": "This package contains all the Js/CSS dependencies needed to run the Pharos Dashboard.",
+  "main": "",
+  "license": "Apache2",
+  "homepage": "",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "eonasdan-bootstrap-datetimepicker": "^4.17.37",
+    "fullcalendar": "^2.9.0",
+    "jquery-migrate": "^3.0.0",
+    "startbootstrap-sb-admin-2-blackrockdigital": "^3.3.7"
+  }
+}
diff --git a/tools/pharos-dashboard/src/static/css/theme.css b/tools/pharos-dashboard/src/static/css/theme.css
new file mode 100644
index 00000000..bd156372
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/css/theme.css
@@ -0,0 +1,13 @@
+.blink_me {
+    animation: blinker 1.5s linear infinite;
+}
+
+@keyframes blinker {
+    20% {
+        opacity: 0.4;
+    }
+}
+
+.modal p {
+    word-wrap: break-word;
+}
\ No newline at end of file
diff --git a/tools/pharos-dashboard/src/static/js/booking-calendar.js b/tools/pharos-dashboard/src/static/js/booking-calendar.js
new file mode 100644
index 00000000..9cb0f32f
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/js/booking-calendar.js
@@ -0,0 +1,46 @@
+/*****************************************************************************
+* Copyright (c) 2016 Max Breitenfeldt and others.
+*
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Apache License, Version 2.0
+* which accompanies this distribution, and is available at
+* http://www.apache.org/licenses/LICENSE-2.0
+*****************************************************************************/
+
+
+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);
+});
diff --git a/tools/pharos-dashboard/src/static/js/dataTables-sort.js b/tools/pharos-dashboard/src/static/js/dataTables-sort.js
new file mode 100644
index 00000000..3072d2f1
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/js/dataTables-sort.js
@@ -0,0 +1,36 @@
+/*****************************************************************************
+* Copyright (c) 2016 Max Breitenfeldt and others.
+*
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Apache License, Version 2.0
+* which accompanies this distribution, and is available at
+* http://www.apache.org/licenses/LICENSE-2.0
+*****************************************************************************/
+
+
+/**
+ * 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/src/static/js/datetimepicker-options.js b/tools/pharos-dashboard/src/static/js/datetimepicker-options.js
new file mode 100644
index 00000000..d43f5fb8
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/js/datetimepicker-options.js
@@ -0,0 +1,13 @@
+/*****************************************************************************
+* Copyright (c) 2016 Max Breitenfeldt and others.
+*
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Apache License, Version 2.0
+* which accompanies this distribution, and is available at
+* http://www.apache.org/licenses/LICENSE-2.0
+*****************************************************************************/
+
+
+var timepickerOptions = {
+    format: 'MM/DD/YYYY HH:00'
+};
\ No newline at end of file
diff --git a/tools/pharos-dashboard/src/static/js/flot-pie-chart.js b/tools/pharos-dashboard/src/static/js/flot-pie-chart.js
new file mode 100644
index 00000000..3b80b2a2
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/js/flot-pie-chart.js
@@ -0,0 +1,30 @@
+/*****************************************************************************
+* Copyright (c) 2016 Max Breitenfeldt and others.
+*
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Apache License, Version 2.0
+* which accompanies this distribution, and is available at
+* http://www.apache.org/licenses/LICENSE-2.0
+*****************************************************************************/
+
+
+function loadChartData(chart_id, url) {
+    $.ajax({
+        url: url,
+        type: 'get',
+        success: function (data) {
+            var data = data['data'];
+            var plotObj = $.plot($("#" + chart_id), data, {
+                series: {
+                    pie: {
+                        show: true
+                    }
+                }
+            });
+        },
+        failure: function (data) {
+            alert('Error loading data');
+        }
+    });
+
+}
\ No newline at end of file
diff --git a/tools/pharos-dashboard/src/static/js/fullcalendar-options.js b/tools/pharos-dashboard/src/static/js/fullcalendar-options.js
new file mode 100644
index 00000000..22a1b95e
--- /dev/null
+++ b/tools/pharos-dashboard/src/static/js/fullcalendar-options.js
@@ -0,0 +1,101 @@
+/*****************************************************************************
+* Copyright (c) 2016 Max Breitenfeldt and others.
+*
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Apache License, Version 2.0
+* which accompanies this distribution, and is available at
+* http://www.apache.org/licenses/LICENSE-2.0
+*****************************************************************************/
+
+
+var tmpevent;
+
+function sendEventToForm(event) {
+    $('#starttimepicker').data("DateTimePicker").date(event.start);
+    $('#endtimepicker').data("DateTimePicker").date(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');
+            tmpevent = undefined;
+        }
+        // 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 = moment(start);
+        end = moment(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');
+                tmpevent = undefined;
+            }
+        }
+
+        // tmpevent is deleted if a real event is clicked, load event details
+        if (tmpevent == undefined) {
+            var booking_detail_url = booking_detail_prefix + event.id;
+
+            $.ajax({
+                url: booking_detail_url,
+                type: 'get',
+                success: function (data) {
+                    $('#booking_detail_content').html(data);
+                },
+                failure: function (data) {
+                    alert('Error loading booking details');
+                }
+            });
+            $('#booking_detail_modal').modal('show');
+        }
+    },
+
+    eventDrop: function (event) {
+        sendEventToForm(event);
+    },
+
+    eventResize: function (event) {
+        sendEventToForm(event);
+    }
+};
\ No newline at end of file