Added Better Notification Window
This commit is contained in:
Nile Walker
parent
79a69b5d61
commit
ddb12308f5
|
|
@ -49,6 +49,7 @@ 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';
|
||||
import {MatDividerModule} from '@angular/material/divider';
|
||||
|
||||
|
||||
|
||||
|
|
@ -93,6 +94,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
|
|||
],
|
||||
imports: [
|
||||
MatPaginatorModule,
|
||||
MatDividerModule,
|
||||
MatGridListModule,
|
||||
MatTableModule,
|
||||
MatNativeDateModule,
|
||||
|
|
|
|||
|
|
@ -51,7 +51,12 @@
|
|||
</th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.notes}} </td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="text">
|
||||
<mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element; let i = index;">{{i}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export class DepositsComponent implements OnInit {
|
|||
notes: ''
|
||||
};
|
||||
date_temp = new Date(Date.now());
|
||||
|
||||
notify_data : Array<Array<number>>[] = [];
|
||||
constructor(
|
||||
private depositService: ApiService) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,5 @@
|
|||
.topleft {
|
||||
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%;
|
||||
}
|
||||
mat-card {
|
||||
width: calc(100% - 70px);
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
|
||||
|
|
@ -1,127 +1,79 @@
|
|||
<div class="full-height bg-primary" fxLayout="space-evenly" fxLayoutAlign="center center" fxLayoutGap="40px">
|
||||
<mat-grid-list cols="6" rowHeight="2:1" class="full-height bg-primary">
|
||||
<mat-grid-tile colspan="1">
|
||||
<mat-card>
|
||||
<h5 class="card-title text-uppercase text-muted">Total Samples within<br> {{form.start_date | date}}
|
||||
-
|
||||
{{form.end_date | date}}</h5>
|
||||
<span class="h2 font-weight-bold">{{topBarData[0]}}</span>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile colspan="1" rowspan="1">
|
||||
|
||||
<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="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> {{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 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>
|
||||
</mat-card-content>
|
||||
<!-- <mat-card>
|
||||
<mat-card-header>
|
||||
<h1>{{ChartName}}</h1>
|
||||
</mat-card-header>
|
||||
<canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions"
|
||||
[legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
|
||||
</canvas>
|
||||
</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>
|
||||
<mat-card>
|
||||
<h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{start_date_1 | date}}
|
||||
-
|
||||
{{end_date_1 | date}}</h5>
|
||||
<span class="h2 font-weight-bold ">{{topBarData[1]}}</span>
|
||||
</mat-card>
|
||||
|
||||
<div class="col">
|
||||
<div class="form-group row">
|
||||
<label for="range" class="col mt-3 mr-3">Search Range</label>
|
||||
<mat-form-field>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile colspan="1" rowspan="1">
|
||||
<mat-card>
|
||||
<h5 class="card-title text-uppercase text-muted ">Total Samples within <br> {{start_date_2 |
|
||||
date}}
|
||||
-
|
||||
{{end_date_2 | date}}</h5>
|
||||
<span class="h2 font-weight-bold ">{{topBarData[2]}}</span>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile colspan="1" rowspan="1">
|
||||
<mat-card>
|
||||
<h5 class="card-title text-uppercase text-muted ">Email Notifications within <br>
|
||||
{{form.start_date |
|
||||
date}} - {{form.end_date | date}}</h5>
|
||||
<span class="h2 font-weight-bold "><span style="color:green">{{topBarData[3]}}</span>/<span
|
||||
style="color:red">{{topBarData[4]}}</span></span>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile colspan="1" rowspan="1">
|
||||
<mat-card>
|
||||
<h5 class="card-title text-uppercase text-muted ">Text Notifications within <br>
|
||||
{{form.start_date |
|
||||
date}} - {{form.end_date | date}}</h5>
|
||||
<span class="h2 font-weight-bold"><span style="color:green">{{topBarData[5]}}</span>/<span
|
||||
style="color:red">{{topBarData[6]}}</span></span>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile colspan="2" rowspan="4 ">
|
||||
<mat-card>
|
||||
<mat-card-header fxLayout="row" fxLayoutGap="10px">
|
||||
<h3>Search</h3>
|
||||
<button
|
||||
mat-flat-button
|
||||
class="btn-lg"
|
||||
color="primary"
|
||||
(click)="searchToday()"
|
||||
>Today</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
class="btn-lg"
|
||||
color="primary"
|
||||
(click)="searchAll()"
|
||||
>All</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
class="btn-lg"
|
||||
color="primary"
|
||||
(click)="updateGraphData()"
|
||||
fxFlex="25%"
|
||||
>Run</button>
|
||||
|
||||
</mat-card-header>
|
||||
<div >
|
||||
<mat-form-field style="height:5vw">
|
||||
<mat-date-range-input [rangePicker]="picker">
|
||||
<input matStartDate [(ngModel)]="start_date">
|
||||
<input matEndDate [(ngModel)]="end_date">
|
||||
|
|
@ -129,82 +81,113 @@
|
|||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="height:5vw">
|
||||
<mat-label>Location ID(s)</mat-label>
|
||||
<input matInput
|
||||
[(ngModel)]="form.location"
|
||||
placeholder="Ex. Pizza">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="height:5vw">
|
||||
<mat-label>Student ID(s)</mat-label>
|
||||
<textarea matInput
|
||||
[(ngModel)]="form.student_id"
|
||||
placeholder="Ex. It makes me feel..."></textarea>
|
||||
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="height:5vw">
|
||||
<mat-label>Compute ID(s)</mat-label>
|
||||
<textarea matInput
|
||||
[(ngModel)]="form.compute_id"
|
||||
placeholder="Ex. It makes me feel..."></textarea>
|
||||
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
<div class="form-group row ">
|
||||
</mat-grid-tile>
|
||||
|
||||
<label for="location" class="col mt-3 mr-3">Location ID(s)</label>
|
||||
<mat-grid-tile colspan="4" rowspan="4">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<h1>{{ChartName}}</h1>
|
||||
</mat-card-header>
|
||||
|
||||
<textarea class="form-control col mr-3 mt-3" id="location" [(ngModel)]="form.location" rows="2"></textarea>
|
||||
<canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions"
|
||||
[legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
|
||||
</canvas>
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
</mat-grid-tile>
|
||||
|
||||
<label for="student" class="col mt-3 mr-3">Student ID(s)</label>
|
||||
<mat-grid-tile colspan="3" rowspan="3">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<h1>Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h1>
|
||||
</mat-card-header>
|
||||
|
||||
<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="card-header">
|
||||
<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>
|
||||
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
|
||||
|
||||
<mat-grid-tile colspan="3" rowspan="3">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<h1>Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h1>
|
||||
</mat-card-header>
|
||||
|
||||
<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 class="card row ">
|
||||
<div class="card-header">
|
||||
<h3 class="mb-0">Records to be processed </h3>
|
||||
</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>
|
||||
</mat-card>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile colspan="6" rowspan="5">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<h3 class="mb-0">Records to be processed </h3>
|
||||
</mat-card-header>
|
||||
<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-card>
|
||||
</mat-grid-tile>
|
||||
|
||||
</mat-grid-list>
|
||||
|
||||
<!--
|
||||
<mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
|
||||
(page)="updatePage($event)">
|
||||
</mat-paginator> -->
|
||||
|
||||
</div>
|
||||
</mat-paginator> -->
|
||||
|
|
@ -23,20 +23,6 @@ export interface Tile {
|
|||
|
||||
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];
|
||||
|
|
@ -102,11 +88,6 @@ export class GraphsComponent implements OnInit {
|
|||
}
|
||||
};
|
||||
|
||||
arrayOne(n: number): any[] {
|
||||
return Array(n);
|
||||
|
||||
}
|
||||
|
||||
tempData: JSON = <JSON>{};
|
||||
|
||||
searchResult: Sample[] = [];
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</mat-card-header>
|
||||
|
||||
<mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
|
||||
<table mat-table [dataSource]="fileList" class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="fileDataList" class="mat-elevation-z8">
|
||||
|
||||
<!--- Note that these columns can bea defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
|
@ -19,21 +19,41 @@
|
|||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="position">
|
||||
<th mat-header-cell *matHeaderCellDef> Date Added </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.date_added | date:"medium"}} </td>
|
||||
|
||||
<td mat-cell *matCellDef="let element; let i = index;"> {{element[0] | date:"medium"}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> File Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.file_name}} </td>
|
||||
|
||||
<td mat-cell *matCellDef="let element; let i = index;"> {{element[1]}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="weight">
|
||||
<th mat-header-cell *matHeaderCellDef> Sample Count </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.sample_count}} </td>
|
||||
|
||||
<td mat-cell *matCellDef="let element; let i = index;"> {{element[2]}} </td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="email">
|
||||
|
||||
<th mat-header-cell *matHeaderCellDef> Email Notifications </th>
|
||||
<td mat-cell *matCellDef="let element; let i = index;">
|
||||
<span style="color:green">{{element[3]}}</span>/<span
|
||||
style="color:red">{{element[4]}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="text">
|
||||
<th mat-header-cell *matHeaderCellDef> Text Notifications </th>
|
||||
<td mat-cell *matCellDef="let element; let i = index;">
|
||||
<span style="color:green">{{element[5]}}</span>/<span
|
||||
style="color:red">{{element[6]}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ApiService } from '../services/api.service';
|
||||
|
||||
import {PageEvent} from '@angular/material/paginator'
|
||||
import { PageEvent } from '@angular/material/paginator'
|
||||
import { IvyFile } from '../models/ivyfile.interface';
|
||||
|
||||
@Component({
|
||||
|
|
@ -10,30 +10,33 @@ import { IvyFile } from '../models/ivyfile.interface';
|
|||
styleUrls: ['./imported-files.component.css']
|
||||
})
|
||||
export class ImportedFilesComponent implements OnInit {
|
||||
fileList: IvyFile[] = [];
|
||||
fileDataList: any[][] = [];
|
||||
|
||||
constructor(private fileService: ApiService) { }
|
||||
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.fileService.getFiles(0).subscribe(fileList => this.fileList = fileList);
|
||||
this.fileService.getFilesInfo(0).subscribe(fileList => this.fileDataList = fileList);
|
||||
|
||||
}
|
||||
displayedColumns: string[] = ['position', 'name', 'weight'];
|
||||
displayedColumns: string[] = ['position', 'name', 'weight', 'text', 'email'];
|
||||
current_page: number = 0;
|
||||
pageSize: number = 10;
|
||||
|
||||
updatePage(event: PageEvent) {
|
||||
this.current_page = event.pageIndex;
|
||||
this.fileService.getFiles(this.current_page).subscribe(fileList => this.fileList = fileList);
|
||||
|
||||
updatePage() {
|
||||
|
||||
this.fileService.getFilesInfo(this.current_page).subscribe(fileList => this.fileDataList = fileList);
|
||||
}
|
||||
next(){
|
||||
if (this.fileList.length > 0){
|
||||
this.current_page += 1;
|
||||
this.fileService.getFiles(this.current_page).subscribe(fileList => this.fileList = fileList); }}
|
||||
prev(){
|
||||
if (this.current_page > 0){
|
||||
this.current_page -= 1;
|
||||
this.fileService.getFiles(this.current_page).subscribe(fileList => this.fileList = fileList);
|
||||
next() {
|
||||
if (this.fileDataList.length > 0) {
|
||||
this.current_page += 1;
|
||||
this.updatePage();
|
||||
}
|
||||
}
|
||||
prev() {
|
||||
if (this.current_page > 0) {
|
||||
this.current_page -= 1;
|
||||
this.updatePage();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,15 +60,16 @@ export class ApiService {
|
|||
|
||||
|
||||
/** */
|
||||
getFiles(page: Number): Observable<IvyFile[]> {
|
||||
getFilesInfo(page: Number): Observable<Array<Array<any>>> {
|
||||
let params = new HttpParams().set("page", String(page));
|
||||
const url = this.apiRoot + this.endpoints.ivy_file;
|
||||
return this.httpClient
|
||||
.get<IvyFile[]>(url, { params: params })
|
||||
.get<Array<Array<any>>>(url, { params: params })
|
||||
.pipe(timeout(1000), catchError(err => this._handleError(err)))
|
||||
.pipe(catchError(err => this._handleError(err)));
|
||||
}
|
||||
|
||||
|
||||
/** Add new sample */
|
||||
addSample(sample: Sample): Observable<null> {
|
||||
const url = this.apiRoot + this.endpoints.sample;
|
||||
|
|
|
|||
Loading…
Reference in New Issue