[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:
parent
46b8958de8
commit
cdc417b60c
|
|
@ -1,4 +1,3 @@
|
|||
<!--disable_transitions -->
|
||||
<div *ngIf="loading == true">
|
||||
<loading [full]="true"></loading>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
|
||||
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() {
|
||||
if (typeof document !== 'undefined' && window) {
|
||||
this.innerWidth = window.innerWidth;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<!-- </div>-->
|
||||
</ng-template>
|
||||
<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=" ">
|
||||
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
|
||||
<ul
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
<li *ngIf="isPublicOrIsMember(category.visibility)"
|
||||
[class.uk-active]="category.alias ===
|
||||
activeCategory.alias">
|
||||
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
|
||||
class="uk-margin-remove-bottom uk-h4"
|
||||
><span class="title">{{category.name}}</span></a>
|
||||
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
|
||||
<span class="title">{{category.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
|
|
@ -64,21 +64,21 @@
|
|||
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
|
||||
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
|
||||
<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>
|
||||
</li>
|
||||
</ng-template>
|
||||
</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>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page_content_inner" inner>
|
||||
<div class=" indicators">
|
||||
<div inner>
|
||||
<div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
|
||||
<div *ngIf="privateStakeholder">
|
||||
<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">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
</svg>
|
||||
</i>
|
||||
Private data
|
||||
</div>
|
||||
</h3>
|
||||
<div class="uk-text-large "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
|
||||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))"
|
||||
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
|
||||
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.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))
|
||||
) || !activeTopic || !activeCategory || !activeSubCategory)">
|
||||
<div class=" uk-text-center">
|
||||
<div class="uk-h3">
|
||||
<h3>
|
||||
No indicators available yet. Stay tuned!
|
||||
</div>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top"
|
||||
|
|
@ -233,9 +233,10 @@
|
|||
</div>
|
||||
<div class="uk-padding">
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<div class="uk-h4 ">Filters</div>
|
||||
<h5>Filters</h5>
|
||||
<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>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import {properties} from "../../environments/environment";
|
|||
@Component({
|
||||
selector: 'monitor',
|
||||
templateUrl: 'monitor.component.html',
|
||||
styleUrls:['monitor.component.css']
|
||||
styleUrls: ['monitor.component.css']
|
||||
})
|
||||
export class MonitorComponent implements OnInit, OnDestroy {
|
||||
public user: User;
|
||||
|
|
@ -58,11 +58,20 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
properties: EnvProperties = properties;
|
||||
filterToggle = false;
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
filters:Filter[] = [];
|
||||
filters: Filter[] = [];
|
||||
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;
|
||||
public keyword: FormControl;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router,
|
||||
|
|
@ -76,12 +85,12 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
private layoutService: LayoutService,
|
||||
private seoService: SEOService,
|
||||
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.errorMessages = new ErrorMessagesComponent();
|
||||
this.status = this.errorCodes.LOADING;
|
||||
}
|
||||
|
||||
|
||||
public ngOnInit() {
|
||||
this.keyword = this._fb.control('');
|
||||
this.subscriptions.push(this.keyword.valueChanges.subscribe(value => {
|
||||
|
|
@ -91,7 +100,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
let subscription: Subscription;
|
||||
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
||||
this.user = user;
|
||||
|
||||
|
||||
this.subscriptions.push(this.route.params.subscribe(params => {
|
||||
this.loading = true;
|
||||
this.activeTopic = null;
|
||||
|
|
@ -114,18 +123,34 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
if (stakeholder) {
|
||||
this.stakeholder = stakeholder;
|
||||
// add fl0 filter only for EC
|
||||
if(this.stakeholder.index_id == "ec__________::EC"){
|
||||
this.filters.push({title: "Funding Stream",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.index_id == "ec__________::EC") {
|
||||
this.filters.push({
|
||||
title: "Funding Stream",
|
||||
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,
|
||||
// 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:""});
|
||||
this.filters.push({title: "Co-funded",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
|
||||
values:[{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}]
|
||||
,filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue:""});
|
||||
this.filters.push({
|
||||
title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
|
||||
values: [{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}]
|
||||
, filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue: ""
|
||||
});
|
||||
}
|
||||
this.initializeFilters();
|
||||
this.seoService.createLinkForCanonicalURL(url, false);
|
||||
|
|
@ -139,7 +164,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
|
||||
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.getPageContents();
|
||||
this.status = this.errorCodes.DONE;
|
||||
|
|
@ -147,7 +172,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
} else {
|
||||
this.privateStakeholder = true;
|
||||
// this.navigateToError();
|
||||
if(subscription) {
|
||||
if (subscription) {
|
||||
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]:"";
|
||||
this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range")==0)?this.queryParams['year'].split("range")[1].split(":")[1]:"";
|
||||
|
||||
private initializeFilters() {
|
||||
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);
|
||||
|
||||
for(let filter of this.filters) {
|
||||
|
||||
for (let filter of this.filters) {
|
||||
if (this.queryParams[filter.filterId]) {
|
||||
for (let value of filter.values) {
|
||||
if (value.id == this.queryParams[filter.filterId]) {
|
||||
|
|
@ -176,47 +202,50 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
break;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
this.clearfFilter(filter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
private validateYearRange(navigateTo:boolean=false){
|
||||
|
||||
private validateYearRange(navigateTo: boolean = false) {
|
||||
let validYears = true;
|
||||
|
||||
if(this.periodFilter.selectedToValue && (this.periodFilter.selectedToValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedToValue, Dates.currentYear - 20, Dates.currentYear))){
|
||||
this.periodFilter.selectedToValue = 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 + "";
|
||||
validYears = false;
|
||||
}
|
||||
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+"";
|
||||
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 + "";
|
||||
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;
|
||||
validYears = false;
|
||||
}
|
||||
if(!validYears || navigateTo){
|
||||
if(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue){
|
||||
this.queryParams["year"]='range'+(this.periodFilter.selectedFromValue?this.periodFilter.selectedFromValue:'')+":"+(this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:"");
|
||||
}else{
|
||||
delete this.queryParams["year"];
|
||||
if (!validYears || navigateTo) {
|
||||
if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
|
||||
this.queryParams["year"] = 'range' + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : '') + ":" + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "");
|
||||
} else {
|
||||
delete this.queryParams["year"];
|
||||
}
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
clearAll(){
|
||||
for(let filter of this.filters) {
|
||||
|
||||
clearAll() {
|
||||
for (let filter of this.filters) {
|
||||
this.clearfFilter(filter);
|
||||
}
|
||||
this.periodFilter.selectedFromValue = "";
|
||||
this.periodFilter.selectedToValue = "";
|
||||
this.validateYearRange(true)
|
||||
}
|
||||
clearfFilter(filter:Filter){
|
||||
|
||||
clearfFilter(filter: Filter) {
|
||||
filter.countSelectedValues = 0;
|
||||
filter.radioValue = "";
|
||||
for (let value of filter.values) {
|
||||
|
|
@ -228,32 +257,38 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
delete this.queryParams[filter.filterId];
|
||||
}
|
||||
}
|
||||
countSelectedFilters():number{
|
||||
|
||||
countSelectedFilters(): number {
|
||||
let count = 0;
|
||||
if(this.periodFilter.selectedFromAndToValues.length > 0){
|
||||
count+=2;
|
||||
if (this.periodFilter.selectedFromAndToValues.length > 0) {
|
||||
count += 2;
|
||||
}
|
||||
for(let filter of this.filters) {
|
||||
count +=filter.countSelectedValues;
|
||||
for (let filter of this.filters) {
|
||||
count += filter.countSelectedValues;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
public get isSmallScreen() {
|
||||
return this.layoutService.isSmallScreen;
|
||||
}
|
||||
|
||||
public get open() {
|
||||
return this.layoutService.open;
|
||||
}
|
||||
|
||||
|
||||
private getPageContents() {
|
||||
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
|
||||
this.pageContents = contents;
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
private getDivContents() {
|
||||
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
|
||||
this.divContents = contents;
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
private setView(params: Params) {
|
||||
this.loading = false;
|
||||
if (params['topic']) {
|
||||
|
|
@ -315,59 +350,64 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
filter(){
|
||||
|
||||
filter() {
|
||||
this.validateYearRange(true);
|
||||
}
|
||||
filterChanged($event, navigate:boolean = true) {
|
||||
|
||||
filterChanged($event, navigate: boolean = true) {
|
||||
let selected = "";
|
||||
for(let value of $event.value.values){
|
||||
if(value.selected){
|
||||
for (let value of $event.value.values) {
|
||||
if (value.selected) {
|
||||
selected = value.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(selected){
|
||||
this.queryParams[$event.value.filterId]=selected;
|
||||
}else{
|
||||
if (selected) {
|
||||
this.queryParams[$event.value.filterId] = selected;
|
||||
} else {
|
||||
delete this.queryParams[$event.value.filterId];
|
||||
}
|
||||
if(navigate) {
|
||||
this.router.navigate([], {queryParams: this.queryParams });
|
||||
if (navigate) {
|
||||
this.router.navigate([], {queryParams: this.queryParams});
|
||||
this.setIndicators();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
private getfl0(){
|
||||
if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0){
|
||||
return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length -1];
|
||||
|
||||
private getfl0() {
|
||||
if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0) {
|
||||
return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length - 1];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
private getCoFunded(){
|
||||
if (this.queryParams["co-funded"] && this.filters.length > 0){
|
||||
return this.queryParams["co-funded"] && this.queryParams["co-funded"]=="co-funded-results";
|
||||
|
||||
private getCoFunded() {
|
||||
if (this.queryParams["co-funded"] && this.filters.length > 0) {
|
||||
return this.queryParams["co-funded"] && this.queryParams["co-funded"] == "co-funded-results";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
clearPeriodFilter(){
|
||||
if(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue){
|
||||
|
||||
clearPeriodFilter() {
|
||||
if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
|
||||
this.periodFilter.selectedFromValue = "";
|
||||
this.periodFilter.selectedToValue = "";
|
||||
this.filter();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
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.selectedFromValue && this.periodFilter.selectedToValue?" - ":"")+ (this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:"")):"");
|
||||
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 : "")) : "");
|
||||
//clear numbers when filters change
|
||||
this.numberResults.clear();
|
||||
let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
|
||||
this.activeSubCategory.numbers.forEach((section, i) => {
|
||||
section.indicators.forEach((number, j) => {
|
||||
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 indexes = urls.get(pair) ? urls.get(pair) : [];
|
||||
indexes.push([i, j]);
|
||||
|
|
@ -377,7 +417,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
urls.forEach((indexes, 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]) => {
|
||||
let result = JSON.parse(JSON.stringify(response));
|
||||
this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
|
||||
|
|
@ -401,32 +441,32 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
this.cdr.detectChanges();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
|
||||
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) {
|
||||
let activeChart = this.activeSubCategory.charts[i].indicators[j].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];
|
||||
activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);
|
||||
this.chartsActiveType.set(i + '-' + j, activeChart);
|
||||
}
|
||||
|
||||
|
||||
private navigateToError() {
|
||||
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});
|
||||
return this._router.navigate([url], {queryParams: this.queryParams});
|
||||
}
|
||||
|
||||
|
||||
public quote(param: string): string {
|
||||
return StringUtils.quote(param);
|
||||
}
|
||||
|
||||
|
||||
public ngOnDestroy() {
|
||||
if (this.piwiksub) {
|
||||
this.piwiksub.unsubscribe();
|
||||
|
|
@ -437,38 +477,42 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public isPublicOrIsMember(visibility: Visibility): boolean {
|
||||
if(visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
|
||||
if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
public countSubCategoriesToShow(category:Category): number {
|
||||
|
||||
public countSubCategoriesToShow(category: Category): number {
|
||||
let counter = 0;
|
||||
for (let sub of category.subCategories) {
|
||||
if(this.isPublicOrIsMember(sub.visibility)) {
|
||||
if (this.isPublicOrIsMember(sub.visibility)) {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
return counter;
|
||||
}
|
||||
public countIndicatorsToShow(indicators:Indicator[]): number {
|
||||
|
||||
public countIndicatorsToShow(indicators: Indicator[]): number {
|
||||
let counter = 0;
|
||||
for (let i of indicators) {
|
||||
if(this.isPublicOrIsMember(i.visibility)) {
|
||||
if (this.isPublicOrIsMember(i.visibility)) {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
return counter;
|
||||
}
|
||||
|
||||
/*
|
||||
Feedback mail
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}">
|
||||
</ng-container>
|
||||
</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"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<span class="uk-icon uk-position-center-right" uk-icon="more-vertical"></span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--sidebar-width: 320px;
|
||||
--sidebar-width: 230px;
|
||||
--sidebar-mini-width: 130px;
|
||||
--sidebar-font-size: 14px;
|
||||
--header-height: 100px;
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
}
|
||||
|
||||
.sidebar_mini #page_content_header {
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 200px);
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 180px);
|
||||
}
|
||||
|
||||
#page_content_inner {
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
|
||||
.sidebar_mini #page_content_header {
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 50px);
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,19 +16,11 @@
|
|||
background-image: none;
|
||||
}
|
||||
|
||||
.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container {
|
||||
background-color: #F9FBFC !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*.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;
|
||||
.stakeholderPage #page_content {
|
||||
background-image: url("/assets/monitor-shapes-bg.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
|
||||
}
|
||||
|
|
@ -83,6 +75,7 @@
|
|||
background-size: contain;
|
||||
margin-left: 35px;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +130,6 @@
|
|||
|
||||
.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
|
||||
border-color: var(--monitor-portal-color);
|
||||
color: var(--monitor-portal-color);
|
||||
}
|
||||
|
||||
/* Section Tools*/
|
||||
|
|
@ -245,3 +237,8 @@
|
|||
.uk-modal-container .uk-modal-dialog {
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.stakeholderPage .selectedFilterLabel {
|
||||
background-color: #E6EEF2;
|
||||
border-color: #E6EEF2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue