Merge branch 'master' of github.com:jonigl/tacs-frontend

jonigl · Oct 15, 2018 · 951c8bd · 951c8bd
2 parents 89adf2c + 2f4ba29
commit 951c8bd
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,9 @@
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
     "@auth0/angular-jwt": "^2.0.0",
+    "@types/moment": "^2.13.0",
     "core-js": "^2.5.4",
+    "moment": "^2.22.2",
     "ngx-masonry": "^1.1.2",
     "ngx-mat-select-search": "^1.4.1",
     "ngx-spinner": "^6.1.2",

diff --git a/src/app/alarm/alarm-dialog/alarm-dialog.component.ts b/src/app/alarm/alarm-dialog/alarm-dialog.component.ts
@@ -62,7 +62,7 @@ export class AlarmDialogComponent implements OnInit {
         this.alarmService.add(alarmRequest)
             .pipe(first())
             .subscribe(alarm => {
-                this.snackbar.open(`New alarm "${alarm.name} added."`, '', { duration: 3000 });
+                this.snackbar.open(`New alarm "${alarm.name}" added.`, '', { duration: 3000 });
                 this.dialogRef.close(true);
             });
     }

diff --git a/src/app/stats/stats.component.html b/src/app/stats/stats.component.html
@@ -15,18 +15,26 @@ <h2 fxFlexOffset="10">Events</h2>
 
     <mat-card-content fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="10px">
 
+        <mat-chip-list>
+            <mat-chip (click)="setDateFilter('today')" selected>Today</mat-chip>
+            <mat-chip (click)="setDateFilter('last3Days')" selected>Last 3 days</mat-chip>
+            <mat-chip (click)="setDateFilter('lastWeek')" selected>Last week</mat-chip>
+            <mat-chip (click)="setDateFilter('lastMonth')" selected>Last month</mat-chip>
+            <mat-chip (click)="setDateFilter('allTime')" selected>All time</mat-chip>
+        </mat-chip-list>
+
         <mat-form-field>
             <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter events">
         </mat-form-field>
 
         <mat-form-field>
-            <input matInput (dateChange)="setDateFrom($event)" [matDatepicker]="dateFromPicker" placeholder="From">
+            <input matInput [formControl]="dateFromControl" (dateChange)="setDateFrom($event)" [matDatepicker]="dateFromPicker" placeholder="From">
             <mat-datepicker-toggle matSuffix [for]="dateFromPicker"></mat-datepicker-toggle>
             <mat-datepicker #dateFromPicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field>
-            <input matInput (dateChange)="setDateTo($event)" [matDatepicker]="dateToPicker" placeholder="To">
+            <input matInput [formControl]="dateToControl" (dateChange)="setDateTo($event)" [matDatepicker]="dateToPicker" placeholder="To">
             <mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
             <mat-datepicker #dateToPicker></mat-datepicker>
         </mat-form-field>

diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatSort, MatSnackBar, MatTable, MatDialog, MatDatepickerInputEvent } from '@angular/material';
+import { MatTableDataSource, MatSort, MatSnackBar, MatTable, MatDialog, MatDatepickerInputEvent, MatChip } from '@angular/material';
 import { FormControl } from '@angular/forms';
 import { Event } from 'src/app/_models';
 import { EventService } from 'src/app/_services/event.service';
@@ -10,6 +10,8 @@ import { EventDialogComponent } from 'src/app/list/event-dialog/event-dialog.com
 import { SearchElementDialogComponent } from 'src/app/reusable/search-element-dialog/search-element-dialog.component';
 import { ListService } from 'src/app/_services';
 
+import * as moment from 'moment';
+
 @Component({
     selector: 'app-stats',
     templateUrl: './stats.component.html',
@@ -28,9 +30,14 @@ export class StatsComponent implements OnInit {
 
     eventColumns = ['name', 'start', 'status', 'action'];
 
+    dateFromControl = new FormControl();
+    dateToControl = new FormControl();
+
     dateFrom: Date = null;
     dateTo: Date = null;
 
+    dateFilters: Map<string, Date[]>;
+
     constructor(
         private spinner: NgxSpinnerService,
         public dialog: MatDialog,
@@ -39,6 +46,35 @@ export class StatsComponent implements OnInit {
         private eventService: EventService) { }
 
     ngOnInit() {
+        this.initDateFilters();
+        this.fetchEvents();
+    }
+
+    initDateFilters() {
+        const today = moment();
+        const tomorrow = moment(today).add(1, 'days');
+        const treeDaysBefore = moment(today).subtract(3, 'days');
+        const oneWeekBefore = moment(today).subtract(1, 'weeks');
+        const oneMonthBefore = moment(today).subtract(1, 'months');
+
+        this.dateFilters = new Map();
+
+        this.dateFilters.set('today', [today.toDate(), tomorrow.toDate()]);
+        this.dateFilters.set('last3Days', [treeDaysBefore.toDate(), tomorrow.toDate()]);
+        this.dateFilters.set('lastWeek', [oneWeekBefore.toDate(), tomorrow.toDate()]);
+        this.dateFilters.set('lastMonth', [oneMonthBefore.toDate(), tomorrow.toDate()]);
+    }
+
+    setDateFilter(value: string) {
+        if (value === 'allTime') {
+            this.dateFromControl.setValue('');
+            this.dateToControl.setValue('');
+        } else {
+            const dates = this.dateFilters.get(value);
+            this.dateFromControl.setValue(dates[0]);
+            this.dateToControl.setValue(dates[1]);
+        }
+
         this.fetchEvents();
     }