CP adding energy service, charts, model, DB methods + update API in Angular

angular.json

@@ -32,7 +32,9 @@
               "./node_modules/font-awesome/css/font-awesome.css",
               "./node_modules/flag-icon-css/css/flag-icon.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/chart.js/dist/Chart.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -95,7 +97,9 @@
               "./node_modules/font-awesome/css/font-awesome.css",
               "./node_modules/flag-icon-css/css/flag-icon.min.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "./node_modules/chart.js/dist/Chart.js"
+            ],
             "assets": [
               "src/favicon.ico",
               "src/assets"

package-lock.json

@@ -2634,6 +2634,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-error": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
@@ -7703,6 +7729,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "@ngx-translate/http-loader": "^4.0.0",
     "angular-font-awesome": "^3.1.2",
     "bootstrap": "^4.4.1",
+    "chart.js": "^2.9.3",
     "core-js": "^2.5.4",
     "flag-icon-css": "^3.3.0",
     "font-awesome": "^4.7.0",

src/app/_api/api.module.ts

@@ -6,6 +6,7 @@ import { ApiConfiguration, ApiConfigurationInterface } from './api-configuration
 import { AzureService } from './services/azure.service';
 import { BooksService } from './services/books.service';
 import { DeviceService } from './services/device.service';
+import { EnergyService } from './services/energy.service';
 import { FacebookService } from './services/facebook.service';
 import { GoogleService } from './services/google.service';
 import { IOTService } from './services/iot.service';
@@ -33,6 +34,7 @@ import { ValuesService } from './services/values.service';
     AzureService,
     BooksService,
     DeviceService,
+    EnergyService,
     FacebookService,
     GoogleService,
     IOTService,

src/app/_api/models.ts

@@ -1,6 +1,7 @@
 export { AzureADAuthModel } from './models/azure-adauth-model';
 export { Book } from './models/book';
 export { Device } from './models/device';
+export { ElectricityProduction } from './models/electricity-production';
 export { FacebookAuthModel } from './models/facebook-auth-model';
 export { GoogleAuthModel } from './models/google-auth-model';
 export { SmartPrinterMessage } from './models/smart-printer-message';

src/app/_api/models/electricity-production.ts

@@ -0,0 +1,9 @@
+/* tslint:disable */
+export interface ElectricityProduction {
+  id?: string;
+  deviceId?: string;
+  userId?: string;
+  watt?: number;
+  ampere?: number;
+  timestamp?: string;
+}

src/app/_api/models/panel-menu-item.ts

@@ -3,6 +3,7 @@ export interface PanelMenuItem {
   label?: string;
   route?: string;
   icon?: string;
+  color?: string;
   badgeValue?: number;
   badgeType?: string;
   children?: Array<PanelMenuItem>;

src/app/_api/services.ts

@@ -1,6 +1,7 @@
 export { AzureService } from './services/azure.service';
 export { BooksService } from './services/books.service';
 export { DeviceService } from './services/device.service';
+export { EnergyService } from './services/energy.service';
 export { FacebookService } from './services/facebook.service';
 export { GoogleService } from './services/google.service';
 export { IOTService } from './services/iot.service';

src/app/_api/services/energy.service.ts

@@ -0,0 +1,83 @@
+/* tslint:disable */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpRequest, HttpResponse, HttpHeaders } from '@angular/common/http';
+import { BaseService as __BaseService } from '../base-service';
+import { ApiConfiguration as __Configuration } from '../api-configuration';
+import { StrictHttpResponse as __StrictHttpResponse } from '../strict-http-response';
+import { Observable as __Observable } from 'rxjs';
+import { map as __map, filter as __filter } from 'rxjs/operators';
+
+import { ElectricityProduction } from '../models/electricity-production';
+@Injectable({
+  providedIn: 'root',
+})
+class EnergyService extends __BaseService {
+  static readonly GetElectricityProductionPath = '/api/energy/electricity';
+
+  constructor(
+    config: __Configuration,
+    http: HttpClient
+  ) {
+    super(config, http);
+  }
+
+  /**
+   * @param params The `EnergyService.GetElectricityProductionParams` containing the following parameters:
+   *
+   * - `viewBy`:
+   *
+   * - `userId`:
+   *
+   * @return Success
+   */
+  GetElectricityProductionResponse(params: EnergyService.GetElectricityProductionParams): __Observable<__StrictHttpResponse<Array<ElectricityProduction>>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+    if (params.viewBy != null) __params = __params.set('viewBy', params.viewBy.toString());
+    if (params.userId != null) __params = __params.set('userId', params.userId.toString());
+    let req = new HttpRequest<any>(
+      'GET',
+      this.rootUrl + `/api/energy/electricity`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<Array<ElectricityProduction>>;
+      })
+    );
+  }
+  /**
+   * @param params The `EnergyService.GetElectricityProductionParams` containing the following parameters:
+   *
+   * - `viewBy`:
+   *
+   * - `userId`:
+   *
+   * @return Success
+   */
+  GetElectricityProduction(params: EnergyService.GetElectricityProductionParams): __Observable<Array<ElectricityProduction>> {
+    return this.GetElectricityProductionResponse(params).pipe(
+      __map(_r => _r.body as Array<ElectricityProduction>)
+    );
+  }
+}
+
+module EnergyService {
+
+  /**
+   * Parameters for GetElectricityProduction
+   */
+  export interface GetElectricityProductionParams {
+    viewBy?: 1 | 2 | 3;
+    userId?: string;
+  }
+}
+
+export { EnergyService }

src/app/app.module.ts

@@ -46,6 +46,7 @@ import { SidebarDashboardComponent, SidebarNavItemComponent, SidebarNavDropItemC
 import { ElectricityComponent } from './control-panel/profile/dashboard/energy/electricity/electricity.component';
 import { GasComponent } from './control-panel/profile/dashboard/energy/gas/gas.component';
 import { WaterComponent } from './control-panel/profile/dashboard/energy/water/water.component';
+import { ChartModule } from 'primeng/chart';
 
 
 
@@ -110,6 +111,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     ToastModule,
     DropdownModule,
     PanelMenuModule,
+    ChartModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,

src/app/control-panel/profile/dashboard/dashboard.component.ts

@@ -26,20 +26,24 @@ export class DashboardComponent implements OnInit {
   }
 
   ActivateTab() {
-    this.ActiveTab = this._router.url.match(this.UrlRegex)[0];
+    try {
-    switch (this._router.url.match(this.UrlRegex)[0]) {
+      this.ActiveTab = this._router.url.match(this.UrlRegex)[0];
-      case 'dashboard/energy':
+      switch (this._router.url.match(this.UrlRegex)[0]) {
-        this.ActiveTab = 'energy';
+        case 'dashboard/energy':
-      break;
+          this.ActiveTab = 'energy';
-      case 'dashboard/energy/electricity':
+        break;
-        this.ActiveTab = 'energy/electricity';
+        case 'dashboard/energy/electricity':
-      break;
+          this.ActiveTab = 'energy/electricity';
-      case 'dashboard/energy/gas':
+        break;
-        this.ActiveTab = 'energy/gas';
+        case 'dashboard/energy/gas':
-      break;
+          this.ActiveTab = 'energy/gas';
-      case 'dashboard/energy/water':
+        break;
-        this.ActiveTab = 'energy/water';
+        case 'dashboard/energy/water':
-      break;
+          this.ActiveTab = 'energy/water';
+        break;
+      }
+    } catch (e) {
+      // console.log('error in ActiveTab', e);
     }
   }
 

src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.html

@@ -1 +1,11 @@
-<p>electricity works!</p>
+<p-toast [style]="{marginTop: '80px'}"></p-toast>
+
+<!--<p-chart type="doughnut" [data]="data3"></p-chart>-->
+
+<p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"></p-chart>
+
+<!--<p-chart type="bar" [data]="data2"></p-chart>-->
+
+<p-button label="Year" (onClick)="ChangeData(0)"></p-button>
+<p-button label="Month" (onClick)="ChangeData(1)"></p-button>
+<p-button label="Day" (onClick)="ChangeData(2)"></p-button>

src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.ts

@@ -1,5 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 
+enum ViewBy {
+  Year = 0,
+  Month,
+  Day
+}
+
 @Component({
   selector: 'app-electricity',
   templateUrl: './electricity.component.html',
@@ -7,9 +13,97 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ElectricityComponent implements OnInit {
 
-  constructor() { }
+  data: any;
+  data2: any;
+  data3: any;
+
+  constructor() {
+    this.data = {
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Augustus', 'September', 'October', 'November', 'December'],
+      datasets: [
+          {
+              label: 'Ondulateur 1 - Tot Kwh',
+              data: [65, 59, 80, 81, 56, 55, 40, 48, 54, 84, 78, 79],
+              fill: false,
+              borderColor: '#4bc0c0'
+          },
+          {
+              label: 'Ondulateur 2 - Tot Kwh',
+              data: [28, 48, 40, 19, 86, 27, 90, 15, 47, 85, 79, 110],
+              fill: false,
+              borderColor: '#565656'
+          }
+      ]
+    };
+    this.data2 = {
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+          {
+              label: 'My First dataset',
+              backgroundColor: '#42A5F5',
+              borderColor: '#1E88E5',
+              data: [65, 59, 80, 81, 56, 55, 40]
+          },
+          {
+              label: 'My Second dataset',
+              backgroundColor: '#9CCC65',
+              borderColor: '#7CB342',
+              data: [28, 48, 40, 19, 86, 27, 90]
+          }
+      ]
+    };
+    this.data3 = {
+      labels: ['A', 'B', 'C'],
+      datasets: [
+          {
+              data: [300, 50, 100],
+              backgroundColor: [
+                  "#FF6384",
+                  "#36A2EB",
+                  "#FFCE56"
+              ],
+              hoverBackgroundColor: [
+                  "#FF6384",
+                  "#36A2EB",
+                  "#FFCE56"
+              ]
+          }]
+      };
+   }
 
   ngOnInit() {
   }
 
+  selectData(event) {
+    console.log('teeest');
+    //this.messageService.add({severity: 'info', summary: 'Data Selected', 'detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});
+  }
+
+  ChangeData(viewBy: ViewBy) {
+    switch (viewBy) {
+      case ViewBy.Year:
+
+        break;
+      case ViewBy.Month:
+
+        break;
+      case ViewBy.Day:
+
+        break;
+    }
+    console.log('ecoucou', viewBy);
+    this.data = {
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Augustus', 'September', 'October', 'November', 'December'],
+      datasets: [
+          {
+              label: 'Ondulateur 1',
+              data: [65, 59, 80, 81, 56, 55, 40, 48, 54, 84, 78, 79],
+              fill: false,
+              borderColor: '#4bc0c0'
+          }
+      ]
+    };
+    // Get currentMonth
+  }
+
 }