Emploi du temps CNFP

Contexte :CNFPT affiche l’emploi du temps d’une salle sur un écran. Ils veulent changer d’API pour du local mais on n’a pas accès à leurs données à distance.

TÂCHES :A FAIRE :Mettre en dur le JSON que l’entreprise a fourni. Le transcrire en JS/PHP/HTML (A voir avec ce que j’ai fait) sous forme de tableau. Afficher les réunions en local avec un Web Server.

Rendu Final attendu

FAIT :1/ Installation serveur Web Local (xampp, pour voir les effets des modifications).

2/ Importation du code déjà existant sur gitLab (V3 ancienne version, V4 la mienne)

3/Importation du scripte JSON de l’entreprise sur le fichier index.js. Dans la functionbuildReunions

Fonction :

Création d’une variable (json) qu’on lui affecte le JSON de l’entreprise.

Une partie du JSON :

!!! TEST !!!!!!Console.log des éléments de la variable pour voir leur affichage sur la console de la page.

!!! Test du langage JS pour voir si j’arrivai à accéder aux données du JSON que je voulais.

4/ Il faut afficher l’heure, la nom de la réunion ainsi que la salle.Test pour un centre avec une salle et une réunion.

Je crée une variable réservations. Je lui affect les données de réservations pour le premiercentre et la première salle :

Comme je doit modifier et importer de nouvelles données d’un programme déjà terminé.Mon tuteur m’a montré une fonction en JS pour les tableaux (array map).

On a utilité les noms title, startTime, endTime, description sur l’ancien programme.L’entreprise utilise libelleReservation, libelleSesion, dateDebut, dateFin dans leur JSON. Jeformate un tableau pour qu’il est les mêmes noms que la première version. Cela permetaussi de sélectionner les données qu’on souhaite avoir. Au final, nous avons un tableau avec5 clés. J’essaye d’afficher le tableau dans la console.

Le tableau s’affiche bien sur la console. J’affecte à mon tableau items le tableau reservationsFormate (Items est le tableau final).

Essai :

J’affiche la réunion. Mais, je dois le faire pour n centres avec n salles et n réservations.

5/Je vais faire un tableau à 2 dimensions avec des FOR. Un FOR pour les centres et un autrepour les salles. La fonction map le fait déjà pour les réservations

items = items.concat(reservationsFormaté) :

Permet de fusionner deux tableaux en un.Exemple :

Essai :

Les horaires ne sont pas bons. Je veux 08 au lieu de 8 et 00 au lieu de 0.Voici le code pour :

PadStart(2,’0’) rajoute le zéro si il y a que un seul chiffre. J’ai du mettre un toString car legetHours() me return un int.

6/Je dois améliorer le programme pour qu’il affiche soit les réunions de la demi-journée ousoit les réunions de la journée complète en fonction de l’heure actuelle.

Pour se fait, j’ai créé trois fonctions :

Cette fonction permet d’avoir :

- la date actuelle- juste l’heure de la date actuelle- la date actuelle à 12h00

Cette fonction permet d’afficher les réunions à la demi-journée.

Cette fonction permet de savoir si la date actuelle est supérieur à celle de la réunion passéeen paramètre.

J’utilise la fonction JS filter. Elle permet de filtrer les réunions avec les fonctions que j’aicréé juste avant.Filter est une fonction de type booléenne.

J’appelle ma fonction actuelHours(), qui va actualiser la date. Je filtre mon tableau items(qui a mes réunions) en fonction du paramètre days. days == 1 (journée complète), days =0.5 (demi-journée)

Pour days = 1 :On garde seulement les réunions où l’heure de fin de réunion est supérieure à la l’heureactuelle.Pour days = 0.5 :On garde les réunions où l’heure de fin est supérieure à la l’heure actuelle et celles qui sontdans la tranche d’horaire où nous sommes (entre 00h00-12h00 ou 12h01-23h59).

Essais : Je crée deux réunions à la date actuelle (matin). Une réunion le matin, et l’autre l’après-midi. Je vais afficher les réunions à la journée puis en demi-journée.

days=1

days=0.5

7/Il faut afficher les réunions en fonction de l’id de la salle entré en paramètre dans URL.

J’ai modifié le user en rooms (index.php) pour que ça soit plus compréhensible. Je luiaffecte la valeur NULL par défaut.Création d’un tableau qui recevra les id des salles. Pour ce fait, j’utilise slpit(‘,’). Cettefonction permet de couper le string en valeurs pour chaque caractère « , » trouvé.

Exemple :

tb = [‘304,055,131,654’] ;tb.slpit(‘,’) ;[‘304’,’055’,’131’,’654’] ;

Création d’une condition avant la création de mon tableau final ‘items’. Items va se remplirsi l’id de la salle est dans l’URL. Si rien n’est spécifié, le tableau se remplira de toutes lesréunions. (cf : functon fullItems)

Essais : Rooms non spécifié

rooms = 304

room = 304,305

8/

Pour lire plus facilement les réunions. Elles doivent être tirées par horaires croissantesJS le permet par cette fonction (qui est dans la fonction meetingsFilter()) :

Essai :

9/ Ajout d’une condition sur les variables rooms, days. Si l’utilisateur ne met de pas chiffre. Lavariable pendra une valeur pas défaut. Permet au programme de fonctionner même si il y aune erreur sur la valeur des variables de l’URL.

10/Il faut que le programme lise le json depuis un fichier externe du code. La fonction AJAXpermet de lire les données du fichier JSON externe. Le fichier JSON s’appelle index.json.New Date().getTime() empêche au programme de lire le cache (Permet de se mettre à jour).

Si le programme arrive à la lire. Il rentre dans le succes, sinon il va dans le error.

Remarque : haveCurrentTime() = actuelHours()

Dans la fonction buildElPage() :

Dans le success :

Teste du JSON, si il est correct ou non. Si le JSON est correct, la variable se met à jour.

Le code principal d’index.js :

buildReunions a son paramètre en false pour initier un setinterval de 20 secondes qui affichela suite des réunions si le nombre de réunions est plus grand que tpl (nombre de ligne parpage). Il y a un setInterval de 1 minutes sur la fonction buildReunions(true). Toutes les minutes, leprogramme va effectuer la fonction buildReunion avec son paramètre en true. Ça permet demettre à jour le fichier JSON. J’ai du factoriser mes lignes avec des fonctions pour que ça soit le plus lisible et proprepossible. J’ai créé deux nouvelles fonctions meetingsFilter() et fullItems(item). C’est lemême code mais c’est beaucoup plus lisible si une personne devait travailler sur mon projetpar la suite

Voici la fonction terminée.

L’entreprise gère les entreprises sur leur API et non depuis le fichier index.json.J’ai du créer un nouveau fichier php (config.php) qui comporte le token et la listeCentre.

Index.php :

Implantation de ce fichier dans l’index.php.

Création de variables pour les utiliser dans l’index.js

Index.js :

Ajout de data et type dans la fonction $.ajax ainsi que l’url du client.

On a pris la main sur un ordinateur du client pour récupérer un JSON réel. Pendant laprocédure, on s’est aperçu qu’il manquait un header. Je l’ai ajouté à ma fonction $.ajax

TOUT LE CODE :$(document).ready(function(){ buildReunions(false); setRebuild = setInterval(function(){buildReunions(true);},REBUILD_DURATION);})

function buildReunions(rebuild){ $.ajax({ url: 'http://ws-gdai-intranet.cnfpt.fr/Reservation/Consulter?' + new Date().getTime(), type : ‘POST’, global: false, async: true, data : ‘token=‘ + token + ‘&listeCentre=’ + listCenter, dataType: 'json', headers : {

‘Content-Type’ : ‘application/json;charset=8’}

success: function(obj){ //find out if the file is good, update the variable center if the file is good if(obj!=undefined && obj.centres!=undefined && Array.isArray(obj.centres)!=false) { centers = obj.centres; } haveCurrentTime(); fullItems(centers); meetingsFilter(); if(!rebuild) { displayItems(); setDisplay = setInterval(function(){displayItems();},DISPLAY_DURATION); } }, error: function(value){ haveCurrentTime(); meetingsFilter(); try { console.log('index.js - getReunions - error : ' + value); } catch(e) {} } });}

//enter reservations in the items tablefunction fullItems(centers){items = [] ; for(i=0; i<centers.length; i++) { var rs = centers[i].salles; for(k=0; k<rs.length; k++) { var room = centers[i].salles[k]; // (roomsArray.indexOf(room.identifiant.toString())!=-1) || (rooms.length == 0) to filter the meetings where the id is entered as a parameter in the URL if((roomsArray.indexOf(room.identifiant.toString())!=-1) || (rooms.length == 0)) { //choose the values and change the names of their variables var reservations = room.reservations; var reservationsFormat = reservations.map(obj => { var meeting = { title : obj.libelleReservation, description : obj.libelleSession, startTime : new Date(obj.dateDebut), endTime : new Date(obj.dateFin), room: { description: room.libelle } }; return meeting; }); //merge the reservationsFormat array with items. items = items.concat(reservationsFormat); } } } }

//have the currant time, current date, current date at 12:00:00function haveCurrentTime(){ hourToday = new Date().getHours().toString().padStart(2,'0'); dateToday = new Date(); dateTodayAt12 = new Date(); dateTodayAt12.setHours(12,00,00);}

//filter meetings with two functions filterPastDates() et filterByHalfDay() function meetingsFilter(){

//order meetings by ascending hour items.sort((a, b) => a.startTime - b.startTime); //filters meetings according to the days parameter of the URL items= items.filter(item => { //days = url variable if((days == 1) || (days > 1)){ if(filterPastDates(item)) { return true; } else{ return false; } } else if(days == 0.5){ if((filterByHalfDay(item)) && filterPastDates(item)) { return true; } else{ return false; } } });}

//filter meetings by halfdayfunction filterByHalfDay(item){ //if "the time of the current date is less than 12:00:00" and "meeting start time is less than 12:00:00 of the current date and the meeting end time is greater //or equal to the current date" if((hourToday <= '12') && (item.startTime <= dateTodayAt12 && item.endTime >= dateToday)) { return true; } //if "the time of the current date is greater than 12:00:00" and "meeting end time is greater than 12:00:00 of the current date and the meeting start time is less //or equal to the current date" else if((hourToday > '12') && (item.endTime > dateTodayAt12 && item.startTime <= dateToday)) { return true; } else { return false; }

}

//filter meetings that have passedfunction filterPastDates(item) { //if the time of the current date is greater than the end time of the meeting if(dateToday > item.endTime) { return false; } else { return true; }}