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

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <a href="#!" class="btn btn-sm btn-warning pull-right"
          >Actualizar a usuario pro</a
        >
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-lg-12">
        <div class="card white-skin bg-gradient-danger card-img-holder">
          <div class="card-body">
            <img
              alt="circle-image"
              class="card-img-absolute"
              src="assets/img/money-rate.png"
            />
            <h4 class="font-weight-normal mb-3">
              Tarifa por distribuidora y código
              <i class="mdi mdi-chart-line mdi-24px float-right"></i>
            </h4>
            <div class="row no-gutters">
              <div class="col-sm-12 col-md-6">
                <h3 class="mb-3">
                  Distribuidora:
                  <strong>
                    {{ rates.distribuidora }}
                  </strong>
                </h3>
                <div>
                  <h3>
                    Vigencia:
                    <strong *ngIf="rates.tarifa_actual.dateMin">
                      {{ rates.tarifa_actual.dateMin | date: "dd/MM/yyyy" }} -
                      {{ rates.tarifa_actual.dateMax | date: "dd/MM/yyyy" }}
                    </strong>
                  </h3>
                </div>
              </div>
              <div class="col-sm-12 col-md-6">
                <h4>Tarifa actual (USD$/kWh):</h4>
                <div *ngIf="rates.tarifa_actual.cargo_energia">
                  Cargo de energia:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_b1">
                  Cargo de energia por bloque 1:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia_b1 | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_b2">
                  Cargo de energia por bloque 2:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia_b2 | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_b3">
                  Cargo de energia por bloque 3:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia_b3 | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_punta">
                  Cargo de energia punta:
                  <strong>
                    {{
                      rates.tarifa_actual.cargo_energia_punta | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_resto">
                  Cargo de energia resto:
                  <strong>
                    {{
                      rates.tarifa_actual.cargo_energia_resto | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_valle">
                  Cargo de energia valle:
                  <strong>
                    {{
                      rates.tarifa_actual.cargo_energia_valle | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <br />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--
      <div class="col-lg-6">
        <div class="card cream-skin bg-gradient-danger card-img-holder">
          <div class="card-body">
            <img
              alt="circle-image"
              class="card-img-absolute"
              src="assets/img/money-rate.png"
            />
            <h4 class="font-weight-normal mb-3">
              Historico de tarifa por distribuidora y código
              <i class="mdi mdi-chart-line mdi-24px float-right"></i>
            </h4>
            <h3 class="mb-3" *ngIf="listAssets">
              Distribuidora {{ rates.distribuidora }}
            </h3>
            <div *ngIf="rates.tarifa_actual.cargo_energia">
              Cargo de energia: {{ rates.tarifa_actual.cargo_energia }}
            </div>
            <div *ngIf="rates.tarifa_actual.cargo_energia_b1">
              Cargo de energia por bloque 1:
              {{ rates.tarifa_actual.cargo_energia_b1 }}
            </div>
            <div *ngIf="rates.tarifa_actual.cargo_energia_b2">
              Cargo de energia por bloque 2:
              {{ rates.tarifa_actual.cargo_energia_b2 }}
            </div>
            <div *ngIf="rates.tarifa_actual.cargo_energia_b3">
              Cargo de energia por bloque 3:
              {{ rates.tarifa_actual.cargo_energia_b3 }}
            </div>
            <div *ngIf="rates.tarifa_actual.cargo_energia_punta">
              Cargo de energia punta:
              {{ rates.tarifa_actual.cargo_energia_punta }}
            </div>
            <div *ngIf="rates.tarifa_actual.cargo_energia_resto">
              Cargo de energia resto:
              {{ rates.tarifa_actual.cargo_energia_resto }}
            </div>
            <div *ngIf="rates.tarifa_actual.cargo_energia_valle">
              Cargo de energia valle:
              {{ rates.tarifa_actual.cargo_energia_valle }}
            </div>
          </div>
        </div>
      </div>
    --></div>
  </div>
  <br />
  <div class="container-fluid" *ngIf="listAssets">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div
          class="card dark-yellow-skin bg-gradient-danger card-img-holder text-white"
        >
          <div class="card-body">
            <img
              alt="circle-image"
              class="card-img-absolute"
              src="assets/img/waves-opt.png"
            />
            <h4 class="font-weight-normal mb-3">
              Total de plantas instaladas
              <i class="mdi mdi-chart-line mdi-24px float-right"></i>
            </h4>
            <h2 class="mb-3">{{ totalAssetsInstalled }}</h2>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div
          class="card sky-skin bg-gradient-danger card-img-holder text-white"
        >
          <div class="card-body">
            <img
              alt="circle-image"
              class="card-img-absolute"
              src="assets/img/waves-opt.png"
            />
            <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">{{ sumarize }} kW</h2>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div *ngIf="error; then showAlert"></div>
      <ng-template #showAlert>
        <div class="col-lg-12">
          <div class="card border-danger">
            <div class="card-body">
              Error en el servidor, no se pudo obtener el listado de plantas
            </div>
          </div>
        </div>
      </ng-template>
    </div>
    <br />

    <div class="row">
      <div class="col-md-8">
        <div class="card border-success">
          <div class="card-body">
            <div
              style="height: 350px;"
              leaflet
              [leafletOptions]="options"
              [leafletLayers]="markers"
              (leafletMapReady)="onMapReady($event)"
            ></div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="plant-detail" *ngIf="selectedPlant">
          <div class="card border-success" style="height: 390px;">
            <div class="card-body">
              <h3><i class="fa fa-bolt"></i> {{ selectedPlant.name }}</h3>

              <p class="h4">País: {{ selectedPlant.country }}</p>
              <p class="h4">Ciudad: {{ selectedPlant.city }}</p>
              <p class="h4">Dirección: {{ selectedPlant.address }}</p>
              <p class="h4">Capacidad Instalada: {{ totalInstalled }} kW</p>

              <button
                class="btn bg-yellow btn-flat"
                (click)="goToAsset(selectedPlant.id)"
              >
                Ir a Planta
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />

    <div class="row">
      <div class="col-12">
        <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">
                  {{ userLevel == 0 ? "PLANTA INVERLEC" : 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">
                  {{ userLevel == 0 ? "El Salvador" : row.country }}
                </td>
              </ng-container>

              <!-- Country Column -->
              <ng-container matColumnDef="city">
                <th mat-header-cell *matHeaderCellDef>Ciudad</th>
                <td mat-cell *matCellDef="let row">
                  {{ userLevel == 0 ? "La Libertad" : row.city }}
                </td>
              </ng-container>

              <!--  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-primary btn-sm"
                      (click)="goToAsset(row.id)"
                      href="javascript:void(0)"
                    >
                      Ir a planta
                    </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]="[5, 10, 20]"
              [pageIndex]="0"
              [pageSize]="5"
            ></mat-paginator>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br />
</div>