Merge pull request #8 from sartography/tweaks

Tweaks

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import {MatListModule} from '@angular/material/list';
 import { ChangeDatePipe } from './change_date.pipe';
 import {DevHeaderInterceptorInterceptor} from './dev-header-interceptor.interceptor';
+import { TestWeekDateAdapter } from './test-week-date-adapter';
 
 
 
@@ -138,7 +139,8 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     {provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment},
     {provide: APP_BASE_HREF, useFactory: getBaseHref, deps: [PlatformLocation]},
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},
-    {provide: HTTP_INTERCEPTORS, useClass: DevHeaderInterceptorInterceptor, multi: true}
+    {provide: HTTP_INTERCEPTORS, useClass: DevHeaderInterceptorInterceptor, multi: true},
+    { provide: DateAdapter, useClass: TestWeekDateAdapter },
   ],
   bootstrap: [AppComponent],
   entryComponents: []

src/app/change_date.pipe.ts

@@ -13,15 +13,3 @@ export class ChangeDatePipe implements PipeTransform {
   }
 }
 
-// @Pipe({ name: 'date' })
-// @Injectable()
-// export class CustomDateAdapter extends NativeDateAdapter implements PipeTransform  {
-//   transform(value: any, ...args: any[]) {
-//     throw new Error('Method not implemented.');
-//   }
-
-//   getFirstDayOfWeek(): number {
-//    return 1;
-//   }
-
-// }

src/app/graphs/graphs.component.html

@@ -23,7 +23,7 @@
     </mat-card>
 
     <mat-card class="col">
-      <h5 class="card-title text-uppercase text-muted ">Email Notifications within <br>
+      <h5 class="card-title text-uppercase text-muted ">Email Notifications sent <br>
         {{form.startDate |
        changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
       <span class="h2 font-weight-bold "><span style="color:green">{{topBarData[3]}}</span>/<span
@@ -31,7 +31,7 @@
     </mat-card>
 
     <mat-card class="col">
-      <h5 class="card-title text-uppercase text-muted ">Text Notifications within <br>
+      <h5 class="card-title text-uppercase text-muted ">Text Notifications sent <br>
         {{form.startDate |
        changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
       <span class="h2 font-weight-bold"><span style="color:green">{{topBarData[5]}}</span>/<span
@@ -158,8 +158,13 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+    <mat-paginator
-    (page)="updatePage($event)">
+    (page)="updatePage($event)"
+    [length]="totalItems"
+    [pageSize]="pageSize"
+    [showFirstLastButtons]="showFirstLastButtons"
+    [pageSizeOptions]="pageSizeOptions"
+    [pageIndex]="pageIndex">
 </mat-paginator>
   </mat-card>
 

src/app/graphs/graphs.component.ts

@@ -49,7 +49,12 @@ export class GraphsComponent implements OnInit {
     },
     legend: {
       onClick: (e, i) => {
+        if (!this.ChartName.includes('Station')){
         this.form.location = String(i.text);
+        }
+        else {
+          this.form.location = '';
+        }
         this.updateGraphData();
       }
     },
@@ -90,9 +95,12 @@ export class GraphsComponent implements OnInit {
   startDate: Date = new Date();
   endDate: Date = new Date();
 
-  currentPage = 0;
+  pageIndex = 0;
+  totalItems = 0;
+
   pageSize = 10;
-  pageSizeOptions: number[] = [10, 20, 50, 100];
+  pageSizeOptions = [5, 10, 25];
+  showFirstLastButtons = true;
 
   form: SearchForm = {
     startDate: '',
@@ -104,8 +112,16 @@ export class GraphsComponent implements OnInit {
   };
 
   updatePage(event: PageEvent) {
-    this.currentPage = event.pageIndex;
+    this.pageSize = event.pageSize;
-    this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult);
+    this.pageIndex = event.pageIndex;
+    this.pageIndex = event.pageIndex;
+    this.graphService.getRawSearchData(this.form, this.pageIndex, this.pageSize).subscribe(
+      searchResult => {this.searchResult = searchResult;
+    });
+  }
+
+  cancelEvent(event) {
+    event.preventDefault();
   }
 
   searchToday(): void {
@@ -174,9 +190,9 @@ export class GraphsComponent implements OnInit {
 
     this.graphService.getTopBarData(this.form).subscribe(tempData => {
       this.topBarData = tempData;
+      this.totalItems = this.topBarData[0];
     });
-    this.currentPage = 0;
+    this.graphService.getRawSearchData(this.form, 0, this.pageSize).subscribe(searchResult => this.searchResult = searchResult);
-    this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult);
   }
 
   ngOnInit(): void {

src/app/services/graph.service.ts

@@ -32,9 +32,10 @@ export class GraphService {
       });
   }
 
-  getRawSearchData(form: SearchForm, page: number): Observable<Sample[]> {
+  getRawSearchData(form: SearchForm, page: number, itemsPerPage: number ): Observable<Sample[]> {
     let params = this.createParams(form);
     params = params.set('page', String(page));
+    params = params.set('items_per_page', String(itemsPerPage));
 
     return this.httpClient
       .get<Sample[]>(this.apiRoot + `/dashboard/search`, { params })

src/app/test-week-date-adapter.ts

@@ -0,0 +1,9 @@
+import { NativeDateAdapter } from '@angular/material/core';
+
+
+/** Adapts the native JS Date for use with cdk-based components that work with dates. */
+export class TestWeekDateAdapter extends NativeDateAdapter {
+  getFirstDayOfWeek(): number {
+   return 1;
+  }
+}