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

Improved Form Input on Dashboard

This commit is contained in:
Nile Walker 2021-01-29 11:44:18 -05:00
parent ddb12308f5
commit 069cacfd97
2 changed files with 53 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,7 +72,7 @@
>Run</button> >Run</button>
</mat-card-header> </mat-card-header>
<div > <p>
<mat-form-field style="height:5vw"> <mat-form-field style="height:5vw">
<mat-date-range-input [rangePicker]="picker"> <mat-date-range-input [rangePicker]="picker">
<input matStartDate [(ngModel)]="start_date"> <input matStartDate [(ngModel)]="start_date">
@ -81,14 +81,16 @@
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker> <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field> </mat-form-field>
</p>
<p>
<mat-form-field style="height:5vw"> <mat-form-field style="height:5vw">
<mat-label>Location ID(s)</mat-label> <mat-label>Location ID(s)</mat-label>
<input matInput <input matInput
[(ngModel)]="form.location" [(ngModel)]="form.location"
placeholder="Ex. Pizza"> placeholder="Ex. Pizza">
</mat-form-field> </mat-form-field>
</p>
<p>
<mat-form-field style="height:5vw"> <mat-form-field style="height:5vw">
<mat-label>Student ID(s)</mat-label> <mat-label>Student ID(s)</mat-label>
<textarea matInput <textarea matInput
@ -96,7 +98,8 @@
placeholder="Ex. It makes me feel..."></textarea> placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field> </mat-form-field>
</p>
<p>
<mat-form-field style="height:5vw"> <mat-form-field style="height:5vw">
<mat-label>Compute ID(s)</mat-label> <mat-label>Compute ID(s)</mat-label>
<textarea matInput <textarea matInput
@ -104,7 +107,7 @@
placeholder="Ex. It makes me feel..."></textarea> placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field> </mat-form-field>
</div> </p>
</mat-card> </mat-card>
</mat-grid-tile> </mat-grid-tile>
@ -159,29 +162,50 @@
<mat-card-header> <mat-card-header>
<h3 class="mb-0">Records to be processed </h3> <h3 class="mb-0">Records to be processed </h3>
</mat-card-header> </mat-card-header>
<div class="table-responsive">
<table class="table align-items-center table-flush"> <table mat-table [dataSource]="searchResult" class="mat-elevation-z8">
<thead>
<tr> <!--- Note that these columns can bea defined in any order.
<th>Barcode </th> The actual rendered columns are set as a property on the row definition" -->
<th>Date</th>
<th>Location</th> <!-- Position Column -->
<th>IDs</th> <ng-container matColumnDef="position">
<th>Contacts</th> <th mat-header-cell *matHeaderCellDef> Barcode </th>
<th>Notifications</th>
</tr> <td mat-cell *matCellDef="let sample; let i = index;"> {{sample.barcode}} </td>
</thead> </ng-container>
<tbody>
<tr *ngFor="let sample of searchResult"> <!-- Name Column -->
<td>{{sample.barcode}}</td> <ng-container matColumnDef="name">
<td>{{sample.date| date :"medium"}}</td> <th mat-header-cell *matHeaderCellDef> Date </th>
<td>Location: {{sample.location}}<br>Station: {{sample.station}}</td>
<td>Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}</td> <td mat-cell *matCellDef="let sample; let i = index;"> {{sample.date}}</td>
<td>Phone: {{sample.phone}}<br>Email: {{sample.email}}</td> </ng-container>
</tr>
</tbody> <!-- Weight Column -->
</table> <ng-container matColumnDef="weight">
</div> <th mat-header-cell *matHeaderCellDef> Location </th>
<td mat-cell *matCellDef="let sample; let i = index;"> Location: {{sample.location}}<br>Station: {{sample.station}}</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> IDs </th>
<td mat-cell *matCellDef="let sample; let i = index;">
Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}
</td>
</ng-container>
<ng-container matColumnDef="text">
<th mat-header-cell *matHeaderCellDef> Contacts </th>
<td mat-cell *matCellDef="let sample; let i = index;">
Phone: {{sample.phone}}<br>Email: {{sample.email}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card> </mat-card>
</mat-grid-tile> </mat-grid-tile>

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

@ -87,10 +87,10 @@ export class GraphsComponent implements OnInit {
} }
} }
}; };
tempData: JSON = <JSON>{}; tempData: JSON = <JSON>{};
searchResult: Sample[] = []; searchResult: Sample[] = [];
displayedColumns: string[] = ['position', 'name', 'weight', 'text', 'email'];
start_date: Date = new Date(); start_date: Date = new Date();
end_date: Date = new Date(); end_date: Date = new Date();