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

Remove some console logs. Fix selected filters alignment

This commit is contained in:
Konstantinos Triantafyllou 2022-05-05 17:18:58 +03:00
parent 6fe8b482d9
commit c9499ea0a6
6 changed files with 87 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,38 @@
<ng-template #selected_filters_pills>
<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="">
<div *ngIf="periodFilter.selectedFromAndToValues.length > 0 && filters.length > 0" class="uk-width-1-1" uk-slider="finite: true">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-grid-small uk-margin-small-right uk-flex-nowrap" uk-grid>
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
<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">
<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>
</li>
<ng-container *ngFor="let filter of filters ">
<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>
<li>
<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="">
<div>
<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>
@ -38,26 +41,26 @@
</ng-template>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder | logoUrl" class="uk-margin-right">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-top">
<ul class="uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
[queryParams]="queryParams">
<span class="title">{{category.name}}</span>
</a>
</li>
</ng-template>
</ul>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder | logoUrl" class="uk-margin-right">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-top">
<ul class="uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
[queryParams]="queryParams">
<span class="title">{{category.name}}</span>
</a>
</li>
</ng-template>
</ul>
</div>
</div>
<div inner>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
@ -121,9 +124,10 @@
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<!-- for printing only -->
<span *ngIf="numberResults.get(i + '-' + j)" class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- -->
<!-- for printing only -->
<span *ngIf="numberResults.get(i + '-' + j)"
class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- -->
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div>
<!-- <div *ngIf="indicator.description || indicator.additionalDescription"
@ -145,7 +149,8 @@
<div [class.uk-margin-large-top]="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0">
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card">
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
@ -167,64 +172,71 @@
<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<iframe
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
<img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
</div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="custom-description-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="custom-description-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc (clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</ng-container>
</div>
<div class="uk-margin-medium-top uk-flex hideInfo">
<div class="uk-margin-medium-top uk-text-small uk-flex hideInfo">
<!-- Last Stats Date-->
<div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by
<a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" class="graph">OpenAIRE Research Graph</a>
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-muted">Send us your <a class="uk-link" [href]="feedback" target="_self">feedback</a>.</span>
<span class="uk-text-meta">Send us your </span>
<a class="uk-link" [href]="feedback" target="_self">feedback</a>
<span class="uk-text-meta">.</span>
</div>
</div>
</ng-template>

1
src/app/monitor/monitor.component.ts
View File

@ -112,7 +112,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
}
this.keyword = this._fb.control('');
this.subscriptions.push(this.keyword.valueChanges.subscribe(value => {
console.log("Keyword Changed!");
//TODO do a real action
}));
let subscription: Subscription;

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 8559aa439f68090de4dc6934e351424928d18894
Subproject commit 0168c5e8946570b7e9b4f585217fc31354546295

1
src/app/topic/indicators.component.ts
View File

@ -1269,7 +1269,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.editing = false;
this.importLoading = false;
} else if (indicators.length > 0) {
console.log(indicators);
this.saveIndicators(indicators)
}
if (indicators.length == 0) {

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 29bdacee147bbf1bd28957457221d20969bd3f44
Subproject commit e322594022feefa0c1900e65620311225e51b17f

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit d45f01647f43b9e729bfc7adb3d639a8f2364995
Subproject commit ffffa5d8e2dcb01ce8c8b89d33e19bb626c29c37