Added Chart Layout

src/app/app.component.ts

@@ -10,7 +10,7 @@ declare var jQuery: any;
   styleUrls: ['./app.component.scss']
 })
 
-export class AppComponent implements OnInit {
+export class AppComponent {
   loading: boolean;
 
   constructor(
@@ -20,13 +20,6 @@ export class AppComponent implements OnInit {
     this.titleService.setTitle(this.environment.title);
   }
 
-  ngOnInit() {
-    (function ($) {
-      $("#menu-toggle").click(function () {
-        $("#wrapper").toggleClass("toggled");
-      });
-    })(jQuery);
-  }
   reload() {
     this.loading = true;
     setTimeout(() => this.loading = false, 300);

src/app/app.module.ts

@@ -48,6 +48,8 @@ import { MatNativeDateModule, DateAdapter } from '@angular/material/core';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import { CustomDateAdapter } from './custom-date-adapter';
 import { MatTableModule } from '@angular/material/table'  
+import {MatGridListModule} from '@angular/material/grid-list';
+
 
 
 
@@ -91,6 +93,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
   ],
   imports: [
     MatPaginatorModule,
+    MatGridListModule,
     MatTableModule,
     MatNativeDateModule,
     BrowserModule,

src/app/deposits/deposits.component.html

@@ -1,57 +1,84 @@
+<div
+  class="full-height bg-primary"
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  fxLayoutGap="40px"
+>
+  <mat-card fxFlex="50%">
+    <mat-card-header>
+      <h1>Inventory Deposits</h1>
+    </mat-card-header>
+        <mat-card-header> <h4 class="card-title">(Total Inventory - Total Prints) since 10/5/2020: ""| safe:" samples_since" Labels
+        Remaining</h4>
+    </mat-card-header>
 
-<div class="container-fluid mt--7">
+    <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
+      <table mat-table [dataSource]="depositList" class="mat-elevation-z8">
 
-  <div class="card">
+        <!--- Note that these columns can bea defined in any order.
-    <div class="card-header">
+              The actual rendered columns are set as a property on the row definition" -->
-      <h3 class="mb-0">Inventory Deposits</h3>
-    </div>
-    <div class="card-body">
     
-      <h5 class="card-title">(Total Inventory - Total Prints) since first_deposit | safe: samples_since | safe Strips
+        <!-- Position Column -->
-        Remaining</h5>
+        <ng-container matColumnDef="position">
+          <th mat-header-cell *matHeaderCellDef> Date Added <br>
+            <input matInput 
+            [(ngModel)]="date_temp" 
+            [value] = "date_temp" 
+            [matDatepicker]="picker"
+            (keyup.enter)="addDeposit()">
+            <mat-datepicker #picker></mat-datepicker>
+            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          </th>
+          <td mat-cell *matCellDef="let element"> {{element.date_added | date:"medium"}} </td>
+        </ng-container>
       
-      <div class="justify-content-center">
+        <!-- Name Column -->
-        <div class="table-responsive">
+        <ng-container matColumnDef="name">
-          <!-- Projects table -->
+          <th mat-header-cell *matHeaderCellDef> Amount <br>
-          <table class="table align-items-center table-flush">
+            <input 
-            <thead>
+            [(ngModel)]="newDeposit.amount" 
-              <tr>
+            (keyup.enter)="addDeposit()">
-                <th>Date Added</th>
+          </th>
-                <th>Amount</th>
+          <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
-                <th>Notes</th>
+        </ng-container>
-              </tr>
-            </thead>
-            <tbody>
       
-              <tr>
+        <!-- Weight Column -->
+        <ng-container matColumnDef="weight">
+          <th mat-header-cell *matHeaderCellDef> Notes 
+            <br> <input 
+            [(ngModel)]="newDeposit.notes"
+            (keyup.enter)="addDeposit()">
+          </th>
+          <td mat-cell *matCellDef="let element"> {{element.notes}} </td>
+        </ng-container>
     
-                <td>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <input matInput [(ngModel)]="date_temp" [value] = "date_temp" [matDatepicker]="picker">
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                    <mat-datepicker #picker></mat-datepicker>
+      </table>
+      <mat-card-actions>
+        <button
+        mat-flat-button
+        class="btn-lg"
+        color="accent"
+        fxFlex="50%"
+        (click) = "prev()"
+      ><mat-icon>navigate_before</mat-icon>Prev </button>
+        <button
+          id="btn_next"
+          #nextButton="matButton"
+          mat-flat-button
+          class="btn-lg"
+          color="accent"
+          fxFlex="50%"
+          (click) = "next()"
+        >Next <mat-icon>navigate_next</mat-icon></button>
        
-                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      </mat-card-actions>
  
-                </td>
-                <td><input [(ngModel)]="newDeposit.amount" name="amount"></td>
-                <td><input [(ngModel)]="newDeposit.notes" name="notes">
-                  <button type="submit" (click)="addDeposit()">Submit</button>
-                </td>
-              </tr>
-              <tr *ngFor="let deposit of depositList">
-                <td>{{deposit.date_added | date : 'full' }}</td>
-                <td>{{deposit.amount}}</td>
-                <td>{{deposit.notes}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
 
-    <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
-    (page)="updatePage($event)">
-  </mat-paginator>
-      </div>
-    </div>
-  </div>
      
+    </mat-card-content>
+    
+  </mat-card>
 
 </div>

src/app/deposits/deposits.component.spec.ts

@@ -1,19 +1,55 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {APP_BASE_HREF} from '@angular/common';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Router} from '@angular/router';
+import {ApiService} from '../services/api.service';
+import {CacheService} from '../services/cache.service';
+import {SettingsService} from '../services/settings.service';
+import {MockEnvironment} from '../testing/environment.mock';
 
 import { DepositsComponent } from './deposits.component';
 
 describe('DepositsComponent', () => {
   let component: DepositsComponent;
   let fixture: ComponentFixture<DepositsComponent>;
+  const mockRouter = {navigate: jasmine.createSpy('navigate')};
+  let httpMock: HttpTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DepositsComponent ]
+      declarations: [ DepositsComponent ],
+      imports: [
+        HttpClientTestingModule,
+        MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+      ],
+      providers: [
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: Router, useValue: mockRouter},
+        ApiService,
+        CacheService,
+        SettingsService,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(DepositsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/deposits/deposits.component.ts

@@ -26,19 +26,34 @@ export class DepositsComponent implements OnInit {
   addDeposit(): void {
     this.newDeposit.date_added = this.date_temp.toLocaleDateString();
 
-    this.depositService.addDeposit(this.newDeposit).subscribe(deposit => this.depositList.push(deposit))
+    this.depositService.addDeposit(this.newDeposit).subscribe()
+    this.current_page = 0;
+    this.depositService.getDeposits(0).subscribe(searchResult => this.depositList = searchResult);
   }
 
   current_page: number = 0;
   
   pageSize: number = 10;
   pageSizeOptions: number[] = [10,20,50,100];
+  displayedColumns: string[] = ['position', 'name', 'weight'];
 
   updatePage(event: PageEvent) {
     this.current_page = event.pageIndex;
     this.depositService.getDeposits(this.current_page).subscribe(searchResult => this.depositList = searchResult);
   }
 
+  next(){
+    if (this.depositList.length > 0){
+    this.current_page += 1; 
+    this.depositService.getDeposits(this.current_page).subscribe(depositList => this.depositList = depositList);  }}
+
+  prev(){
+    if (this.current_page > 0){
+      this.current_page -= 1; 
+      this.depositService.getDeposits(this.current_page).subscribe(depositList => this.depositList = depositList);
+    }
+  }
+  
   ngOnInit(): void {
     this.depositService.getDeposits(0).subscribe(searchResult => this.depositList = searchResult);
   }

src/app/graphs/graphs.component.css

@@ -1,3 +1,25 @@
-.card{
+.topleft {
-    display: flex;
+    position: absolute;
-}
+    top: 0;
+    left: 0;
+  } 
+  .topright {
+    position: absolute;
+    top: 0;
+    right: 0;
+  } 
+  .bottomleft {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  } 
+  .bottomright {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  } 
+  .box {
+    border-radius: 5px;
+    padding: 50px;
+    font-size: 150%;
+  }

src/app/graphs/graphs.component.html

@@ -1,209 +1,210 @@
-<div class="container-fluid mt--7">
+<div class="full-height bg-primary" fxLayout="space-evenly" fxLayoutAlign="center center" fxLayoutGap="40px">
-  <div class="row mb-4">
+
-    <div class="col-xl-2">
+    <mat-card-content class="containerX">
-      <div class="card card-stats  mb-xl-0">
+      <div class="colorNested box" style="height: auto;">
-        <div class="card-body">
+        <div gdGap="30px" gdColumns="200px 200px 200px"
-          <div class="row">
+             gdAreas="header  header  header | sidebar content content | footer  footer  footer">
-            <div class="col">
+          <div class="box" gdArea="header">
-              <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within<br> {{form.start_date | date}}
+            
-                -
+              <div class="col-xl-2">
-                {{form.end_date | date}}</h5>
+                <div class="card card-stats  mb-xl-0">
-              <span id="card_1" class="h2 font-weight-bold">{{topBarData[0]}}</span>
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col">
+                        <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within<br> {{form.start_date | date}}
+                          -
+                          {{form.end_date | date}}</h5>
+                        <span id="card_1" class="h2 font-weight-bold">{{topBarData[0]}}</span>
+          
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xl-2">
+                <div class="card card-stats  mb-xl-0">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col">
+                        <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{start_date_1 | date}}
+                          -
+                          {{end_date_1 | date}}</h5>
+                        <span id="card_1" class="h2 font-weight-bold mb-0">{{topBarData[1]}}</span>
+          
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xl-2">
+                <div class="card card-stats  mb-xl-0">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col">
+                        <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{start_date_2 | date}}
+                          -
+                          {{end_date_2 | date}}</h5>
+                        <span id="card_1" class="h2 font-weight-bold mb-0">{{topBarData[2]}}</span>
+          
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xl-3">
+                <div class="card card-stats  mb-xl-0">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col">
+                        <h5 class="card-title text-uppercase text-muted mb-0">Email Notifications within <br> {{form.start_date |
+                          date}} - {{form.end_date | date}}</h5>
+                        <span id="card_1" class="h2 font-weight-bold mb-0"><span
+                            style="color:green">{{topBarData[3]}}</span>/<span style="color:red">{{topBarData[4]}}</span></span>
+          
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xl-3 ">
+                <div class="card card-stats  mb-xl-0">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col">
+                        <h5 class="card-title text-uppercase text-muted mb-0">Text Notifications within <br> {{form.start_date |
+                          date}} - {{form.end_date | date}}</h5>
+                        <span id="card_1" class="h2 font-weight-bold mb-0"><span
+                            style="color:green">{{topBarData[5]}}</span>/<span style="color:red">{{topBarData[6]}}</span></span>
+          
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+          
           
-            </div>
           </div>
+          <div class="box" gdArea="sidebar">Sidebar</div>
+          <div class="box" gdArea="content" style="position: relative;">Content
+            <br /> The four arrows are inline images inside the content area.
+            <img src="http://gridbyexample.com/examples/code/arrow-top-left.png"
+                 alt="top left" class="topleft" />
+            <img src="http://gridbyexample.com/examples/code/arrow-top-right.png"
+                 alt="top right" class="topright" />
+            <img src="http://gridbyexample.com/examples/code/arrow-bottom-left.png"
+                 alt="bottom left" class="bottomleft" />
+            <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png"
+                 alt="bottom right" class="bottomright" /></div>
+          <div class="box" gdArea="footer">Footer</div>
         </div>
       </div>
-    </div>
+    </mat-card-content>
-    <div class="col-xl-2">
+      <!-- <mat-card>
-      <div class="card card-stats  mb-xl-0">
+        <mat-card-header>
-        <div class="card-body">
+          <h1>{{ChartName}}</h1>
-          <div class="row">
+        </mat-card-header>
-            <div class="col">
-              <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{start_date_1 | date}}
-                -
-                {{end_date_1 | date}}</h5>
-              <span id="card_1" class="h2 font-weight-bold mb-0">{{topBarData[1]}}</span>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-xl-2">
-      <div class="card card-stats  mb-xl-0">
-        <div class="card-body">
-          <div class="row">
-            <div class="col">
-              <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{start_date_2 | date}}
-                -
-                {{end_date_2 | date}}</h5>
-              <span id="card_1" class="h2 font-weight-bold mb-0">{{topBarData[2]}}</span>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-xl-3">
-      <div class="card card-stats  mb-xl-0">
-        <div class="card-body">
-          <div class="row">
-            <div class="col">
-              <h5 class="card-title text-uppercase text-muted mb-0">Email Notifications within <br> {{form.start_date |
-                date}} - {{form.end_date | date}}</h5>
-              <span id="card_1" class="h2 font-weight-bold mb-0"><span
-                  style="color:green">{{topBarData[3]}}</span>/<span style="color:red">{{topBarData[4]}}</span></span>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-xl-3 ">
-      <div class="card card-stats  mb-xl-0">
-        <div class="card-body">
-          <div class="row">
-            <div class="col">
-              <h5 class="card-title text-uppercase text-muted mb-0">Text Notifications within <br> {{form.start_date |
-                date}} - {{form.end_date | date}}</h5>
-              <span id="card_1" class="h2 font-weight-bold mb-0"><span
-                  style="color:green">{{topBarData[5]}}</span>/<span style="color:red">{{topBarData[6]}}</span></span>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-  <div class="row">
-    <div class="col mb-3">
-      <div class="card">
-        <div class="card-header">
-          <h3 class="mb-3 ">{{ChartName}}</h3>
-        </div>
-        <div style="display: block">
           <canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions"
             [legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
           </canvas>
-        </div>
+      </mat-card> -->
+    
+  <!-- <mat-card >
+    <mat-card-header>
+      <div class=row>
+        <h3 class="mb-3 col ">Search</h3>
+        <button (click)="searchToday()" class="btn btn-sm btn-primary col mr-3">Today</button>
+        <button (click)="searchAll()" class="btn btn-sm btn-primary col mr-3">All</button>
+        <button (click)="updateGraphData()" class="btn btn-sm btn-primary col ">Run</button>
+      </div>
+    </mat-card-header>
+
+    <div class="col">
+      <div class="form-group row">
+        <label for="range" class="col mt-3 mr-3">Search Range</label>
+        <mat-form-field>
+          <mat-date-range-input [rangePicker]="picker">
+            <input matStartDate [(ngModel)]="start_date">
+            <input matEndDate [(ngModel)]="end_date">
+          </mat-date-range-input>
+          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-date-range-picker #picker></mat-date-range-picker>
+        </mat-form-field>
+      </div>
+
+      <div class="form-group row ">
+
+        <label for="location" class="col mt-3 mr-3">Location ID(s)</label>
+
+        <textarea class="form-control col mr-3 mt-3" id="location" [(ngModel)]="form.location" rows="2"></textarea>
+
+      </div>
+      <div class="form-group row ">
+
+        <label for="student" class="col mt-3 mr-3">Student ID(s)</label>
+
+        <textarea class="form-control col mr-3 mt-3" id="student" [(ngModel)]="form.student_id" rows="2"></textarea>
+
+      </div>
+      <div class="form-group row ">
+
+        <label for="compute" class="col mt-3 mr-3">Compute ID(s)</label>
+
+        <textarea class="form-control col mr-3 mt-3" id="compute" [(ngModel)]="form.compute_id" rows="2"></textarea>
+
       </div>
     </div>
+  </mat-card>  -->
 
-    <div class="col mb-3">
+  <!-- <div class="card-header">
-      <div class="card ">
+        <h3 class="mb-3 ">Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h3>
-        <div class="card-header">
-
-          <div class=row>
-            <h3 class="mb-3 col ">Search</h3>
-            <button (click)="searchToday()" class="btn btn-sm btn-primary col mr-3">Today</button>
-            <button (click)="searchAll()" class="btn btn-sm btn-primary col mr-3">All</button>
-            <button (click)="updateGraphData()" class="btn btn-sm btn-primary col ">Run</button>
-          </div>
-
-        </div>
-
-        <div class="col">
-          <div class="form-group row">
-            <label for="range" class="col mt-3 mr-3">Search Range</label>
-            <mat-form-field>
-              <mat-date-range-input [rangePicker]="picker">
-                <input matStartDate [(ngModel)]="start_date">
-                <input matEndDate [(ngModel)]="end_date">
-              </mat-date-range-input>
-              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-              <mat-date-range-picker #picker></mat-date-range-picker>
-            </mat-form-field>
-          </div>
-
-          <div class="form-group row ">
-
-            <label for="location" class="col mt-3 mr-3">Location ID(s)</label>
-
-            <textarea class="form-control col mr-3 mt-3" id="location" [(ngModel)]="form.location" rows="2"></textarea>
-
-          </div>
-          <div class="form-group row ">
-
-            <label for="student" class="col mt-3 mr-3">Student ID(s)</label>
-
-            <textarea class="form-control col mr-3 mt-3" id="student" [(ngModel)]="form.student_id" rows="2"></textarea>
-
-          </div>
-          <div class="form-group row ">
-
-            <label for="compute" class="col mt-3 mr-3">Compute ID(s)</label>
-
-            <textarea class="form-control col mr-3 mt-3" id="compute" [(ngModel)]="form.compute_id" rows="2"></textarea>
-
-          </div>
-        </div>
       </div>
-    </div>
+      <div style="display: block">
+        <canvas baseChart [datasets]="weekdayChartsData" [labels]="weekdayChartLabels" [options]="barChartOptions"
+          [legend]=false chartType="horizontalBar">
+        </canvas>
+      </div>
+
+
+      <div class="card-header">
+        <h3 class="mb-3">Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h3>
+      </div>
+      <div style="display: block">
+        <canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions"
+          [legend]=false chartType="horizontalBar">
+        </canvas>
+      </div> -->
+
+  <!-- <div class="card row ">
+  <div class="card-header">
+    <h3 class="mb-0">Records to be processed </h3>
   </div>
-  <div class="row">
+  <div class="table-responsive">
+    <table class="table align-items-center table-flush">
+      <thead>
+        <tr>
+          <th>Barcode </th>
+          <th>Date</th>
+          <th>Location</th>
+          <th>IDs</th>
+          <th>Contacts</th>
+          <th>Notifications</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let sample of searchResult">
+          <td>{{sample.barcode}}</td>
+          <td>{{sample.date| date :"medium"}}</td>
+          <td>Location: {{sample.location}}<br>Station: {{sample.station}}</td>
+          <td>Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}</td>
+          <td>Phone: {{sample.phone}}<br>Email: {{sample.email}}</td>
 
-    <div class="col mb-3 ">
+        </tr>
-      <div class="card ">
+      </tbody>
-        <div class="card-header">
+    </table>
-          <h3 class="mb-3 ">Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h3>
-        </div>
-        <div style="display: block">
-          <canvas baseChart [datasets]="weekdayChartsData" [labels]="weekdayChartLabels" [options]="barChartOptions"
-            [legend]=false chartType="horizontalBar">
-          </canvas>
-        </div>
-      </div>
-    </div>
-
-    <div class="col mb-3">
-      <div class="card">
-        <div class="card-header">
-          <h3 class="mb-3">Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h3>
-        </div>
-        <div style="display: block">
-          <canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions"
-            [legend]=false chartType="horizontalBar">
-          </canvas>
-        </div>
-
-      </div>
-    </div>
   </div>
 
-  <div class="card row ">
+  <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
-    <div class="card-header">
+    (page)="updatePage($event)">
-      <h3 class="mb-0">Records to be processed </h3>
+  </mat-paginator> -->
-    </div>
-    <div class="table-responsive">
-      <table class="table align-items-center table-flush">
-        <thead>
-          <tr>
-            <th>Barcode </th>
-            <th>Date</th>
-            <th>Location</th>
-            <th>IDs</th>
-            <th>Contacts</th>
-            <th>Notifications</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let sample of searchResult">
-            <td>{{sample.barcode}}</td>
-            <td>{{sample.date| date :"medium"}}</td>
-            <td>Location: {{sample.location}}<br>Station: {{sample.station}}</td>
-            <td>Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}</td>
-            <td>Phone: {{sample.phone}}<br>Email: {{sample.email}}</td>
 
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
-      (page)="updatePage($event)">
-    </mat-paginator>
-
-  </div>
 </div>

src/app/graphs/graphs.component.ts

@@ -8,13 +8,35 @@ import { SearchForm } from '../models/search_form'
 import {PageEvent} from '@angular/material/paginator'
 import * as pluginDataLabels from 'chartjs-plugin-datalabels';
 
+export interface Tile {
+  color: string;
+  cols: number;
+  rows: number;
+  text: string;
+}
+
 @Component({
   selector: 'app-graphs',
   templateUrl: './graphs.component.html',
   styleUrls: ['./graphs.component.css']
 })
+
 export class GraphsComponent implements OnInit {
 
+  tiles: Tile[] = [
+    // {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
+    // {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
+    // {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
+    // {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+    {text: 'One', cols: 1, rows: 1, color: 'lightblue'},
+    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'},
+    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
+    {text: 'Four', cols: 1, rows: 1, color: '#DDBDF1'},
+    {text: 'Five', cols: 1, rows: 1, color: '#DDBDF1'},
+    {text: 'Six', cols: 1, rows: 1, color: '#DDBDF1'},
+    {text: 'Seven', cols: 2, rows: 1, color: '#DDBDF1'}
+  ];
+
   constructor(private graphService: GraphService) { }
 
   topBarData: Array<number> = [0, 0, 0, 0, 0, 0, 0];

src/app/imported-files/imported-files.component.html

@@ -13,7 +13,7 @@
     <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
         <table mat-table [dataSource]="fileList" class="mat-elevation-z8">
 
-            <!--- Note that these columns can be defined in any order.
+            <!--- Note that these columns can bea defined in any order.
                   The actual rendered columns are set as a property on the row definition" -->
           
             <!-- Position Column -->

src/app/imported-files/imported-files.component.ts

@@ -4,13 +4,6 @@ import { ApiService } from '../services/api.service';
 import {PageEvent} from '@angular/material/paginator'
 import { IvyFile } from '../models/ivyfile.interface';
 
-export interface PeriodicElement {
-  name: string;
-  position: number;
-  weight: number;
-  symbol: string;
-}
-
 @Component({
   selector: 'app-imported-files',
   templateUrl: './imported-files.component.html',
@@ -28,7 +21,6 @@ export class ImportedFilesComponent implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight'];
   current_page: number = 0;
   pageSize: number = 10;
-  pageSizeOptions: number[] = [10,20,50,100];
   
   updatePage(event: PageEvent) {
     this.current_page = event.pageIndex;