229 lines
9.9 KiB
TypeScript
229 lines
9.9 KiB
TypeScript
import {Component} 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";
|
||
|
||
@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"
|
||
uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"
|
||
tm-header-transparent="light" tm-header-transparent-placeholder="">
|
||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||
[texts]="pageContents['top']"></helper>
|
||
<!--<div style=" min-height: calc(7.89999px + 60vh); background-image: url('assets/about/background.png') !important;"
|
||
class="uk-section uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
|
||
<div class="uk-container uk-container-large uk-section uk-margin-top uk-padding-remove-top">
|
||
<div class="uk-margin-large-top uk-grid">
|
||
<h1 class="uk-width-1-1 font-41 uk-text-bold">Learn the process</h1>
|
||
<div class="uk-width-1-2@l uk-width-1-1@s uk-h5 uk-margin-top">Build a <b>Gateway to your community's</b>
|
||
open and linked research outcomes. Customized to your needs.
|
||
</div>
|
||
</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>
|
||
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
|
||
<div>
|
||
<ng-container *ngTemplateOutlet="one"></ng-container>
|
||
</div>
|
||
<div class="uk-visible@m">
|
||
<ng-container *ngTemplateOutlet="four"></ng-container>
|
||
</div>
|
||
<div class="uk-hidden@m">
|
||
<ng-container *ngTemplateOutlet="two"></ng-container>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src="../../assets/about/cycle.png">
|
||
</div>
|
||
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
|
||
<div class="uk-visible@m">
|
||
<ng-container *ngTemplateOutlet="two"></ng-container>
|
||
</div>
|
||
<div class="uk-hidden@m uk-visible@s">
|
||
<ng-container *ngTemplateOutlet="four"></ng-container>
|
||
</div>
|
||
<div>
|
||
<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" routerLinkActive="router-link-active"
|
||
routerLink="/about/learn-in-depth"> Learn more details</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background-image: url('assets/cloud/abstract.png') !important;"
|
||
class="uk-background-norepeat uk-section uk-background-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
|
||
<div class="uk-container uk-container-large">
|
||
<gif-slider [gifs]="gifs"></gif-slider>
|
||
</div>
|
||
</div>
|
||
<div style="background-color: #CFDEF1;"
|
||
class="uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
|
||
<div class="uk-container uk-container-large uk-section">
|
||
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
|
||
<div class="uk-width-expand">
|
||
<div class="uk-text-bold uk-h4">We look forward to working together and helping you unlock the full
|
||
potential of your research community through open science.
|
||
</div>
|
||
<div class="uk-margin-medium">Get in touch with our team to find out how.</div>
|
||
<div class="uk-inline">
|
||
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us">
|
||
CONTACT US</a>
|
||
</div>
|
||
</div>
|
||
<div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
|
||
<img width="263" height="250" src="assets/connect-assets/contact/3.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>-->
|
||
</div>
|
||
`
|
||
})
|
||
export class LearnHowComponent {
|
||
public piwiksub: any;
|
||
public gifs: { "gif": string, "header": string, "text" }[] = [];
|
||
public pageContents = null;
|
||
public divContents = null;
|
||
|
||
public url: string = null;
|
||
public pageTitle: string = "OpenAIRE - Connect | Learn How";
|
||
|
||
properties: EnvProperties;
|
||
|
||
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.route.data
|
||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||
this.properties = data.envSpecific;
|
||
|
||
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
|
||
this.piwiksub = 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("OpenAIRE - Connect, Community Gateway, research community");
|
||
|
||
//this.getDivContents();
|
||
this.getPageContents();
|
||
});
|
||
this.createGifs();
|
||
}
|
||
|
||
private getPageContents() {
|
||
this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
|
||
this.pageContents = contents;
|
||
})
|
||
}
|
||
|
||
private getDivContents() {
|
||
this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
|
||
this.divContents = contents;
|
||
})
|
||
}
|
||
|
||
public ngOnDestroy() {
|
||
if (this.piwiksub) {
|
||
this.piwiksub.unsubscribe();
|
||
}
|
||
}
|
||
|
||
private createGifs() {
|
||
this.gifs.push({
|
||
gif: "assets/connect-assets/about/gifs/profile.gif",
|
||
header: "Profile",
|
||
text: "Edit community information, change logo url, add community managers or organizations related to community."
|
||
});
|
||
this.gifs.push({
|
||
gif: "assets/connect-assets/about/gifs/content.gif",
|
||
header: "Content",
|
||
text: "Manage projects, content providers, subjects and zenodo communities that are related to the research community."
|
||
});
|
||
this.gifs.push({
|
||
gif: "assets/connect-assets/about/gifs/statistics.gif",
|
||
header: "Statistics & Charts",
|
||
text: "Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views."
|
||
});
|
||
this.gifs.push({
|
||
gif: "assets/connect-assets/about/gifs/links.gif",
|
||
header: "Links",
|
||
text: " Manage user claims related to the research community."
|
||
});
|
||
this.gifs.push({
|
||
gif: "assets/connect-assets/about/gifs/help.gif",
|
||
header: " Help texts",
|
||
text: "Add or edit help text in research community pages."
|
||
});
|
||
this.gifs.push({
|
||
gif: "assets/connect-assets/about/gifs/users.gif",
|
||
header: "Users",
|
||
text: "Invite more users to subscribe, manage community subscribers, your personal info and notification settings."
|
||
});
|
||
}
|
||
|
||
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'");
|
||
}
|
||
}
|