emploi du temps cnfp · pdf file emploi du temps cnfp contexte : cnfpt affiche l’emploi...

Click here to load reader

Post on 07-Aug-2020

1 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 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 function buildReunions

    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 premier centre 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. Je formate un tableau pour qu’il est les mêmes noms que la première version. Cela permet aussi de sélectionner les données qu’on souhaite avoir. Au final, nous avons un tableau avec 5 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 autre pour 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 le getHours() me return un int.

    6/ Je dois améliorer le programme pour qu’il affiche soit les réunions de la demi-journée ou soit 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ée en paramètre.

    J’utilise la fonction JS filter. Elle permet de filtrer les réunions avec les fonctions que j’ai créé 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’heure actuelle. Pour days = 0.5 : On garde les réunions où l’heure de fin est supérieure à la l’heure actuelle et celles qui sont dans 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 lui affecte la valeur NULL par défaut. Création d’un tableau qui recevra les id des salles. Pour ce fait, j’utilise slpit(‘,’). Cette fonction 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 remplir si l’id de la salle est dans l’URL. Si rien n’est spécifié, le tableau se remplira de toutes les ré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 croissantes JS 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. La variable pendra une valeur pas défaut. Permet au programme de fonctionner même si il y a une 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 AJAX permet 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 affiche la suite des réunions si le nombre de réunions est plus grand que tpl (nombre de ligne par page). Il y a un setInterval de 1 minutes sur la fonction buildReunions(true). Toutes les minutes, le programme va effectuer la fonction buildReunion avec son paramètre en true. Ça permet de mettre à jour le fichier JSON. J’ai du factoriser mes lignes avec des fonctions pour que ça soit le plus lisible et propre possible. J’ai créé deux nouvelles fonctions meetingsFilter() et fullItems(item). C’est le même code mais c’est beaucoup plus lisible si une personne devait travailler sur mon projet par 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 la procé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().getTi me(), 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 table function fullItems(centers) { items = [] ; for(i=0; i

  • //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{

View more