finish SDGs component functionallity and styles and start on FOS component
parent
da544109aa
commit
e4a9f8be64
@ -0,0 +1,13 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {FosComponent} from './fos.component';
|
||||
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', component: FosComponent, canDeactivate: [PreviousRouteRecorder] }
|
||||
])
|
||||
]
|
||||
})
|
||||
export class FosRoutingModule { }
|
||||
@ -0,0 +1,60 @@
|
||||
<!-- <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> -->
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
|
||||
<div class="uk-padding-small">
|
||||
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
|
||||
<div class="uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
|
||||
<h1 uk-scrollspy-class>Fields of Science and Technology<span class="uk-text-primary">.</span></h1>
|
||||
<div uk-scrollspy-class>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</div>
|
||||
<div>
|
||||
<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-top" uk-scrollspy-class
|
||||
routerLinkActive="router-link-active" routerLink="/">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Learn More</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center">
|
||||
<img src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid>
|
||||
<div>
|
||||
<input type="text" class="uk-input" style="width: 500px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-large-top uk-padding-small">
|
||||
<div class="uk-grid uk-grid-large" uk-grid>
|
||||
<div class="uk-width-1-4">
|
||||
<div *ngFor="let item of fos; index as i" class="uk-margin-bottom">
|
||||
<a class="uk-text-capitalize" (click)="changeDisplayedFos(i)">
|
||||
{{item.id}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="fos[index]" class="uk-width-3-4">
|
||||
<div class="uk-text-capitalize">
|
||||
<h2 class="uk-margin-remove-top">{{fos[index].id}}</h2>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-large-bottom" uk-grid="masonry: true">
|
||||
<div *ngFor="let child of fos[index].children">
|
||||
<div class="whole-child uk-text-capitalize">
|
||||
<h3 class="uk-h6">{{child.id}}</h3>
|
||||
<div *ngFor="let subChild of child.children" class="uk-margin-small-bottom">
|
||||
{{subChild.id}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {Component, OnDestroy, OnInit} from "@angular/core";
|
||||
import {Subscription} from "rxjs";
|
||||
|
||||
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
|
||||
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
|
||||
import {properties} from "src/environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'fos',
|
||||
templateUrl: 'fos.component.html',
|
||||
styleUrls: ['fos.component.css']
|
||||
})
|
||||
export class FosComponent implements OnInit, OnDestroy {
|
||||
|
||||
public fos: any = [];
|
||||
public index: number = 0;
|
||||
|
||||
properties: EnvProperties = properties;
|
||||
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FOS'}];
|
||||
|
||||
subscriptions: Subscription[] = [];
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.httpClient.get('/assets/vocabulary/fos.json').subscribe(data => {
|
||||
this.fos = data['fos'];
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
for (let sub of this.subscriptions) {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
changeDisplayedFos(i) {
|
||||
this.index = i;
|
||||
// console.log(this.fos[this.index]);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {NgModule} from "@angular/core";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
|
||||
import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
|
||||
|
||||
import {FosRoutingModule} from './fos-routing.module';
|
||||
import {FosComponent} from './fos.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule,
|
||||
FosRoutingModule, BreadcrumbsModule
|
||||
],
|
||||
declarations: [
|
||||
FosComponent
|
||||
],
|
||||
providers: [
|
||||
PreviousRouteRecorder
|
||||
],
|
||||
exports: [
|
||||
FosComponent
|
||||
]
|
||||
})
|
||||
export class FosModule {
|
||||
|
||||
}
|
||||
@ -1 +1 @@
|
||||
Subproject commit d26f56e260a01fdcca40a5fa495c1f67f6b19b9b
|
||||
Subproject commit da6f220ae077f8f62cb11a65b33d7091efea486f
|
||||
@ -1,28 +1,55 @@
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {Component, OnInit} from "@angular/core";
|
||||
import {Component, OnDestroy, OnInit} from "@angular/core";
|
||||
import {Subscription} from "rxjs";
|
||||
|
||||
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
|
||||
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
|
||||
import {properties} from "src/environments/environment";
|
||||
import {RefineFieldResultsService} from "../openaireLibrary/services/refineFieldResults.service";
|
||||
|
||||
@Component({
|
||||
selector: 'sdg',
|
||||
templateUrl: 'sdg.component.html',
|
||||
styleUrls: ['sdg.component.css']
|
||||
})
|
||||
export class SdgComponent implements OnInit {
|
||||
export class SdgComponent implements OnInit, OnDestroy {
|
||||
|
||||
public sdgs: any = [];
|
||||
private sdgs: any = [];
|
||||
private sdgsResearchOutcomes: any = [];
|
||||
public displayedSdgs: any = [];
|
||||
|
||||
public loading: boolean;
|
||||
properties: EnvProperties = properties;
|
||||
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'SDG'}];
|
||||
|
||||
subscriptions: Subscription[] = [];
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient
|
||||
private httpClient: HttpClient, private refineFieldResultsService: RefineFieldResultsService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.httpClient.get('/assets/vocabulary/sdg.json').subscribe(data => {
|
||||
// console.log(data['sdg']);
|
||||
this.sdgs = data['sdg'];
|
||||
console.log(this.sdgs);
|
||||
})
|
||||
});
|
||||
this.refineFieldResultsService.getRefineFieldsResultsByEntityName(['sdg'], 'result', this.properties, null).subscribe(data => {
|
||||
this.sdgsResearchOutcomes = data[1][0].values;
|
||||
let merged =[];
|
||||
for(let i=0; i<this.sdgs.length; i++){
|
||||
merged.push({
|
||||
...this.sdgs[i],
|
||||
...(this.sdgsResearchOutcomes.find((innerItem) => innerItem.id === this.sdgs[i].id))
|
||||
});
|
||||
}
|
||||
this.displayedSdgs = merged;
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
for (let sub of this.subscriptions) {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1 +1 @@
|
||||
Subproject commit 776ba07197e4cf73e98890bd4213a32183ea19d2
|
||||
Subproject commit bbad5016c9a712348c5056c3b2709e4baaf27d69
|
||||
@ -1 +1 @@
|
||||
Subproject commit 3b700ea4c14ba05d1f8c2cf3ef3253623eda55f3
|
||||
Subproject commit ca92c36bad13d0be11514abf7786f1e476ae7f5e
|
||||
Loading…
Reference in New Issue