api general changes

package.json

@@ -28,9 +28,11 @@
     "@types/googlemaps": "^3.37.4",
     "angular-bootstrap-md": "^8.1.1",
     "angular-datatables": "^8.0.0",
+    "angular-mydatepicker": "^0.1.9",
     "arrive": "^2.4.1",
     "bootstrap": "^4.3.1",
     "bootstrap-material-design": "^4.1.2",
+    "c": "^0.1.0",
     "chart.js": "^2.8.0",
     "datatables.net": "^1.10.19",
     "datatables.net-dt": "^1.10.19",
@@ -41,7 +43,9 @@
     "leaflet-routing-machine": "^3.2.12",
     "moment": "^2.24.0",
     "ng2-charts": "^2.3.0",
+    "ngx-animating-datepicker": "^1.2.1",
     "ngx-bootstrap": "^5.1.1",
+    "ngx-daterangepicker": "^1.1.1",
     "perfect-scrollbar": "^1.4.0",
     "popper.js": "^1.15.0",
     "rxjs": "6.5.2",

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { AdminComponent } from './layouts/admin/admin.component';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { MatSelectModule } from '@angular/material/select';
+import { AngularMyDatePickerModule } from 'angular-mydatepicker';
 
 
 import { PluginsModule } from './components/plugins/plugins.module';
@@ -58,6 +59,7 @@ import { LoginComponent } from './components/login/login.component';
     PluginsModule,
     NgxDatatableModule,
     MatSelectModule,
+    AngularMyDatePickerModule
   ],
   providers: [
     //{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },

src/app/components/assets/assets.component.html

@@ -105,7 +105,12 @@
           <button class="btn" [class.btn-success]='isActive[1]' (click)="onMeasureClickWeek()">Semana</button>
           <button class="btn" [class.btn-success]='isActive[2]' (click)="onMeasureClickMonth()">Mes</button>
           <button class="btn" [class.btn-success]='isActive[3]' (click)="onMeasureYear()">Año</button>
-
+          <div class="input-box-container">
+            <input class="input-box" placeholder="Click to select a date" 
+              angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
+              [(ngModel)]="model" [options]="myDpOptions" (dateChanged)="onDateChanged($event)" 
+              #dp="angular-mydatepicker"/>
+          </div>
         </div>
       </div>
     </div>

src/app/components/assets/assets.component.scss

@@ -1,3 +1,20 @@
+.input-box-container {
+  display: inline-block;
+  margin-left: 15px;
+  position: relative;
+  border-collapse: separate;
+  
+  input {
+    margin: 5px 0 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    padding: 6px;
+  }
+}
+
+
+
 table {
   width: 100%;
 }

src/app/components/assets/assets.component.ts

@@ -19,6 +19,7 @@ import { environment } from '@environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { formatDate } from '@angular/common';
 
+import {AngularMyDatePickerDirective,IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';
 
 
 
@@ -44,6 +45,25 @@ export class AssetsComponent implements OnInit {
   chart1: Chart;
   metersKeys:any;
   metersValues:any;
+  view:string;
+
+  //For daterange
+  daysLabels:any = {su: 'Dom', mo: 'Lun', tu: 'Mar', we: 'Mie', th: 'Jue', fr: 'Vie', sa: 'Sab'};
+  monthsLabels:any = { 1: 'Ene', 2: 'Feb', 3: 'Mar', 4: 'Abr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Ago', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dic' };
+  todayBtnTxt:string = 'Hoy';
+  
+  
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: true,
+    dateFormat: 'dd/mm/yyyy',
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels,
+    // other options are here...
+  };
+
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
   // For chartjs
   tsLabels: any[];
   polarLabels: any[];
@@ -97,6 +117,10 @@ export class AssetsComponent implements OnInit {
       else {
 
         this.listAssets = results[0]["assets"];
+        this.route.queryParams.subscribe(params => {
+          this.organizationId = params['id'];
+          console.log(this.organizationId); // Print the parameter to the console.
+        });
       }
       
       this.listEnergyProduced = results[1];   
@@ -108,79 +132,117 @@ export class AssetsComponent implements OnInit {
         text: "No su pudo obtener la informacion"
       });
     });
+    this.view = "month";
+  
+    this.isActive = [false, false, true, false];
+    this.logsService.getEnergyProducedByMonth().toPromise()
+    .then((data: any) => {
+      // Get all the keys(each meter name) of the returned promise
+      this.metersKeys = Object.keys(data["1M"]);
+      
+      // Get all the values according to each index (meter) 
+      this.metersValues = Object.values(data["1M"]).map(sub => sub);
+      let meterKeys2 = Object.keys(this.metersValues);
+      
+      // Re-Initialize Json object
+      this.metersData = [];
 
-    
-      this.isActive = [false, false, true, false];
-      this.logsService.getEnergyProducedByMonth().toPromise()
-      .then((data: any) => {
-        // Get all the keys(each meter name) of the returned promise
-        this.metersKeys = Object.keys(data["1M"]);
-        
-        // Get all the values according to each index (meter) 
-        this.metersValues = Object.values(data["1M"]).map(sub => sub);
-        let meterKeys2 = Object.keys(this.metersValues);
-        
-        // Re-Initialize Json object
-        this.metersData = [];
-
-        // Json object construction for passing its values to the chartjs datasets according to its requirements
-        for (let prop in meterKeys2) { 
-          let label = localStorage.getItem("email") == "inverlec@grupomerelec.com" ? `INVERLEC ${prop}` : this.metersKeys[prop];
-          this.metersData.push({"label": label, backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
-          this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMax, 'dd/MM','es-Es','-0600')).reverse();
-        }
+      // Json object construction for passing its values to the chartjs datasets according to its requirements
+      for (let prop in meterKeys2) { 
+        let label = localStorage.getItem("email") == "inverlec@grupomerelec.com" ? `INVERLEC ${prop}` : this.metersKeys[prop];
+        this.metersData.push({"label": label, backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
+        this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMax, 'dd/MM','es-Es','-0600')).reverse();
+      }
+
+      // Chart draw
+      this.chart1 = new Chart('canvas', {
+        type: 'bar',
+        options: {
+          title: {
+            display: true,
+          },
+          tooltips: {
+            mode: 'index',
+            callbacks: {
+              // Get the total of the energy produced in every point and show it in the hover tooltip
+              label: function (tooltipItem, data) { 
+                var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                var total = 0;
+
+                for (var i = 0; i < data.datasets.length; i++)
+                  total += +data.datasets[i].data[tooltipItem.index];
 
-        // Chart draw
-        this.chart1 = new Chart('canvas', {
-          type: 'bar',
-          options: {
-            title: {
-              display: true,
-            },
-            tooltips: {
-              mode: 'index',
-              callbacks: {
-                // Get the total of the energy produced in every point and show it in the hover tooltip
-                label: function (tooltipItem, data) { 
-                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
-                  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
-                  var total = 0;
-
-                  for (var i = 0; i < data.datasets.length; i++)
-                    total += +data.datasets[i].data[tooltipItem.index];
-
-                  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
-                    return label + " : " + value;
-                  }
-                  else {
-                    return [label + " : " + value, "TOTAL : " + Math.round(total)];
-                  }
+                if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                  return label + " : " + value;
+                }
+                else {
+                  return [label + " : " + value, "TOTAL : " + Math.round(total)];
                 }
               }
-            },
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              xAxes: [{
-                stacked: true,
-              }],
-              yAxes: [{
-                stacked: true
-              }]
             }
           },
-          data: {
-            labels: this.barChartLabels,
-            datasets: 
-              this.metersData,
-          }, 
-        });
-        this.chartjs = true;
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            xAxes: [{
+              stacked: true,
+            }],
+            yAxes: [{
+              stacked: true
+            }]
+          }
+        },
+        data: {
+          labels: this.barChartLabels,
+          datasets: 
+            this.metersData,
+        }, 
       });
       this.chartjs = true;
-      setTimeout(()=>{
-        Swal.close();
-      }, 2700);
+    });
+    this.chartjs = true;
+    setTimeout(()=>{
+      Swal.close();
+    }, 2700);
+
+
+    if (this.myDateInit) {
+      // Initialize to specific date range with IMyDate object. 
+      // Begin date = today. End date = today + 3.
+      let begin: Date = new Date();
+      let end: Date = new Date();
+      begin.setDate(end.getDate() - 31);
+      console.log("if");
+      this.model = {
+        isRange: true, 
+        singleDate: null, 
+        dateRange: {
+          beginDate: {
+            year: begin.getFullYear(), month: begin.getMonth() + 1, day: begin.getDate()
+          },
+          endDate: {
+            year: end.getFullYear(), month: end.getMonth() + 1, day: end.getDate()
+          }
+        }
+      };
+    }
+    else {
+      // Initialize to specific date range with a javascript date object. 
+      // Begin date = today. End date = today + 3.
+      let begin: Date = new Date();
+      let end: Date = new Date();
+      end.setDate(end.getDate() + 3);
+      console.log("else");
+      this.model = {
+        isRange: true, 
+        singleDate: null, 
+        dateRange: {
+          beginJsDate: begin,
+          endJsDate: end
+        }
+      };
+    }
 
   }
  
@@ -192,12 +254,36 @@ export class AssetsComponent implements OnInit {
       return false;
     }
   }
-
-  onChangeObj(event) {
-    
+  
+  onDateChanged(event: IMyDateModel) {
+    console.log('onDateChanged(): ', event);
+    let beginDate = `${event.dateRange.beginDate.year}-${event.dateRange.beginDate.month}-${event.dateRange.beginDate.day}`;
+    let endDate = `${event.dateRange.endDate.year}-${event.dateRange.endDate.month}-${event.dateRange.endDate.day}`;
+
+    switch (this.view)
+    { 
+      case "day": 
+        console.log("day");
+        this.onMeasureClickDay(beginDate);
+        break; 
+      case "week": 
+        console.log("week");
+        this.onMeasureClickWeek(beginDate, endDate);
+        break; 
+      case "month": 
+        console.log("month");
+        this.onMeasureClickMonth(beginDate, endDate);
+        break; 
+      case "year":
+        console.log("year");
+        this.onMeasureYear(beginDate, endDate);
+        break;
+      default: 
+        console.log("nada");
+    } 
   }
 
-  onMeasureClickDay(): void {
+  onMeasureClickDay(measureDate?:string): void {
     Swal.fire({
       allowOutsideClick: false,
       type: 'info',
@@ -205,6 +291,8 @@ export class AssetsComponent implements OnInit {
     });
     Swal.showLoading();
     this.isActive = [true, false, false, false];
+    this.view = "day";
+
     this.chart1.destroy();
 
      
@@ -280,7 +368,7 @@ export class AssetsComponent implements OnInit {
     }, 2700)
   }
 
-  onMeasureClickWeek(): void {;
+  onMeasureClickWeek(measureDateBegin?:string, measureDateEnd?:string): void {;
 
     Swal.fire({
       allowOutsideClick: false,
@@ -288,6 +376,7 @@ export class AssetsComponent implements OnInit {
       text: 'Espere por favor...'
     });
     Swal.showLoading();
+    this.view = "week";
     this.isActive = [false, true, false, false];
     this.chart1.destroy();
  
@@ -364,13 +453,14 @@ export class AssetsComponent implements OnInit {
     }, 2700)   
   }
 
-  onMeasureClickMonth(): void {
+  onMeasureClickMonth(measureDateBegin?:string, measureDateEnd?:string): void {
     Swal.fire({
       allowOutsideClick: false,
       type: 'info',
       text: 'Espere por favor...'
     });
     Swal.showLoading();
+    this.view = "month";
     this.isActive = [false, false, true, false];
     this.chart1.destroy();
      
@@ -448,7 +538,7 @@ export class AssetsComponent implements OnInit {
 
   }
 
-  onMeasureYear(): void {
+  onMeasureYear(measureDateBegin?:string, measureDateEnd?:string): void {
 
     Swal.fire({
       allowOutsideClick: false,
@@ -456,7 +546,7 @@ export class AssetsComponent implements OnInit {
       text: 'Espere por favor...'
     });
     Swal.showLoading();
-
+    this.view = "year";
     this.isActive = [false, false, false, true];  
     this.chart1.destroy();
 

src/app/components/dashboard/dashboard.component.html

@@ -22,7 +22,7 @@
             <h4 class="font-weight-normal mb-3">Capacidad instalada total
               <i class="mdi mdi-chart-line mdi-24px float-right"></i>
             </h4>
-            <h2 class="mb-3">{{totalMetersInstalled}} kW</h2>
+            <h2 class="mb-3">{{sumarize}} kW</h2>
           </div>
         </div>
       </div>

src/app/components/dashboard/dashboard.component.ts

@@ -22,18 +22,23 @@ export class DashboardComponent implements OnInit {
 
 
   listData:any;
+  
   rows = [];
   markers: Layer[] = [];
   points: LatLng[] = [];
 
-  listOrganizations: any;
+  listAssets: any;
   error:boolean;
   plantId: string;
   plant:any;
   sub: any;
   plantNotFound: boolean;
   selectedPlant: any;
+  meterKeys:any;
+  meterKeys2:any;
+  assetKeys:any;
 
+  sumarize:number = 0;
 
   totalMetersInstalled:string;
 
@@ -87,8 +92,29 @@ export class DashboardComponent implements OnInit {
         text: "No su pudo obtener la informacion"
       });
     });
-
-    if (localStorage.getItem("installedCapacityTotal_kW") == undefined){
+    
+    this.plantsService.getAllAssets().subscribe(res => {
+      this.listAssets = res["data"];
+      this.assetKeys = Object.keys(this.listAssets);
+
+      for (let prop in this.assetKeys){
+        this.meterKeys2 = Object.keys(this.listAssets.map(item => item["meters_installed"])[prop]);
+        for (let prop2 in this.meterKeys2){
+          this.sumarize += this.listAssets.map(item => item["meters_installed"])[prop].map(response => response["installedCapacity_kW"])[prop2];
+          //this.totalMetersInstalled = this.sumarize.toString();
+          //localStorage.setItem("installedCapacityTotal_kW", this.totalMetersInstalled);
+        }
+      }      
+    }, (err) => {
+      Swal.fire({
+        type: 'error',
+        title: 'Error en el servidor',
+        text: "No su pudo obtener la informacion"
+      });
+    });
+  
+    
+    /*if (localStorage.getItem("installedCapacityTotal_kW") == undefined){
       this.plantsService.getInstalledCapacity().subscribe(res => {
         this.totalMetersInstalled = res["installedCapacityTotal_kW"];
         localStorage.setItem("totalMetersInstalled", this.totalMetersInstalled);
@@ -96,7 +122,7 @@ export class DashboardComponent implements OnInit {
     }
     else {
       this.totalMetersInstalled = localStorage.getItem("installedCapacityTotal_kW");
-    }
+    }*/
     
   }
 

src/app/components/organizations/organizations.component.html

@@ -0,0 +1,89 @@
+<h2 class="floating-title">{{title}}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12">
+          <div class="align-container">
+
+            <div class="input-box-container">
+              <input class="input-box" placeholder="Click to select a date" 
+                angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
+                [(ngModel)]="model" [options]="myDpOptions" 
+                #dp="angular-mydatepicker"/>
+            </div>
+
+            <!--
+              <ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t">
+                </ngb-datepicker>
+                
+                <ng-template #t let-date let-focused="focused">
+                  <span class="custom-day"
+                        [class.focused]="focused"
+                        [class.range]="isRange(date)"
+                        [class.faded]="isHovered(date) || isInside(date)"
+                        (mouseenter)="hoveredDate = date"
+                        (mouseleave)="hoveredDate = null">
+                    {{ date.day }}
+                  </span>
+                </ng-template>
+                
+                <hr>
+                <pre>From: {{ fromDate | json }} </pre>
+                <pre>To: {{ toDate | json }} </pre>
+                
+-->
+            <h4><b>Listado de organizaciones</b></h4>
+            <div class="example-container mat-elevation-z8">
+              <div class="example-table-container">
+          
+                <table mat-table [dataSource]="dataSource" class="example-table">
+          
+                  <!-- Name Column -->
+                  <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef>Organizacion</th>
+                    <td mat-cell *matCellDef="let row">{{row.name}}</td>
+                  </ng-container>
+          
+                  <!-- State Column -->
+                  <ng-container matColumnDef="contactName">
+                    <th mat-header-cell *matHeaderCellDef>Nombre de Contacto</th>
+                    <td mat-cell *matCellDef="let row">{{row.contactName}}</td>
+                  </ng-container>
+
+                  <!-- Country Column -->
+                  <ng-container matColumnDef="country">
+                    <th mat-header-cell *matHeaderCellDef>País</th>
+                    <td mat-cell *matCellDef="let row">{{row.country}}</td>
+                  </ng-container>
+                  
+                  <!-- City Column -->
+                  <ng-container matColumnDef="city">
+                    <th mat-header-cell *matHeaderCellDef>Ciudad</th>
+                    <td mat-cell *matCellDef="let row">{{row.city}}</td>
+                  </ng-container>
+          
+                  <!--  Column -->
+                  <ng-container matColumnDef="id">
+                    <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+                    <td mat-cell *matCellDef="let row">
+                      <button class="btn btn-primary btn-sm">
+                        Editar
+                      </button>
+                    </td>
+                  </ng-container>
+          
+                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table>
+                <mat-paginator [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
+              </div>
+            </div>
+          </div>
+      
+      </div>
+      <br>
+      
+    </div>          
+  </div>
+</div>

src/app/components/organizations/organizations.component.scss

@@ -0,0 +1,39 @@
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.example-loading-shade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 56px;
+  right: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-rate-limit-reached {
+  color: #980000;
+  max-width: 360px;
+  text-align: center;
+}
+
+/* Structure */
+.example-container {
+  position: relative;
+  min-height: 200px;
+}
+
+.example-table-container {
+  position: relative;
+  //max-height: 400px;
+  overflow: auto;
+}

src/app/components/organizations/organizations.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrganizationsComponent } from './organizations.component';
+
+describe('OrganizationsComponent', () => {
+  let component: OrganizationsComponent;
+  let fixture: ComponentFixture<OrganizationsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrganizationsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrganizationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/organizations/organizations.component.ts

@@ -0,0 +1,120 @@
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { Organization } from "@app/models/organization";
+import { OrganizationsService } from "@app/services/organizations.service";
+
+import {HttpClient} from '@angular/common/http';
+import { Plant } from 'src/app/models/plant';
+import { PlantsService } from 'src/app/services/plants.service';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {merge, Observable, of as observableOf} from 'rxjs';
+import {catchError, map, startWith, switchMap} from 'rxjs/operators';
+import {MatTableDataSource} from '@angular/material/table';
+
+import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
+
+import {AngularMyDatePickerDirective,IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';
+
+
+@Component({
+  selector: 'app-organizations',
+  templateUrl: './organizations.component.html',
+  styleUrls: ['./organizations.component.scss']
+})
+export class OrganizationsComponent implements OnInit {
+
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: true,
+    dateFormat: 'dd/mm/yyyy'
+    // other options are here...
+  };
+
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+
+  title:string = "Organizaciones";
+  hoveredDate: NgbDate;
+
+  fromDate: NgbDate;
+  toDate: NgbDate;
+  
+  
+  displayedColumns: string[] = ['name','contactName', 'country', 'city', 'id'];
+  //displayedColumns: string[] = ['state'];
+
+  listData: Organization[] = [];
+  dataSource = new MatTableDataSource(this.listData);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
+
+
+  constructor(
+    private orgService: OrganizationsService,
+    private calendar: NgbCalendar) {
+      this.fromDate = calendar.getToday();
+      this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
+    }
+
+  ngOnInit() {
+    this.orgService.getListOrganizations().subscribe(res =>
+      this.listData = res
+    );
+    this.dataSource.data = this.listData;
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+
+    if (this.myDateInit) {
+      // Initialize to specific date range with IMyDate object. 
+      // Begin date = today. End date = today + 3.
+      let begin: Date = new Date();
+      let end: Date = new Date();
+      end.setDate(end.getDate() + 3);
+
+      this.model = {
+        isRange: true, 
+        singleDate: null, 
+        dateRange: {
+          beginDate: {
+            year: begin.getFullYear(), month: begin.getMonth() + 1, day: begin.getDate()
+          },
+          endDate: {
+            year: end.getFullYear(), month: end.getMonth() + 1, day: end.getDate()
+          }
+        }
+      };
+    }
+    else {
+      // Initialize to specific date range with a javascript date object. 
+      // Begin date = today. End date = today + 3.
+      let begin: Date = new Date();
+      let end: Date = new Date();
+      end.setDate(end.getDate() + 3);
+
+      this.model = {
+        isRange: true, 
+        singleDate: null, 
+        dateRange: {
+          beginJsDate: begin,
+          endJsDate: end
+        }
+      };
+    }
+  }
+
+
+  
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+}

src/app/components/shared/sidebar/sidebar.component.ts

@@ -11,6 +11,7 @@ declare interface RouteInfo {
 }
 export const ROUTES: RouteInfo[] = [
     { path: '/dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
+    { path: '/organizations', title: 'Organizaciones',  icon:'location_city', class: '' },
     { path: '/assets', title: 'Plantas',  icon: 'wb_sunny', class: '' },
     //{ path: '/reports', title: 'Reportes',  icon: 'assignment', class: '' },
     { path: '/profile', title: 'Perfil',  icon: 'person', class: '' },

src/app/components/tests/tests.component.html

@@ -0,0 +1,53 @@
+<h2 class="floating-title">{{title}}</h2>
+<div class="main-content">
+  <div class="row align-container">
+    <div class="col-12">    
+      <label for="sel3">Plantas</label>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-sm-4">
+      <div class="align-container">
+        <select class="custom-select" (change)="onChangeObj($event)" name="sel3">
+          <option *ngFor="let item of listAssets" [selected]="item.id===organizationId" [value]="item.id" >{{item.name}}</option>
+        </select>
+      </div>
+      <br>
+    </div>
+
+  </div>
+
+  <!-- Chartjs potency generation graphic -->
+  <div class="row align-container">
+    <div class="col-lg-12 col-md-12 col-sm-12">
+      <div class="widget">
+        <div class="mini-stats">
+          <!--
+          <div class="chart-container" style="display:none;">
+            <canvas baseChart #baseChart="base-chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
+              [legend]="barChartLegend" [chartType]="barChartType"></canvas>
+          </div>
+          -->
+
+          <div class="chart-container" >
+            <canvas id="canvas">{{ chart1 }}</canvas>
+          </div>
+
+          <p>Seleccione un rango de visualización</p>
+
+          <button class="btn" [class.btn-success]='isActive[0]' (click)="onMeasureClickRange('day')">Día</button>
+          <button class="btn" [class.btn-success]='isActive[1]' (click)="onMeasureClickRange('week')">Semana</button>
+          <button class="btn" [class.btn-success]='isActive[2]' (click)="onMeasureClickRange('month')">Mes</button>
+          <button class="btn" [class.btn-success]='isActive[3]' (click)="onMeasureClickRange('year')">Año</button>
+          <div class="input-box-container">
+            <input class="input-box" placeholder="Click to select a date" 
+              angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
+              [(ngModel)]="model" [options]="myDpOptions" (dateChanged)="onDateChanged($event)" 
+              #dp="angular-mydatepicker"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>

src/app/components/tests/tests.component.scss

@@ -0,0 +1,171 @@
+.input-box-container {
+  display: inline-block;
+  margin-left: 15px;
+  position: relative;
+  border-collapse: separate;
+  
+  input {
+    margin: 5px 0 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    padding: 6px;
+  }
+}
+
+
+
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.example-loading-shade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 56px;
+  right: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-rate-limit-reached {
+  color: #980000;
+  max-width: 360px;
+  text-align: center;
+}
+
+/* Structure */
+.example-container {
+  position: relative;
+  min-height: 200px;
+}
+
+.example-table-container {
+  position: relative;
+  //max-height: 400px;
+  overflow: auto;
+}
+
+.energy-stats {
+  height: 122px;
+}
+
+.widget {
+  background: #ffffff none repeat scroll 0 0;
+  float: left;
+  margin-top: 14px;
+  position: relative;
+  width: 100%;
+  border-radius: 5px;
+
+  .chart-padding {
+    padding: 10px;
+  }
+
+  .mini-stats {
+    background: #ffffff none repeat scroll 0 0;
+    border-radius: 5px;
+    float: left;
+    padding: 10px 15px;
+    width: 100%;
+    height: inherit;
+
+    p {
+      color: #878888;
+      //display: block;
+      font-size: 14px;
+      line-height: 35px;
+      margin: 6px 0 0;
+      text-transform: uppercase;
+      width: auto;
+    }
+
+    span {
+      border: 1px solid;
+      border-radius: 50%;
+      color: #fff;
+      //float: left;
+      font-size: 35px;
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      width: 60px;
+      position: absolute;
+      right: 20px;
+      bottom: 15px;
+      //display: block;
+    }
+
+    h3 {
+      margin: 10px 0 0;
+      font-size: 2rem;
+      font-weight: 400;
+    }
+
+  }
+
+  .enviroment-stats {
+    background: #ffffff none repeat scroll 0 0;
+    border-radius: 5px;
+    padding: 20px;
+    display: table;
+
+    .enviromental-icon {
+      height: 128px;
+      display: table-cell;
+      vertical-align: middle;
+    }
+
+    .enviromental-text {
+      line-height: 1.2;
+      display: table-cell;
+      font-size: 1rem;
+      text-transform: initial;
+      padding-left: 10px;
+      vertical-align: middle;
+
+      span {
+        float: none;
+        height: auto;
+        margin: 0;
+        width: auto;
+        display: inline;
+        border: none;
+        font-size: 1.2rem;
+        font-weight: bold;
+        color: #386641;
+        vertical-align: middle;
+      }
+    }
+
+  }
+}
+
+.chart-container {
+  display: block; 
+  height:40vh; 
+  position: relative;
+}
+
+
+
+@media screen and (min-width: 960px) {
+  .mini-stats {
+    
+    p,
+    span,
+    h3 {
+      display: block;
+    }
+
+  }
+}

src/app/components/tests/tests.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestsComponent } from './tests.component';
+
+describe('TestsComponent', () => {
+  let component: TestsComponent;
+  let fixture: ComponentFixture<TestsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/tests/tests.component.ts

@@ -0,0 +1,335 @@
+import { Component, OnInit, ViewChild,OnChanges } from '@angular/core';
+import { Chart, ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Label, BaseChartDirective } from 'ng2-charts';
+
+import { MeasuresService } from 'src/app/services/measures.service';
+import { PlantsService } from 'src/app/services/plants.service';
+import { LogsService } from 'src/app/services/logs.service';
+
+import { OrganizationsService } from '@app/services/organizations.service';
+
+import { ActivatedRoute } from '@angular/router';
+import { Observable, forkJoin } from 'rxjs';
+
+
+import * as moment from 'moment';
+
+import Swal from 'sweetalert2';
+import { environment } from '@environments/environment';
+import { HttpClient } from '@angular/common/http';
+import { formatDate } from '@angular/common';
+
+import {AngularMyDatePickerDirective,IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';
+
+
+
+@Component({
+  selector: 'app-tests',
+  templateUrl: './tests.component.html',
+  styleUrls: ['./tests.component.scss']
+})
+
+
+export class TestsComponent implements OnInit {
+ 
+  title = "Plantas";
+
+  organizationId:string;
+  listAssets:any;
+  listEnergyProduced:any;
+  error:boolean;
+  errorMessage:string;
+  errortest:any;
+  chartjs:boolean;
+  chart1: Chart;
+  metersKeys:any;
+  metersValues:any;
+  view:string;
+
+
+  //For daterange
+  daysLabels:any = {su: 'Dom', mo: 'Lun', tu: 'Mar', we: 'Mie', th: 'Jue', fr: 'Vie', sa: 'Sab'};
+  monthsLabels:any = { 1: 'Ene', 2: 'Feb', 3: 'Mar', 4: 'Abr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Ago', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dic' };
+  todayBtnTxt:string = 'Hoy';
+  
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: 'dd/mm/yyyy',
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels,
+    // other options are here...
+  };
+
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  // For chartjs
+  tsLabels: any[];
+  barChartColors:any = ['#3c8dbc', '#00a65a', '#f56954']
+  metersData:any;
+  initialDate:any;
+
+
+  public barChartType: ChartType;
+  public barChartLegend:boolean;
+  public barChartLabels: Label[];
+  public barChartOptions: ChartOptions;
+  public barChartData: ChartDataSets[];
+
+  isActive:[boolean,boolean,boolean,boolean]; //Activated param (chart)
+
+  constructor(
+    private orgService: OrganizationsService, 
+    private route: ActivatedRoute, 
+    private plantsService: PlantsService,
+    private http: HttpClient,
+    private logsService: LogsService,
+    private measService: MeasuresService) {
+      
+      Swal.fire({
+        allowOutsideClick: false,
+        type: 'info',
+        text: 'Espere por favor...'
+      });
+      Swal.showLoading();
+      
+  }
+
+  @ViewChild("baseChart",null) chart: BaseChartDirective;
+
+  ngOnInit() {
+    
+    let plants = this.plantsService.getAllAssets();
+
+    let energy_produced = this.plantsService.getAssetsProducedEnergy();
+
+    // Default date is today and set it on a string var and initialize dateRange plugin
+    this.initialDate = new Date().toISOString().slice(0, 10);
+    if (this.myDateInit) {
+      let begin: Date = new Date();
+      this.model = {
+        isRange: false, 
+        singleDate: {
+          date: {
+            year: begin.getFullYear(), month: begin.getMonth() + 1, day: begin.getDate()
+          }
+        }
+      };
+    }
+    
+    // Observable of two objects
+    forkJoin([plants, energy_produced]).subscribe(results => {
+      console.log(results[0]["data"]);
+      if (localStorage.getItem("email") == "inverlec@grupomerelec.com"){
+        this.listAssets = [
+          {
+            name: "Inversiones MERELEC S.A de C.V",
+            id: '5d70330cb288f25b679c68a8'
+          },
+          {
+            name: "Inversiones MERELEC 2 S.A de C.V",
+            id: '5d70330cb288f25b679c68n8'
+          },          
+        ]
+
+        this.view = "month";
+        this.onMeasureClickRange(this.view, this.initialDate);
+
+        console.log(this.listAssets[0]["id"]);
+      }
+      else {
+        this.listAssets = results[0]["data"];
+        console.log(this.listAssets[0]["id"]);
+        this.view = "month";
+        this.onMeasureClickRange(this.view, this.initialDate);
+      }
+      
+      // Energy produced given an assetID
+      this.listEnergyProduced = results[1];      
+    },
+    (err) => {
+      Swal.fire({
+        type: 'error',
+        title: 'Error en el servidor',
+        text: "No su pudo obtener la informacion"
+      });
+    });    
+
+    this.chartjs = true;
+    setTimeout(()=>{
+      Swal.close();
+    }, 2700);
+ 
+  }
+ 
+  // Default check asset dropdown if a value is equal to an assetID
+  isSelected(){
+    if(this.organizationId!=undefined){
+      return true;
+    }
+    else{
+      return false;
+    }
+  }
+
+  // Trigger again the chart with the selected assetID
+  onChangeObj(event:any) {
+    this.onMeasureClickRange(this.view, this.initialDate, event.target.value);
+  }
+
+  // Change the date range of the chart, according to the selected view (daily, weekly, ...)
+  onDateChanged(event: IMyDateModel) {
+    let endDate = `${event.singleDate.date.year}-${event.singleDate.date.month}-${event.singleDate.date.day}`;
+    switch (this.view)
+    { 
+      case "day": 
+        this.onMeasureClickRange(this.view, endDate);
+        break; 
+      case "week": 
+        this.onMeasureClickRange(this.view, endDate);
+        break; 
+      case "month": 
+        this.onMeasureClickRange(this.view, endDate);
+        break; 
+      case "year":
+        this.onMeasureClickRange(this.view, endDate);
+        break;
+      default: 
+        console.log("nada");
+    } 
+  }
+
+  // Draw a measure chart using chartjs, given some params, view, for daily, weekly, monthly or yearly measures;
+  // measureDate, for a date range given a view and a paramID, for an specific assetID selected in the dropdown  
+  onMeasureClickRange(view:string, measureDate?:string, paramId?:string): void {
+    Swal.fire({
+      allowOutsideClick: false,
+      type: 'info',
+      text: 'Espere por favor...'
+    });
+    Swal.showLoading();
+    this.view = view;
+
+    // Chart (re)initialize, to prevent double load on changing range or views
+    if (this.chart1 != undefined){
+      this.chart1.destroy();
+    }
+    this.chart1 = undefined;
+    
+    let dateRange:string;
+    if (measureDate === undefined){
+      dateRange = this.initialDate;
+    }
+    else {
+      dateRange = measureDate;
+    }
+
+    // Set default assetID if paramId doesn't come in the function call
+    let assetId:string;
+    if (paramId === undefined){
+      assetId = this.listAssets[0]["id"]; // Grab the first object
+    }
+    else {
+      assetId = paramId;
+    }
+    
+    // Select an interval according to the API permitted param
+    let interval:string;
+    switch (view)
+    { 
+      case "day": 
+        interval = "1D";
+        this.isActive = [true, false, false, false];
+        break; 
+      case "week": 
+        interval = "7D";
+        this.isActive = [false, true, false, false];
+        break; 
+      case "month":
+        interval = "1M";
+        this.isActive = [false, false, true, false];
+        break; 
+      case "mtd": //TO DO
+        interval = "MTD";
+        break;
+      case "year":
+        interval = "YTD";
+        this.isActive = [false, false, false, true];
+        break;
+      default: 
+        console.log("nada");
+    }  
+
+    this.logsService.getEnergyProducedByParams(assetId,interval,dateRange).toPromise()
+    .then((data: any) => {
+      this.metersData = [];
+      
+      this.metersKeys = Object.keys(data["data"][0]["dataset"]);
+
+      // Get all the values according to each index (meter) 
+      this.metersValues = Object.values(data["data"][0]["dataset"]);
+
+      let meterKeys2 = Object.keys(this.metersValues);
+
+      for (let prop in meterKeys2) { 
+        let label = localStorage.getItem("email") == "inverlec@grupomerelec.com" ? `INVERLEC ${prop}` : this.metersValues[prop]["label"];
+        //let keys = Object.keys();
+        let test = Object.values(this.metersValues[prop]["data"].map(obj => obj.total_energy_kWh).reverse())
+
+        this.metersData.push({"label": label, backgroundColor: this.barChartColors[prop], data: test });
+        this.barChartLabels = this.metersValues[prop]["data"].map(obj => formatDate(obj.dateMax, 'dd/MM','es-Es','-0600')).reverse();
+      }
+
+      this.chart1 = new Chart('canvas', {
+        type: 'bar',
+        options: {
+          title: {
+            display: true,
+          },
+          tooltips: {
+            mode: 'index',
+            callbacks: {
+              // Get the total of the energy produced in every point and show it in the hover tooltip
+              label: function (tooltipItem, data) { 
+                var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                var total = 0;
+
+                for (var i = 0; i < data.datasets.length; i++)
+                  total += +data.datasets[i].data[tooltipItem.index];
+
+                if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                  return label + " : " + value;
+                }
+                else {
+                  return [label + " : " + value, "TOTAL : " + Math.round(total)];
+                }
+              }
+            }         
+          },
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            xAxes: [{
+              stacked: true,
+            }],
+            yAxes: [{
+              stacked: true
+            }]
+          }
+        },
+        data: {
+          labels: this.barChartLabels,
+          datasets: this.metersData,
+        }, 
+      });
+      this.chartjs = true;
+    });
+
+    setTimeout(()=>{
+      Swal.close();
+    }, 1200)
+
+  }
+
+}

src/app/data/organizations.data.ts

@@ -0,0 +1,94 @@
+import { Organization } from 'src/app/models/organization';
+    
+export const organizationsData: Organization[] = [
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Exozent',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Norsup',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'San Miguel',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Digique',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'San Salvador',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Zeam',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'La Union',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Bitrex',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Polaria',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'San Miguel',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Velity',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'La Union',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Farmex',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'San Vicente',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Wazzu',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'San Vicente',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  },
+  {
+    id: "5d70319fb288f25b679c683c",
+    name: 'Olympix',
+    contactName: "Rodrigo O'Byrne",
+    contactNumber: "+503 7555-1234",
+    country: 'El Salvador',
+    city: 'San Miguel',
+    address: 'KM 15 CARRETERA AL AEROPUERTO SANTO TOMAS, 11015'
+  }
+];

src/app/layouts/admin/admin.module.ts

@@ -4,7 +4,10 @@ import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LeafletModule } from "@asymmetrik/ngx-leaflet";
+
 import { ChartsModule } from 'ng2-charts';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { AngularMyDatePickerModule } from 'angular-mydatepicker';
 
 
 
@@ -12,6 +15,8 @@ import { AdminLayoutRoutes } from './admin.routing';
 import { DashboardComponent } from '../../components/dashboard/dashboard.component';
 import { ProfileComponent } from '../../components/profile/profile.component';
 import { AssetsComponent } from '../../components/assets/assets.component';
+import { OrganizationsComponent } from '../../components/organizations/organizations.component';
+import { TestsComponent } from '../../components/tests/tests.component';
 
 import { PluginsModule } from '../../components/plugins/plugins.module';
 
@@ -49,12 +54,16 @@ import {
     MatSortModule,
     PluginsModule,
     LeafletModule,
-    ChartsModule
+    ChartsModule,
+    NgbModule,
+    AngularMyDatePickerModule
   ],
   declarations: [
     DashboardComponent,
     ProfileComponent,
     AssetsComponent,
+    OrganizationsComponent,
+    TestsComponent
   ]
 })
 

src/app/layouts/admin/admin.routing.ts

@@ -3,6 +3,9 @@ import { Routes } from '@angular/router';
 import { DashboardComponent } from '../../components/dashboard/dashboard.component';
 import { ProfileComponent } from '../../components/profile/profile.component';
 import { AssetsComponent } from '@app/components/assets/assets.component';
+import { OrganizationsComponent } from '@app/components/organizations/organizations.component';
+import { TestsComponent } from '@app/components/tests/tests.component';
+
 /*
 import { TableListComponent } from '../../table-list/table-list.component';
 import { TypographyComponent } from '../../typography/typography.component';
@@ -24,7 +27,14 @@ export const AdminLayoutRoutes: Routes = [
     component: AssetsComponent,
     data: {title: "Listado de plantas"}
   },
-
+  { path: 'organizations', 
+    component: OrganizationsComponent,
+    data: {title: "Listado de organizaciones"}
+  },
+  { path: 'tests', 
+    component: TestsComponent,
+    data: {title: "Listado de tst"}
+  }
   /*
   { path: 'table-list',     component: TableListComponent },
   { path: 'typography',     component: TypographyComponent },

src/app/models/organization.ts

@@ -4,7 +4,7 @@ export interface Organization {
     id: string;
     name: string;
     contactName: string;
-    contactNumber: number;
+    contactNumber: string;
     country: string;
     city: string;
     address: string;

src/app/services/logs.service.ts

@@ -18,6 +18,17 @@ export class LogsService {
   constructor(private http: HttpClient) {
   }
 
+  getEnergyProducedByParams(id:string, interval:string, date:string) {
+    return this.http.get(`${environment.productionApiUrl}/asset/energyProducedByInterval/${id}/${interval}/${date}`)
+    .pipe(
+      timeout(this.time),
+      map(response =>{
+        return response;
+      }),
+      catchError(this.errorHandl)
+    )
+  }
+
   getEnergyProducedByDay() {
     return this.http.get(`${environment.apiUrl}/logs/energyProduced/1D`)
     .pipe(

src/app/services/organizations.service.ts

@@ -5,6 +5,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { retry, catchError, map, timeout } from 'rxjs/operators';
 
 import { environment } from '@environments/environment';
+import { organizationsData } from '../data/organizations.data';
 
 
 @Injectable({
@@ -12,7 +13,7 @@ import { environment } from '@environments/environment';
 })
 export class OrganizationsService {
 
-  private listData: Organization[];
+  private listData: Organization[] = organizationsData;
 
   constructor(private http: HttpClient) {}
 
@@ -23,6 +24,10 @@ export class OrganizationsService {
     })
   }
  
+  getListOrganizations() {
+    return observableOf(this.listData);
+  }
+
   getOrganizations(): Observable<any> {
     return this.http.get<any>(`${environment.apiUrl}/organizations`)
     .pipe(

src/app/services/plants.service.ts

@@ -34,6 +34,16 @@ export class PlantsService extends PlantData {
     )
   }
 
+  getAllAssets(){
+    return this.http.get(`${environment.productionApiUrl}/asset`)
+    .pipe(
+      map(response => {
+        return response;
+      }),
+      catchError(this.errorHandl)
+    )
+  }
+
   getAssets() {
     return this.http.get(`${environment.apiUrl}/assets`)
     .pipe(

src/environments/environment.ts

@@ -5,6 +5,7 @@
 export const environment = {
     production: false,
     apiUrl: 'http://192.168.98.140:8000',
+    productionApiUrl: 'http://192.168.98.10:8888',
     appID: '55899b9ea53834f2736b65a3582b734b',
     gKey: '',
     config: {