MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

indicators selected filters in one row slider

This commit is contained in:
argirok 2022-04-21 16:25:05 +03:00
parent eeeb4df8d1
commit e70dc8a586
1 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/app/monitor/monitor.component.html
View File

@ -1,28 +1,40 @@
<ng-template #selected_filters_pills>
<span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-width-auto">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
</span>
</span>
<ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of filter.values; let i = index;">
<ng-container *ngIf="value.selected">
<span class="uk-width-auto">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" class="uk-close uk-icon" [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
</span>
<div class=" uk-width-1-1" uk-slider="finite: true">
<div class="uk-position-relative " >
<div class="uk-slider-container ">
<ul class=" uk-slider-items " style="flex-wrap: nowrap !important;" >
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
</span>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</li>
<ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of filter.values; let i = index;">
<ng-container *ngIf="value.selected">
<li class="">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" class="uk-close uk-icon" [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
</span>
</li>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ul>
</div>
<div class="">
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
</div>
</div>
</div>
</ng-template>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
@ -227,7 +239,7 @@
</div>
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas offcanvas"
uk-offcanvas="flip:true; overlay: true">
<div class="uk-offcanvas-bar">
<div class="uk-offcanvas-bar uk-width-small@m">
<div class="uk-float-right">
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>