73 lines
3.4 KiB
HTML
73 lines
3.4 KiB
HTML
<div class="ui-g">
|
|
<div class="ui-g-12">
|
|
<br />
|
|
<div class="flex-row" style="justify-content: center;">
|
|
<div>
|
|
<span style="padding-right: 12px;font-weight: bold;">From</span>
|
|
<p-calendar [showIcon]="true" [(ngModel)]="fromDate" (onSelect)="onDateSelected('from', $event)" [inputStyle]="{'width':'90px'}" placeholder="From Month" dateFormat="mm/yy" view="month" [readonlyInput]="true"></p-calendar>
|
|
</div>
|
|
<div>
|
|
<span style="padding-right: 12px;font-weight: bold;">To</span>
|
|
<p-calendar [showIcon]="true" [(ngModel)]="toDate" [minDate]="fromDate" [maxDate]="maxToDate" (onDateSelected)="onDateSelected('to', $event)" [inputStyle]="{'width':'90px'}" placeholder="To Month" dateFormat="mm/yy" view="month" [readonlyInput]="true"></p-calendar>
|
|
</div>
|
|
<div>
|
|
<p-checkbox id="billable" name="billable" label="Billable" [(ngModel)]="billable" binary="true"></p-checkbox>
|
|
</div>
|
|
<div>
|
|
<button pButton icon="ui-icon-search" [disabled]="(!fromDate || !toDate)" (click)="findUsage()"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="usages && usages.length" class="ui-g-12">
|
|
<p-table [value]="usages" [columns]="cols" [responsive]="true" styleClass="table-w-grid">
|
|
<ng-template pTemplate="caption">
|
|
<div class="ui-g ui-g-nopad">
|
|
<div class="ui-g-6 ui-g-nopad" style="text-align: left">
|
|
<span class="table-caption-1" style="line-height: 1.35em;">Customer Spray Overview</span>
|
|
</div>
|
|
<div class="ui-g-6 ui-g-nopad" style="text-align: right">
|
|
<div style="display:inline-flex">
|
|
<button pButton icon="ui-icon-grid-on" label="Export Detail" (click)="exportUsageDetail()"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template pTemplate="header" let-columns>
|
|
<tr>
|
|
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [width]="col.width">
|
|
{{col.header}}
|
|
<p-sortIcon [field]="col.field"></p-sortIcon>
|
|
</th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="body" let-rowData let-columns="columns">
|
|
<tr>
|
|
<td *ngFor="let col of columns" [ngSwitch]="col.field">
|
|
<span *ngSwitchCase="'customer'">{{rowData[col.field]}}</span>
|
|
<div *ngSwitchDefault>
|
|
<span *ngIf="rowData[col.field] == 0; else usage">{{rowData[col.field]}}</span>
|
|
<ng-template #usage>
|
|
<div>{{rowData[col.field] | number:'1.1-1':'en'}} ha</div>
|
|
<div>{{haToAcres(rowData[col.field]) | number:'1.1-1':'en'}} ac</div>
|
|
</ng-template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="footer" let-columns>
|
|
<tr>
|
|
<td *ngFor="let col of columns" [ngSwitch]="col.field">
|
|
<span *ngSwitchCase="'customer'" style="font-weight: bold;">Total Spray</span>
|
|
<div *ngSwitchDefault>
|
|
<span *ngIf="totals[col.field] == 0; else usage">{{totals[col.field]}}</span>
|
|
<ng-template #usage>
|
|
<div>{{totals[col.field] | number:'1.1-1':'en'}} ha</div>
|
|
<div>{{haToAcres(totals[col.field]) | number:'1.1-1':'en'}} ac</div>
|
|
</ng-template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>
|
|
</div> |