soma-frontend/src/app/components/assets/assets.component.html

<h2 class="floating-title">{{ title }}</h2>
<div class="main-content">
  <div class="container-fluid">
    <div class="row align-container">
      <div class="col-12">
        <label for="sel3">Plantas</label>
      </div>
    </div>
    <div class="row align-container">
      <div class="col-lg-6 col-sm-6 p-1">
        <div class="row">
          <div class="col-lg-12 col-sm-12">
            <select
              class="custom-select"
              (change)="onChangeObj($event)"
              name="sel3"
            >
              <option
                *ngFor="let item of listAssets"
                [selected]="item.id === assetID"
                [value]="item.id"
                >{{ userLevel == 0 ? "PLANTA INVERLEC" : item.name }}</option
              >
            </select>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-12">
            <div class="widget environment-meters">
              <div class="mini-stats">
                <!--<i class="fas fa-money-check-alt"></i> <i class="fas fa-hand-holding-usd"></i>-->
                <span class="savings-skin"
                  ><i class="fas fa-money-check-alt"></i
                ></span>
                <div class="savings">
                  <h4>Ahorro total</h4>
                  <h3 *ngIf="eProduced">${{ total_savings }}</h3>
                </div>
                <div class="savings-last-24h">
                  <i class="material-icons">
                    trending_up
                  </i>
                  Ahorro últimas 24hrs. <span>${{ last_day_savings }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Weather card -->
      <div class="col-lg-6 col-sm-6 p-1">
        <div class="row">
          <div class="col-lg-12">
            <app-weather-card [city]="city"></app-weather-card>
          </div>
        </div>
      </div>
    </div>

    <div class="row align-container" *ngIf="!metersInstalled">
      <div class="col-12 p-1">
        <br />
        <div class="alert alert-danger" role="alert">
          <h4 class="card-text">
            <i class="fas fa-exclamation-circle"></i>
            La planta no tiene medidores asignados
          </h4>
        </div>
      </div>
    </div>

    <!-- Basic stats cards -->
    <div class="row align-container" *ngIf="metersInstalled">
      <div class="col-sm-12 col-md-6">
        <div class="row p-0">
          <div class="col-xl-6 col-md-6 col-sm-12 p-1">
            <div class="widget energy-stats">
              <div class="mini-stats ">
                <span class="sky-skin"><i class="fa fa-bolt"></i></span>
                <h3 *ngIf="eProduced">
                  {{ energyDay }}
                  <small>kWh</small>
                </h3>
                <p>Ultimo dia</p>
              </div>
            </div>
          </div>

          <div class="col-xl-6 col-md-6 col-sm-12 p-1">
            <div class="widget energy-stats">
              <div class="mini-stats ">
                <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
                <h3 *ngIf="eProduced">
                  {{ energyWeek }}
                  <small>MWh</small>
                </h3>
                <p>Ultima semana</p>
              </div>
            </div>
          </div>

          <div class="col-xl-6 col-md-6 col-sm-12 p-1">
            <div class="widget energy-stats">
              <div class="mini-stats ">
                <span class="yellow-skin"><i class="fa fa-bolt"></i></span>
                <h3 *ngIf="eProduced">
                  {{ energyMonth }}
                  <small>MWh</small>
                </h3>
                <p>Ultimos 30 días</p>
              </div>
            </div>
          </div>

          <div class="col-xl-6 col-md-6 col-sm-12 p-1">
            <div class="widget energy-stats">
              <div class="mini-stats ">
                <span class="green-skin"><i class="fa fa-bolt"></i></span>
                <h3 *ngIf="eProduced">
                  {{ energyYear }}
                  <small>MWh</small>
                </h3>
                <p>Total</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12 col-md-6">
        <div class="row p-0">
          <div class="col-12 p-1">
            <div class="certification-stats">
              <span class="cert-skin">
                <img src="assets/img/medal.png" alt="Certificate" />
              </span>
              <div class="cert-title">
                <h2>Certificados de Origen</h2>
              </div>
              <div class="cdo-items">
                <i class="material-icons">
                  check_box
                </i>
                Total de certificados de origen:
                <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">
                  {{ lastGeneratedDateCertificate }}
                </span>
              </div>
              <div class="cdo-items">
                <i class="material-icons ">
                  money
                </i>
                Monto total por CdO generados:
                <span class="cdo-money">${{ totalCertificatesValue }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Chartjs potency generation graphic -->
    <div class="row align-container">
      <div class="col-lg-12 col-md-12 col-sm-12 p-1">
        <div class="widget">
          <div class="mini-stats">
            <div class="row" *ngIf="metersInstalled">
              <div class="col-12">
                <p class="align-right">
                  Seleccione un rango y un tipo de visualización
                </p>

                <div class="visualization">
                  <div class=" action-buttons">
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[0]"
                      (click)="getMeasureRangeChart('day')"
                    >
                      1D
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[1]"
                      (click)="getMeasureRangeChart('week')"
                    >
                      7D
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[2]"
                      (click)="getMeasureRangeChart('WTD')"
                    >
                      WTD
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[3]"
                      (click)="getMeasureRangeChart('month')"
                    >
                      1M
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[4]"
                      (click)="getMeasureRangeChart('MTD')"
                    >
                      MTD
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[5]"
                      (click)="getMeasureRangeChart('3m')"
                    >
                      3M
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[6]"
                      (click)="getMeasureRangeChart('12m')"
                    >
                      12M
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[7]"
                      (click)="getMeasureRangeChart('YTD')"
                    >
                      YTD
                    </button>
                    <button
                      class="btn btn-link"
                      [class.btn-success]="isActive[8]"
                      (click)="getMeasureRangeChart('total')"
                    >
                      TOTAL
                    </button>

                    <div class="input-box-container">
                      <div>
                        <p>
                          <i class="far fa-calendar" aria-hidden="true"></i>
                        </p>
                        <input
                          class="input-box form-control"
                          placeholder="Seleccione una fecha"
                          angular-mydatepicker
                          name="mydate"
                          (click)="dp.toggleCalendar()"
                          [(ngModel)]="model"
                          [options]="myDpOptions"
                          (dateChanged)="onDateChanged($event)"
                          #dp="angular-mydatepicker"
                        />
                      </div>
                    </div>
                  </div>
                  <div class=" action-buttons">
                    <button
                      title="Barra"
                      [ngClass]="[
                        chartActive[0] == true
                          ? 'btn  btn-success'
                          : 'btn btn-dark'
                      ]"
                      (click)="changeGraphicType('bar')"
                    >
                      <i class="fa fa-chart-bar"></i>
                    </button>
                    <button
                      title="Línea"
                      [ngClass]="[
                        chartActive[1] == true
                          ? 'btn  btn-success'
                          : 'btn btn-dark'
                      ]"
                      (click)="changeGraphicType('line')"
                    >
                      <i class="fa fa-chart-area"></i>
                    </button>
                    <!--
                    <button title="Area" [ngClass]="[chartActive[2]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeGraphicType('radar')"> 
                      <i class="fa fa-chart-area"></i>
                    </button>-->
                    <button
                      title="Tabla"
                      [ngClass]="[
                        chartActive[3] == true
                          ? 'btn  btn-success'
                          : 'btn btn-dark'
                      ]"
                      (click)="changeToTable()"
                    >
                      <i class="fa fa-table"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="chart-container" id="chart-wrapper">
              <canvas id="canvas">{{ chart1 }}</canvas>
            </div>
            <div class="no-data">
              <h2>
                Información no disponible
              </h2>
            </div>
            <div id="toogleTable">
              <ng-container
                class="example-container mat-elevation-z8"
                *ngIf="showTable"
              >
                <div class="example-table-container">
                  <div class="action-buttons">
                    <button
                      class="btn btn-primary btn-sm"
                      mat-raised-button
                      (click)="exporter.exportTable(exportExcel, ExcelOptions)"
                    >
                      <i class="fas fa-file-excel"></i>
                      EXCEL
                    </button>
                    <button
                      class="btn btn-primary btn-sm"
                      mat-raised-button
                      (click)="exporter.exportTable(exportCSV, CSVOptions)"
                    >
                      <i class="fas fa-file-csv"></i>
                      CSV
                    </button>
                    <button
                      class="btn btn-primary btn-sm"
                      mat-raised-button
                      (click)="exporter.exportTable(exportJSON, JSONOptions)"
                    >
                      <i class="fas fa-file-alt"></i>
                      JSON
                    </button>
                    <button
                      class="btn btn-primary btn-sm"
                      mat-raised-button
                      (click)="printTable()"
                    >
                      <i class="fas fa-file-alt"></i>
                      IMPRIMIR
                    </button>
                  </div>

                  <mat-table
                    matTableExporter
                    #table
                    [dataSource]="dataSource"
                    #exporter="matTableExporter"
                    id="measuresTable"
                  >
                    <div
                      *ngFor="
                        let disCol of displayedColumns;
                        let colIndex = index
                      "
                      matColumnDef="{{ disCol }}"
                    >
                      <mat-header-cell *matHeaderCellDef>{{
                        disCol
                      }}</mat-header-cell>
                      <mat-cell *matCellDef="let element">
                        {{ element[colIndex] }}
                      </mat-cell>
                    </div>

                    <mat-header-row
                      *matHeaderRowDef="displayedColumns"
                    ></mat-header-row>
                    <mat-row
                      *matRowDef="let row; columns: displayedColumns"
                    ></mat-row>
                  </mat-table>
                </div>
              </ng-container>
              <mat-paginator
                class="hiddenonload"
                [pageSizeOptions]="[5, 10, 25, dataSource.data.length]"
                [length]="dataSource.data.length"
                [pageIndex]="0"
                [pageSize]="10"
              ></mat-paginator>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Enviromental cool stats cards -->
    <div class="row align-container" *ngIf="metersInstalled">
      <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
        <div class="widget">
          <div class="enviroment-stats">
            <div class="enviromental-icon">
              <img src="assets/img/barrels2.png" alt="" />
            </div>
            <div class="enviromental-text">
              <span>{{ environmentFuel }}</span>
              Barriles de petróleo crudo producidos.
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
        <div class="widget">
          <div class="enviroment-stats">
            <div class="enviromental-icon">
              <img src="assets/img/car2-icon.png" alt="" />
            </div>
            <div class="enviromental-text">
              <span>{{ environmentCO2 }}Kg.</span>
              De gases CO2 evitados.
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
        <div class="widget">
          <div class="enviroment-stats">
            <div class="enviromental-icon">
              <img src="assets/img/poweredhouse.png" alt="" />
            </div>
            <div class="enviromental-text">
              La energía que demandan
              <span>{{ environmentHouse }}</span>
              hogares durante 1 año.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>