feat(data): update data module, add new mock data (#1960)

src/app/pages/dashboard/contacts/contacts.component.html

@@ -9,7 +9,7 @@
     <nb-tab tabTitle="Recent">
       <div class="contact" *ngFor="let c of recent">
         <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
-        <span class="time">{{ c.time }}</span>
+        <span class="time">{{ c.time | date: 'shortTime' }}</span>
       </div>
     </nb-tab>
   </nb-tabset>

src/app/pages/dashboard/contacts/contacts.component.ts

@@ -1,59 +1,46 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
-import { UserService } from '../../../@core/data/users.service';
+import { Contacts, RecentUsers, UserService } from '../../../@core/data/users.service';
 
 @Component({
   selector: 'ngx-contacts',
   styleUrls: ['./contacts.component.scss'],
   templateUrl: './contacts.component.html',
 })
-export class ContactsComponent implements OnInit, OnDestroy {
+export class ContactsComponent implements OnDestroy {
+
+  private alive = true;
 
   contacts: any[];
   recent: any[];
   breakpoint: NbMediaBreakpoint;
   breakpoints: any;
-  themeSubscription: any;
 
   constructor(private userService: UserService,
               private themeService: NbThemeService,
               private breakpointService: NbMediaBreakpointsService) {
-
     this.breakpoints = this.breakpointService.getBreakpointsMap();
-    this.themeSubscription = this.themeService.onMediaQueryChange()
+    this.themeService.onMediaQueryChange()
+      .pipe(takeWhile(() => this.alive))
       .subscribe(([oldValue, newValue]) => {
         this.breakpoint = newValue;
       });
-  }
 
-  ngOnInit() {
-
-    this.userService.getUsers()
-      .subscribe((users: any) => {
-        this.contacts = [
-          {user: users.nick, type: 'mobile'},
-          {user: users.eva, type: 'home'},
-          {user: users.jack, type: 'mobile'},
-          {user: users.lee, type: 'mobile'},
-          {user: users.alan, type: 'home'},
-          {user: users.kate, type: 'work'},
-        ];
-
-        this.recent = [
-          {user: users.alan, type: 'home', time: '9:12 pm'},
-          {user: users.eva, type: 'home', time: '7:45 pm'},
-          {user: users.nick, type: 'mobile', time: '5:29 pm'},
-          {user: users.lee, type: 'mobile', time: '11:24 am'},
-          {user: users.jack, type: 'mobile', time: '10:45 am'},
-          {user: users.kate, type: 'work', time: '9:42 am'},
-          {user: users.kate, type: 'work', time: '9:31 am'},
-          {user: users.jack, type: 'mobile', time: '8:01 am'},
-        ];
+    forkJoin(
+      this.userService.getContacts(),
+      this.userService.getRecentUsers(),
+    )
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(([contacts, recent]: [Contacts[], RecentUsers[]]) => {
+        this.contacts = contacts;
+        this.recent = recent;
       });
   }
 
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 }

src/app/pages/dashboard/dashboard.component.html

@@ -27,7 +27,7 @@
   </div>
 
   <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
-    <ngx-solar [chartValue]="72"></ngx-solar>
+    <ngx-solar [chartValue]="solarValue"></ngx-solar>
 
     <ngx-kitten></ngx-kitten>
   </div>

src/app/pages/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnDestroy} from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators' ;
+import { SolarService } from '../../@core/data/solar.service';
 
 interface CardSettings {
   title: string;
@@ -17,6 +18,7 @@ export class DashboardComponent implements OnDestroy {
 
   private alive = true;
 
+  solarValue: number;
   lightCard: CardSettings = {
     title: 'Light',
     iconClass: 'nb-lightbulb',
@@ -74,12 +76,19 @@ export class DashboardComponent implements OnDestroy {
     ],
   };
 
-  constructor(private themeService: NbThemeService) {
+  constructor(private themeService: NbThemeService,
+              private solarService: SolarService) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {
         this.statusCards = this.statusCardsByThemes[theme.name];
     });
+
+    this.solarService.getSolarData()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((data) => {
+        this.solarValue = data;
+      });
   }
 
   ngOnDestroy() {

src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -1,7 +1,8 @@
 import { delay, takeWhile } from 'rxjs/operators';
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-import { LayoutService } from '../../../../@core/data/layout.service';
+import { LayoutService } from '../../../../@core/utils';
+import { ElectricityChart } from '../../../../@core/data/electricity.service';
 
 @Component({
   selector: 'ngx-electricity-chart',
@@ -18,23 +19,13 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
 
   private alive = true;
 
+  @Input() data: ElectricityChart[];
+
   option: any;
-  data: Array<any>;
   echartsIntance: any;
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-
-    const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
-      720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,
-      145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
-      340, 340, 340, 340, 340, 340, 340, 340];
-
-    this.data = points.map((p, index) => ({
-      label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
-      value: p,
-    }));
-
     this.layoutService.onChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),

src/app/pages/dashboard/electricity/electricity.component.html

@@ -6,7 +6,7 @@
     </div>
 
     <nb-tabset fullWidth>
-      <nb-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
+      <nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
         <div class="stats-month" *ngFor="let month of year.months">
           <div>
             <span class="month">{{ month.month }}</span>
@@ -52,6 +52,6 @@
         </ul>
       </div>
     </div>
-    <ngx-electricity-chart></ngx-electricity-chart>
+    <ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
   </div>
 </nb-card>

src/app/pages/dashboard/electricity/electricity.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
-import { ElectricityService } from '../../../@core/data/electricity.service';
+import { Electricity, ElectricityChart, ElectricityService } from '../../../@core/data/electricity.service';
+import { takeWhile } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 @Component({
   selector: 'ngx-electricity',
@@ -10,7 +12,10 @@ import { ElectricityService } from '../../../@core/data/electricity.service';
 })
 export class ElectricityComponent implements OnDestroy {
 
-  data: Array<any>;
+  private alive = true;
+
+  listData: Electricity[];
+  chartData: ElectricityChart[];
 
   type = 'week';
   types = ['week', 'month', 'year'];
@@ -18,15 +23,26 @@ export class ElectricityComponent implements OnDestroy {
   currentTheme: string;
   themeSubscription: any;
 
-  constructor(private eService: ElectricityService, private themeService: NbThemeService) {
-    this.data = this.eService.getData();
-
-    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
-      this.currentTheme = theme.name;
+  constructor(private electricityService: ElectricityService,
+              private themeService: NbThemeService) {
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
+        this.currentTheme = theme.name;
     });
+
+    forkJoin(
+      this.electricityService.getListData(),
+      this.electricityService.getChartData(),
+    )
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(([listData, chartData]) => {
+        this.listData = listData;
+        this.chartData = chartData;
+      });
   }
 
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 }

src/app/pages/dashboard/rooms/player/player.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
-import { PlayerService, Track } from '../../../../@core/data/player.service';
+import { PlayerService, Track } from '../../../../@core/utils/player.service';
 
 @Component({
   selector: 'ngx-player',

src/app/pages/dashboard/security-cameras/security-cameras.component.ts

@@ -1,38 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { Camera, SecurityCamerasService } from '../../../@core/data/security-cameras.service';
+import { takeWhile } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-security-cameras',
   styleUrls: ['./security-cameras.component.scss'],
   templateUrl: './security-cameras.component.html',
 })
-export class SecurityCamerasComponent {
+export class SecurityCamerasComponent implements OnDestroy {
 
-  cameras: any[] = [{
-    title: 'Camera #1',
-    source: 'assets/images/camera1.jpg',
-  }, {
-    title: 'Camera #2',
-    source: 'assets/images/camera2.jpg',
-  }, {
-    title: 'Camera #3',
-    source: 'assets/images/camera3.jpg',
-  }, {
-    title: 'Camera #4',
-    source: 'assets/images/camera4.jpg',
-  }];
-
-  selectedCamera: any = this.cameras[0];
-
-  userMenu = [{
-    title: 'Profile',
-  }, {
-    title: 'Log out',
-  }];
+  private alive = true;
 
+  cameras: Camera[];
+  selectedCamera: Camera;
   isSingleView = false;
 
+  constructor(private securityCamerasService: SecurityCamerasService) {
+    this.securityCamerasService.getCamerasData()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((cameras: Camera[]) => {
+        this.cameras = cameras;
+        this.selectedCamera = this.cameras[0];
+      });
+  }
+
   selectCamera(camera: any) {
     this.selectedCamera = camera;
     this.isSingleView = true;
   }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
 }

src/app/pages/dashboard/solar/solar.component.ts

@@ -28,6 +28,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
   @Input('chartValue')
   set chartValue(value: number) {
     this.value = value;
+
     if (this.option.series) {
       this.option.series[0].data[0].value = value;
       this.option.series[0].data[1].value = 100 - value;

src/app/pages/dashboard/temperature/temperature.component.html

@@ -5,7 +5,7 @@
 
       <div class="slider-container">
         <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
-                                 [min]="12" [max]="30" [disableArcColor]="colors.layoutBg"
+                                 [min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="colors.layoutBg"
                                  [fillColors]="colors.temperature">
 
           <div class="slider-value-container"  [ngClass]="{ 'off': temperatureOff }">
@@ -40,7 +40,7 @@
 
       <div class="slider-container">
         <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
-                                 [min]="0" [max]="100" [disableArcColor]="colors.layoutBg"
+                                 [min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="colors.layoutBg"
                                  [fillColors]="colors.temperature">
 
           <div class="slider-value-container"  [ngClass]="{ 'off': humidityOff }">

src/app/pages/dashboard/temperature/temperature.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { Temperature, TemperatureHumidityService } from '../../../@core/data/temperature-humidity.service';
+import { takeWhile } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 @Component({
   selector: 'ngx-temperature',
@@ -8,24 +11,43 @@ import { NbThemeService } from '@nebular/theme';
 })
 export class TemperatureComponent implements OnDestroy {
 
-  temperature = 24;
+  private alive = true;
+
+  temperatureData: Temperature;
+  temperature: number;
   temperatureOff = false;
   temperatureMode = 'cool';
 
-  humidity = 87;
+  humidityData: Temperature;
+  humidity: number;
   humidityOff = false;
   humidityMode = 'heat';
 
   colors: any;
   themeSubscription: any;
 
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+  constructor(private theme: NbThemeService,
+              private temperatureHumidityService: TemperatureHumidityService) {
+    this.theme.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(config => {
       this.colors = config.variables;
     });
+
+    forkJoin(
+      this.temperatureHumidityService.getTemperatureData(),
+      this.temperatureHumidityService.getHumidityData(),
+    )
+      .subscribe(([temperatureData, humidityData]: [Temperature, Temperature]) => {
+        this.temperatureData = temperatureData;
+        this.temperature = this.temperatureData.value;
+
+        this.humidityData = humidityData;
+        this.humidity = this.humidityData.value;
+      });
   }
 
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 }

src/app/pages/dashboard/traffic/traffic-chart.component.ts

@@ -1,9 +1,7 @@
 import { delay, takeWhile } from 'rxjs/operators';
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-import { LayoutService } from '../../../@core/data/layout.service';
-
-const points = [300, 520, 435, 530, 730, 620, 660, 860];
+import { LayoutService } from '../../../@core/utils';
 
 @Component({
   selector: 'ngx-traffic-chart',
@@ -20,6 +18,8 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
 
   private alive = true;
 
+  @Input() points: number[];
+
   type = 'month';
   types = ['week', 'month', 'year'];
   option: any = {};
@@ -53,7 +53,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
           xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: points,
+            data: this.points,
           },
           yAxis: {
             boundaryGap: [0, '5%'],
@@ -114,7 +114,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
                   color: trafficTheme.shadowLineDarkBg,
                 },
               },
-              data: points.map(p => p - 15),
+              data: this.points.map(p => p - 15),
             },
             {
               type: 'line',
@@ -153,7 +153,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
                   opacity: 1,
                 },
               },
-              data: points,
+              data: this.points,
             },
           ],
         });

src/app/pages/dashboard/traffic/traffic.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+import { TrafficChartService } from '../../../@core/data/traffic-chart.service';
 
 @Component({
   selector: 'ngx-traffic',
@@ -19,24 +21,36 @@ import { NbThemeService } from '@nebular/theme';
         </div>
       </nb-card-header>
       <nb-card-body class="p-0">
-        <ngx-traffic-chart></ngx-traffic-chart>
+        <ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
       </nb-card-body>
     </nb-card>
   `,
 })
 export class TrafficComponent implements OnDestroy {
+
+  private alive = true;
+
+  trafficChartPoints: number[];
   type = 'month';
   types = ['week', 'month', 'year'];
   currentTheme: string;
-  themeSubscription: any;
 
-  constructor(private themeService: NbThemeService) {
-    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
+  constructor(private themeService: NbThemeService,
+              private trafficChartService: TrafficChartService) {
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
       this.currentTheme = theme.name;
     });
+
+    this.trafficChartService.getTrafficChartData()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((data) => {
+        this.trafficChartPoints = data;
+      });
   }
 
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 }