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-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" *ngIf="listAssets">{{ 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">{{ 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="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">
                  <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>