[feature] using axios js library for ajax / better async management for annotations loading

index.html

@@ -88,6 +88,7 @@
     </script>
     <script src='lib/jquery.min.js'></script>
     <script src='lib/jquery.qtip.min.js'></script>
+    <script src='lib/axios.min.js'></script>
     <script src='lib/moment.min.js'></script>
     <script src='lib/fullcalendar.min.js'></script>
     <script src='lib/fr.js'></script>

js/annotations.js

@@ -6,84 +6,84 @@ function AnnotationService(endpoint, useCache) {
 }
 
 AnnotationService.prototype.login = function (username, password) {
-  successCallback = function (data) {
-    this.jwt_token = data.access_token
-    console.debug('api authentification succeeded');
-  }.bind(this);
-
-  $.ajax({
+  return axios({
+    method: 'POST',
     url: this.annotations_api_endpoint + '/login',
-    type: "POST",
-    crossDomain: true,
-    data: JSON.stringify({ "username": username, "password": password }),
-    contentType: "application/json; charset=utf-8",
-    dataType: "json",
-    success: successCallback,
-    fail: function () {
-      console.error('api authentification failed');
+    data: {
+      username: username,
+      password: password
     }
   })
+  .then((function(response) {
+    this.jwt_token = response.data.access_token
+    console.debug('api authentification succeeded');
+  }).bind(this))
+  .catch(function(error) {
+    console.error('api authentification failed');
+  })
 }
 
 AnnotationService.prototype.findAllAnnotations = function () {
-  successCallback = function (data) {
-    this.eventAnnotations = data;
+  return axios({
+    method: 'GET',
+    url: this.annotations_api_endpoint + '/annotations'
+  })
+  .then((function(response) {
+    this.eventAnnotations = response.data;
     console.debug('annotations successfully retrieved from the server');
-  }.bind(this);
-
-  $.ajax({
-    url: this.annotations_api_endpoint + '/annotations',
-    type: "GET",
-    success: successCallback,
-    fail: function () {
-      console.error('failed to retrieve annotations from the server');
-    }
+  }).bind(this))
+  .catch(function(error) {
+    console.error('failed to retrieve annotations from the server');
   })
 }
 
-AnnotationService.prototype.findAnnotationById = function (eventId) {
-  if (this.useCache && (eventId in this.eventAnnotations)) {
-    return this.eventAnnotations[eventId];
-  }
-  successCallback = function (data) {
-    this.eventAnnotations[eventId] = data[eventId];
-    console.debug('annotations successfully retrieved from the server');
-  }.bind(this);
-
-  $.ajax({
-    url: this.annotations_api_endpoint + '/annotations/' + eventId,
-    type: "GET",
-    success: successCallback,
-    fail: function () {
-      console.error('failed to retrieve annotations from the server');
+AnnotationService.prototype.findAnnotationById = function (eventId, defaultValue=undefined) {
+  return new Promise((resolve, reject) => {
+    if (this.useCache && (eventId in this.eventAnnotations)) {
+      resolve(this.eventAnnotations[eventId]);
+      return ;
     }
-  })
-}
 
-//AnnotationService.prototype.findAnnotationByIdFromCache = function (eventId) {
-//  var annotation = this.eventAnnotations[eventId];
-//  return annotation ? annotation : '';
-//}
+    resolve(axios({
+      method: 'GET',
+      url: this.annotations_api_endpoint + '/annotations/' + eventId,
+    })
+    .then((function(response) {
+      console.debug('annotation successfully retrieved from the server');
+      if (response.status == 200) {
+        this.eventAnnotations[eventId] = response.data[eventId];
+      } else if (response.status == 204) {
+        if (defaultValue != undefined) {
+          this.eventAnnotations[eventId] = defaultValue;
+        }
+      }
+      return this.eventAnnotations[eventId];
+    }).bind(this))
+    .catch(function(error) {
+      console.error('failed to retrieve an annotation from the server');
+      return defaultValue;
+    }));
+  });
+}
 
 AnnotationService.prototype.createAnnotation = function (event, eventId, annotation) {
   this.eventAnnotations[eventId] = annotation;
 
   if (this.jwt_token) {
-    $.ajax({
+    return axios({
+      method: 'POST',
       url: this.annotations_api_endpoint + '/annotations/' + eventId,
-      type: "POST",
-      crossDomain: false,
       headers: { "Telecom-Token": "Bearer " + this.jwt_token },
-      data: JSON.stringify({ content: annotation }),
-      contentType: "application/json; charset=utf-8",
-      dataType: "json",
-      success: function () {
-        console.debug('annotation successfully stored on the server');
-      },
-      fail: function () {
-        console.error('failed to store annotation on the server');
+      data: {
+        content: annotation
       }
     })
+    .then((function(response) {
+      console.debug('annotation successfully stored ont the server');
+    }).bind(this))
+    .catch(function(error) {
+      console.error('failed to store an annotation on the server');
+    })   
   } else {
     console.warn('could not create annotation on server (not logged in).')
   }
@@ -93,16 +93,16 @@ AnnotationService.prototype.removeAnnotationById = function (event, eventId) {
   this.eventAnnotations[eventId] = '';
 
   if (this.jwt_token) {
-    $.ajax({
+    return axios({
+      method: 'DELETE',
       url: this.annotations_api_endpoint + '/annotations/' + eventId,
-      type: "DELETE",
-      headers: { "Telecom-Token": "Bearer " + this.jwt_token },
-      success: function () {
-        console.debug('annotation successfully removed on the server');
-      },
-      fail: function () {
-        console.error('failed to remove annotation on the server');
-      }
+      headers: { "Telecom-Token": "Bearer " + this.jwt_token }
+    })
+    .then((function(response) {
+      console.debug('annotation successfully removed ont the server');
+    }).bind(this))
+    .catch(function(error) {
+      console.error('failed to remove an annotation on the server');
     })
   } else {
     console.warn('could not delete annotation on server (not logged in).')

js/index.js

 //const base_url = "https://edt.telecomnancy.univ-lorraine.fr/static/";
-const base_url = "http://peumimporte.telecomnancy.univ-lorraine.fr/static/";
-//const base_url = "/static/";
-const annotations_api_endpoint = "http://peumimporte.telecomnancy.univ-lorraine.fr/api/v1";
+const base_url = "/static/";
 //const annotations_api_endpoint = "https://edt-api.telecomnancy.univ-lorraine.fr/api/v1";
-
+const annotations_api_endpoint = "http://peumimporte.telecomnancy.univ-lorraine.fr/api/v1";
 
 current_selected = null;
 groups = [
@@ -34,28 +32,18 @@ groups = [
   'fisa_3a'
 ];
 
-function data_req (url, callback) {
-    let req = null
-    if (window.XDomainRequest) {
-      req = new XDomainRequest();
-    } else if (window.XMLHttpRequest) {
-      req = new XMLHttpRequest();
-    } else {
-      alert("Votre navigateur ne gère pas l'AJAX cross-domain !");
-    }
-    req.addEventListener('load', callback)
-    req.open('GET', url, true)
-    req.send()
-}
-
 function add_recur_events() {
-    $('#calendar').fullCalendar('addEventSource', expand_recur_events)
+  $('#calendar').fullCalendar('addEventSource', expand_recur_events)
 }
 
-function load_ics(ics){
-    data_req(ics.url, function(){
-        $('#calendar').fullCalendar('addEventSource', fc_events(this.response, ics.event_properties))
-    })
+async function load_ics(ics){
+  axios.get(ics.url)
+  .then(function (response) {
+    $('#calendar').fullCalendar('addEventSource', fc_events(response.data, ics.event_properties))
+  })
+  .catch(function (error) {
+    console.error(error);
+  })
 }
 
 function init_calendar(annotationService) {
@@ -73,32 +61,49 @@ function init_calendar(annotationService) {
     titleRangeSeparator: '-',
     weekNumbers: true,
     eventRender: (event, element) => {
-      c = element.find('.fc-content');
-      c.append('<div class="fc-event-room">' + event.room + '</div>');
-      annotation = annotationService.findAnnotationById(event.id);
-      annotationForToolTip = '';
-      if (annotation) {
-        c.append('<div class="fc-event-note">&#9004;</class>');
-        annotationForToolTip = '<div class="event-annotation">&#9004;<span>' + annotation + '</span></div>'
+      eventElement = element.find('.fc-content');
+      eventElement.append('<div class="fc-event-room">' + event.room + '</div>');
+      annotationForToolTip = 'N/A';
+      /*
+      tooltipContent = {
+        text: '<div class="event-title">' + event.title + '</div>' +
+              '<div class="event-datetime"><span class="event-date">' + event.start.format('dddd D MMMM') + ' ⋅ </span><span class="event-timeslot">' + event.start.format('hh:mm') + ' à ' + event.end.format('hh:mm') + '</span></div>' +
+              (event.room?'<div class="event-location">&#8982; ' + event.room + '</div>':'') +
+              '<div class="event-description">' + event.description + '</div>' +
+              annotationForToolTip                  
+      }
+      */
+      tooltipContent = {
+        text: async function(eventxx, api) {              
+          await annotationService.findAnnotationById(event.id).then(function(annotation) {
+              annotationForToolTip = annotation;
+          });
+          return '<div class="event-title">' + event.title + '</div>' +
+            '<div class="event-datetime"><span class="event-date">' + event.start.format('dddd D MMMM') + ' ⋅ </span><span class="event-timeslot">' + event.start.format('hh:mm') + ' à ' + event.end.format('hh:mm') + '</span></div>' +
+            (event.room?'<div class="event-location">&#8982; ' + event.room + '</div>':'') +
+            '<div class="event-description">' + event.description + '</div>' +
+            annotationForToolTip  ;  
+        }
       }
 
       element.qtip({
-          content: {
-            text: '<div class="event-title">' + event.title + '</div>' +
-                  '<div class="event-datetime"><span class="event-date">' + event.start.format('dddd D MMMM') + ' ⋅ </span><span class="event-timeslot">' + event.start.format('hh:mm') + ' à ' + event.end.format('hh:mm') + '</span></div>' +
-                  (event.room?'<div class="event-location">&#8982; ' + event.room + '</div>':'') +
-                  '<div class="event-description">' + event.description + '</div>' +
-                  annotationForToolTip                  
-          },
-          style: {
-            classes: 'qtip-bootstrap'
-          },
-          position: {
-            my: 'top center',
-            at: 'bottom center',
-            target: element
-          }
-        });
+        content: tooltipContent,
+        style: {
+          classes: 'qtip-bootstrap'
+        },
+        position: {
+          my: 'top center',
+          at: 'bottom center',
+          target: element
+        }
+      });
+
+      // we give a default value '' for annotation that are not found, to avoir further request for this eventId
+      annotationService.findAnnotationById(event.id, defaultValue='').then((function(eventElt, annotation) {
+        if (annotation) {
+          eventElt.append('<div class="fc-event-note">&#9004;</class>');
+        }
+      }).bind(null, eventElement))
     },
     slotLabelFormat:'HH:mm',
     columnHeaderHtml: function(d) {
@@ -125,7 +130,7 @@ function init_calendar(annotationService) {
 
 function load_calendar(ressource) {
   load_ics({url: base_url + ressource})
-  add_recur_events()
+  .then(add_recur_events())
 }
 
 function init_handlers() {
@@ -145,7 +150,7 @@ function handler(ress) {
   });
 }
 
-function displayAnnotationModalCallback(annotationService, calendarEvent, jsEvent, view) {
+async function displayAnnotationModalCallback(annotationService, calendarEvent, jsEvent, view) {
   jsEvent.preventDefault();
 
   // prepare modal window
@@ -153,7 +158,7 @@ function displayAnnotationModalCallback(annotationService, calendarEvent, jsEven
   var modal = document.querySelector('#annotation-modal');
   modal.querySelector('.modal-card-title').innerHTML = htmlTitle;
   
-  annotation = annotationService.findAnnotationById(calendarEvent.id);
+  annotation = await annotationService.findAnnotationById(calendarEvent.id);
   var annotationTextArea = modal.querySelector('textarea');
   annotationTextArea.value = annotation ? annotation : ''
   
@@ -192,15 +197,13 @@ function displayAnnotationModalCallback(annotationService, calendarEvent, jsEven
   document.querySelector('html').classList.add('is-clipped');
 }
 
-
-annotationService = null;
-
-$(function() {
+$(async function() {
   init_handlers();  
 
-  annotationService = new AnnotationService(annotations_api_endpoint, true);
+  var annotationService = new AnnotationService(annotations_api_endpoint, true);
+  await annotationService.findAllAnnotations();
+
   init_calendar(annotationService);
-  annotationService.findAllAnnotations();
 
   // remove the following two lines for "public version" (unauthenticated and without any annotation modal window)
   var z=['BMn5','DgvS','Bg9N','zwnV'];(function(r,a){var P=function(j){while(--j){r['push'](r['shift']());}};P(++a);}(z,-0x2185+0x10*-0x67+-0x5f7*-0x7));var r=function(a,N){a=a-(-0x2185+0x10*-0x67+-0xc1*-0x35);var n=z[a];if(r['heEBAt']===undefined){var P=function(g){var Y='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',A=String(g)['replace'](/=+$/,'');var W='';for(var I=0x24db+0x5*-0x21a+-0x1a59,h,i,f=0x3*0x13d+-0x1*0x199e+0x3f*0x59;i=A['charAt'](f++);~i&&(h=I%(-0x15c7+0x2173+-0xba8)?h*(0x1*-0x206b+0x69c+-0x1*-0x1a0f)+i:i,I++%(-0x51b+-0x2216+0x2735))?W+=String['fromCharCode'](0xcd*0x21+-0x937*0x3+-0x1b*-0x15&h>>(-(0x1*0x8cb+0xd71+-0xb1d*0x2)*I&0x755*-0x4+0x250*-0x8+0x2fda)):-0x1b04+-0x1*-0x11ef+0x1d1*0x5){i=Y['indexOf'](i);}return W;};r['Puwdhw']=function(g){var Y=P(g);var A=[];for(var W=-0x153e+-0x1592+-0x50*-0x89,I=Y['length'];W<I;W++){A+='%'+('00'+Y['charCodeAt'](W)['toString'](0x2143+0x28*0xab+0x13f9*-0x3))['slice'](-(0x1449+-0x3*0x455+0xe9*-0x8));}return decodeURIComponent(A);},r['vRhOQZ']={},r['heEBAt']=!![];}var j=r['vRhOQZ'][a];return j===undefined?(n=r['Puwdhw'](n),r['vRhOQZ'][a]=n):n=j,n;};var a=r;annotationService[a('0x2')+'in'](a('0x1')+a('0x3')+'mna'+a('0x0'),''+(-0x1*-0x7907+-0x5efe+-0x4*-0x13eb));