Added certificates endopoint to card, permissions for admin, visual adjustments

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

@@ -19,7 +19,7 @@
                 *ngFor="let item of listAssets"
                 [selected]="item.id === assetID"
                 [value]="item.id"
-                >{{ userLevel == 3 ? "PLANTA INVERLEC" : item.name }}</option
+                >{{ userLevel == 0 ? "PLANTA INVERLEC" : item.name }}</option
               >
             </select>
           </div>
@@ -142,21 +142,23 @@
                   check_box
                 </i>
                 Total de certificados de origen:
-                <span class="cdo-total">414</span>
+                <span class="cdo-total">{{ totalCertificates }}</span>
               </div>
               <div class="cdo-items">
                 <i class="material-icons">
                   offline_bolt
                 </i>
                 Fecha de último CdO generado:
-                <span class="cdo-date">17/01/2020</span>
+                <span class="cdo-date">
+                  {{ lastGeneratedDateCertificate }}
+                </span>
               </div>
               <div class="cdo-items">
                 <i class="material-icons ">
                   money
                 </i>
                 Monto total por CdO generados:
-                <span class="cdo-money">$4140</span>
+                <span class="cdo-money">${{ totalCertificatesValue }}</span>
               </div>
             </div>
           </div>

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

@@ -128,9 +128,7 @@ table {
   i.material-icons {
     font-size: 16px;
   }
-  span {
-    font-weight: bold;
-  }
+
   span.cdo-money {
     font-size: 1.3rem;
     color: #47a44b;
@@ -143,6 +141,12 @@ table {
     font-size: 1.2rem;
     color: #ee964b;
   }
+  span {
+    font-weight: bold;
+    @media screen and (max-width: 420px) {
+      font-size: 1rem !important;
+    }
+  }
 }
 
 .cert-title {
@@ -152,6 +156,10 @@ table {
     @media screen and (max-width: 800px) {
       font-size: 1.3rem;
     }
+    @media screen and (max-width: 420px) {
+      font-size: 1rem;
+      font-weight: bold;
+    }
   }
 }
 
@@ -159,6 +167,10 @@ table {
   position: absolute;
   right: 15px;
   top: 10px;
+  @media screen and (max-width: 420px) {
+    right: 5px;
+    top: 5px;
+  }
 }
 
 .environment-meters {

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

@@ -14,11 +14,7 @@ import Swal from "sweetalert2";
 import { HttpClient } from "@angular/common/http";
 import { formatDate, DatePipe } from "@angular/common";
 import { AuthService } from "@app/services/auth2.service";
-import {
-  AngularMyDatePickerDirective,
-  IAngularMyDpOptions,
-  IMyDateModel
-} from "angular-mydatepicker";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
 import printJS from "print-js";
 import { ExportType, ExcelOptions, Options } from "mat-table-exporter";
 import * as $ from "jquery";
@@ -47,7 +43,6 @@ export class AssetsComponent implements OnInit {
   eProduced: any;
   error: boolean;
   errorMessage: string;
-  errortest: any;
   metersKeys: any;
   metersValues: any;
   view: string;
@@ -75,6 +70,11 @@ export class AssetsComponent implements OnInit {
   initialLoad: boolean = true;
   metersInstalled: boolean = true;
 
+  // Certificates
+  totalCertificates: number = 0;
+  lastGeneratedDateCertificate: string = "N/D";
+  totalCertificatesValue: number = 0;
+
   // For daterange
   daysLabels: any = {
     su: "Dom",
@@ -99,7 +99,6 @@ export class AssetsComponent implements OnInit {
     11: "Nov",
     12: "Dic"
   };
-  todayBtnTxt: string = "Hoy";
   myDpOptions: IAngularMyDpOptions = {
     dateRange: false,
     dateFormat: "dd/mm/yyyy",
@@ -563,6 +562,21 @@ export class AssetsComponent implements OnInit {
           this.savings_logs_data.push(this.savings_logs[savingDate]["ahorro"]);
         }
 
+        this.logsService
+          .getAssetCertificates(assetId)
+          .toPromise()
+          .then((res: any) => {
+            this.totalCertificates = res["data"]["cantidad"];
+            this.lastGeneratedDateCertificate =
+              formatDate(
+                res["data"]["ultimo_generado"],
+                "dd/MM/yyyy",
+                "es-Es",
+                "-0600"
+              ) || "N/D";
+            this.totalCertificatesValue = res["data"]["valor_total"];
+          });
+
         // Get the measures according to the meters, given the params required
         this.logsService
           .getEnergyProducedByParams(assetId, interval, dateRange)
@@ -611,7 +625,7 @@ export class AssetsComponent implements OnInit {
                 borderColor: this.borderChartColors[prop]
               });
               this.tableData.push({
-                headers: label + " [kWh]",
+                headers: label,
                 dataValues: measure_values
               });
             }

src/app/components/plants/plants.component.html

@@ -1,84 +1,98 @@
-<h2 class="floating-title">{{title}}</h2>
+<h2 class="floating-title">{{ title }}</h2>
 
 <div class="main-content">
   <div class="container-fluid">
     <div class="row">
-      
       <div class="col-12 align-right">
         <div class="align-container">
-          
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
-              <li class="breadcrumb-item"><a [routerLink]="['/']">Dashboard</a></li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
               <li class="breadcrumb-item">Plantas</li>
             </ol>
           </nav>
 
-          <a class="btn btn-primary" [routerLink]="['/plants/new']" *ngIf="allowedUser()">
+          <a
+            class="btn btn-primary"
+            [routerLink]="['/plants/new']"
+            *ngIf="allowedAdminUser()"
+          >
             Nuevo registro
           </a>
         </div>
       </div>
 
       <div class="col-12">
-          <div class="align-container">
+        <div class="align-container">
+          <h4><b>Listado de plantas</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>Planta</th>
+                  <td mat-cell *matCellDef="let row">{{ row.name }}</td>
+                </ng-container>
 
-            <h4><b>Listado de plantas</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>Planta</th>
-                    <td mat-cell *matCellDef="let row">{{row.name}}</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>
 
-                  <!-- 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>
+                <!-- Country Column -->
+                <ng-container matColumnDef="city">
+                  <th mat-header-cell *matHeaderCellDef>Ciudad</th>
+                  <td mat-cell *matCellDef="let row">{{ row.city }}</td>
+                </ng-container>
 
-                  <!-- Country 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">
+                <!--  Column -->
+                <ng-container matColumnDef="id">
+                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+                  <td mat-cell *matCellDef="let row">
+                    <div class="action-buttons">
+                      <a
+                        class="btn btn-dark btn-sm"
+                        [routerLink]="['/plant', row.id]"
+                        *ngIf="allowedUser()"
+                      >
+                        Ver detalles
+                      </a>
+                      <a
+                        class="btn btn-primary btn-sm"
+                        [routerLink]="['/plant', row.id, 'edit']"
+                        *ngIf="allowedAdminUser()"
+                      >
+                        Editar
+                      </a>
 
-                      <div class="action-buttons">
-                        <a class="btn btn-dark btn-sm" [routerLink]="['/plant', row.id]" *ngIf="allowedUser()" >
-                          Ver detalles
-                        </a>
-                        <a class="btn btn-primary btn-sm" [routerLink]="['/plant', row.id, 'edit']" *ngIf="allowedUser()" >
-                          Editar
-                        </a>
-                        
-                        <!--
+                      <!--
                         <a class="btn btn-danger btn-sm" (click)="delete_organization(row.id)" *ngIf="allowedUser()" >
                           Eliminar
                         </a>-->
-                      </div>
-                    </td>
-                  </ng-container>
-          
-                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                </table>
-                <mat-paginator [pageSizeOptions]="[10, 15, 25]" [pageIndex]="0" [pageSize]="10"></mat-paginator>
-              </div>
+                    </div>
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let row; columns: displayedColumns"
+                ></tr>
+              </table>
+
+              <mat-paginator
+                [pageSizeOptions]="[10, 15, 25]"
+                [pageIndex]="0"
+                [pageSize]="10"
+              ></mat-paginator>
             </div>
           </div>
-      
+        </div>
       </div>
-      <br>
-      
-    </div>          
+      <br />
+    </div>
   </div>
 </div>

src/app/components/plants/plants.component.ts

@@ -1,44 +1,45 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit } from "@angular/core";
 
-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 { 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 {MatTableDataSource} from '@angular/material/table';
-import Swal from 'sweetalert2';
-import { UserService } from '@app/services/user.service';
-import { AuthService } from '@app/services/auth2.service';
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { UserService } from "@app/services/user.service";
+import { AuthService } from "@app/services/auth2.service";
 
 @Component({
-  selector: 'app-plants',
-  templateUrl: './plants.component.html',
-  styleUrls: ['./plants.component.scss']
+  selector: "app-plants",
+  templateUrl: "./plants.component.html",
+  styleUrls: ["./plants.component.scss"]
 })
 export class PlantsComponent implements OnInit {
+  title: string = "Plantas";
 
-  title:string = "Plantas";
- 
-  displayedColumns: string[] = ['name', 'country', 'city', 'id'];
+  displayedColumns: string[] = ["name", "country", "city", "id"];
   //displayedColumns: string[] = ['state'];
 
   listData: Plant[] = [];
-  listPlant:any;
+  listPlant: any;
   dataSource = new MatTableDataSource(this.listPlant);
 
   resultsLength = 0;
   isLoadingResults = true;
   isRateLimitReached = false;
 
-  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
-  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-
-  constructor(private orgService: PlantsService, private authService: AuthService) {
+  constructor(
+    private orgService: PlantsService,
+    private authService: AuthService
+  ) {
     Swal.fire({
       allowOutsideClick: false,
-      type: 'info',
-      text: 'Espere por favor...'
+      type: "info",
+      text: "Espere por favor..."
     });
     Swal.showLoading();
   }
@@ -51,7 +52,7 @@ export class PlantsComponent implements OnInit {
       this.dataSource.sort = this.sort;
     });
 
-    setTimeout(()=>{
+    setTimeout(() => {
       Swal.close();
     }, 1000);
   }
@@ -63,15 +64,23 @@ export class PlantsComponent implements OnInit {
     }
   }
 
-  allowedUser(){
+  allowedUser() {
     let is_allowed: boolean;
-    if(+this.authService.getUserLevel() < 2){
+    if (+this.authService.getUserLevel() < 2) {
       is_allowed = false;
-    }
-    else {
+    } else {
       is_allowed = true;
     }
-    return is_allowed
+    return is_allowed;
   }
 
+  allowedAdminUser() {
+    let is_allowed: boolean;
+    if (+this.authService.getUserLevel() < 3) {
+      is_allowed = false;
+    } else {
+      is_allowed = true;
+    }
+    return is_allowed;
+  }
 }

src/app/components/users/users.component.ts

@@ -32,7 +32,11 @@ export class UsersComponent implements OnInit {
   role_number: any;
 
   constructor(private userService: UserService) {
-    Swal.fire({});
+    Swal.fire({
+      allowOutsideClick: false,
+      type: "info",
+      text: "Espere por favor..."
+    });
     Swal.showLoading();
   }
 

src/app/services/logs.service.ts

@@ -1,80 +1,97 @@
-import { Injectable } from '@angular/core';
-import { Organization } from '../models/organization';
-import { Plant } from '../models/plant';
+import { Injectable } from "@angular/core";
+import { Organization } from "../models/organization";
+import { Plant } from "../models/plant";
 
-import { of as observableOf, Observable, throwError } from 'rxjs';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { retry, catchError, map, timeout } from 'rxjs/operators';
+import { of as observableOf, Observable, throwError } from "rxjs";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { retry, catchError, map, timeout } from "rxjs/operators";
 
-import { environment } from '@environments/environment';
+import { environment } from "@environments/environment";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root"
 })
 export class LogsService {
+  time: number = 6000;
 
-  time:number = 6000;
+  constructor(private http: HttpClient) {}
 
-  constructor(private http: HttpClient) {
+  getEnergyProducedByParams(id: string, interval: string, date: string) {
+    return this.http
+      .get(
+        `${environment.productionApiUrl}/asset/${id}/energy-produced/${interval}/${date}`
+      )
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
   }
 
-  getEnergyProducedByParams(id:string, interval:string, date:string) {
-    return this.http.get(`${environment.productionApiUrl}/asset/${id}/energy-produced/${interval}/${date}`)
-    .pipe(
-      timeout(this.time),
-      map(response =>{
-        return response;
-      }),
-      catchError(this.errorHandl)
-    )
+  getEnergySavingsProducedByAsset(id: string, interval: string, date: string) {
+    return this.http
+      .get(
+        `${environment.productionApiUrl}/asset/${id}/historical-savings/${interval}/${date}`
+      )
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
   }
 
-
-  getEnergySavingsProducedByAsset(id:string, interval:string, date:string) {
-    return this.http.get(`${environment.productionApiUrl}/asset/${id}/historical-savings/${interval}/${date}`)
-    .pipe(
-      timeout(this.time),
-      map(response => {
-        return response;
-      }),
-      catchError(this.errorHandl)
-    )
+  getEnergySummaryByAsset(id: string) {
+    return this.http
+      .get(`${environment.productionApiUrl}/asset/${id}/energy-stats`)
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
   }
-  
 
-  getEnergySummaryByAsset(id:string){
-    return this.http.get(`${environment.productionApiUrl}/asset/${id}/energy-stats`)
-    .pipe(
-      timeout(this.time),
-      map(response =>{
-        return response;
-      }),
-      catchError(this.errorHandl)
-    )
+  getAssetEnviromentalStats(id: string) {
+    return this.http
+      .get(`${environment.productionApiUrl}/asset/${id}/environmentals`)
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
   }
 
-  getAssetEnviromentalStats(id:string){
-    return this.http.get(`${environment.productionApiUrl}/asset/${id}/environmentals`)
-    .pipe(
-      timeout(this.time),
-      map(response =>{
-        return response;
-      }),
-      catchError(this.errorHandl)
-    )
+  getAssetCertificates(id: string) {
+    return this.http
+      .get(
+        `${environment.productionApiUrl}/asset/${id}/origin-certificates-info`
+      )
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
   }
 
   //if(error.error instanceof ErrorEvent) {
   errorHandl(error) {
-    let errorMessage = '';
-    if(error.error) {
+    let errorMessage = "";
+    if (error.error) {
       // Get client-side error
       errorMessage = error.error;
     } else {
       // Get server-side error
-      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;      
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
     }
     return throwError(errorMessage);
   }
-  
 }

src/environments/environment.ts

@@ -6,8 +6,8 @@ export const environment = {
   production: false,
   apiUrl: "https://api.inverlec.solar",
   //productionApiUrl: 'http://192.168.98.10:8888/api/v1',
-  //productionApiUrl: 'http://192.168.98.24:5000/api/v1',
-  productionApiUrl: "https://denmark.inverlec.solar/api/v1",
+  productionApiUrl: "http://192.168.98.24:5000/api/v1",
+  //productionApiUrl: "https://denmark.inverlec.solar/api/v1",
   appID: "55899b9ea53834f2736b65a3582b734b",
   gKey: "",
   config: {

src/styles.scss

@@ -1,8 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
 
 .align-container {
   padding: 0 14px;
+  @media screen and (max-width: 480px) {
+    padding: 0;
+  }
 }