rdio-scanner/client/imports/app/radio/radio-search/radio-search.component.html

<div class="radio-body">
    <div class="radio-button-group">
        <div class="radio-button-spacer"></div>
        <button (click)="close()" mat-icon-button>
            <mat-icon>arrow_forward</mat-icon>
        </button>
    </div>
    <div class="radio-list">
        <mat-table [dataSource]="calls">
            <ng-container matColumnDef="control">
                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                <mat-cell *matCellDef="let call">
                    <button (click)="play(call)" mat-icon-button>
                        <mat-icon>play_arrow</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="date">
                <mat-header-cell *matHeaderCellDef>
                    <span>Date</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let call">
                    <span>{{ call.startTime | date:'MM/dd' }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="time">
                <mat-header-cell *matHeaderCellDef>
                    <span>Time</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let call">
                    <span>{{ call.startTime | date:'HH:mm' }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="system">
                <mat-header-cell *matHeaderCellDef>
                    <span>System</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let call">
                    <span>{{ call.systemData?.name || call.system }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="alpha">
                <mat-header-cell *matHeaderCellDef>
                    <span>Tag</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let call">
                    <span>{{ call.talkgroupData?.alphaTag || call.talkgroup }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="description">
                <mat-header-cell *matHeaderCellDef>
                    <span>Description</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let call">
                    <span>{{ call.talkgroupData?.description || (call.freq | freq) }}</span>
                </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="columns"></mat-header-row>
            <mat-row *matRowDef="let call; columns: columns"></mat-row>
        </mat-table>
        <mat-paginator [length]="count" [hidePageSize]="true" (page)="onPage($event)" [pageSize]="pageSize"
            [showFirstLastButtons]="true">
        </mat-paginator>
    </div>
    <form class="radio-filters" [formGroup]="form" autocomplete="off">
        <div>
            <mat-form-field>
                <mat-label>
                    Sort order
                </mat-label>
                <mat-select formControlName="sort">
                    <mat-option [value]="1">
                        Ascending
                    </mat-option>
                    <mat-option [value]="-1">
                        Descending
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field>
                <mat-label>
                    Date
                </mat-label>
                <input (focus)="date.open()" formControlName="date" [matDatepicker]="date" matInput [max]="dateMax" [min]="dateMin" placeholder="Choose a date">
                <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
                <mat-datepicker #date></mat-datepicker>
            </mat-form-field>
        </div>
        <div>
            <mat-form-field>
                <mat-label>
                    System
                </mat-label>
                <mat-select formControlName="system">
                    <mat-option [value]="-1">
                        All Systems
                    </mat-option>
                    <mat-option *ngFor="let system of systems" [value]="system.system">
                        {{ system.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field>
                <mat-label>
                    Talkgroup
                </mat-label>
                <mat-select formControlName="talkgroup">
                    <mat-option [value]="-1">
                        All Talkgroups
                    </mat-option>
                    <mat-option *ngFor="let talkgroup of talkgroups" [value]="talkgroup.dec">
                        {{ talkgroup.alphaTag }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div>
            <button (click)="resetFilters()" mat-raised-button type="button">
                Reset
            </button>
        </div>
    </form>
</div>