-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #125 from delphi-hub/feature/informationCenter
Feature/information center
- Loading branch information
Showing
16 changed files
with
884 additions
and
645 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
client/src/app/dashboard/info-center/info-center-datasource.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { DataSource } from '@angular/cdk/collections'; | ||
| import { MatPaginator, MatSort } from '@angular/material'; | ||
| import { map } from 'rxjs/operators'; | ||
| import { Observable, of as observableOf, merge } from 'rxjs'; | ||
|
|
||
| export interface InfoCenterItem { | ||
| instanceId: number; | ||
| type: string; | ||
| notifName: string; | ||
| dateTime: string; | ||
| details: string; | ||
| } | ||
|
|
||
| const DATA: InfoCenterItem[] = []; | ||
|
|
||
| /** | ||
| * Data source for the InfoCenter view. This class should | ||
| * encapsulate all logic for fetching and manipulating the displayed data | ||
| * (including sorting, pagination, and filtering). | ||
| */ | ||
| export class InfoCenterDataSource extends DataSource<InfoCenterItem> { | ||
| data: InfoCenterItem[] = DATA; | ||
|
|
||
| constructor(private paginator: MatPaginator, private sort: MatSort) { | ||
| super(); | ||
| } | ||
|
|
||
| /** | ||
| * Connect this data source to the table. The table will only update when | ||
| * the returned stream emits new items. | ||
| * @returns A stream of the items to be rendered. | ||
| */ | ||
| connect(): Observable<InfoCenterItem[]> { | ||
| // Combine everything that affects the rendered data into one update | ||
| // stream for the data-table to consume. | ||
| const dataMutations = [ | ||
| observableOf(this.data), | ||
| this.paginator.page, | ||
| ]; | ||
|
|
||
| // Set the paginator's length | ||
| this.paginator.length = this.data.length; | ||
|
|
||
| return merge(...dataMutations).pipe(map(() => { | ||
| return this.getPagedData(this.getSortedData([...this.data])); | ||
| })); | ||
| } | ||
|
|
||
| /** | ||
| * Called when the table is being destroyed. Use this function, to clean up | ||
| * any open connections or free any held resources that were set up during connect. | ||
| */ | ||
| disconnect() {} | ||
|
|
||
| /** | ||
| * Paginate the data (client-side). If you're using server-side pagination, | ||
| * this would be replaced by requesting the appropriate data from the server. | ||
| */ | ||
| private getPagedData(data: InfoCenterItem[]) { | ||
| const startIndex = this.paginator.pageIndex * this.paginator.pageSize; | ||
| return data.splice(startIndex, this.paginator.pageSize); | ||
| } | ||
|
|
||
| /** | ||
| * Sort the data (client-side). If you're using server-side sorting, | ||
| * this would be replaced by requesting the appropriate data from the server. | ||
| */ | ||
| private getSortedData(data: InfoCenterItem[]) { | ||
| if (!this.sort.active || this.sort.direction === '') { | ||
| return data; | ||
| } | ||
|
|
||
| return data.sort((a, b) => { | ||
| const isAsc = this.sort.direction === 'asc'; | ||
| switch (this.sort.active) { | ||
| case 'name': return compare(a.notifName, b.notifName, isAsc); | ||
| case 'id': return compare(+a.dateTime, +b.dateTime, isAsc); | ||
| default: return 0; | ||
| } | ||
| }); | ||
| } | ||
| public add(element: InfoCenterItem) { | ||
| this.data.push(element); | ||
| } | ||
| } | ||
|
|
||
| /** Simple sort comparator for example ID/Name columns (for client-side sorting). */ | ||
| function compare(a: string | number, b: string | number, isAsc: boolean) { | ||
| return (a < b ? -1 : 1) * (isAsc ? 1 : -1); | ||
| } |
7 changes: 7 additions & 0 deletions
7
client/src/app/dashboard/info-center/info-center.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .full-width-table { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .infoCenter{ | ||
| border: 1px solid black; | ||
| } |
39 changes: 39 additions & 0 deletions
39
client/src/app/dashboard/info-center/info-center.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <h4>Information Center</h4> | ||
| <div class="mat-elevation-z8" [ngClass]="'infoCenter'"> | ||
| <mat-table #table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements"> | ||
| <!-- type Column --> | ||
| <ng-container matColumnDef="type"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell> | ||
| <mat-cell *matCellDef="let row"><mat-icon>{{row.type}}</mat-icon></mat-cell> | ||
| </ng-container> | ||
|
|
||
| <!-- Name notif Column --> | ||
| <ng-container matColumnDef="notifName"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header>Notification</mat-header-cell> | ||
| <mat-cell *matCellDef="let row">{{row.notifName}}</mat-cell> | ||
| </ng-container> | ||
|
|
||
| <!-- Date name Column --> | ||
| <ng-container matColumnDef="dateTime"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</mat-header-cell> | ||
| <mat-cell *matCellDef="let row">{{row.dateTime}}</mat-cell> | ||
| </ng-container> | ||
|
|
||
|
|
||
| <!-- Details Column --> | ||
| <ng-container matColumnDef="details"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell> | ||
| <mat-cell *matCellDef="let row">{{row.details}}</mat-cell> | ||
| </ng-container> | ||
|
|
||
| <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> | ||
| <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> | ||
| </mat-table> | ||
|
|
||
| <mat-paginator #paginator | ||
| [length]="dataSource.data.length" | ||
| [pageIndex]="0" | ||
| [pageSize]="5" | ||
| [pageSizeOptions]="[5, 10, 25, 100]"> | ||
| </mat-paginator> | ||
| </div> |
34 changes: 34 additions & 0 deletions
34
client/src/app/dashboard/info-center/info-center.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { NoopAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { MatPaginatorModule, MatSortModule, MatTableModule, MatIconModule } from '@angular/material'; | ||
|
|
||
| import { InfoCenterComponent } from './info-center.component'; | ||
| import {SocketService} from '../../api/api/socket.service'; | ||
|
|
||
| describe('InfoCenterComponent', () => { | ||
| let component: InfoCenterComponent; | ||
| let fixture: ComponentFixture<InfoCenterComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ InfoCenterComponent], | ||
| imports: [ | ||
| NoopAnimationsModule, | ||
| MatPaginatorModule, | ||
| MatSortModule, | ||
| MatTableModule, | ||
| MatIconModule, | ||
| ] | ||
|
|
||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(InfoCenterComponent); | ||
| component = fixture.componentInstance; | ||
| }); | ||
|
|
||
| it('should compile', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
Oops, something went wrong.