diff options
Diffstat (limited to 'dashboard/src/static')
| -rw-r--r-- | dashboard/src/static/bower.json | 24 | ||||
| -rw-r--r-- | dashboard/src/static/css/theme.css | 13 | ||||
| -rw-r--r-- | dashboard/src/static/js/booking-calendar.js | 58 | ||||
| -rw-r--r-- | dashboard/src/static/js/dataTables-sort.js | 36 | ||||
| -rw-r--r-- | dashboard/src/static/js/datetimepicker-options.js | 13 | ||||
| -rw-r--r-- | dashboard/src/static/js/flot-pie-chart.js | 30 | ||||
| -rw-r--r-- | dashboard/src/static/js/fullcalendar-options.js | 101 |
7 files changed, 275 insertions, 0 deletions
diff --git a/dashboard/src/static/bower.json b/dashboard/src/static/bower.json new file mode 100644 index 0000000..f473747 --- /dev/null +++ b/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/dashboard/src/static/css/theme.css b/dashboard/src/static/css/theme.css new file mode 100644 index 0000000..bd15637 --- /dev/null +++ b/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/dashboard/src/static/js/booking-calendar.js b/dashboard/src/static/js/booking-calendar.js new file mode 100644 index 0000000..f634293 --- /dev/null +++ b/dashboard/src/static/js/booking-calendar.js @@ -0,0 +1,58 @@ +/***************************************************************************** + * 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']); + + installer = bookings[i]['installer__name']; + if (installer === null) { + installer = ''; + } + + scenario = bookings[i]['scenario__name']; + if (scenario === null) { + scenario = ''; + } + title = bookings[i]['purpose'] + ' ' + installer + ' ' + scenario; + + event = { + id: bookings[i]['id'], + title: title, + 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/dashboard/src/static/js/dataTables-sort.js b/dashboard/src/static/js/dataTables-sort.js new file mode 100644 index 0000000..3072d2f --- /dev/null +++ b/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/dashboard/src/static/js/datetimepicker-options.js b/dashboard/src/static/js/datetimepicker-options.js new file mode 100644 index 0000000..d43f5fb --- /dev/null +++ b/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/dashboard/src/static/js/flot-pie-chart.js b/dashboard/src/static/js/flot-pie-chart.js new file mode 100644 index 0000000..3b80b2a --- /dev/null +++ b/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/dashboard/src/static/js/fullcalendar-options.js b/dashboard/src/static/js/fullcalendar-options.js new file mode 100644 index 0000000..22a1b95 --- /dev/null +++ b/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 |