src/app/app.module.ts

@@ -60,6 +60,11 @@ import { MatSort, MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
 import { MatMenuModule } from '@angular/material/menu'
 import { StationConfigComponent } from './module/pages/home/station-config/station-config.component'
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TableTimelineComponent } from './module/components/tables/table-timeline/table-timeline.component'
+import {MatSortModule} from "@angular/material/sort";
+import {MatTableModule} from "@angular/material/table";
+import {MatPaginatorModule} from "@angular/material/paginator";
 
 const MY_DATE_FORMATS: MatDateFormats = {
     parse: {
@@ -106,6 +111,7 @@ const MY_DATE_FORMATS: MatDateFormats = {
         HostComponent,
         ClientComponent,
         StationComponent,
+        TableTimelineComponent,
     ],
     imports: [
         BrowserModule,
@@ -134,6 +140,9 @@ const MY_DATE_FORMATS: MatDateFormats = {
         MatProgressSpinnerModule,
         MatButtonToggleModule,
         MatTooltipModule,
+        MatTableModule,
+        MatSortModule,
+        MatPaginatorModule
         MatProgressSpinnerModule,
         MatTableModule,
         MatSortModule,

src/app/module/components/pro-view/pro-view.component.html

@@ -94,6 +94,30 @@
 
         <span class="material-symbols-outlined">search</span>
       </button>
+      <button
+        *ngIf="!allowSearch"
+        class="col"
+        color="primary"
+        mat-flat-button
+        [matTooltip]="'Alle auswählen'"
+
+        (click)="selectAllOptions()"
+      >
+        <span class="material-symbols-outlined">done_all</span>
+      </button>
+
+        <button
+          *ngIf="allowSearch"
+          class="col"
+          color="primary"
+          mat-flat-button
+          [matTooltip]="'Auswahl aufheben'"
+
+          (click)="resetAll()"
+        >
+        <span class="material-symbols-outlined">restart_alt</span>
+      </button>
+
       <button
         [disabled]="!allowDownload"
         class="col"
@@ -104,16 +128,40 @@
       >
         <span class="material-symbols-outlined">download</span>
       </button>
+
       <button
         [disabled]="!allowDownload"
         class="col"
-        color="accent"
+        color="warn"
         mat-flat-button
         [matTooltip]="'Als einzelne CSV herunterladen'"
         (click)="downloadSingleCSV()"
       >
         <span class="material-symbols-outlined">sim_card_download</span>
       </button>
+
+      <button
+        [disabled]="isGrid"
+        class="col"
+        color="accent"
+        mat-flat-button
+        [matTooltip]="'Zum Graph wechseln'"
+        (click)="isGrid = true"
+      >
+        <span class="material-symbols-outlined">monitoring</span>
+      </button>
+
+      <button
+        [disabled]="!isGrid"
+        class="col"
+        color="accent"
+        mat-flat-button
+        [matTooltip]="'Zur Tabelle wechseln'"
+        (click)="isGrid = false"
+      >
+        <span class="material-symbols-outlined">table_rows</span>
+      </button>
+
     </div>
   </form>
 
@@ -125,7 +173,23 @@
   </div>
 </div>
 
-<div *ngIf="!loading">
+
+<div *ngIf="!loading && !isGrid" class="mt-10">
+  <app-table-timeline   *ngIf="!(this.sensorDataArray.length == 0)" [sensorDataArray]="this.sensorDataArray">
+
+  </app-table-timeline>
+
+  <div *ngIf="this.sensorDataArray.length == 0"
+       class="flex items-center justify-center h-[50vh] md:h-[80vh] -translate-y-10">
+    <div class="flex items-center justify-center w-1/2 h-1/2">
+      <h1 class="mat-h1 decoration-gray-200">Bitte wählen Sie Daten aus und klicken danach auf den Button mit der
+        Lupe.</h1>
+    </div>
+  </div>
+</div>
+
+
+<div *ngIf="!loading && isGrid">
   <!--Graph SensorData-->
   <chart-js
     #timeline
@@ -162,6 +226,7 @@
   </div>
 </div>
 
+
 <div class="fixed top-0 left-1/2 transition duration-500 ease-in-out -translate-x-1/2 z-50">
   <app-alert *ngIf="toastVisible" message="{{toastMessage}}" type="{{toastType}}"></app-alert>
 </div>

src/app/module/components/pro-view/pro-view.component.ts

@@ -81,6 +81,8 @@ export class ProViewComponent
     availableClients: string[] = []
     allowDownload: boolean = false
     allowSearch: boolean = false
+
+    isGrid: boolean=true
     private selectedStation: Station | undefined
 
     constructor(
@@ -103,6 +105,19 @@ export class ProViewComponent
         this.allowDownload = false
     }
 
+  selectAllOptions(): void {
+    // Set all available clients to the control's value
+    this.clientControl.setValue([...this.availableClients]);
+    // Manually trigger the onSelectionChangeClients method
+    //@ts-ignore
+    this.onSelectionChangeClients( [...this.availableClients] );
+    setTimeout(() => {
+      // Set the sensorControl's value after the delay
+      const allSensorIds = this.availableSensors.flatMap(group => group.sensors.map(sensor => sensor.id));
+      this.sensorControl.setValue(allSensorIds);
+    }, 1000);  // 1000 milliseconds = 1 second
+  }
+
     ngOnInit() {
         this.titleService.setTitle('FORTE | Pro View')
         const today = new Date()
@@ -327,6 +342,7 @@ export class ProViewComponent
     }
 
     //create a filter for the station input field, "a" => "a","ab" ,"abc"
+
     private _filterS(opt: string[], value: string): string[] {
         const filterValue = value.toLowerCase() //current value of the input field to lower case
         return opt.filter((option) =>
@@ -386,6 +402,11 @@ export class ProViewComponent
         this.clientControl.setValue([])
     }
 
+  resetAll(): void {
+    this.clientControl.setValue([])
+    this.sensorControl.setValue([])
+  }
+
     /**
      * Helper function to draw the graph based on the selected data and time range.
      */
@@ -440,6 +461,7 @@ export class ProViewComponent
                 this.allowDownload = true
             })
         }
+        console.log('sensorDataArray', this.sensorDataArray)
     }
 
     private collectDataFromAPI(

src/app/module/components/tables/table-timeline/table-timeline.component.html

+<div class="mat-elevation-z8 overflow-x-auto">
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
+       class="mat-elevation-z8  ">
+
+
+  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
+    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+    <td mat-cell *matCellDef="let element"> {{element[column]}} </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]"
+                 showFirstLastButtons
+                 aria-label="Select page of periodic elements">
+  </mat-paginator>
+</div>

src/app/module/components/tables/table-timeline/table-timeline.component.scss

+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+
+  .mat-table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+    display: table;
+    border-collapse: collapse;
+    margin: 0px;
+  }
+
+  .mat-row,
+  .mat-header-row {
+    display: table-row;
+  }
+
+  .mat-cell,
+  .mat-header-cell {
+    word-wrap: initial;
+    display: table-cell;
+    padding: 0px 5px;
+    line-break: unset;
+    width: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+  }
+}

src/app/module/components/tables/table-timeline/table-timeline.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableTimelineComponent } from './table-timeline.component';
+
+describe('TableTimelineComponent', () => {
+  let component: TableTimelineComponent;
+  let fixture: ComponentFixture<TableTimelineComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TableTimelineComponent]
+    });
+    fixture = TestBed.createComponent(TableTimelineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/tables/table-timeline/table-timeline.component.ts

+import {Component, Input, ViewChild} from '@angular/core';
+import {MatTableDataSource, MatTableModule} from "@angular/material/table";
+import {Subject} from "rxjs";
+import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
+import {LiveAnnouncer} from "@angular/cdk/a11y";
+import {MatPaginator} from "@angular/material/paginator";
+import {SensorData} from "../../pro-view/pro-view.component";
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+const DATA = [
+  { timestamp: "2022-04-13T22:00:00.000+00:00", "SWC_1.5cm_m3m-3": "1", Temp: "2" },
+  { timestamp: "2022-04-13T22:30:00.000+00:00", "SWC_1.5cm_m3m-3": "2", Temp: "3" },
+];
+
+let ELEMENT_DATA_2: any[][] = []
+
+@Component({
+  selector: 'app-table-timeline',
+  templateUrl: './table-timeline.component.html',
+  styleUrls: ['./table-timeline.component.scss'],
+})
+export class TableTimelineComponent {
+
+  @Input() sensorDataArray!: SensorData[][]
+
+
+  displayedColumns: string[] = [];
+
+
+  dataSource = new MatTableDataSource([]);
+
+  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+  //@ts-ignore
+  @ViewChild(MatSort) sort: MatSort;
+
+
+
+
+  /** Announce the change in sort state for assistive technology. */
+  //@ts-ignore
+  announceSortChange(sortState: Sort) {
+    // This example uses English messages. If your application supports
+    // multiple language, you would internationalize these strings.
+    // Furthermore, you can customize the message to add additional
+    // details about the values being sorted.
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+  //@ts-ignore
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  ngOnInit() {
+
+    console.log("sensorDataArray",this.sensorDataArray)
+    console.log("sensorDataArray length",this.sensorDataArray[0].length)
+
+    if(this.sensorDataArray[0].length!==0){
+      //select only timestamp from the first array
+      let time
+      time= this.sensorDataArray[0].map(data=>({timestamp:data.timestamp}))
+
+      //push timestamp to values array
+      let values:any[][]=[]
+      values.push(time)
+
+      //select sensorName and values and push to values array
+      this.sensorDataArray.forEach(item => {
+        let currentSensorNameValues:any = [];
+        item.forEach(data => {
+          let obj = {[data.sensorName] : data.readings[0].value };
+          currentSensorNameValues.push(obj);
+        });
+        values.push(currentSensorNameValues);
+      });
+      //currently array of arrays like [[timestamp:value], [sensorName: value], [sensorName: value]]
+      //what needed is array of objects for table like [{timestamp:value, sensorName: value, sensorName: value}]
+      //so we need to merge all arrays to one array of objects
+      const values_object = values[0].map((_, index) => {
+        return values.reduce((acc, currentArray) => {
+          return {...acc, ...currentArray[index]};
+        }, {});
+      });
+
+
+      //get columns names which are [[timestamp:value], [sensorName: value], [sensorName: value]]
+      //=> [timestamp, sensorName, sensorName]
+      const columns = values.map(arr => Object.keys(arr[0])[0]);
+      this.displayedColumns =columns;
+      //@ts-ignore
+      this.dataSource = new MatTableDataSource(values_object);
+    }
+
+  }
+
+
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    //@ts-ignore
+    this.dataSource.paginator = this.paginator;
+  }
+
+
+
+}