<div class="row my-3 mx-2 no-gutters align-items-center">
<div class="col-auto page-form">
<div class="form-row p-2 align-items-center" *ngIf="!!filters">
<div class="col-auto pl-3"><b>Epoch</b>:</div>
<div class="btn-group col-auto" ngbDropdown>
<button class="btn btn-light btn-sm" type="button" id="epoch-select" ngbDropdownToggle>
{{ filters['EPOCH'].name }}</button>
<ul id="epoch-select-list" ngbDropdownMenu>
<li ngbDropdownItem *ngFor="let e of epochs" class="p-0">
<button type="button" class="btn btn-link w-100 text-left" (click)="setEpoch(e)">{{e.name}}</button>
</li>
</ul>
</div>
<div class="col-auto pl-4"><b>Type</b>:</div>
<div class="btn-group col-auto" ngbDropdown>
<button class="btn btn-light btn-sm" type="button" id="type-select" ngbDropdownToggle>
{{ filters['PRODUCT_TYPE'].label }}</button>
<ul id="type-select-list" ngbDropdownMenu *ngIf="types">
<li ngbDropdownItem *ngFor="let t of types" class="p-0">
<button type="button" class="btn btn-link w-100 text-left" (click)="setType(t)">{{t.label}}</button>
</li>
</ul>
</div>
<form class="form-inline col-auto pl-4" [formGroup]="formGroup">
<div class="form-group">
<input type="text" class="form-control" id="pattern" placeholder="Pattern/Id" formControlName="pattern">
</div>
</form>
<div class="col-auto pl-3"><b>Sort By</b>:</div>
<div class="btn-group col-auto" ngbDropdown>
<button class="btn btn-light btn-sm" type="button" id="sort-select" ngbDropdownToggle>
{{ getPrettyName(filters['PRODUCT_SORT']) }}</button>
<ul ngbDropdownMenu>
<li ngbDropdownItem *ngFor="let col of sortColumns">
<button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setSortColumn(col)">{{getPrettyName(col)}}</button>
</li>
</ul>
</div>
<div class="btn-group col-auto" ngbDropdown>
<button class="btn btn-light btn-sm" type="button" id="sort-direction" ngbDropdownToggle>
{{ filters['SORT_DIRECTION'] }}</button>
<ul ngbDropdownMenu>
<li ngbDropdownItem *ngFor="let direction of sortDirections">
<button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setSortDirection(direction)">{{direction}}</button>
</li>
</ul>
</div>
<div class="col-auto">
<button class="btn btn-sm btn-info" (click)="getPageInfoAndProduct()"><fa-icon [icon]="faSyncAlt"></fa-icon> </button>
</div>
</div>
</div>
<div class="col">
<p class="text-danger text-right p-2 m-0">{{ ((currentPage - 1) * resultsPerPage) + 1 }}
- {{ currentPage * resultsPerPage < numResults ? currentPage * resultsPerPage : numResults}}
of {{ numResults }}</p>
</div>
<div class="col-auto">
<div class="form-group m-0">
<div class="btn-group">
<button id="to-first-page" class="btn btn-danger btn-sm" (click)="goToPage(1)">
<fa-icon [icon]="faFastBackward"></fa-icon>
</button>
<button id="back-one-page" class="btn btn-danger btn-sm" (click)="goToPage(currentPage-1)">
<fa-icon [icon]="faStepBackward"></fa-icon>
</button>
<div class="btn-group" ngbDropdown>
<button class="btn btn-danger btn-sm" type="button" id="page-select" ngbDropdownToggle>
Page {{currentPage}}</button>
<ul style="height: 200px; overflow-y: scroll;" ngbDropdownMenu>
<li ngbDropdownItem *ngFor="let p of getPages(); let i = index" class="p-0">
<button type="button" class="btn btn-link w-100 text-left" (click)="goToPage(i+1)">Page {{i + 1}}</button>
</li>
</ul>
</div>
<button id="forward-one-page" class="btn btn-danger btn-sm" (click)="goToPage(currentPage+1)">
<fa-icon [icon]="faStepForward"></fa-icon>
</button>
<button id="to-last-page" class="btn btn-danger btn-sm" (click)="goToPage(pages)">
<fa-icon [icon]="faFastForward"></fa-icon>
</button>
</div>
</div>
</div>
<div class="col-auto ml-2">
<button type="button" class="btn btn-danger btn-sm float-right" *ngIf="!showNewForm" (click)="showNewForm = true">
<fa-icon [icon]="faPlus"></fa-icon>
Generate products
</button>
<button type="button" class="btn btn-danger btn-sm float-right" *ngIf="showNewForm" (click)="showNewForm = false">
<fa-icon [icon]="faMinus"></fa-icon>
Generate products
</button>
</div>
</div>
<div class="row my-2 mx-2 no-gutters" *ngIf="showNewForm">
<div class="col">
<form [formGroup]="productFormGroup" (ngSubmit)="generateProduct()">
<div class="form-row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label class="control-label" for="epoch">Epoch:</label>
<select class="form-control" name="epoch" id="epoch" formControlName="epoch">
<option value="{{e.id}}" *ngFor="let e of generateProductEpochs()">{{e.name}}</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label class="control-label" for="sbname">Enter name for schedblock product:</label>
<input type="text" class="form-control" name="sbname" id="sbname" placeholder="T13t14.T12t14"
data-lpignore="true"
ng-model="sbname" formControlName="sbname">
</div>
</div>
</div>
<div class="form-row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label class="control-label" for="sbid">Enter OPT SB ID:</label>
<input type="number" class="form-control" name="sbid" id="sbid" placeholder="36158915"
formControlName="sbid"/>
<div class="text-danger" *ngIf="!productsbId.pristine && !productsbId.valid">SB ID can only be digits</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label class="control-label" for="minitiles">Enter minitile names:</label>
<input type="text" class="form-control" name="minitiles" id="minitiles" placeholder="T13t14,T12t14"
formControlName="minitiles"/>
<p class="small">The tile names must be separated by commas</p>
</div>
</div>
</div>
<button type="submit" [disabled]="!formGroup.valid" class="btn btn-primary generateProduct">Generate products
</button>
<button type="button" class="btn btn-secondary ml-2" (click)="showNewForm = false">Cancel</button>
</form>
</div>
</div>
<ng-container *ngIf="products; else loading">
<div class="row no-gutters mx-1">
<div class="col-1 px-2 py-3 thead_th">Id</div>
<div class="col px-2 py-3 thead_th">Name</div>
<div class="col px-2 py-3 thead_th" *ngIf="showImageDetails">Phase Center (deg) <span
class="ml-3">Image Size (deg)</span></div>
<div class="col-auto px-2 py-3 thead_th">Status</div>
<div class="col-auto px-2 py-3 thead_th" *ngIf="canDeleteProducts"> </div>
</div>
<ng-container *ngFor="let product of products">
<app-product [product]="product" [canDeleteProducts]="canDeleteProducts"
(refreshProducts)="getPageInfoAndProduct()"></app-product>
</ng-container>
</ng-container>
<ng-template #loading>
<app-loading></app-loading>
</ng-template>