From e3d01f4dd60c9619ab6959b3669d25931b69257f Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Tue, 9 Jan 2024 16:05:19 +0200 Subject: [PATCH] [master | WIP] add content for five-monitors page, will need some css styles for header and transfer texts to the mobile view as well --- .../how-it-works/how-it-works.module.ts | 6 +- .../the-five-monitors.component.html | 513 ++++++++++++++++++ .../the-five-monitors.component.less | 8 + .../the-five-monitors.component.ts | 58 +- .../how-it-works/you-we.component.ts | 115 ++++ 5 files changed, 691 insertions(+), 9 deletions(-) create mode 100644 src/app/resources/how-it-works/the-five-monitors.component.html create mode 100644 src/app/resources/how-it-works/the-five-monitors.component.less create mode 100644 src/app/resources/how-it-works/you-we.component.ts diff --git a/src/app/resources/how-it-works/how-it-works.module.ts b/src/app/resources/how-it-works/how-it-works.module.ts index 067116c..0ed67b2 100644 --- a/src/app/resources/how-it-works/how-it-works.module.ts +++ b/src/app/resources/how-it-works/how-it-works.module.ts @@ -4,9 +4,11 @@ import {RouterModule} from "@angular/router"; import {AboutComponent} from "./about.component"; import {TheFiveMonitorsComponent} from "./the-five-monitors.component"; import {UserActionsComponent} from "./user-actions.component"; +import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module"; +import {YouWeComponent} from "./you-we.component"; @NgModule({ - declarations: [AboutComponent, TheFiveMonitorsComponent, UserActionsComponent], + declarations: [AboutComponent, TheFiveMonitorsComponent, UserActionsComponent, YouWeComponent], imports: [CommonModule, RouterModule.forChild([ { path: '', @@ -29,7 +31,7 @@ import {UserActionsComponent} from "./user-actions.component"; component: UserActionsComponent, canDeactivate: [] } - ])], + ]), SliderTabsModule], exports: [] }) export class HowItWorksModule { diff --git a/src/app/resources/how-it-works/the-five-monitors.component.html b/src/app/resources/how-it-works/the-five-monitors.component.html new file mode 100644 index 0000000..867cb1d --- /dev/null +++ b/src/app/resources/how-it-works/the-five-monitors.component.html @@ -0,0 +1,513 @@ +
+
+
+
+
+

The 5 Monitors

+
+ 5 distinct types of dashboards to navigate Ireland’s Open Access landscape. Each dashboard is tailored to provide unique insights and data relevant to different aspects of Open Science. +
+
+
+
+
+
+
+ National Monitor +
+
+ Research Performing Organisation (RPO) +
+
+ Research Funding Organisation (RFO) +
+
+ Researcher +
+
+ Repository +
+
+
+
+
+
+

National Monitor

+

The Broad Perspective

+

+ The National Monitor offers an expansive view, featuring cross-country benchmarking and in-depth breakdowns specific to Ireland. It is meant to serve as a key resource for policymakers, publishers, and anyone interested in a comprehensive national overview. Take a look at the National Monitor for detailed insights into the broader Open Access landscape. +

+
+
+
+
+

Dive Deeper with Tailored Dashboards

+

+ For RPOs, RFOs, Researchers, and Institutional Repositories, we invite you to explore your individual monitors. Each dashboard is equipped to give you a detailed understanding of your role and impact within Open Access research. Discover how each dashboard works in the sections below. +

+
+
+
+
+
+
+ + + +
+
+
+
    +
  • + + +
    +
    + Step 1a +

    Assign a Primary Dashboard Manager

    +

    Nominate a primary dashboard manager by filling out an application form. If you already have a primary dashboard manager or prefer not to be one, proceed to step 2.

    +
    +
    +
    + Step 2a +

    Find Your RPO's Monitor Dashboard

    +

    Head to the RPO Monitor page and look up your organization. If you can't find it or it appears under multiple names, please contact us.

    +
    +
    + Step 3a +

    Validate and approve the results.

    +

    You examine your dashboard and the showcased information to ensure you are satisfied with what you see.

    +
    +     + +
    +
    + Step 1b +

    + Invite your RPOs Primary Manager via email +

    +

    Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and use of OpenOrgs, OpenAIRE's organization deduplication service.

    +
    +
    +
    + Step 2b +

    Troubleshoot your Monitor

    +

    We built your profile if it is missing and help you deduplicate your organization’s name via the OpenORgs service.

    +
    +
    + Step 3b +

    Interact with you Through 1-on-1 expert consultations

    +

    to understand any gaps and deviations within the dashboard to verify the data integrity

    +
    +     +     +
    • +
  • + + +
    +
    + Step 1a +

    Assign a Primary Dashboard Manager

    +

    Nominate a primary dashboard manager by completing our application form... If you already have a primary dashboard manager or prefer not to be one, proceed to step 2.

    +
    +
    +
    + Step 2a +

    Find Your RFO's Monitor Dashboard

    +

    Head to the RFO Monitor page and look up your organization. If you can't find it or it appears under multiple names, please contact us.

    +
    +
    + Step 3a +

    Discover Your Monitor and consider joining OpenAIRE (Optional)

    +

    Explore your personalized dashboard at your leisure. You have the option to join OpenAIRE, allowing us to develop a specialized text mining algorithm to enrich your profile. This marks the final step if you choose not to join OpenAIRE.

    +
    +
    +
    + Step 4a +

    Join OpenAIRE - You provide Information about your funded projects and join OpenAIRE.

    +

    All information is exchanged under confidential agreements and we only make public what you agree on. +

    +
    +
    +
    + Step 5a +

    validate the results and approve for them to be shown on your Monitor dashboard.

    +

    Examine your dashboard in the Sandbox environment and the showcased information to ensure you are satisfied with what you see.

    +
    +     + +
    +
    + Step 1b +

    Invite your RFOs Primary Manager via email

    +

    Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and curation.

    +
    +
    +
    + Step 2b +

    Troubleshoot your Monitor

    +

    We built your profile if it is missing and help you with any additional issues

    +
    +
    + Step 3b +

    Interact with you Through 1-on-1 expert consultations

    +

    to understand any gaps and deviations within the dashboard to verify the data integrity

    +
    +
    + Step 4b +

    Ingest your project metadata and mine the OpenAIRE Graph.

    +

    We infer links to research results: publications, datasets, software, etc, via dedicated text mining algorithms.

    +
    +
    + Step 5b +

    Refine until you are happy with the results.

    +
    +     +     +
    • +
  • + + +
    +
    + Step 1a +

    Access Your Profile with ORCID iD

    +

    Log in using your ORCID iD to grant OpenAIRE access to your ORCID record. Then, visit the Researcher Monitors to search for your ORCID iD. If it’s not listed, contact us. Note that only research products affiliated with an Irish RPO will be displayed in your profile.

    +
    +
    +
    + Step 2a +

    Claim Additional Records

    +

    From your profile (click the circle with your initials at the top right), navigate to the 'My ORCID Links' page and allow OpenAIRE to enhance your ORCID record. Search for your research products and claim them. These will appear in your ORCID record following the next update of the OpenAIRE Graph.

    +
    +     + +
    +
    + Step 1b +

    Troubleshoot your Monitor

    +

    If your profile is missing, we are here to help build it. Remember, OpenAIRE syncs with ORCID, so research products not in ORCID or unaffiliated with an Irish organization will not appear in your record.

    +
    +
    +
    + Step 2b +

    Support you in understanding any gaps or deviations within your dashboard and to provide assistance as needed.

    +
    +     +     +
    • +
  • + + +
    +
    + Step 1a +

    Find Your Repository’s Monitor Dashboard & Register to OpenAIRE PROVIDE

    +

    Navigate to the Repository Monitor page and search for your repository. If it is not listed, this indicates that you need to register with OpenAIRE. You can complete this process by following these instructions. If your repository already has a Monitor dashboard but your have not been registered in OpenAIRE PROVIDE, please contact us for assistance.

    +
    +
    +
    + Step 2a +

    Validate and approve the results.

    +

    You examine your dashboard and the showcased information to ensure you are satisfied with what you see.

    +
    +     + +
    +
    + Step 1b +

    Invite you as a Manager via email

    +

    As a manager, you will receive access to the PROVIDE dashboard. OpenAIRE PROVIDE is a service designed for Institutional Repository Managers to register, validate, and enrich their records. It also offers insights into usage statistics, including views and downloads. This dashboard allows you to efficiently manage your records and comply with Open Access requirements.

    +
    +
    +
    + Step 2b +

    Interact with you through 1-on-1 expert consultations

    +

    to understand any gaps and deviations within the dashboard to verify the data integrity

    +
    +     +     +
    • +
+
+
+ \ No newline at end of file diff --git a/src/app/resources/how-it-works/the-five-monitors.component.less b/src/app/resources/how-it-works/the-five-monitors.component.less new file mode 100644 index 0000000..fa1c04f --- /dev/null +++ b/src/app/resources/how-it-works/the-five-monitors.component.less @@ -0,0 +1,8 @@ +.custom-translate-bottom-left { + transform: translate(-20%, 20%); +} + +.five-boxes { + grid-gap: 20px; + transform: translateY(-50%); +} \ No newline at end of file diff --git a/src/app/resources/how-it-works/the-five-monitors.component.ts b/src/app/resources/how-it-works/the-five-monitors.component.ts index f4d4ead..e8d8942 100644 --- a/src/app/resources/how-it-works/the-five-monitors.component.ts +++ b/src/app/resources/how-it-works/the-five-monitors.component.ts @@ -1,13 +1,57 @@ -import {Component} from "@angular/core"; +import {ChangeDetectorRef, Component} from "@angular/core"; +import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component"; +import {ActivatedRoute, Router} from "@angular/router"; +import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service"; +import {Meta, Title} from "@angular/platform-browser"; +import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service"; +import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder"; @Component({ selector: 'the-five-monitors', - template: ` -
the 5 monitors page
- ` + templateUrl: 'the-five-monitors.component.html', + styleUrls: ['the-five-monitors.component.less'] }) -export class TheFiveMonitorsComponent { - constructor() { - +export class TheFiveMonitorsComponent extends BaseComponent{ + title = 'The 5 Monitors'; + description = 'The 5 Monitors'; + public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories']; + public offset: number; + public stakeholderEntities = StakeholderEntities; + public shouldSticky: boolean = true; + + constructor(protected _route: ActivatedRoute, + protected _piwikService: PiwikService, + protected _meta: Meta, + protected seoService: SEOService, + protected _title: Title, + protected _router: Router, + private cdr: ChangeDetectorRef) { + super(); + } + + ngOnInit() { + this.setMetadata(); + } + + ngAfterViewInit() { + if (typeof document !== 'undefined') { + this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); + this.cdr.detectChanges(); + this.observeBottom(); + } + } + + private observeBottom() { + let bottom = document.getElementById('bottom'); + if (bottom) { + let bottomObs = new IntersectionObserver(entries => { + entries.forEach(entry => { + this.shouldSticky = !entry.isIntersecting; + this.cdr.detectChanges(); + }) + }); + this.subscriptions.push(bottomObs); + bottomObs.observe(bottom); + } } } diff --git a/src/app/resources/how-it-works/you-we.component.ts b/src/app/resources/how-it-works/you-we.component.ts new file mode 100644 index 0000000..9c29512 --- /dev/null +++ b/src/app/resources/how-it-works/you-we.component.ts @@ -0,0 +1,115 @@ +import { + AfterContentChecked, AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + Input, + OnDestroy, + ViewChild +} from "@angular/core"; +import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder"; + +declare var UIkit; + +@Component({ + selector: 'you-we', + template: ` +
+
+

Are you a {{type}}?

+
+
+
+
+
+

You

+
+
+

We

+
+
+
+
+
+
+
+
+
+ You + +
+
+
+
+ We + +
+
+
+
+
+
+ ` +}) +export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy { + @Input() + public type: StakeholderEntities.FUNDER | StakeholderEntities.RI | StakeholderEntities.ORGANIZATION = StakeholderEntities.FUNDER; + @Input() + public id; + @ViewChild('sticky') sticky: ElementRef; + public isSticky: boolean = false; + public offset: number + public height: number; + private subscriptions: any[] = []; + + constructor(private cdr: ChangeDetectorRef) { + } + + ngAfterViewInit() { + if (this.sticky) { + this.observeSticky(); + } + } + + ngAfterContentChecked() { + if (this.sticky && typeof document !== 'undefined') { + this.offset = this.calcOffset(this.sticky.nativeElement); + } + } + + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + if (subscription instanceof (ResizeObserver || IntersectionObserver)) { + subscription.disconnect(); + } + }); + } + + public observeSticky() { + let resizeObs = new ResizeObserver(entries => { + entries.forEach(entry => { + setTimeout(() => { + this.offset = this.calcOffset(entry.target); + this.cdr.detectChanges(); + }); + }) + }); + this.subscriptions.push(resizeObs); + resizeObs.observe(this.sticky.nativeElement); + this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'active', (): void => { + this.isSticky = true; + })); + this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'inactive', () => { + this.isSticky = false; + })); + } + + calcOffset(element) { + this.height = element.offsetHeight; + return window.innerHeight - this.height; + } +}