81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
|
<div class="main term">
|
||
|
|
<h1><span class="board">/k/</span> - Advanced Search</h1>
|
||
|
|
|
||
|
|
<!-- <pre>{{ queries | json }}</pre>-->
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Table columns</legend>
|
||
|
|
<ng-container *ngFor="let category of ['user', 'beatmap', 'score']">
|
||
|
|
<fieldset>
|
||
|
|
<legend>{{ category }}</legend>
|
||
|
|
<ng-container *ngFor="let field of fields">
|
||
|
|
<div *ngIf="field.category === category">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" [(ngModel)]="field.active" (change)="this.saveColumnsStatusToLocalStorage()"/>
|
||
|
|
{{ field.name }} <span class="text-muted" style="margin-left: 6px">{{ field.description }}</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</ng-container>
|
||
|
|
</fieldset>
|
||
|
|
</ng-container>
|
||
|
|
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<div class="search-container mt-2" *ngIf="this.queries">
|
||
|
|
<app-query-builder [queries]="this.queries" [fields]="this.mapSchemaFieldsToFields()"></app-query-builder>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset class="mt-2" *ngIf="this.sortingOrder">
|
||
|
|
<legend>sorting</legend>
|
||
|
|
|
||
|
|
<select>
|
||
|
|
<option *ngFor="let field of fields" [value]="field.name" (click)="this.sortingOrder.field = field.name">{{ field.name }}</option>
|
||
|
|
</select>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="sortingOrder" [(ngModel)]="this.sortingOrder.order" value="ASC" />
|
||
|
|
ASC
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="sortingOrder" [(ngModel)]="this.sortingOrder.order" value="DESC" />
|
||
|
|
DESC
|
||
|
|
</label>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<button (click)="search()" class="mb-2 mt-2">Search</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ng-container *ngIf="response">
|
||
|
|
<div class="scrollable-table">
|
||
|
|
<table class="table-border">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th *ngFor="let column of fields" [hidden]="!column.active" class="text-center">
|
||
|
|
{{ column.short_name }}
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr *ngFor="let entry of response.scores">
|
||
|
|
<td *ngFor="let column of fields" [hidden]="!column.active" class="text-center" style="line-height: 32px">
|
||
|
|
<ng-container *ngIf="column.type == 'number'">
|
||
|
|
{{ getValue(entry, column.name) | number }}
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngIf="column.type == 'flag'">
|
||
|
|
<span class="flag">{{ countryCodeToFlag(getValue(entry, column.name)) }}</span>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngIf="column.type == 'grade'">
|
||
|
|
<app-osu-grade [grade]="getValue(entry, column.name)"></app-osu-grade>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngIf="column.type == 'string'">
|
||
|
|
{{ getValue(entry, column.name) }}
|
||
|
|
</ng-container>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</ng-container>
|
||
|
|
|
||
|
|
</div>
|