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

Add new uikit version. Change sticky in monitor page

This commit is contained in:
Konstantinos Triantafyllou 2022-03-14 18:36:50 +02:00
parent 586b28aeb3
commit 1f653c10d5
8 changed files with 36 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
angular.json
View File

@ -50,9 +50,8 @@
"src/material.scss"
],
"scripts": [
"src/assets/common-assets/common/jquery.js",
"src/assets/common-assets/common/uikit.min.js",
"src/assets/common-assets/common/uikit-icons.min.js",
"src/assets/openaire-theme/js/uikit.min.js",
"src/assets/openaire-theme/js/uikit-icons.min.js",
"node_modules/jquery/dist/jquery.js"
]
},

8
src/app/app.component.ts
View File

@ -273,12 +273,12 @@ export class AppComponent implements OnInit, OnDestroy {
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
if (this.stakeholder) {
if (!this.hasAdminMenu) {
if (!this.hasAdminMenu && this.isFrontPage) {
this.menuHeader = {
route: "/" + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
logoUrl: 'assets/common-assets/logo-services/monitor/inverted.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg",
position: 'center',
badge: true,
@ -351,8 +351,8 @@ export class AppComponent implements OnInit, OnDestroy {
route: null,
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: "Monitor",
logoUrl: 'assets/common-assets/logo-large-monitor.png',
logoSmallUrl: "assets/common-assets/logo-small-monitor.png",
logoUrl: 'assets/common-assets/logo-services/monitor/main.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'left',
badge: true,
stickyAnimation: true,

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

@ -39,11 +39,12 @@
</ng-template>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div [class.uk-hidden]="stickyPageHeader" class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
<img [src]="stakeholder | logoUrl" class="uk-width-small">
<div class="uk-grid uk-flex-middle uk-margin-top" [class.uk-margin-medium-top]="!stickyPageHeader" uk-grid>
<img [class.uk-hidden]="!stickyPageHeader" [src]="stakeholder | logoUrl" class="uk-width-xsmall">
<img [class.uk-hidden]="stickyPageHeader" [src]="stakeholder | logoUrl" class="uk-width-small">
<div class="uk-width-expand">
<h2 class="uk-h6 uk-margin-remove uk-text-primary-gradient">Dashboard</h2>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold" [class.uk-text-large]="!stickyPageHeader">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove" [class.uk-h6]="stickyPageHeader">{{stakeholder.name}}</h1>
</div>
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin">
@ -51,7 +52,8 @@
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
[queryParams]="queryParams">
<span class="title">{{category.name}}</span>
</a>
</li>
@ -70,11 +72,12 @@
</div>-->
</div>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
<ul class="uk-subnav uk-subnav-pill">
<ul class="uk-subnav uk-subnav-pill-alt">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[queryParams]="queryParams"
class="uk-margin-remove-bottom"
><span>{{subCategory.name}}</span></a>
</li>
@ -180,22 +183,18 @@
<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'"
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
'image'" class="uk-alert uk-alert-danger uk-text-center">I frames preview is disabled
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'"
class="uk-alert uk-alert-danger uk-text-center">
I frames preview is disabled
</div>
<!-- {{chartsActiveType.get(i).safeResourceUrl}}-->
<!-- <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')">
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div>
<!-- TODO Check description-->
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding multi-line-ellipsis lines-3">

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

@ -158,7 +158,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
}
if (this.stakeholder.type == "funder") {
// this.filters.push({title: "Co-funded research outcomes",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
// values:[{name: "true", id: "co-funded", selected: false, number: 0}, {name: "false", id: "no-co-funded", selected: false, number: 0}]
// values:[{fname: "true", id: "co-funded", selected: false, number: 0}, {name: "false", id: "no-co-funded", selected: false, number: 0}]
// ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
this.filters.push({
title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
@ -209,7 +209,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
} else {
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
if (this.piwikSiteId) {
console.debug(this.piwikSiteId)
this.subscriptions.push(this._piwikService.trackView(this.properties, this.title, this.piwikSiteId).subscribe());
}
}
@ -499,12 +498,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
}
public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {
let url = stakeholder + '/' + topic + ((category) ? ('/'
+ category) : '') + ((subcategory) ? ('/' + subcategory) : '');
return this._router.navigate([url], {queryParams: this.queryParams});
}
public quote(param: string): string {
return StringUtils.quote(param);
}
@ -518,42 +511,19 @@ export class MonitorComponent implements OnInit, OnDestroy {
}
public isPublicOrIsMember(visibility: Visibility): boolean {
if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
return false;
}
return true;
return !(visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC"));
}
public countSubCategoriesToShow(category: Category): number {
let counter = 0;
for (let sub of category.subCategories) {
if (this.isPublicOrIsMember(sub.visibility)) {
counter++;
}
}
return counter;
return category.subCategories.filter(subCategory => this.isPublicOrIsMember(subCategory.visibility)).length;
}
public countSectionsWithIndicatorsToShow(sections: Section[]):number {
let counter = 0;
sections.forEach(section => {
section.indicators.forEach(indicator => {
if (this.isPublicOrIsMember(indicator.visibility)) {
counter++;
}
});
});
return counter;
return sections.map(section => this.countIndicatorsToShow(section.indicators)).reduce((sum, current) => sum + current, 0);
}
public countIndicatorsToShow(indicators: Indicator[]): number {
let counter = 0;
indicators.forEach(indicator => {
if (this.isPublicOrIsMember(indicator.visibility)) {
counter++;
}
});
return counter;
return indicators.filter(indicator => this.isPublicOrIsMember(indicator.visibility)).length;
}
public get feedback() {

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit c49a79c79835449f752a0a7ffea13eb7b41cd3e5
Subproject commit 4ccabced6dd8624a0c7cde617891cca4d10e0751

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit 6f63344329bd6561ddc15f44c31c98e604e8da77
Subproject commit 1984b52dd48a7454c72a5d6ec840eef153a7c167

13
src/assets/monitor-dashboard-custom.css
View File

@ -35,18 +35,15 @@
--button-secondary-color-hover: var(--light-color);
--button-secondary-border-color-hover: transparent;
/* Backgrounds */
--primary-background: #2C2C2C;
--primary-background-image: none;
--secondary-background: var(--monitor-color);
--secondary-background-image:none;
/* Fonts */
--font-primary-color: var(--monitor-color);
--font-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
--text-primary-color: var(--monitor-color);
--text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
/* List */
--list-disc-color: var(--monitor-color);
/* Pills */
--pill-alt-background-active-image: linear-gradient(122deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);;
}
/*}*/

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit d9750df104e9054241493465257cb6dfe7a0e774
Subproject commit de51fea2dd3c8a64fc3c68ed29a9aa8f71034a54