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

[Monitor Dashaboard | Trunk]: 1. Add window resize method. 2. Some changes on stakeholder's page. 3. Make width of sidebar smaller. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59976 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-11-26 16:23:21 +00:00
parent 46b8958de8
commit cdc417b60c
7 changed files with 173 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/app.component.html
View File

@ -1,4 +1,3 @@
<!--disable_transitions -->
<div *ngIf="loading == true"> <div *ngIf="loading == true">
<loading [full]="true"></loading> <loading [full]="true"></loading>
</div> </div>

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

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core'; import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router'; import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router';
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties'; import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service'; import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
@ -72,6 +72,16 @@ export class AppComponent implements OnInit, OnDestroy {
})); }));
} }
@HostListener('window:resize', ['$event'])
onResize(event) {
if(this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
this.layoutService.setSmallScreen(false);
} else if(!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
this.layoutService.setSmallScreen(true);
this.layoutService.setOpen(false);
}
}
ngOnInit() { ngOnInit() {
if (typeof document !== 'undefined' && window) { if (typeof document !== 'undefined' && window) {
this.innerWidth = window.innerWidth; this.innerWidth = window.innerWidth;

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

@ -41,7 +41,7 @@
<!-- </div>--> <!-- </div>-->
</ng-template> </ng-template>
<div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle"> <div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
<div *ngIf="activeTopic && activeTopic.categories.length > 1" header> <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<nav class=" "> <nav class=" ">
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class=""> <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
<ul <ul
@ -50,9 +50,9 @@
<li *ngIf="isPublicOrIsMember(category.visibility)" <li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === [class.uk-active]="category.alias ===
activeCategory.alias"> activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)" <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
class="uk-margin-remove-bottom uk-h4" <span class="title">{{category.name}}</span>
><span class="title">{{category.name}}</span></a> </a>
</li> </li>
</ng-template> </ng-template>
</ul> </ul>
@ -64,21 +64,21 @@
<li *ngIf="isPublicOrIsMember(subCategory.visibility)" <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''"> [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)" <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
class="uk-margin-remove-bottom uk-h3" class="uk-margin-remove-bottom"
><span>{{subCategory.name}}</span></a> ><span>{{subCategory.name}}</span></a>
</li> </li>
</ng-template> </ng-template>
</ul> </ul>
<div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom"> <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small">
<span class="uk-grid-margin">Filters: </span> <span class="uk-grid-margin">Filters: </span>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
</div> </div>
</div> </div>
<div id="page_content_inner" inner> <div inner>
<div class=" indicators"> <div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
<div *ngIf="privateStakeholder"> <div *ngIf="privateStakeholder">
<div class="uk-text-center uk-height-medium"> <div class="uk-text-center uk-height-medium">
<div class="uk-h3 "><i> <h3><i>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
<path d="M0 0h24v24H0z" fill="none"/> <path d="M0 0h24v24H0z" fill="none"/>
<path <path
@ -86,7 +86,7 @@
</svg> </svg>
</i> </i>
Private data Private data
</div> </h3>
<div class="uk-text-large "></div> <div class="uk-text-large "></div>
</div> </div>
</div> </div>
@ -100,7 +100,7 @@
(activeCategory && activeCategory.description && activeCategory.description.length > 0) || (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" (activeTopic && activeTopic.description && activeTopic.description.length > 0))"
class="uk-text-center"> class="uk-text-center">
<div class="uk-h5 uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left"> <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}} (activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
@ -115,9 +115,9 @@
(activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0)) (activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0))
) || !activeTopic || !activeCategory || !activeSubCategory)"> ) || !activeTopic || !activeCategory || !activeSubCategory)">
<div class=" uk-text-center"> <div class=" uk-text-center">
<div class="uk-h3"> <h3>
No indicators available yet. Stay tuned! No indicators available yet. Stay tuned!
</div> </h3>
</div> </div>
</div> </div>
<div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top" <div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top"
@ -233,9 +233,10 @@
</div> </div>
<div class="uk-padding"> <div class="uk-padding">
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<div class="uk-h4 ">Filters</div> <h5>Filters</h5>
<a *ngIf="countSelectedFilters() > 1" <a *ngIf="countSelectedFilters() > 1"
class=" portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div> class=" portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a>
</div>
<div class="uk-grid uk-grid-small uk-text-small" uk-grid> <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
</div> </div>

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

@ -34,7 +34,7 @@ import {properties} from "../../environments/environment";
@Component({ @Component({
selector: 'monitor', selector: 'monitor',
templateUrl: 'monitor.component.html', templateUrl: 'monitor.component.html',
styleUrls:['monitor.component.css'] styleUrls: ['monitor.component.css']
}) })
export class MonitorComponent implements OnInit, OnDestroy { export class MonitorComponent implements OnInit, OnDestroy {
public user: User; public user: User;
@ -58,11 +58,20 @@ export class MonitorComponent implements OnInit, OnDestroy {
properties: EnvProperties = properties; properties: EnvProperties = properties;
filterToggle = false; filterToggle = false;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
filters:Filter[] = []; filters: Filter[] = [];
queryParams = {}; queryParams = {};
periodFilter:RangeFilter = { title: "Time range", filterId: "year", originalFilterIdFrom: null, originalFilterIdTo: null, selectedFromValue: null, selectedToValue: null, selectedFromAndToValues: ""}; periodFilter: RangeFilter = {
title: "Time range",
filterId: "year",
originalFilterIdFrom: null,
originalFilterIdTo: null,
selectedFromValue: null,
selectedToValue: null,
selectedFromAndToValues: ""
};
privateStakeholder = false; privateStakeholder = false;
public keyword: FormControl; public keyword: FormControl;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private _router: Router, private _router: Router,
@ -76,12 +85,12 @@ export class MonitorComponent implements OnInit, OnDestroy {
private layoutService: LayoutService, private layoutService: LayoutService,
private seoService: SEOService, private seoService: SEOService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private sanitizer: DomSanitizer, private _fb: FormBuilder, private router: Router) { private sanitizer: DomSanitizer, private _fb: FormBuilder, private router: Router) {
this.errorCodes = new ErrorCodes(); this.errorCodes = new ErrorCodes();
this.errorMessages = new ErrorMessagesComponent(); this.errorMessages = new ErrorMessagesComponent();
this.status = this.errorCodes.LOADING; this.status = this.errorCodes.LOADING;
} }
public ngOnInit() { public ngOnInit() {
this.keyword = this._fb.control(''); this.keyword = this._fb.control('');
this.subscriptions.push(this.keyword.valueChanges.subscribe(value => { this.subscriptions.push(this.keyword.valueChanges.subscribe(value => {
@ -91,7 +100,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
let subscription: Subscription; let subscription: Subscription;
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user; this.user = user;
this.subscriptions.push(this.route.params.subscribe(params => { this.subscriptions.push(this.route.params.subscribe(params => {
this.loading = true; this.loading = true;
this.activeTopic = null; this.activeTopic = null;
@ -114,18 +123,34 @@ export class MonitorComponent implements OnInit, OnDestroy {
if (stakeholder) { if (stakeholder) {
this.stakeholder = stakeholder; this.stakeholder = stakeholder;
// add fl0 filter only for EC // add fl0 filter only for EC
if(this.stakeholder.index_id == "ec__________::EC"){ if (this.stakeholder.index_id == "ec__________::EC") {
this.filters.push({title: "Funding Stream",filterId: "relfundinglevel0_id",originalFilterId: "relfundinglevel0_id", countSelectedValues: 0, this.filters.push({
values:[{name: "EC|FP7", id: "ec__________::EC::FP7", selected: false, number: 0}, {name: "EC|H2020", id: "ec__________::EC::H2020", selected: false, number: 0}] title: "Funding Stream",
,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""}); filterId: "relfundinglevel0_id",
originalFilterId: "relfundinglevel0_id",
countSelectedValues: 0,
values: [{name: "EC|FP7", id: "ec__________::EC::FP7", selected: false, number: 0}, {
name: "EC|H2020",
id: "ec__________::EC::H2020",
selected: false,
number: 0
}]
,
filterOperator: "or",
valueIsExact: true,
filterType: "radio",
radioValue: ""
});
} }
if(this.stakeholder.type == "funder"){ if (this.stakeholder.type == "funder") {
// this.filters.push({title: "Co-funded research outcomes",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0, // 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:[{name: "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:""}); // ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
this.filters.push({title: "Co-funded",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0, this.filters.push({
values:[{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}] title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
,filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue:""}); values: [{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}]
, filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue: ""
});
} }
this.initializeFilters(); this.initializeFilters();
this.seoService.createLinkForCanonicalURL(url, false); this.seoService.createLinkForCanonicalURL(url, false);
@ -139,7 +164,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subscriptions.push(this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe()); this.subscriptions.push(this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe());
} }
if(this.isPublicOrIsMember(stakeholder.visibility)) { if (this.isPublicOrIsMember(stakeholder.visibility)) {
//this.getDivContents(); //this.getDivContents();
// this.getPageContents(); // this.getPageContents();
this.status = this.errorCodes.DONE; this.status = this.errorCodes.DONE;
@ -147,7 +172,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
} else { } else {
this.privateStakeholder = true; this.privateStakeholder = true;
// this.navigateToError(); // this.navigateToError();
if(subscription) { if (subscription) {
subscription.unsubscribe(); subscription.unsubscribe();
} }
} }
@ -160,14 +185,15 @@ export class MonitorComponent implements OnInit, OnDestroy {
} }
})); }));
})); }));
} }
private initializeFilters(){
this.periodFilter.selectedFromValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range")==0)?this.queryParams['year'].split("range")[1].split(":")[0]:""; private initializeFilters() {
this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range")==0)?this.queryParams['year'].split("range")[1].split(":")[1]:""; this.periodFilter.selectedFromValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[0] : "";
this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[1] : "";
this.validateYearRange(false); this.validateYearRange(false);
for(let filter of this.filters) { for (let filter of this.filters) {
if (this.queryParams[filter.filterId]) { if (this.queryParams[filter.filterId]) {
for (let value of filter.values) { for (let value of filter.values) {
if (value.id == this.queryParams[filter.filterId]) { if (value.id == this.queryParams[filter.filterId]) {
@ -176,47 +202,50 @@ export class MonitorComponent implements OnInit, OnDestroy {
break; break;
} }
} }
}else{ } else {
this.clearfFilter(filter); this.clearfFilter(filter);
} }
} }
} }
private validateYearRange(navigateTo:boolean=false){
private validateYearRange(navigateTo: boolean = false) {
let validYears = true; let validYears = true;
if(this.periodFilter.selectedToValue && (this.periodFilter.selectedToValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedToValue, Dates.currentYear - 20, Dates.currentYear))){ if (this.periodFilter.selectedToValue && (this.periodFilter.selectedToValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedToValue, Dates.currentYear - 20, Dates.currentYear))) {
this.periodFilter.selectedToValue = Dates.currentYear+""; this.periodFilter.selectedToValue = Dates.currentYear + "";
validYears = false; validYears = false;
} }
if( this.periodFilter.selectedFromValue && (this.periodFilter.selectedFromValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedFromValue, Dates.currentYear - 20, Dates.currentYear))){ if (this.periodFilter.selectedFromValue && (this.periodFilter.selectedFromValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedFromValue, Dates.currentYear - 20, Dates.currentYear))) {
this.periodFilter.selectedFromValue = Dates.currentYear - 20+""; this.periodFilter.selectedFromValue = Dates.currentYear - 20 + "";
validYears = false; validYears = false;
} }
if(this.periodFilter.selectedFromValue && this.periodFilter.selectedFromValue.length && this.periodFilter.selectedToValue && this.periodFilter.selectedToValue.length > 0 && parseInt(this.periodFilter.selectedFromValue, 10) > parseInt(this.periodFilter.selectedToValue, 10)){ if (this.periodFilter.selectedFromValue && this.periodFilter.selectedFromValue.length && this.periodFilter.selectedToValue && this.periodFilter.selectedToValue.length > 0 && parseInt(this.periodFilter.selectedFromValue, 10) > parseInt(this.periodFilter.selectedToValue, 10)) {
this.periodFilter.selectedFromValue = this.periodFilter.selectedToValue; this.periodFilter.selectedFromValue = this.periodFilter.selectedToValue;
validYears = false; validYears = false;
} }
if(!validYears || navigateTo){ if (!validYears || navigateTo) {
if(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue){ if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
this.queryParams["year"]='range'+(this.periodFilter.selectedFromValue?this.periodFilter.selectedFromValue:'')+":"+(this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:""); this.queryParams["year"] = 'range' + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : '') + ":" + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "");
}else{ } else {
delete this.queryParams["year"]; delete this.queryParams["year"];
} }
// this.location.go(location.pathname, this.routerHelper.createQueryParamsString( Object.keys(this.queryParams), Object.values(this.queryParams))); // this.location.go(location.pathname, this.routerHelper.createQueryParamsString( Object.keys(this.queryParams), Object.values(this.queryParams)));
this.router.navigate([], {queryParams: this.queryParams }); this.router.navigate([], {queryParams: this.queryParams});
this.setIndicators(); this.setIndicators();
} }
} }
clearAll(){
for(let filter of this.filters) { clearAll() {
for (let filter of this.filters) {
this.clearfFilter(filter); this.clearfFilter(filter);
} }
this.periodFilter.selectedFromValue = ""; this.periodFilter.selectedFromValue = "";
this.periodFilter.selectedToValue = ""; this.periodFilter.selectedToValue = "";
this.validateYearRange(true) this.validateYearRange(true)
} }
clearfFilter(filter:Filter){
clearfFilter(filter: Filter) {
filter.countSelectedValues = 0; filter.countSelectedValues = 0;
filter.radioValue = ""; filter.radioValue = "";
for (let value of filter.values) { for (let value of filter.values) {
@ -228,32 +257,38 @@ export class MonitorComponent implements OnInit, OnDestroy {
delete this.queryParams[filter.filterId]; delete this.queryParams[filter.filterId];
} }
} }
countSelectedFilters():number{
countSelectedFilters(): number {
let count = 0; let count = 0;
if(this.periodFilter.selectedFromAndToValues.length > 0){ if (this.periodFilter.selectedFromAndToValues.length > 0) {
count+=2; count += 2;
} }
for(let filter of this.filters) { for (let filter of this.filters) {
count +=filter.countSelectedValues; count += filter.countSelectedValues;
} }
return count; return count;
} }
public get isSmallScreen() {
return this.layoutService.isSmallScreen;
}
public get open() { public get open() {
return this.layoutService.open; return this.layoutService.open;
} }
private getPageContents() { private getPageContents() {
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => { this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
this.pageContents = contents; this.pageContents = contents;
})); }));
} }
private getDivContents() { private getDivContents() {
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => { this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
this.divContents = contents; this.divContents = contents;
})); }));
} }
private setView(params: Params) { private setView(params: Params) {
this.loading = false; this.loading = false;
if (params['topic']) { if (params['topic']) {
@ -315,59 +350,64 @@ export class MonitorComponent implements OnInit, OnDestroy {
} }
} }
} }
filter(){ filter() {
this.validateYearRange(true); this.validateYearRange(true);
} }
filterChanged($event, navigate:boolean = true) {
filterChanged($event, navigate: boolean = true) {
let selected = ""; let selected = "";
for(let value of $event.value.values){ for (let value of $event.value.values) {
if(value.selected){ if (value.selected) {
selected = value.id; selected = value.id;
break; break;
} }
} }
if(selected){ if (selected) {
this.queryParams[$event.value.filterId]=selected; this.queryParams[$event.value.filterId] = selected;
}else{ } else {
delete this.queryParams[$event.value.filterId]; delete this.queryParams[$event.value.filterId];
} }
if(navigate) { if (navigate) {
this.router.navigate([], {queryParams: this.queryParams }); this.router.navigate([], {queryParams: this.queryParams});
this.setIndicators(); this.setIndicators();
} }
} }
private getfl0(){
if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0){ private getfl0() {
return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length -1]; if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0) {
return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length - 1];
} }
return null; return null;
} }
private getCoFunded(){
if (this.queryParams["co-funded"] && this.filters.length > 0){ private getCoFunded() {
return this.queryParams["co-funded"] && this.queryParams["co-funded"]=="co-funded-results"; if (this.queryParams["co-funded"] && this.filters.length > 0) {
return this.queryParams["co-funded"] && this.queryParams["co-funded"] == "co-funded-results";
} }
return false; return false;
} }
clearPeriodFilter(){
if(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue){ clearPeriodFilter() {
if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
this.periodFilter.selectedFromValue = ""; this.periodFilter.selectedFromValue = "";
this.periodFilter.selectedToValue = ""; this.periodFilter.selectedToValue = "";
this.filter(); this.filter();
} }
} }
private setIndicators() { private setIndicators() {
this.periodFilter.selectedFromAndToValues = (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue?((this.periodFilter.selectedFromValue && !this.periodFilter.selectedToValue?"From ":"")+(!this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue?"Until ":"")+ (this.periodFilter.selectedFromValue?this.periodFilter.selectedFromValue:"") + this.periodFilter.selectedFromAndToValues = (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue ? ((this.periodFilter.selectedFromValue && !this.periodFilter.selectedToValue ? "From " : "") + (!this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? "Until " : "") + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : "") +
(this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue?" - ":"")+ (this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:"")):""); (this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? " - " : "") + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "")) : "");
//clear numbers when filters change //clear numbers when filters change
this.numberResults.clear(); this.numberResults.clear();
let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>(); let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
this.activeSubCategory.numbers.forEach((section, i) => { this.activeSubCategory.numbers.forEach((section, i) => {
section.indicators.forEach((number, j) => { section.indicators.forEach((number, j) => {
if (this.isPublicOrIsMember(number.visibility)) { if (this.isPublicOrIsMember(number.visibility)) {
let url =this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, number.indicatorPaths[0], this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue, this.getCoFunded()); let url = this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, number.indicatorPaths[0], this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue, this.getCoFunded());
const pair = JSON.stringify([number.indicatorPaths[0].source, url]); const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
const indexes = urls.get(pair) ? urls.get(pair) : []; const indexes = urls.get(pair) ? urls.get(pair) : [];
indexes.push([i, j]); indexes.push([i, j]);
@ -377,7 +417,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
}); });
urls.forEach((indexes, pair) => { urls.forEach((indexes, pair) => {
pair = JSON.parse(pair); pair = JSON.parse(pair);
this.subscriptions.push(this.statisticsService.getNumbers(this.statisticsService.getSourceType(pair[0]), pair[1]).subscribe(response => { this.subscriptions.push(this.statisticsService.getNumbers(this.statisticsService.getSourceType(pair[0]), pair[1]).subscribe(response => {
indexes.forEach(([i, j]) => { indexes.forEach(([i, j]) => {
let result = JSON.parse(JSON.stringify(response)); let result = JSON.parse(JSON.stringify(response));
this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => { this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
@ -401,32 +441,32 @@ export class MonitorComponent implements OnInit, OnDestroy {
this.cdr.detectChanges(); this.cdr.detectChanges();
} }
} }
public getUrlByStakeHolder(indicatorPath: IndicatorPath) { public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
return this.sanitizer.bypassSecurityTrustResourceUrl( return this.sanitizer.bypassSecurityTrustResourceUrl(
this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, indicatorPath, this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue, this.getCoFunded()))); this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, indicatorPath, this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue, this.getCoFunded())));
} }
public setActiveChart(i: number, j: number, type: string) { public setActiveChart(i: number, j: number, type: string) {
let activeChart = this.activeSubCategory.charts[i].indicators[j].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0]; let activeChart = this.activeSubCategory.charts[i].indicators[j].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];
activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart); activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);
this.chartsActiveType.set(i + '-' + j, activeChart); this.chartsActiveType.set(i + '-' + j, activeChart);
} }
private navigateToError() { private navigateToError() {
this._router.navigate(['/error'], {queryParams: {'page': this._router.url}}); this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
} }
public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) { public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {
let url = stakeholder + '/' + topic + ((category) ? ('/' let url = stakeholder + '/' + topic + ((category) ? ('/'
+ category) : '') + ((subcategory) ? ('/' + subcategory) : ''); + category) : '') + ((subcategory) ? ('/' + subcategory) : '');
return this._router.navigate([url],{ queryParams: this.queryParams}); return this._router.navigate([url], {queryParams: this.queryParams});
} }
public quote(param: string): string { public quote(param: string): string {
return StringUtils.quote(param); return StringUtils.quote(param);
} }
public ngOnDestroy() { public ngOnDestroy() {
if (this.piwiksub) { if (this.piwiksub) {
this.piwiksub.unsubscribe(); this.piwiksub.unsubscribe();
@ -437,38 +477,42 @@ export class MonitorComponent implements OnInit, OnDestroy {
} }
}); });
} }
public isPublicOrIsMember(visibility: Visibility): boolean { public isPublicOrIsMember(visibility: Visibility): boolean {
if(visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) { if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
return false; return false;
} }
return true; return true;
} }
public countSubCategoriesToShow(category:Category): number {
public countSubCategoriesToShow(category: Category): number {
let counter = 0; let counter = 0;
for (let sub of category.subCategories) { for (let sub of category.subCategories) {
if(this.isPublicOrIsMember(sub.visibility)) { if (this.isPublicOrIsMember(sub.visibility)) {
counter++; counter++;
} }
} }
return counter; return counter;
} }
public countIndicatorsToShow(indicators:Indicator[]): number {
public countIndicatorsToShow(indicators: Indicator[]): number {
let counter = 0; let counter = 0;
for (let i of indicators) { for (let i of indicators) {
if(this.isPublicOrIsMember(i.visibility)) { if (this.isPublicOrIsMember(i.visibility)) {
counter++; counter++;
} }
} }
return counter; return counter;
} }
/* /*
Feedback mail Feedback mail
*/ */
public get mailText() { public get mailText() {
return "mailto:"+this.properties.feedbackmail+"?subject=%5BOpenAIRE%20Monitor%5D%20"+(this.stakeholder?this.stakeholder.name:"")+"%20dashboard%20feedback" return "mailto:" + this.properties.feedbackmail + "?subject=%5BOpenAIRE%20Monitor%5D%20" + (this.stakeholder ? this.stakeholder.name : "") + "%20dashboard%20feedback"
} }
mailMe(){
mailMe() {
window.location.href = this.mailText; window.location.href = this.mailText;
} }
} }

2
src/app/topic/topic.component.html
View File

@ -23,7 +23,7 @@
{i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}"> {i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}">
</ng-container> </ng-container>
</span> </span>
<span class="uk-text-truncate" [class.uk-width-3-5]="!open">{{topic.name}}</span> <span [class.uk-text-center]="open" [class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
<span class="uk-invisible-hover color" <span class="uk-invisible-hover color"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<span class="uk-icon uk-position-center-right" uk-icon="more-vertical"></span> <span class="uk-icon uk-position-center-right" uk-icon="more-vertical"></span>

6
src/assets/dashboard-theme/structure.css
View File

@ -1,5 +1,5 @@
:root { :root {
--sidebar-width: 320px; --sidebar-width: 230px;
--sidebar-mini-width: 130px; --sidebar-mini-width: 130px;
--sidebar-font-size: 14px; --sidebar-font-size: 14px;
--header-height: 100px; --header-height: 100px;
@ -164,7 +164,7 @@
} }
.sidebar_mini #page_content_header { .sidebar_mini #page_content_header {
width: calc(100vw - var(--sidebar-mini-width) - 200px); width: calc(100vw - var(--sidebar-mini-width) - 180px);
} }
#page_content_inner { #page_content_inner {
@ -185,7 +185,7 @@
} }
.sidebar_mini #page_content_header { .sidebar_mini #page_content_header {
width: calc(100vw - var(--sidebar-mini-width) - 50px); width: calc(100vw - var(--sidebar-mini-width) - 90px);
} }
} }

23
src/assets/new.css
View File

@ -16,19 +16,11 @@
background-image: none; background-image: none;
} }
.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container { .stakeholderPage #page_content {
background-color: #F9FBFC !important; background-image: url("/assets/monitor-shapes-bg.svg");
box-shadow: none; background-size: contain;
}
/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
/* background: #F9FBFC !important;*/
/*}*/
.stakeholderPage #page_content_inner {
background-image: url(/assets/monitor-shapes-bg.svg);
background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top; background-position: center;
background-attachment: fixed; background-attachment: fixed;
} }
@ -83,6 +75,7 @@
background-size: contain; background-size: contain;
margin-left: 35px; margin-left: 35px;
margin-top: 5px; margin-top: 5px;
margin-right: 10px;
height: 50px; height: 50px;
} }
@ -137,7 +130,6 @@
.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle { .stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
border-color: var(--monitor-portal-color); border-color: var(--monitor-portal-color);
color: var(--monitor-portal-color);
} }
/* Section Tools*/ /* Section Tools*/
@ -245,3 +237,8 @@
.uk-modal-container .uk-modal-dialog { .uk-modal-container .uk-modal-dialog {
width: 900px; width: 900px;
} }
.stakeholderPage .selectedFilterLabel {
background-color: #E6EEF2;
border-color: #E6EEF2;
}