sartography
/
uva-covid19-testing-frontend
mirror of https://github.com/sartography/uva-covid19-testing-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added Chart Layout

This commit is contained in:
Nile Walker 2021-01-28 01:37:03 -05:00
parent be5f495bfa
commit 79a69b5d61
10 changed files with 379 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.component.ts
View File

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

3
src/app/app.module.ts
View File

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

119
src/app/deposits/deposits.component.html
View File

@ -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>
<div class="justify-content-center"> <input matInput
<div class="table-responsive"> [(ngModel)]="date_temp"
<!-- Projects table --> [value] = "date_temp"
<table class="table align-items-center table-flush"> [matDatepicker]="picker"
<thead> (keyup.enter)="addDeposit()">
<tr>
<th>Date Added</th>
<th>Amount</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input matInput [(ngModel)]="date_temp" [value] = "date_temp" [matDatepicker]="picker">
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
</th>
<td mat-cell *matCellDef="let element"> {{element.date_added | date:"medium"}} </td>
</ng-container>
</td> <!-- Name Column -->
<td><input [(ngModel)]="newDeposit.amount" name="amount"></td> <ng-container matColumnDef="name">
<td><input [(ngModel)]="newDeposit.notes" name="notes"> <th mat-header-cell *matHeaderCellDef> Amount <br>
<button type="submit" (click)="addDeposit()">Submit</button> <input
</td> [(ngModel)]="newDeposit.amount"
</tr> (keyup.enter)="addDeposit()">
<tr *ngFor="let deposit of depositList"> </th>
<td>{{deposit.date_added | date : 'full' }}</td> <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
<td>{{deposit.amount}}</td> </ng-container>
<td>{{deposit.notes}}</td>
</tr> <!-- Weight Column -->
</tbody> <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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> <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-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" </mat-card-actions>
(page)="updatePage($event)">
</mat-paginator>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div> </div>

38
src/app/deposits/deposits.component.spec.ts
View File

@ -1,19 +1,55 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; 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'; import { DepositsComponent } from './deposits.component';
describe('DepositsComponent', () => { describe('DepositsComponent', () => {
let component: DepositsComponent; let component: DepositsComponent;
let fixture: ComponentFixture<DepositsComponent>; let fixture: ComponentFixture<DepositsComponent>;
const mockRouter = {navigate: jasmine.createSpy('navigate')};
let httpMock: HttpTestingController;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ 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(); .compileComponents();
}); });
beforeEach(() => { beforeEach(() => {
httpMock = TestBed.inject(HttpTestingController);
fixture = TestBed.createComponent(DepositsComponent); fixture = TestBed.createComponent(DepositsComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();

17
src/app/deposits/deposits.component.ts
View File

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

26
src/app/graphs/graphs.component.css
View File

@ -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%;
} }

73
src/app/graphs/graphs.component.html
View File

@ -1,5 +1,11 @@
<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">
<mat-card-content class="containerX">
<div class="colorNested box" style="height: auto;">
<div gdGap="30px" gdColumns="200px 200px 200px"
gdAreas="header header header | sidebar content content | footer footer footer">
<div class="box" gdArea="header">
<div class="col-xl-2"> <div class="col-xl-2">
<div class="card card-stats mb-xl-0"> <div class="card card-stats mb-xl-0">
<div class="card-body"> <div class="card-body">
@ -76,33 +82,41 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="box" gdArea="sidebar">Sidebar</div>
<div class="col mb-3"> <div class="box" gdArea="content" style="position: relative;">Content
<div class="card"> <br /> The four arrows are inline images inside the content area.
<div class="card-header"> <img src="http://gridbyexample.com/examples/code/arrow-top-left.png"
<h3 class="mb-3 ">{{ChartName}}</h3> 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 style="display: block"> </div>
</mat-card-content>
<!-- <mat-card>
<mat-card-header>
<h1>{{ChartName}}</h1>
</mat-card-header>
<canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions" <canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions"
[legend]="true" chartType="bar" (chartClick)="chartClicked($event)"> [legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
</canvas> </canvas>
</div> </mat-card> -->
</div>
</div>
<div class="col mb-3">
<div class="card ">
<div class="card-header">
<!-- <mat-card >
<mat-card-header>
<div class=row> <div class=row>
<h3 class="mb-3 col ">Search</h3> <h3 class="mb-3 col ">Search</h3>
<button (click)="searchToday()" class="btn btn-sm btn-primary col mr-3">Today</button> <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)="searchAll()" class="btn btn-sm btn-primary col mr-3">All</button>
<button (click)="updateGraphData()" class="btn btn-sm btn-primary col ">Run</button> <button (click)="updateGraphData()" class="btn btn-sm btn-primary col ">Run</button>
</div> </div>
</mat-card-header>
</div>
<div class="col"> <div class="col">
<div class="form-group row"> <div class="form-group row">
@ -139,14 +153,9 @@
</div> </div>
</div> </div>
</div> </mat-card> -->
</div>
</div>
<div class="row">
<div class="col mb-3 "> <!-- <div class="card-header">
<div class="card ">
<div class="card-header">
<h3 class="mb-3 ">Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h3> <h3 class="mb-3 ">Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h3>
</div> </div>
<div style="display: block"> <div style="display: block">
@ -154,11 +163,8 @@
[legend]=false chartType="horizontalBar"> [legend]=false chartType="horizontalBar">
</canvas> </canvas>
</div> </div>
</div>
</div>
<div class="col mb-3">
<div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="mb-3">Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h3> <h3 class="mb-3">Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h3>
</div> </div>
@ -166,13 +172,9 @@
<canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions" <canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions"
[legend]=false chartType="horizontalBar"> [legend]=false chartType="horizontalBar">
</canvas> </canvas>
</div> </div> -->
</div> <!-- <div class="card row ">
</div>
</div>
<div class="card row ">
<div class="card-header"> <div class="card-header">
<h3 class="mb-0">Records to be processed </h3> <h3 class="mb-0">Records to be processed </h3>
</div> </div>
@ -203,7 +205,6 @@
<mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
(page)="updatePage($event)"> (page)="updatePage($event)">
</mat-paginator> </mat-paginator> -->
</div> </div>
</div>

22
src/app/graphs/graphs.component.ts
View File

@ -8,13 +8,35 @@ import { SearchForm } from '../models/search_form'
import {PageEvent} from '@angular/material/paginator' import {PageEvent} from '@angular/material/paginator'
import * as pluginDataLabels from 'chartjs-plugin-datalabels'; import * as pluginDataLabels from 'chartjs-plugin-datalabels';
export interface Tile {
color: string;
cols: number;
rows: number;
text: string;
}
@Component({ @Component({
selector: 'app-graphs', selector: 'app-graphs',
templateUrl: './graphs.component.html', templateUrl: './graphs.component.html',
styleUrls: ['./graphs.component.css'] styleUrls: ['./graphs.component.css']
}) })
export class GraphsComponent implements OnInit { 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) { } constructor(private graphService: GraphService) { }
topBarData: Array<number> = [0, 0, 0, 0, 0, 0, 0]; topBarData: Array<number> = [0, 0, 0, 0, 0, 0, 0];

2
src/app/imported-files/imported-files.component.html
View File

@ -13,7 +13,7 @@
<mat-card-content fxLayout="row wrap" fxLayoutAlign="center center"> <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
<table mat-table [dataSource]="fileList" class="mat-elevation-z8"> <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" --> The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column --> <!-- Position Column -->

8
src/app/imported-files/imported-files.component.ts
View File

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