Site/src/app/oriontard/orion-dashboard/orion-dashboard.component.html

<div>
  <mat-sidenav-container>
    <mat-sidenav mode="side" opened>
      <div style="margin-left: 1em; margin-right: 1em;">
        <label>Data</label>
        <br>
        <mat-form-field>
            <input matInput [matDatepicker]="picker" [(ngModel)]="DataSelecionada">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker [dateClass]="highlightDates"></mat-datepicker>
        </mat-form-field>

        <br><br>

        <label>Hora</label>
        <ng5-slider [(value)]="HoraInicial" [(highValue)]="HoraFinal" [options]="sliderOptions"></ng5-slider>
        
        <br><br>

        <button mat-raised-button color="primary" (click)="btnFiltrarClick()">Filtrar</button>

        <br><br>

        <label *ngIf="NomesFiltro.length > 0">Usuário</label>
        <br>
        <mat-form-field *ngIf="NomesFiltro.length > 0">
          <mat-select (selectionChange)="txtNomeChange($event.value)">
            <mat-option *ngFor="let Nome of NomesFiltro" [value]="Nome">{{Nome}}</mat-option>
          </mat-select>
        </mat-form-field>

        <br><br>

        <label *ngIf="NomesFiltro.length > 0 && PerfisFiltro.length > 0">Perfil</label>
        <br>
        <mat-form-field *ngIf="NomesFiltro.length > 0 && PerfisFiltro.length > 0">
          <mat-select (selectionChange)="txtPerfilChange($event.value)">
            <mat-option *ngFor="let Perfil of PerfisFiltro" [value]="Perfil">{{Perfil}}</mat-option>
          </mat-select>
        </mat-form-field>

        <br><br>

        <label *ngIf="trabalhos.length > 1">Trabalho</label>
        <br>
        <mat-form-field *ngIf="trabalhos.length > 1">
          <mat-select (selectionChange)="onTrabalhoSelecionado($event.value)">
            <mat-option *ngFor="let trabalho of trabalhos" [value]="trabalho">
              {{trabalho[0].dataLog | date: 'HH:mm'}} ({{trabalho.length}} logs)
            </mat-option>
          </mat-select>
        </mat-form-field>

        <br><br>

        <button mat-raised-button color="accent" (click)="btnAtualizarClick()" *ngIf="NomesFiltro.length > 0 && PerfisFiltro.length > 0">Atualizar</button>
      </div>
    </mat-sidenav>

    <mat-sidenav-content style="height: 100vh;">
      <div *ngIf="FiltroSelecionado != null">
        <table>
          <tr>
            <td class="TabelaDados">
              <label>Data: {{FiltroSelecionado.data | date:'dd/MM/yyyy'}}</label>
            </td>
            <td class="TabelaDados">
              <label>Início: {{FiltroSelecionado.HoraInicio}}</label>
            </td>
            <td class="TabelaDados">
              <label>Fim: {{FiltroSelecionado.HoraFim}}</label>
            </td>
            <td class="TabelaDados">
              <label>Duração: {{FiltroSelecionado.Duracao}}</label>
            </td>
            <td class="TabelaDados">
              <label>Serviço: {{(FiltroSelecionado.servico != null) ? FiltroSelecionado.servico.Nome : ""}}</label><br>
            </td>
          </tr>
          <tr>
            <td class="TabelaDados">
              <label>Versão Software: {{FiltroSelecionado.versao}}</label>
            </td>
            <td class="TabelaDados">
              <label>Conectado: {{FiltroSelecionado.conectado == true ? "Sim" : "Não"}}</label>
            </td>
            <td class="TabelaDados">
              <label>Porta COM: {{FiltroSelecionado.portaCOM}}</label><br>
            </td>
            <td class="TabelaDados">
              <label>Baud Rate: {{FiltroSelecionado.baudRate}}</label>
            </td>
            <td class="TabelaDados">
              <label>{{FiltroSelecionado.camera}}</label>
            </td>
          </tr>
          <tr>
            <td class="TabelaDados">
              <label>Odômetro Total: {{SegundosParaTempo(FiltroSelecionado.odometroTotal)}}</label>
            </td>
            <td class="TabelaDados">
              <label>Odômetro Conectado: {{SegundosParaTempo(FiltroSelecionado.odometroConectado)}}</label><br>
            </td>
            <td class="TabelaDados">
              <label>Odômetro Motores: {{SegundosParaTempo(FiltroSelecionado.odometroMotores)}}</label>
            </td>
            <td class="TabelaDados">
              <label>Odômetro Motores Parcial: {{SegundosParaTempo(FiltroSelecionado.odometroMotoresParcial)}}</label>
            </td>
            <td class="TabelaDados">
              <label>Tempo Conectado: {{SegundosParaTempo(FiltroSelecionado.tempoConectado)}}</label>
            </td>
          </tr>
        </table>
        <table>
          <tr>
            <td class="TabelaDados">
              <Label>Equipamento: {{FiltroSelecionado.modelo}}</Label>
            </td>
            <td class="TabelaDados">
              <Label>NS: {{FiltroSelecionado.robotNs}}</Label>
            </td>
            <td class="TabelaDados">
              <Label>Versão da Firmware: {{FiltroSelecionado.firmwareVersao}}</Label>
            </td>
            <td class="TabelaDados">
              <label>Coordenadas: {{FiltroSelecionado.Coordenadas}}</label>
            </td>
            <td class="TabelaDados">
              <Label>Localização: {{FiltroSelecionado.Localizacao}}</Label>
            </td>
          </tr>
        </table>

        <mat-tab-group (selectedTabChange)="onTabChange($event)">
            <mat-tab *ngFor="let Sensor of FiltroSelecionado.sensores" label="{{Sensor.descricao}}">
                <canvas [id]="'chart_' + Sensor.sensor + '_' + Sensor.descricao"></canvas>
            </mat-tab>
        </mat-tab-group>
      </div>

      <br><br>

      <div *ngIf="false">
        <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
          <!-- Colunas -->
          <ng-container matColumnDef="data">
            <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
            <mat-cell *matCellDef="let log"> {{log.logObj.data | date:'short'}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="nome">
            <mat-header-cell *matHeaderCellDef> Nome </mat-header-cell>
            <mat-cell *matCellDef="let log"> {{log.nome}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="perfil">
            <mat-header-cell *matHeaderCellDef> Perfil </mat-header-cell>
            <mat-cell *matCellDef="let log"> {{log.perfil}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="conectado">
            <mat-header-cell *matHeaderCellDef> Conectado </mat-header-cell>
            <mat-cell *matCellDef="let log"> {{log.logObj.conectado ? 'Sim' : 'Não'}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="camera">
            <mat-header-cell *matHeaderCellDef> Câmera </mat-header-cell>
            <mat-cell *matCellDef="let log"> {{log.logObj.camera}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

        <!-- Paginator -->
        <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>