311 lines
14 KiB
TypeScript
311 lines
14 KiB
TypeScript
import {Component, OnInit} from '@angular/core';
|
|
import {ActivatedRoute, Router} from '@angular/router';
|
|
import {Meta, Title} from '@angular/platform-browser';
|
|
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
|
|
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
|
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
|
|
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
|
|
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
|
|
import {Subscriber} from "rxjs";
|
|
import {properties} from "../../environments/environment";
|
|
|
|
@Component({
|
|
selector: 'learn-how',
|
|
template: `
|
|
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
|
|
<ng-template #one>
|
|
<h5 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h5>
|
|
<div>First, we learn about your requirements and challenges. We help you understand Open Science practices within
|
|
EOSC and together we’ll talk about how OpenAIRE RCD fits as a solution.
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #two>
|
|
<h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
|
|
<div>
|
|
How do you work today, and how would you like to work tomorrow? We translate your needs into rules
|
|
and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll
|
|
have defined the basic configuration of your Community Gateway.
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #three>
|
|
<h5 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h5>
|
|
<div>
|
|
You validate and test your new Community Gateway (portal) with your experts and community to ensure
|
|
all workflows are in place and quality of data meets your standards. If needed, we work together in
|
|
another iteration to further refine and adapt to your needs.
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #four>
|
|
<h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
|
|
<div>
|
|
We jointly roll out your new Community Gateway. You take over the business operations and start
|
|
engaging your researchers, we take care of the smooth operation of the e-service.
|
|
</div>
|
|
</ng-template>
|
|
<div class="image-front-topbar" style="background-color: #E2EEFA;">
|
|
<div class="uk-section uk-padding-remove-bottom uk-container uk-container-large">
|
|
<div class="uk-padding-small">
|
|
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-section uk-padding-remove-top"
|
|
style="background: transparent linear-gradient(0deg, #FAFAFA 0%, #E2EEFA 100%) !important;">
|
|
<div class="uk-container uk-container-large uk-margin-top">
|
|
<div class="uk-padding-small">
|
|
<h1 class="uk-width-1-1 uk-text-bold">Learn the process</h1>
|
|
<div class="uk-width-1-2@l uk-width-1-1@s uk-text-large uk-margin-top">Build a <strong>Gateway to your
|
|
community's</strong> open and linked research outcomes. Customized to your needs.
|
|
</div>
|
|
<div class="uk-margin-large-top uk-flex uk-child-width-1-3@m uk-child-width-1-1@s uk-flex-center uk-grid"
|
|
uk-grid="">
|
|
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s uk-grid uk-first-column uk-grid-stack"
|
|
uk-grid="">
|
|
<div class="uk-first-column">
|
|
<ng-container [ngTemplateOutlet]="one"></ng-container>
|
|
</div>
|
|
|
|
<div class="uk-visible@m uk-grid-margin uk-first-column">
|
|
<ng-container [ngTemplateOutlet]="four"></ng-container>
|
|
</div>
|
|
|
|
<div class="uk-hidden@m">
|
|
<ng-container [ngTemplateOutlet]="two"></ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-text-center"><img src="assets/connect-assets/about/cycle.png"/></div>
|
|
|
|
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s uk-grid uk-grid-stack" uk-grid="">
|
|
<div class="uk-visible@m uk-first-column">
|
|
<ng-container [ngTemplateOutlet]="two"></ng-container>
|
|
</div>
|
|
|
|
<div class="uk-hidden@m uk-visible@s">
|
|
<ng-container [ngTemplateOutlet]="four"></ng-container>
|
|
</div>
|
|
|
|
<div class="uk-grid-margin uk-first-column">
|
|
<ng-container [ngTemplateOutlet]="three"></ng-container>
|
|
</div>
|
|
|
|
<div class="uk-hidden@s uk-visible@xs">
|
|
<ng-container [ngTemplateOutlet]="four"></ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-1 uk-text-center uk-text-large uk-margin-large-top"><a
|
|
class="uk-button portal-button uk-text-uppercase" routerLink="/about/learn-in-depth">Learn more
|
|
details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-section uk-container uk-container-large">
|
|
<div class="uk-padding-small">
|
|
<div class="uk-slider"
|
|
uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">
|
|
<div class="uk-slider-container">
|
|
<ul class="uk-slider-items uk-child-width-1-1" style="transform: translate3d(0px, 0px, 0px);">
|
|
<li class="ng-star-inserted uk-active" tabindex="-1">
|
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
|
|
<div class="uk-first-column">
|
|
<img class="uk-border-rounded uk-box-shadow-large"
|
|
src="assets/connect-assets/about/gifs/profile.gif"/>
|
|
</div>
|
|
<div class="uk-margin-top">
|
|
<div>
|
|
<h4 class="uk-text-bold">Profile</h4>
|
|
<div class="uk-margin-medium uk-text-large">Edit community information, change logo url, add
|
|
community managers or organizations related to community.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li tabindex="-1">
|
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
|
|
<div class="uk-first-column">
|
|
<img class="uk-border-rounded uk-box-shadow-large"
|
|
src="assets/connect-assets/about/gifs/content.gif"/>
|
|
</div>
|
|
<div class="uk-margin-top">
|
|
<div>
|
|
<h4 class="uk-text-bold">Content</h4>
|
|
<div class="uk-margin-medium uk-text-large">Manage projects, content providers, subjects and
|
|
zenodo communities that are related to the research community.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li tabindex="-1">
|
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
|
|
<div class="uk-first-column">
|
|
<img class="uk-border-rounded uk-box-shadow-large"
|
|
src="assets/connect-assets/about/gifs/statistics.gif"/>
|
|
</div>
|
|
<div class="uk-margin-top">
|
|
<div>
|
|
<h4 class="uk-text-bold">Statistics & Charts</h4>
|
|
<div class="uk-margin-medium uk-text-large">Manage statistical numbers & charts that will be
|
|
displayed in the community overview and graph analysis views.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li tabindex="-1">
|
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
|
|
<div class="uk-first-column">
|
|
<img class="uk-border-rounded uk-box-shadow-large"
|
|
src="assets/connect-assets/about/gifs/links.gif"/>
|
|
</div>
|
|
<div class="uk-margin-top">
|
|
<div>
|
|
<h4 class="uk-text-bold">Links</h4>
|
|
<div class="uk-margin-medium uk-text-large">Manage user claims related to the research
|
|
community.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li tabindex="-1">
|
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
|
|
<div class="uk-first-column">
|
|
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/about/gifs/help.gif"/>
|
|
</div>
|
|
<div class="uk-margin-top">
|
|
<div>
|
|
<h4 class="uk-text-bold">Help texts</h4>
|
|
<div class="uk-margin-medium uk-text-large">Add or edit help text in research community pages.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li tabindex="-1">
|
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
|
|
<div class="uk-first-column">
|
|
<img class="uk-border-rounded uk-box-shadow-large"
|
|
src="assets/connect-assets/about/gifs/users.gif"/>
|
|
</div>
|
|
<div class="uk-margin-top">
|
|
<div>
|
|
<h4 class="uk-text-bold">Users</h4>
|
|
<div class="uk-margin-medium uk-text-large">Invite more users to subscribe, manage community
|
|
subscribers, your personal info and notification settings.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">
|
|
<li class="uk-active" uk-slider-item="0"></li>
|
|
<li uk-slider-item="1"></li>
|
|
<li uk-slider-item="2"></li>
|
|
<li uk-slider-item="3"></li>
|
|
<li uk-slider-item="4"></li>
|
|
<li uk-slider-item="5"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-section" style="background-color: #D9D8E8;">
|
|
<div class="uk-container">
|
|
<div class="uk-padding-small">
|
|
<div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">
|
|
<div class="uk-width-expand uk-first-column">
|
|
<h3>Get in touch with our team to find out how.</h3>
|
|
<div class="uk-margin-medium uk-text-large">We look forward to working together and helping you unlock the
|
|
full potential of your research community through open science.
|
|
</div>
|
|
<div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">Contact us</a></div>
|
|
</div>
|
|
<div class="uk-text-center uk-width-1-1@s uk-width-1-3@m"><img src="assets/connect-assets/contact/3.png"
|
|
style="width:263px"/></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class LearnHowComponent implements OnInit {
|
|
public pageContents = null;
|
|
public divContents = null;
|
|
|
|
public url: string = null;
|
|
public pageTitle: string = "OpenAIRE - Connect | Learn How";
|
|
public pageDescription: string = "Learn the process: Build a Gateway to your community's open and linked research outcomes. Customized to your needs.";
|
|
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about'}];
|
|
|
|
properties: EnvProperties;
|
|
subscriptions = [];
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private _router: Router,
|
|
private _meta: Meta,
|
|
private _title: Title,
|
|
private seoService: SEOService,
|
|
private _piwikService: PiwikService,
|
|
private helper: HelperService) {
|
|
}
|
|
|
|
public ngOnInit() {
|
|
|
|
this.properties = properties
|
|
|
|
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
|
|
this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
|
|
}
|
|
this.url = this.properties.baseLink + this._router.url;
|
|
this.seoService.createLinkForCanonicalURL(this.url);
|
|
this.updateUrl(this.url);
|
|
this.updateTitle(this.pageTitle);
|
|
this.updateDescription(this.pageDescription);
|
|
|
|
//this.getDivContents();
|
|
this.getPageContents();
|
|
|
|
}
|
|
|
|
private getPageContents() {
|
|
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
|
|
this.pageContents = contents;
|
|
}));
|
|
}
|
|
|
|
private getDivContents() {
|
|
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
|
|
this.divContents = contents;
|
|
}));
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscriber) {
|
|
subscription.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
private updateDescription(description: string) {
|
|
this._meta.updateTag({content: description}, "name='description'");
|
|
this._meta.updateTag({content: description}, "property='og:description'");
|
|
}
|
|
|
|
private updateTitle(title: string) {
|
|
var _title = ((title.length > 50) ? title.substring(0, 50) : title);
|
|
this._title.setTitle(_title);
|
|
this._meta.updateTag({content: _title}, "property='og:title'");
|
|
}
|
|
|
|
private updateUrl(url: string) {
|
|
this._meta.updateTag({content: url}, "property='og:url'");
|
|
}
|
|
}
|