Local ado

src/app/app.service.ts

@@ -7,38 +7,42 @@ import { Router } from '@angular/router';
 })
 export class AppService {
   // Authentification
-  authenticated=false;
+  authenticated = false;
   responseAll: any;
   // Autorisation :
   isAdmin = false;
   isGerant = false;
   isClient = false;
-  constructor(private httpClient:HttpClient, private router:Router) { }
+  // Step 1
+  idUser: any;
+  constructor(private httpClient: HttpClient, private router: Router) { }
 
-  authenticate(credentials:any,callback:any){
+  authenticate(credentials: any, callback: any) {
     const headersAgency = new HttpHeaders(
       credentials ? {
-        authorization : 'Basic ' + btoa(credentials.username+ ':' +credentials.password)
+        authorization: 'Basic ' + btoa(credentials.username + ':' + credentials.password)
       } : {}
     );
-    this.httpClient.get('http://localhost:8080/login/user',{headers:headersAgency}).subscribe(response => {
+    this.httpClient.get('http://localhost:8080/login/user', { headers: headersAgency }).subscribe(response => {
       this.responseAll = response; // objet = utilisateur
-      console.log("responseAll="+this.responseAll);
-      if(this.responseAll['username']){
+      console.log("responseAll=" + this.responseAll);
+      // Step 2
+      this.idUser = this.responseAll['idUtilisateur'];
+      if (this.responseAll['username']) {
         this.authenticated = true;
         // vérification des profils :
-        for(let i=0;i<this.responseAll['roles'].length;i++){
-          if(this.responseAll['roles'][i]['idRole']==1){
+        for (let i = 0; i < this.responseAll['roles'].length; i++) {
+          if (this.responseAll['roles'][i]['idRole'] == 1) {
             this.isAdmin = true;
           }
-          if(this.responseAll['roles'][i]['idRole']==2){
+          if (this.responseAll['roles'][i]['idRole'] == 2) {
             this.isGerant = true;
           }
-          if(this.responseAll['roles'][i]['idRole']==3){
+          if (this.responseAll['roles'][i]['idRole'] == 3) {
             this.isClient = true;
           }
         }
-      }else{
+      } else {
         this.authenticated = false;
       }
       return callback && callback();

src/app/dashboard/dashboard.component.html

@@ -4,6 +4,7 @@
 
     <br>
     <br>
+    <h1>Hello {{user.prenomUtilisateur}}</h1>
     <br>
     <br>
     <div style="position: relative; left: 10px; background-color: white; border-color: black; border-width: thick;">

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { AppService } from 'app/app.service';
+import { Utilisateur } from 'app/model/utilisateur';
+import { UtilisateurService } from 'app/services/utilisateur.service';
 import * as Chartist from 'chartist';
 
 @Component({
@@ -7,144 +10,155 @@ import * as Chartist from 'chartist';
   styleUrls: ['./dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
-
-  constructor() { }
-  startAnimationForLineChart(chart){
-      let seq: any, delays: any, durations: any;
-      seq = 0;
-      delays = 80;
-      durations = 500;
-
-      chart.on('draw', function(data) {
-        if(data.type === 'line' || data.type === 'area') {
-          data.element.animate({
-            d: {
-              begin: 600,
-              dur: 700,
-              from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
-              to: data.path.clone().stringify(),
-              easing: Chartist.Svg.Easing.easeOutQuint
-            }
-          });
-        } else if(data.type === 'point') {
-              seq++;
-              data.element.animate({
-                opacity: {
-                  begin: seq * delays,
-                  dur: durations,
-                  from: 0,
-                  to: 1,
-                  easing: 'ease'
-                }
-              });
+  // Step 3
+  idUser: any;
+  user: Utilisateur = new Utilisateur();
+  // Step 4
+  constructor(private utilisateurService: UtilisateurService, private appService: AppService) { }
+  startAnimationForLineChart(chart) {
+    let seq: any, delays: any, durations: any;
+    seq = 0;
+    delays = 80;
+    durations = 500;
+
+    chart.on('draw', function (data) {
+      if (data.type === 'line' || data.type === 'area') {
+        data.element.animate({
+          d: {
+            begin: 600,
+            dur: 700,
+            from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+            to: data.path.clone().stringify(),
+            easing: Chartist.Svg.Easing.easeOutQuint
+          }
+        });
+      } else if (data.type === 'point') {
+        seq++;
+        data.element.animate({
+          opacity: {
+            begin: seq * delays,
+            dur: durations,
+            from: 0,
+            to: 1,
+            easing: 'ease'
           }
-      });
+        });
+      }
+    });
 
-      seq = 0;
+    seq = 0;
   };
-  startAnimationForBarChart(chart){
-      let seq2: any, delays2: any, durations2: any;
-
-      seq2 = 0;
-      delays2 = 80;
-      durations2 = 500;
-      chart.on('draw', function(data) {
-        if(data.type === 'bar'){
-            seq2++;
-            data.element.animate({
-              opacity: {
-                begin: seq2 * delays2,
-                dur: durations2,
-                from: 0,
-                to: 1,
-                easing: 'ease'
-              }
-            });
-        }
-      });
+  startAnimationForBarChart(chart) {
+    let seq2: any, delays2: any, durations2: any;
+
+    seq2 = 0;
+    delays2 = 80;
+    durations2 = 500;
+    chart.on('draw', function (data) {
+      if (data.type === 'bar') {
+        seq2++;
+        data.element.animate({
+          opacity: {
+            begin: seq2 * delays2,
+            dur: durations2,
+            from: 0,
+            to: 1,
+            easing: 'ease'
+          }
+        });
+      }
+    });
 
-      seq2 = 0;
+    seq2 = 0;
   };
+  // Step 5
+  findOne(id: number) {
+    this.utilisateurService.findOne(id).subscribe(data => { this.user = data; });
+  }
   ngOnInit() {
-      /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
-
-      const dataDailySalesChart: any = {
-          labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
-          series: [
-              [12, 17, 7, 17, 23, 18, 38]
-          ]
-      };
-
-     const optionsDailySalesChart: any = {
-          lineSmooth: Chartist.Interpolation.cardinal({
-              tension: 0
-          }),
-          low: 0,
-          high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
-          chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
-      }
-
-      var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
-
-      this.startAnimationForLineChart(dailySalesChart);
-
-
-      /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
-
-      const dataCompletedTasksChart: any = {
-          labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
-          series: [
-              [230, 750, 450, 300, 280, 240, 200, 190]
-          ]
-      };
-
-     const optionsCompletedTasksChart: any = {
-          lineSmooth: Chartist.Interpolation.cardinal({
-              tension: 0
-          }),
-          low: 0,
-          high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
-          chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
-      }
-
-      var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
-
-      // start animation for the Completed Tasks Chart - Line Chart
-      this.startAnimationForLineChart(completedTasksChart);
-
-
-
-      /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
-
-      var datawebsiteViewsChart = {
-        labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-        series: [
-          [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
-
-        ]
-      };
-      var optionswebsiteViewsChart = {
-          axisX: {
-              showGrid: false
-          },
-          low: 0,
-          high: 1000,
-          chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
-      };
-      var responsiveOptions: any[] = [
-        ['screen and (max-width: 640px)', {
-          seriesBarDistance: 5,
-          axisX: {
-            labelInterpolationFnc: function (value) {
-              return value[0];
-            }
+    // Step 6
+    this.idUser = this.appService.idUser;
+    console.log("user profile " + this.idUser);
+    this.findOne(this.idUser);
+    /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
+
+    const dataDailySalesChart: any = {
+      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+      series: [
+        [12, 17, 7, 17, 23, 18, 38]
+      ]
+    };
+
+    const optionsDailySalesChart: any = {
+      lineSmooth: Chartist.Interpolation.cardinal({
+        tension: 0
+      }),
+      low: 0,
+      high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+      chartPadding: { top: 0, right: 0, bottom: 0, left: 0 },
+    }
+
+    var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
+
+    this.startAnimationForLineChart(dailySalesChart);
+
+
+    /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
+
+    const dataCompletedTasksChart: any = {
+      labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
+      series: [
+        [230, 750, 450, 300, 280, 240, 200, 190]
+      ]
+    };
+
+    const optionsCompletedTasksChart: any = {
+      lineSmooth: Chartist.Interpolation.cardinal({
+        tension: 0
+      }),
+      low: 0,
+      high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+      chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
+    }
+
+    var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
+
+    // start animation for the Completed Tasks Chart - Line Chart
+    this.startAnimationForLineChart(completedTasksChart);
+
+
+
+    /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
+
+    var datawebsiteViewsChart = {
+      labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+      series: [
+        [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
+
+      ]
+    };
+    var optionswebsiteViewsChart = {
+      axisX: {
+        showGrid: false
+      },
+      low: 0,
+      high: 1000,
+      chartPadding: { top: 0, right: 5, bottom: 0, left: 0 }
+    };
+    var responsiveOptions: any[] = [
+      ['screen and (max-width: 640px)', {
+        seriesBarDistance: 5,
+        axisX: {
+          labelInterpolationFnc: function (value) {
+            return value[0];
           }
-        }]
-      ];
-      var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
+        }
+      }]
+    ];
+    var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
 
-      //start animation for the Emails Subscription Chart
-      this.startAnimationForBarChart(websiteViewsChart);
+    //start animation for the Emails Subscription Chart
+    this.startAnimationForBarChart(websiteViewsChart);
   }
 
 }