summaryrefslogtreecommitdiffstats
path: root/tools/pharos-dashboard/static/js
diff options
context:
space:
mode:
Diffstat (limited to 'tools/pharos-dashboard/static/js')
-rw-r--r--tools/pharos-dashboard/static/js/booking-calendar.js36
-rw-r--r--tools/pharos-dashboard/static/js/dataTables-sort.js26
-rw-r--r--tools/pharos-dashboard/static/js/datetimepicker-options.js3
-rw-r--r--tools/pharos-dashboard/static/js/fullcalendar-options.js78
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