122 lines
5.0 KiB
TypeScript
122 lines
5.0 KiB
TypeScript
import {Component, OnDestroy, OnInit} from '@angular/core';
|
|
import {Breadcrumb} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.component';
|
|
import {member, team} from './team';
|
|
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
|
|
import {Meta, Title} from '@angular/platform-browser';
|
|
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
|
|
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
|
import {properties} from '../../environments/environment';
|
|
import {Subscription} from 'rxjs';
|
|
import {Router} from '@angular/router';
|
|
import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
|
|
|
|
@Component({
|
|
selector: 'team',
|
|
template: `
|
|
<schema2jsonld [URL]="properties.domain + '/about/team'"
|
|
[logoURL]="properties.domain + '/assets/common-assets/logo-small-graph.png'"
|
|
[description]="description" type="other" [name]="title">
|
|
</schema2jsonld>
|
|
<div>
|
|
<div class="uk-section">
|
|
<div class="uk-margin-large-left uk-margin-medium-bottom">
|
|
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
|
</div>
|
|
<div class="uk-container">
|
|
<h2 class="uk-text-center">Meet The Team</h2>
|
|
<div class="uk-padding-small">
|
|
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1 uk-margin-large-top" uk-grid>
|
|
<div *ngFor="let member of team;" class="uk-card uk-card-flip" [class.uk-active]="member.active === true">
|
|
<div class="uk-card-flip-inner">
|
|
<div class="front clickable" (click)="member.active = true">
|
|
<div class="uk-padding">
|
|
<div class="uk-text-center">
|
|
<img [src]="'assets/graph-assets/about/team/' + member.photo">
|
|
<div class="uk-margin-medium-top role">
|
|
<h6 class="portal-color">{{member.name}}</h6>
|
|
<div class="uk-text-muted">
|
|
{{member.role}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-position-bottom-center uk-margin-bottom">
|
|
<a class="portal-link">Learn more</a>
|
|
</div>
|
|
</div>
|
|
<div class="back clickable" (click)="member.active = false">
|
|
<div class="uk-padding">
|
|
<div class="uk-text-center">
|
|
<img [src]="'assets/graph-assets/about/team/' + member.photo">
|
|
<div class="uk-margin-medium-top">
|
|
<h6 class="uk-text-center portal-color">{{member.name}}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="uk-margin-small-bottom">
|
|
<span class="uk-text-bold">Responsibilities: </span> {{member.responsibilities}}
|
|
</div>
|
|
<div class="uk-margin-small-bottom">
|
|
<span class="uk-text-bold">Affiliation: </span> {{member.affiliation}}, {{member.country}}
|
|
</div>
|
|
</div>
|
|
<div class="uk-position-bottom-center uk-margin-bottom">
|
|
<a class="portal-link">Back</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styleUrls: ['team.component.css']
|
|
})
|
|
export class TeamComponent implements OnInit, OnDestroy {
|
|
public team: member[] = HelperFunctions.copy(team);
|
|
properties: EnvProperties = properties;
|
|
description = "The OpenAIRE Graph Team";
|
|
title = "OpenAIRE - Graph | Team";
|
|
subs: Subscription[] = [];
|
|
public breadcrumbs: Breadcrumb[] = [
|
|
{
|
|
name: 'home',
|
|
route: '/'
|
|
},
|
|
{
|
|
name: 'about',
|
|
route: '/about'
|
|
},
|
|
{
|
|
name: 'Team'
|
|
}
|
|
];
|
|
|
|
constructor(private _title: Title, private _piwikService:PiwikService,
|
|
private _router: Router, private _meta: Meta,
|
|
private seoService: SEOService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this._title.setTitle(this.title);
|
|
this._meta.updateTag({content:this.description},"name='description'");
|
|
this._meta.updateTag({content:this.description},"property='og:description'");
|
|
this._meta.updateTag({content:this.title},"property='og:title'");
|
|
var url = this.properties.domain + this.properties.baseLink+this._router.url;
|
|
this.seoService.createLinkForCanonicalURL(url, false);
|
|
this._meta.updateTag({content:url},"property='og:url'");
|
|
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
|
|
this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
|
|
}
|
|
}
|
|
|
|
public ngOnDestroy() {
|
|
this.subs.forEach(sub => {
|
|
if(sub instanceof Subscription) {
|
|
sub.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
}
|