Finish my-stakeholders and browse-stakeholder. Update library, openaire-theme and assets

This commit is contained in:
Konstantinos Triantafyllou 2022-02-17 17:31:58 +02:00
parent 98bbd3625c
commit 3b1372c576
32 changed files with 356 additions and 863 deletions

View File

@ -135,6 +135,7 @@ export class AppComponent {
this.userMenuItems.push(new MenuItem("", "Manage profiles",
this.properties.domain + properties.baseLink + "/dashboard/admin", "", false, [], [], {}))
}
this.userMenuItems.push(new MenuItem("", "My Dashboards", "", "/my-dashboards", false, [], [], {}));
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
}

View File

@ -9,32 +9,23 @@
<ng-template #card>
<div class="uk-padding">
<div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get(stakeholder.visibility)" ratio="1.5" [flex]="true"></icon>
class="uk-position-top-right uk-margin-small-top uk-margin-small-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get(stakeholder.visibility)" ratio="1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
</div>
<div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall uk-padding-small">
<div>
<img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-max-xsmall">
<div class="uk-card-media-top uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall">
</div>
<div class="uk-card-body uk-padding-remove-horizontal">
<div class="uk-text-capitalize uk-text-small">{{mapType(stakeholder.type)}}</div>
<div class="uk-h6 uk-link uk-margin-remove multi-line-ellipsis lines-2">
<p *ngIf="stakeholder.name" class="uk-margin-remove">
{{stakeholder.name}}
</p>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<h3 class="uk-text-center uk-h6 uk-link" [ngClass]="(showDescription)?'uk-margin-small-bottom':''">
<span *ngIf="community.title">
{{community.title.slice(0, thresholdTitle)}}
<span *ngIf="community.title.length > thresholdTitle">...</span>
</span>
<span *ngIf="!community.title && community.shortTitle">
{{community.shortTitle.slice(0, thresholdTitle)}}
<span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
</span>
<!-- </a>-->
</h3>
</div>
</div>
</div>
</ng-template>
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?

View File

@ -1,7 +1,7 @@
import {Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {Stakeholder, StakeholderInfo, Visibility} from "../openaireLibrary/monitor/entities/stakeholder";
import {StakeholderInfo, Visibility} from "../openaireLibrary/monitor/entities/stakeholder";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../environments/environment"
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
@ -13,10 +13,7 @@ import {Subscriber} from "rxjs";
})
export class BrowseStakeholderComponent {
@Input() public stakeholder: StakeholderInfo = null;
@Input() public showDescription: boolean = true;
@Input() public smallTitle: boolean = false;
@ViewChild('AlertModal', { static: true }) modal;
public thresholdTitle: number = 45;
public properties: EnvProperties = properties;
public directLink: boolean = true;
public visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
@ -46,14 +43,17 @@ export class BrowseStakeholderComponent {
}
});
}
isProduction(): boolean {
return this.properties.environment != "development";
}
getProductionPrefix(id:string): string {
return (this.properties.environment == "production") ? "" : "beta.";
mapType(type: string) {
if(type === 'ri') {
return 'Research Initiative';
} else if(type === 'community') {
return 'Research Community'
} else if(type === 'organization') {
return 'Institution';
} else {
return type;
}
}
public confirmModalOpen() {

View File

@ -1,18 +1,18 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {UrlPrefixModule} from "../openaireLibrary/utils/pipes/url-prefix.module";
import {ManageModule} from "../openaireLibrary/utils/manage/manage.module";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {BrowseStakeholderComponent} from "./browse-stakeholder.component";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import {incognito} from "../openaireLibrary/utils/icons/icons";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
ManageModule, AlertModalModule, UrlPrefixModule, LogoUrlPipeModule, IconsModule
CommonModule, RouterModule,
ManageModule, AlertModalModule, LogoUrlPipeModule, IconsModule
],
declarations: [
BrowseStakeholderComponent
@ -23,4 +23,8 @@ import {BrowseStakeholderComponent} from "./browse-stakeholder.component";
BrowseStakeholderComponent
]
})
export class BrowseStakeholderModule { }
export class BrowseStakeholderModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([incognito]);
}
}

View File

@ -1,550 +1,248 @@
<div>
<div class="uk-section uk-background-fixed uk-background-bottom-right uk-background-norepeat homeBackgroundImage" style="background: #fff;">
<div class="uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid">
<div>
<h1 class="uk-heading-large">
A new era of <br><span class="uk-text-primary">monitoring</span> <br>research<span class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top">
<div class="uk-section uk-background-fixed uk-background-bottom-right uk-background-norepeat homeBackgroundImage"
style="background: #fff;">
<div class="uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid">
<div>
<h1 class="uk-heading-large">
A new era of <br><span class="uk-text-primary">monitoring</span> <br>research<span
class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top">
<div>Work together with us to view, understand and visualize</div>
<div>research statistics and indicators.</div>
</div>
<div class="uk-margin-medium-top">
<a class="uk-button uk-button-primary" routerLink="/">GET STARTED</a>
</div>
</div>
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom '" [childrenCustomClass]="' uk-container uk-container-large '">
<div top class="uk-width-1-1 uk-background-primary">
<div class="top-content uk-container uk-container-large">
<span class="uk-h6 uk-text-primary">Benefits</span>
<h2 class="uk-h1 uk-margin-remove-top">Simplify open science <br>tracking & monitoring<span class="uk-text-primary">.</span></h2>
</div>
</div>
<div left class="uk-width-1-1 uk-width-1-2@m" uk-scrollspy="target: > img; cls: uk-animation-slide-bottom-medium; repeat: true">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 1;">
<img id="imgId1" src="assets/monitor-assets/home/placeholder.png" alt="img1">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0;">
<img id="imgId2" src="assets/monitor-assets/home/placeholder.png" alt="img2">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0;">
<img id="imgId3" src="assets/monitor-assets/home/placeholder.png" alt="img3">
</div>
</div>
<div scroll class="uk-width-expand">
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="1st" name="txt">
<h3 class="uk-h2">
Get a <span class="uk-text-primary">complete <br> picture.</span>
</h3>
<p class="uk-text-lead">Track and discover your organizations research output. <br> Use the OpenAIRE Research Graph to get a 360o view of <br> your publications-data-code.</p>
</div>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="2nd" name="txt">
<h3 class="uk-h2">
Monitor <span class="uk-text-primary">open science <br></span> compliance<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-lead"> Work with the open science expert community <br> for open and transparent metrics. Discover open <br> science trends for your organization and see how <br> you fare in EOSC.</p>
</div>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="3rd" name="txt">
<h3 class="uk-h2">
Turn <span class="uk-text-primary">research <br> results </span> to insights<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-lead">Understand your community. Measure impact, <br> discover trends, connections and collaborations <br> to improve and optimize your future actions. </p>
</div>
</div>
</div>
</section-scroll>
<div class="uk-section uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
<h2 class="uk-h1 uk-text-center">
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom">
<loading *ngIf="loading"></loading>
<div *ngIf="!loading" class="uk-width-1-1 uk-flex-center uk-grid" uk-grid>
<div *ngIf="publicationsSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h4 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(publicationsSize.number|number) + publicationsSize.size}}</h4>
<div class="uk-margin-small uk-text-large">Publications</div>
</div>
</div>
</a>
</div>
<div *ngIf="datasetsSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(datasetsSize.number|number) + datasetsSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Datasets</div>
</div>
</div>
</a>
</div>
<div *ngIf="softwareSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=software" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class=" uk-text-primary-gradient uk-margin-remove-bottom">{{(softwareSize.number|number) + softwareSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Software</div>
</div>
</div>
</a>
</div>
<div *ngIf="otherSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=other" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(otherSize.number|number) + otherSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Other</div>
</div>
</div>
</a>
</div>
<div *ngIf="fundersSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/projects" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class=" uk-text-primary-gradient uk-margin-remove-bottom">{{(fundersSize.number|number) + fundersSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Funders</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-3">
<span class="uk-h6 uk-text-primary">Features</span>
<h2 class="uk-h1 uk-margin-remove-top">Open data. <br> Open <br> methodologies<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
</div>
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom '"
[childrenCustomClass]="' uk-container uk-container-large '">
<div top class="uk-width-1-1 uk-background-primary">
<div class="top-content uk-container uk-container-large">
<span class="uk-h6 uk-text-primary">Benefits</span>
<h2 class="uk-h1 uk-margin-remove-top">Simplify open science <br>tracking & monitoring<span
class="uk-text-primary">.</span></h2>
</div>
</div>
<div left class="uk-width-1-1 uk-width-1-2@m"
uk-scrollspy="target: > img; cls: uk-animation-slide-bottom-medium; repeat: true">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 1;">
<img id="imgId1" src="assets/monitor-assets/home/placeholder.png" alt="img1">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0;">
<img id="imgId2" src="assets/monitor-assets/home/placeholder.png" alt="img2">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0;">
<img id="imgId3" src="assets/monitor-assets/home/placeholder.png" alt="img3">
</div>
</div>
<div scroll class="uk-width-expand">
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="1st" name="txt">
<h3 class="uk-h2">
Get a <span class="uk-text-primary">complete <br> picture.</span>
</h3>
<p class="uk-text-lead">Track and discover your organizations research output. <br> Use the OpenAIRE Research
Graph to get a 360o view of <br> your publications-data-code.</p>
</div>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="2nd" name="txt">
<h3 class="uk-h2">
Monitor <span class="uk-text-primary">open science <br></span> compliance<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-lead"> Work with the open science expert community <br> for open and transparent metrics.
Discover open <br> science trends for your organization and see how <br> you fare in EOSC.</p>
</div>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="3rd" name="txt">
<h3 class="uk-h2">
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-lead">Understand your community. Measure impact, <br> discover trends, connections and
collaborations <br> to improve and optimize your future actions. </p>
</div>
</div>
</div>
</section-scroll>
<div class="uk-section uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
<h2 class="uk-h1 uk-text-center">
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom">
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid>
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
<a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
[href]="url" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<div class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
<div class="uk-margin-small uk-text-large">{{name}}</div>
</div>
</div>
</a>
</ng-template>
<div *ngIf="publicationsSize">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize, name: 'Publications',
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
</ng-container>
</div>
<div *ngIf="datasetsSize">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets',
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}">
</ng-container>
</div>
<div *ngIf="softwareSize">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software',
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
</ng-container>
</div>
<div *ngIf="otherSize">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other',
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
</ng-container>
</div>
<div *ngIf="fundersSize">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders',
url: 'https://explore.openaire.eu/search/find/projects'}">
</ng-container>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-3">
<span class="uk-h6 uk-text-primary">Features</span>
<h2 class="uk-h1 uk-margin-remove-top">Open data. <br> Open <br> methodologies<span
class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
</a>
</div>
<div class="uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Global outlook
</div>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data resource from open initiatives around the world, of global interest.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Minimum effort to join
</div>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we deliver a view of your world. As you see fit.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Transparent methodology
</div>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms for every metric and indicator we publish.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Customised to your needs
</div>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our advanced tools and expertise add add your own metrics.
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<h2 class="uk-h1">Dashboards <br> in action<span class="uk-text-primary">.</span></h2>
<div class="uk-text-large uk-margin-bottom">
Short description of “what monitor members are”, sed diam nonumy eirmod <br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <br> voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse">
</a>
</div>
<div class="uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Global outlook
</div>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Minimum effort to join
</div>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we
deliver a view of your world. As you see fit.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Transparent methodology
</div>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms
for every metric and indicator we publish.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Customised to your needs
</div>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<h2 class="uk-h1">Dashboards <br> in action<span class="uk-text-primary">.</span></h2>
<div class="uk-text-large uk-margin-bottom">
Short description of “what monitor members are”, sed diam nonumy eirmod <br> tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam <br> voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse">
<span class="uk-flex uk-flex-middle">
<span>Browse them all</span>
</span>
</a>
<div class="uk-margin-large-top uk-margin-large-bottom">
<!-- Tabs -->
<my-tabs>
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
<ng-container *ngTemplateOutlet="allContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
<ng-container *ngTemplateOutlet="fundersContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'">
<ng-container *ngTemplateOutlet="researchInitiativesContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'">
<ng-container *ngTemplateOutlet="researchInstitutionsContainer"></ng-container>
</my-tab>
</my-tabs>
<!-- Tab content -->
<ng-template #allContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(stakeholders)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #fundersContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(funders)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #researchInitiativesContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(researchInitiatives)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #researchInstitutionsContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(researchInstitutions)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h1">
Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
</h2>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">Contact us</a>
</div>
</a>
<div class="uk-margin-large-top">
<div *ngIf="loading" class="uk-height-large uk-flex uk-flex-column uk-flex-center">
<loading></loading>
</div>
<!-- Tabs -->
<my-tabs *ngIf="!loading">
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(stakeholders)}"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(funders)}"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(researchInitiatives)}"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(organizations)}"></ng-container>
</my-tab>
</my-tabs>
<!-- Slider Template for Tab Content -->
<ng-template #sliderTemplate let-slides="slides">
<div uk-slider class="uk-margin-medium-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of slides" class="uk-width-1-1">
<div class="uk-padding-small">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
</div>
</ng-template>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h1">
Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
</h2>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
routerLink="/contact-us">Contact us</a>
</div>
</div>
<!-- <div class="image-front-topbar"
style="background: transparent linear-gradient(180deg, #F4F4F4 0%, #F5F5F5 83%, #FAFAFA 100%) no-repeat;">
<div
class="uk-section uk-container uk-container-large uk-text-center uk-section uk-section-small uk-margin-large-bottom"
uk-parallax="media: @l; y: -200; easing: 0.5">
<div class="uk-padding-small">
<h1 class="uk-margin-top">A new era of monitoring research</h1>
<div class="girl-background">
<h4 class="uk-margin-remove-top">Open data. Open methodologies.</h4>
<div class="uk-margin-medium-top uk-text-muted">
Work together with us to view, understand and visualize<br>research statistics and indicators.
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large dashboard-section">
<div class="uk-padding-small">
<div class="dashboard uk-flex uk-flex-center">
<img class="uk-width-1-2@l" src="/assets/monitor-assets/home/dashboard.png">
</div>
<div class="uk-margin-large-top">
<div class="uk-margin-medium-left uk-margin-medium-right uk-margin-large-bottom">
<div class="uk-child-width-1-3@m uk-grid info" uk-grid>
<div [@1]="state.toString()" class="clickable" [class.uk-active]="state === 1" (click)="startAnimation()">
<h5>
Get a complete picture
</h5>
<div class="uk-text-muted">
Track and discover your organizations research output. Use the OpenAIRE Research Graph to get a
360<span>&#176;</span>
view of your publications-data-code.
</div>
</div>
<div [@2]="state.toString()" class="clickable" [class.uk-active]="state === 2" (click)="startAnimation(2)">
<h5>
Monitor open science compliance
</h5>
<div class="uk-text-muted">
Work with the open science expert community for open and transparent metrics. Discover open science trends
for your organization and see how you fare in EOSC.
</div>
</div>
<div [@3]="state.toString()" class="clickable" [class.uk-active]="state === 3" (click)="startAnimation(3)">
<h5>
Turn research results to insights
</h5>
<div class="uk-text-muted">
Understand your community. Measure impact, discover trends, connections and collaborations to improve
and optimize your future actions.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small hologram uk-position-relative">
<div class="uk-grid uk-grid-match uk-child-width-1-2 uk-visible@m" uk-grid>
<div uk-parallax="y: 40, -60; easing: 0.5">
<div class="uk-margin-large-left uk-margin-large-bottom uk-width-3-4 part">
<h5 class="uk-text-secondary">Global outlook</h5>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
</div>
<div uk-parallax="y: 40, -60; easing: 0.5" class="uk-flex uk-flex-right">
<div class="part uk-width-3-4 uk-margin-medium-right">
<h5 class="uk-text-secondary">Transparent methodology</h5>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms
for every metric and indicator we publish.
</div>
</div>
</div>
<div uk-parallax="y: -100; easing: 0.5">
<div class="part uk-width-3-4 uk-margin-medium-left">
<h5 class="uk-text-secondary">Customised to your needs</h5>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
</div>
<div uk-parallax="y: -100; easing: 2" class="uk-flex uk-flex-center">
<div class="part uk-width-3-4 uk-margin-large-left">
<h5 class="uk-text-secondary">Minimum effort to join</h5>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we
deliver a view of your world. As you see fit.
</div>
</div>
</div>
</div>
<div class="uk-hidden@m uk-grid uk-child-width-1-1" uk-grid>
<div>
<h5 class="uk-text-secondary">Global outlook</h5>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Transparent methodology</h5>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms for
every metric and indicator we publish.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Customised to your needs</h5>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Minimum effort to join</h5>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we deliver
a view of your world. As you see fit.
</div>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-large">
<a class="uk-button portal-button" routerLink="/about">Learn More</a>
</div>
</div>
<div class="graph-section">
<div class="uk-section uk-container uk-margin-large">
<div class="uk-text-center uk-padding-small">
<h2>Tap into the OpenAIRE Research Graph</h2>
<div class="uk-flex uk-flex-center">
<div class="uk-width-3-4@m uk-margin-large-top uk-grid uk-child-width-1-5@m uk-child-width-1-2">
<div *ngIf="publicationsSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<span class="uk-text-bold number">{{publicationsSize.number|number}}</span>{{publicationsSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">publications</div>
</div>
<div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets"
target=_blank>
<span class="uk-text-bold number">{{datasetsSize.number|number}}</span>{{datasetsSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">datasets</div>
</div>
<div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=software"
target="_blank">
<span class="uk-text-bold number">{{softwareSize.number|number}}</span>{{softwareSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">software</div>
</div>
<div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=other"
target="_blank">
<span class="uk-text-bold number">{{otherSize.number|number}}</span>{{otherSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">other</div>
</div>
<div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/projects" target="_blank">
<span class="uk-text-bold number">{{fundersSize.number|number}}</span>{{fundersSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">Funders</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="loading && stakeholders.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
<errorMessages [status]="[status]" [type]="'stakeholders'"></errorMessages>
</div>
<div *ngIf="!loading && stakeholders && stakeholders.length > 0"
class="uk-section uk-section-large uk-margin-right uk-margin-left uk-margin-large-top stakeholder-section">
<div class="uk-container" uk-filter="target: .stakeholders">
<ul class="uk-subnav uk-subnav-pill">
<li class="uk-active" uk-filter-control><a (click)="type = null">All</a></li>
<li uk-filter-control="[data-type='funder']"><a (click)="type = 'funder'">Funders</a></li>
<li uk-filter-control="[data-type='ri']"><a (click)="type = 'ri'">Research Initiatives</a></li>
<li uk-filter-control="[data-type='organization']"><a (click)="type = 'organization'">Institutions</a></li>
</ul>
<div class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
uk-grid="masonry: true" uk-height-match="target: .uk-card; row: false;">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
<a *ngIf="directLink && hasPermission(stakeholder)" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<ng-container *ngTemplateOutlet="stakeholderCard; context: {stakeholder: stakeholder}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(stakeholder)" (click)="confirmModalOpen(stakeholder)">
<ng-container *ngTemplateOutlet="stakeholderCard; context: {stakeholder: stakeholder}"></ng-container>
</a>
<ng-container *ngIf="!hasPermission(stakeholder)">
<ng-container *ngTemplateOutlet="stakeholderCard; context: {stakeholder: stakeholder}"></ng-container>
</ng-container>
</div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type"
class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top uk-padding-large">
Nothing here yet.
</div>
</div>
</div>
</div>
<div style="background: linear-gradient(0deg, #FFFFFF 0%, #EFF3F8 0%, #FAFAFA 100%);">
<div class="uk-section uk-container uk-text-center uk-margin-large-bottom">
<div class="uk-padding-small">
<h3>Contact us to help you.</h3>
<div class="uk-text-muted uk-margin-medium">
Are you looking for more? Get in touch with our team and let us help you.
</div>
<a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a>
</div>
</div>
</div>
<div class="uk-section-muted"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
<other-portals [properties]="properties" portal="monitor"></other-portals>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
</modal-alert>
<ng-template #stakeholderCard let-stakeholder="stakeholder">
<div class="uk-card uk-card-default uk-text-center uk-position-relative" [class.disabled]="!hasPermission(stakeholder)">
<div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get(stakeholder.visibility)"></icon>
<span class="space uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
</div>
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder | logoUrl">
<div class="uk-text-light uk-margin-medium-top">{{stakeholder.name}}</div>
</div>
</ng-template> -->

View File

@ -3,7 +3,6 @@ import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
@ -14,8 +13,8 @@ import {NumberUtils} from "../openaireLibrary/utils/number-utils.class";
import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
import {Stakeholder, Visibility} from "../openaireLibrary/monitor/entities/stakeholder";
import {Session, User} from "../openaireLibrary/login/utils/helper.class";
import {Stakeholder, StakeholderInfo} from "../openaireLibrary/monitor/entities/stakeholder";
import {User} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {properties} from "../../environments/environment";
import {Subscriber} from "rxjs";
@ -28,7 +27,7 @@ import {Subscriber} from "rxjs";
export class HomeComponent {
public pageTitle = "OpenAIRE | Monitor";
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators.";
public stakeholders: Stakeholder[] = [];
public stakeholders: StakeholderInfo[] = [];
public selected: Stakeholder = null;
public pageContents = null;
public divContents = null;
@ -48,11 +47,6 @@ export class HomeComponent {
private errorMessages: ErrorMessagesComponent;
private subscriptions = [];
private user: User;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PUBLIC", 'earth'],
["PRIVATE", 'lock'],
["RESTRICTED", 'group']
]);
constructor(
private route: ActivatedRoute,
@ -83,12 +77,12 @@ export class HomeComponent {
this.subscriptions.push(this._piwikService.trackView(this.properties, "OpenAIRE Monitor", this.properties.piwikSiteId).subscribe());
}
this.getNumbers();
this.getStakeholders();
this.subscriptions.push(this.localStorageService.get().subscribe(value => {
this.directLink = value;
}));
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
this.getStakeholders();
}));
}
@ -181,30 +175,9 @@ export class HomeComponent {
if (!stakeholders || stakeholders.length == 0) {
this.status = this.errorCodes.NONE;
} else {
// compare function for alphabetical order based on the 'name' property
function compare (a, b) {
if(a.name < b.name) {
return -1;
}
if(a.name > b.name) {
return 1;
}
return 0;
}
let publicStakeholders = [];
let restrictedStakeholders = [];
stakeholders.forEach(stakeholder => {
if(stakeholder.visibility == "PUBLIC") {
publicStakeholders.push(stakeholder);
} else {
restrictedStakeholders.push(stakeholder);
}
});
// actual sorting of the arrays
publicStakeholders.sort(compare);
restrictedStakeholders.sort(compare);
// joining the two arrays again
this.stakeholders = publicStakeholders.concat(restrictedStakeholders);
this.stakeholders = StakeholderInfo.toStakeholderInfo(stakeholders, this.user);
this.sort(this.stakeholders);
this.stakeholders = this.publicStakeholders.concat(this.privateStakeholders);
}
this.loading = false;
},
@ -215,16 +188,35 @@ export class HomeComponent {
));
}
public sliderize(stakeholders: Stakeholder[]): Stakeholder[][] {
private sort(results: StakeholderInfo[]) {
results.sort((left, right): number => {
if (left.name > right.name) {
return 1;
} else if (left.name < right.name) {
return -1;
} else {
return 0;
}
})
}
public slider(stakeholders: StakeholderInfo[], size: number = 6): Stakeholder[][] {
let slider: Stakeholder[][] = [];
let size = 6;
for(let i = 0; i < (stakeholders.length/size); i++) {
slider.push(stakeholders.slice(i*size, ((i+1)*size)));
}
return slider;
}
get publicStakeholders(): StakeholderInfo[] {
return this.stakeholders.filter(stakeholder => stakeholder.visibility === "PUBLIC");
}
get funders(): Stakeholder[] {
get privateStakeholders(): StakeholderInfo[] {
return this.stakeholders.filter(stakeholder => stakeholder.visibility !== "PUBLIC");
}
get funders(): StakeholderInfo[] {
if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "funder");
} else {
@ -232,7 +224,7 @@ export class HomeComponent {
}
}
get researchInitiatives(): Stakeholder[] {
get researchInitiatives(): StakeholderInfo[] {
if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "ri");
} else {
@ -240,50 +232,13 @@ export class HomeComponent {
}
}
get researchInstitutions(): Stakeholder[] {
get organizations(): StakeholderInfo[] {
if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "organization");
} else {
return [];
}
}
private isManager(stakeholder: Stakeholder) {
return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isManager(stakeholder.type, stakeholder.alias, this.user);
}
private isMember(stakeholder: Stakeholder) {
return Session.isMember(stakeholder.type, stakeholder.alias, this.user);
}
public confirmModalOpen(result: Stakeholder) {
this.selected = result;
this.modal.cancelButton = true;
this.modal.okButton = true;
this.modal.alertTitle = 'You are going to visit ' + result.name + ' Monitor Dashboard';
this.modal.alertMessage = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No';
this.modal.choice = true;
this.modal.open();
}
public getStakeholderPageUrl(stakeholder: Stakeholder) {
return this.properties.domain + this.properties.baseLink + '/dashboard/' + stakeholder.alias;
}
public goToPage(data: any) {
if (data.value == true) {
let url = this.getStakeholderPageUrl(this.selected);
this.localStorageService.setCommunityDirectLink(data.choice);
window.open(url, '_blank');
}
}
public quote(param: string): string {
return StringUtils.quote(param);
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
@ -293,14 +248,9 @@ export class HomeComponent {
});
}
hasPermission(stakeholder: Stakeholder) {
return stakeholder.visibility === "PUBLIC" || this.isManager(stakeholder) || this.isMember(stakeholder);
}
private handleError(message: string, error): number {
let code = "";
if (!error.status) {
error = error.json();
code = error.code;
} else {
code = error.status;

View File

@ -25,13 +25,14 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
import {SectionScrollModule} from '../openaireLibrary/utils/section-scroll/section-scroll.module';
import {TabsModule} from '../openaireLibrary/utils/tabs/tabs.module';
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {BrowseStakeholderModule} from "../browse-stakeholder/browse-stakeholder.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule, OtherPortalsModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule, SearchResearchResultsServiceModule,
RefineFieldResultsServiceModule, AlertModalModule, IconsModule, UrlPrefixModule, LogoUrlPipeModule, SectionScrollModule,
TabsModule, LoadingModule
TabsModule, LoadingModule, BrowseStakeholderModule
],
declarations: [
HomeComponent

View File

@ -100,107 +100,9 @@
</div>
</div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-h6 uk-text-primary">Inclusion, transparency, quality, state of the art technology.</div>
<div class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</div>
<h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<div class="uk-padding-large">
<how></how>
</div>
</div>
<!-- Old about page -->
<!-- <div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-flex uk-flex-center">
<div class="uk-text-center uk-width-2-5@m uk-width-2-3@s">
<h1 class="uk-h2">Learn the process</h1>
<h6 class="uk-text-muted uk-margin-remove">
Use the Monitor Dashboard to view your research results, open science…
</h6>
</div>
</div>
<div class="process uk-margin-large-top">
<div class="uk-flex uk-flex-wrap uk-child-width-1-3@s">
<div class="zero">
<div class="uk-text-center">
<img width="90" src="../../assets/monitor-assets/about/process/0.png">
</div>
<h6>0. Starting from the OpenAIRE RESEARCH GRAPH</h6>
<div class="uk-text-small uk-text-muted">
<a class="uk-link" href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a> aggregates
a collection of research data properties for funders, organizations,
researchers, research communities and publishers to interlink information by using a semantic graph
database approach.
</div>
</div>
<div class="first">
<div class="uk-text-center">
<img width="110" src="../../assets/monitor-assets/about/process/1.png">
</div>
<h6>1. Provide us some information</h6>
<div class="uk-text-small uk-text-muted">
You give us some simple (meta)data related to your organization function: e.g., funding database,
repositories, related projects, registry of people… All under confidential agreements.
</div>
</div>
<div class="second">
<div class="uk-text-center">
<img width="100" src="../../assets/monitor-assets/about/process/2.png">
</div>
<h6>2. We get the ball rolling</h6>
<div class="uk-text-small uk-text-muted">
We ingest your data in our system and start the work: we clean and normalize your data, we identify and
extract related information, we infer links. We refine until we are happy of the results and present to
you.
</div>
</div>
</div>
<div class="uk-flex uk-flex-wrap uk-child-width-1-3@s">
<div class="third uk-flex-last@s">
<div class="uk-text-center">
<img width="105" src="../../assets/monitor-assets/about/process/3.png">
</div>
<h6>3. You validate</h6>
<div class="uk-text-small uk-text-muted">
After the first iteration you examine our results to ensure you are satisfied with what you see. As
numbers are important, we advise you to take your time and tell us of any deviations. We correct, you
check, you approve.
</div>
</div>
<div class="fourth">
<div class="uk-text-center">
<img width="135" src="../../assets/monitor-assets/about/process/4.png">
</div>
<h6>4. You set up your portal</h6>
<div class="uk-text-small uk-text-muted">
Using our admin panel you set up your portal. You decide what metrics are of interest to you (full
documentation available). You decide what you want to publish, what to keep private, what to share with
colleagues.
</div>
</div>
<div class="fifth uk-flex-first@s">
<div class="uk-text-center">
<img width="105" src="../../assets/monitor-assets/about/process/5.png">
</div>
<h6>5. You track, monitor, report</h6>
<div class="uk-text-small uk-text-muted">
Now your views are updated every two weeks, as new content and new providers join OpenAIRE. You are
notified about new metrics and indicators as we keep on enriching the OpenAIRE Research Graph and you may
add them as they come along.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-text-center">
<h2>See how it works</h2>
<h6 class="uk-text-muted uk-margin-remove">
Simplify research tracking & monitoring
</h6>
</div>
<div class="uk-margin-large-top">
<how></how>
</div>
</div>
</div> -->

View File

@ -16,30 +16,41 @@
<div *ngIf="manager.length > 0" [class.uk-margin-xlarge-bottom]="member.length > 0">
<h1 class="uk-h1">You are managing</h1>
<div class="uk-margin-large-top">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4@xl uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let stakeholder of manager.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
{{stakeholder.name}}
<div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of manager.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
</div>
<div *ngIf="manager.length > 4" class="uk-text-center uk-margin-medium-top">
<a class="uk-visible@xl uk-margin-large-top uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{manager.length}})</span>
</span>
</a>
</div>
<div *ngIf="manager.length > 3" class="uk-text-center uk-margin-medium-top">
<a class="uk-hidden@xl uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('manager')}">
<div *ngIf="manager.length > 4" class="uk-text-center uk-margin-large-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{manager.length}})</span>
</span>
</a>
</a>
</div>
</div>
<div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of manager.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
<div *ngIf="manager.length > 3" class="uk-text-center uk-margin-large-top">
<a class="uk-hidden@xl uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{manager.length}})</span>
</span>
</a>
</div>
</div>
</div>
</div>
@ -47,14 +58,14 @@
<h1 class="uk-h1">You are member of</h1>
<div class="uk-margin-large-top">
<div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of member.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
{{stakeholder.name}}
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
<div *ngIf="member.length > 4" class="uk-text-center uk-margin-medium-top">
<div *ngIf="member.length > 4" class="uk-text-center uk-margin-large-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('member')}">
@ -65,14 +76,14 @@
</div>
</div>
<div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of member.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
{{stakeholder.name}}
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
<div *ngIf="member.length > 3" class="uk-text-center uk-margin-medium-top">
<div *ngIf="member.length > 3" class="uk-text-center uk-margin-large-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('member')}">

View File

@ -117,18 +117,12 @@ export class MyStakeholdersComponent {
private sort(results: StakeholderInfo[]) {
results.sort((left, right): number => {
if (!right.updateDate || left.updateDate > right.updateDate) {
return -1;
} else if (!left.updateDate || left.updateDate < right.updateDate) {
if (left.name > right.name) {
return 1;
} else if (left.name < right.name) {
return -1;
} else {
if (left.name > right.name) {
return 1;
} else if (left.name < right.name) {
return -1;
} else {
return 0;
}
return 0;
}
})
}

View File

@ -16,12 +16,13 @@ import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumb
import {MyStakeholdersRoutingModule} from "./my-stakeholders-routing.module";
import {MyStakeholdersComponent} from "./my-stakeholders.component";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {BrowseStakeholderModule} from "../browse-stakeholder/browse-stakeholder.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, HelperModule,
ManageModule, ErrorMessagesModule, Schema2jsonldModule, SEOServiceModule,
MyStakeholdersRoutingModule, BreadcrumbsModule, LoadingModule
MyStakeholdersRoutingModule, BreadcrumbsModule, LoadingModule, BrowseStakeholderModule
],
declarations: [
MyStakeholdersComponent

@ -1 +1 @@
Subproject commit f15b8ef8fcdae5053c1c385a5f3126a2a7b327f7
Subproject commit 5a69cb210178c77ef078eb3d5e35e527570e722e

@ -1 +1 @@
Subproject commit 1723114f30208b0e85d5c580665af801fe9e6ef1
Subproject commit 9224f3da593049aaa18bce81ff1e2d7d7597c22c

View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="95.647" height="60.692" viewBox="0 0 95.647 60.692">
<g id="Group_905" data-name="Group 905" transform="translate(70.298 97.482) rotate(-161)">
<path id="Path_2339" data-name="Path 2339" d="M87.648,29.439C24.781,46.54,24.677-5.5,39.79.481,53.326,5.835,44.623,25.816,0,17.558" transform="translate(-0.02 39.459)" fill="none" stroke="#212121" stroke-width="1" stroke-dasharray="7"/>
<path id="Path_2366" data-name="Path 2366" d="M0,0,2.814,1.387l-.607,3.29" transform="translate(-3.724 59.204) rotate(-150)" fill="none" stroke="#212121" stroke-width="1"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 625 B

View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="96.457" height="61.415" viewBox="0 0 96.457 61.415">
<g id="Group_906" data-name="Group 906" transform="translate(59.107 54.14) rotate(-152)">
<path id="Path_2339" data-name="Path 2339" d="M67.968,21.473c-54.526,13.788-31.41-33.246-25.4-10.629C47.607,28.611.938-12.841-23.762,21.873" transform="translate(1.017 0)" fill="none" stroke="#212121" stroke-width="1" stroke-dasharray="6"/>
<path id="Path_55797" data-name="Path 55797" d="M0,0,3.3,1.628,2.591,5.49" transform="matrix(-0.921, 0.391, -0.391, -0.921, -22.719, 28.548)" fill="none" stroke="#212121" stroke-width="1"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 645 B

View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="103.827" height="153.958" viewBox="0 0 103.827 153.958">
<g id="Group_2401" data-name="Group 2401" transform="translate(-1318.198 -779.424) rotate(-20)">
<g id="Group_1141" data-name="Group 1141" transform="matrix(-0.174, 0.985, -0.985, -0.174, 1046.902, 1211.049)">
<path id="Path_2339" data-name="Path 2339" d="M135.26,80.668C60.034-45.855,6.029,11.188,0,23.336" transform="translate(0 0)" fill="none" stroke="#212121" stroke-width="1" stroke-dasharray="7"/>
</g>
<g id="Group_1142" data-name="Group 1142" transform="translate(936.789 1330.947) rotate(-43)">
<line id="Line_345" data-name="Line 345" x1="1.778" y1="4.377" transform="translate(0.089 1.532)" fill="none" stroke="#212121" stroke-width="1"/>
<line id="Line_346" data-name="Line 346" x2="2.189" y2="3.556" transform="translate(0 2.189) rotate(-90)" fill="none" stroke="#212121" stroke-width="1"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 963 B

View File

@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="117.496" height="64.012" viewBox="0 0 117.496 64.012">
<g id="Group_1143" data-name="Group 1143" transform="translate(55.846 -4.676) rotate(-19)">
<path id="Path_2339" data-name="Path 2339" d="M33.748,7.2C7.979,32.136-55.782,25.421-38.011,8.591-20.191-7.271-28.973,53.122-80.2,26.067" transform="translate(13.972 16.105)" fill="none" stroke="#212121" stroke-width="1" stroke-dasharray="7"/>
<g id="Group_1144" data-name="Group 1144" transform="translate(-69.001 39.672)">
<line id="Line_345" data-name="Line 345" x1="2.651" y1="5.302" transform="translate(0.132 1.855)" fill="none" stroke="#212121" stroke-width="1"/>
<line id="Line_346" data-name="Line 346" x2="2.651" y2="5.302" transform="translate(0 2.651) rotate(-90)" fill="none" stroke="#212121" stroke-width="1"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 864 B

View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107.525" height="69.445" viewBox="0 0 107.525 69.445">
<g id="Group_11721" data-name="Group 11721" transform="translate(112.848 -39.172) rotate(56)">
<g id="Group_1141" data-name="Group 1141" transform="matrix(-0.174, 0.985, -0.985, -0.174, 53.579, 43.214)">
<path id="Path_2339" data-name="Path 2339" d="M96.963,31.663C43.036-18,4.322,4.391,0,9.159" transform="translate(0 0)" fill="none" stroke="#212121" stroke-width="1" stroke-dasharray="7"/>
</g>
<g id="Group_1142" data-name="Group 1142" transform="translate(-0.484 133.795) rotate(-43)">
<line id="Line_345" data-name="Line 345" x1="1.663" y1="4.095" transform="translate(0.083 1.433)" fill="none" stroke="#212121" stroke-width="1"/>
<line id="Line_346" data-name="Line 346" x2="2.048" y2="3.327" transform="translate(0 2.048) rotate(-90)" fill="none" stroke="#212121" stroke-width="1"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 947 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

View File

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="891.972" height="404" viewBox="0 0 891.972 404">
<g id="Group_11723" data-name="Group 11723" transform="translate(-250 -759)">
<g id="Group_3098" data-name="Group 3098" transform="translate(-80 574.953)">
<path id="Path_16420" data-name="Path 16420" d="M338.05,210.66l-18.6,6.887-19.11,7.078-33.015,12.223-9.235,3.424-19.136,7.084" transform="translate(855.417 86.511)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
<path id="Path_17201" data-name="Path 17201" d="M131.762,0,107.036,22.093,81.626,44.8l-43.9,39.214L25.446,95,0,117.726" transform="translate(1057.45 316.813) rotate(-20)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
<path id="Path_17202" data-name="Path 17202" d="M110.125,0,89.459,18.465,68.221,37.444,31.53,70.218,21.267,79.4,0,98.393" transform="translate(1122.86 315.774) rotate(50)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
</g>
<circle id="Ellipse_360" data-name="Ellipse 360" cx="124" cy="124" r="124" transform="translate(250 759)" fill="#8bcc00" opacity="0.5"/>
<g id="Ellipse_372" data-name="Ellipse 372" transform="translate(906 984)" fill="none" stroke="#4687e6" stroke-width="1">
<circle cx="89.5" cy="89.5" r="89.5" stroke="none"/>
<circle cx="89.5" cy="89.5" r="89" fill="none"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 448 KiB

View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1367" height="393.812" viewBox="0 0 1367 393.812">
<g id="Group_11724" data-name="Group 11724" transform="translate(1 -2386)">
<path id="Path_2342" data-name="Path 2342" d="M1366-68.381S1070.67-131.445,608.9-142.3C354.509-148.279-.867-68.381-.867-68.381V190.035s538.452,102.97,836.881,41.69c286.66-60.522,529.986,0,529.986,0Z" transform="translate(-0.133 2528.619)" fill="#eff3f8"/>
<path id="Path_2356" data-name="Path 2356" d="M-.867,176.956s295.142,63.063,756.615,73.918c254.234,5.98,609.385-73.918,609.385-73.918V-81.46s-538.111-102.97-836.35-41.69c-286.478,60.522-529.65,0-529.65,0Z" transform="translate(0.867 2528.619)" fill="#eff3f8" opacity="0.499"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 731 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

View File

@ -1,7 +1,7 @@
:root {
/*buttons*/
--button-primary-background: transparent;
--button-primary-background-image: linear-gradient(110deg, var(--monitor-gradient-start) 0%, var(--monitor-gradient-end) 100%);
--button-primary-background-image: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
--button-secondary-background: var(--secondary-color);
--button-secondary-background-image: none;
@ -12,8 +12,11 @@
/*fonts*/
--font-primary-color: var(--monitor-color);
--font-gradient-color: linear-gradient(110deg, var(--monitor-gradient-start) 0%, var(--monitor-gradient-end) 100%);
/*--secondary-background: var(--secondary-color);*/
--font-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
/*slider*/
--slider-dot-background: var(--monitor-light-color);
--slider-dot-active-background: var(--monitor-dark-color);
}
/*:root {*/

@ -1 +1 @@
Subproject commit 9f0b25ae591095b9b9a31aa4cba7c98e3d012899
Subproject commit eb0b04cb96b9ab92387d61cdafae21256a6da762