222 lines
10 KiB
TypeScript
222 lines
10 KiB
TypeScript
import {Component} from '@angular/core';
|
|
import {JSONP_PROVIDERS} from '@angular/http';
|
|
import {Observable} from 'rxjs/Observable';
|
|
import {PublicationService} from '../../services/publication.service';
|
|
import {PublicationInfo} from '../../entities/publicationInfo';
|
|
|
|
import { RouteParams} from '@angular/router-deprecated';
|
|
|
|
@Component({
|
|
selector: 'publication',
|
|
//directives: [...ROUTER_DIRECTIVES],
|
|
template: `
|
|
|
|
<div *ngIf="publicationInfo != null">
|
|
|
|
<div class="publication">
|
|
<h2>{{publicationInfo.title}}</h2>
|
|
|
|
<p>
|
|
{{publicationInfo.authors}} ({{publicationInfo.date}})
|
|
</p>
|
|
<div class="row" *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">
|
|
<div class="col-md-1"> Publisher: </div>
|
|
<span>{{publicationInfo.publisher}}</span>
|
|
</div>
|
|
<div class="row" *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">
|
|
<div class="col-md-1"> Journal: </div>
|
|
<span>{{publicationInfo.journal}}</span>
|
|
</div>
|
|
<div class="row" *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''">
|
|
<div class="col-md-1"> Languages: </div>
|
|
<span>{{publicationInfo.languages}}</span>
|
|
</div>
|
|
<div class="row" *ngIf="publicationInfo.types != undefined">
|
|
<div class="col-md-1"> Types: </div>
|
|
<span>{{publicationInfo.types}}</span>
|
|
</div>
|
|
<div class="row" *ngIf="publicationInfo.subjects != undefined">
|
|
<div class="col-md-1"> Subjects: </div>
|
|
<span> {{publicationInfo.subjects}} </span>
|
|
</div>
|
|
<div class="row" *ngIf="publicationInfo.identifiers != undefined">
|
|
<div class="col-md-1">Identifiers:</div>
|
|
<span *ngFor="let key of publicationInfo.identifiers.keys()">
|
|
{{key}}: {{publicationInfo.identifiers.get(key)}}
|
|
</span>
|
|
</div>
|
|
<div >
|
|
<blockquote>
|
|
{{publicationInfo.description}}
|
|
</blockquote>
|
|
</div>
|
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a data-toggle="tab" href="#citationsTab">References</a></li>
|
|
<li><a data-toggle="tab" href="#dataTab">Related Research Data</a></li>
|
|
<li><a data-toggle="tab" href="#similarTab">Similar Publications</a></li>
|
|
<li><a data-toggle="tab" href="#bioentitiesTab">Bioentities</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
|
|
<div id="citationsTab" class="tab-pane fade in active">
|
|
<h3>REFERENCES</h3>
|
|
|
|
<div *ngIf="publicationInfo.references != undefined">
|
|
<div *ngFor="let item of publicationInfo.references">
|
|
<div *ngIf="item != undefined">
|
|
<p *ngIf="item['url'] != undefined">
|
|
<a class="custom-external" href="{{item['url']}}" target="_blank">
|
|
{{item['text']}}
|
|
</a>
|
|
</p>
|
|
<p *ngIf="item['url'] == undefined">
|
|
{{item['text']}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="dataTab" class="tab-pane fade">
|
|
<h3>RELATED RESEARCH DATA</h3>
|
|
|
|
<table id="inferredTable">
|
|
<thead>
|
|
<tr role="row">
|
|
<th>Title</th>
|
|
<th>Trust</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody *ngIf="publicationInfo.relatedResearchData != undefined">
|
|
<tr *ngFor="let key of publicationInfo.relatedResearchData.keys()">
|
|
<td *ngIf="key != undefined">
|
|
<a class="custom-external" href="{{key}}" target="_blank">
|
|
{{publicationInfo.relatedResearchData.get(key)[0]}}
|
|
</a>
|
|
({{publicationInfo.relatedResearchData.get(key)[1]}})
|
|
</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" [style.width] = "publicationInfo.relatedResearchData.get(key)[2]">
|
|
{{publicationInfo.relatedResearchData.get(key)[2]}}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="similarTab" class="tab-pane fade">
|
|
<h3>SIMILAR PUBLICATIONS</h3>
|
|
<table id="similarTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Trust</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody *ngIf="publicationInfo.similarPublications != undefined">
|
|
<tr *ngFor="let key of publicationInfo.similarPublications.keys()">
|
|
<td *ngIf="key != undefined">
|
|
<a class="custom-external" href="{{key}}" target="_blank">
|
|
{{publicationInfo.similarPublications.get(key)[0]}}
|
|
</a>
|
|
({{publicationInfo.similarPublications.get(key)[1]}})
|
|
</td>
|
|
<td class="progress">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" [style.width] = "publicationInfo.similarPublications.get(key)[2]">
|
|
{{publicationInfo.similarPublications.get(key)[2]}}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="bioentitiesTab" class="tab-pane fade">
|
|
<h3>BIOENTITIES</h3>
|
|
<table id="bioentitiesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Bio Entity</th>
|
|
<th>Site Name</th>
|
|
</tr>
|
|
</thead>
|
|
<div *ngIf="publicationInfo.bioentities != undefined">
|
|
<tbody *ngFor="let key of publicationInfo.bioentities.keys()">
|
|
<div *ngIf="publicationInfo.bioentities.get(key) != undefined">
|
|
<tr *ngFor="let keyIn of publicationInfo.bioentities.get(key).keys()">
|
|
<td *ngIf="keyIn != undefined">
|
|
<a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}" target="_blank">
|
|
{{keyIn}}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
{{key}}
|
|
</td>
|
|
</tr>
|
|
</div>
|
|
</tbody>
|
|
|
|
</div>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mainFunctionsBlock">
|
|
<div class="functionsSection" *ngIf="publicationInfo.collectedFrom != undefined">
|
|
<h3 class="title">Collected from</h3>
|
|
<ul class="line" *ngFor="let key of publicationInfo.collectedFrom.keys()">
|
|
<li class="collectedFrom">
|
|
<a href="{{publicationInfo.collectedFrom.get(key)}}">
|
|
{{key}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`,
|
|
providers:[JSONP_PROVIDERS, PublicationService]
|
|
})
|
|
export class PublicationComponent {
|
|
constructor (private _publicationService: PublicationService, private _routeParams: RouteParams) {
|
|
console.info('publication constructor');
|
|
this.params = _routeParams;
|
|
}
|
|
ngOnInit() {
|
|
console.info('publication init');
|
|
this.getPublicationInfo();
|
|
}
|
|
|
|
results : String[];
|
|
orcidresults : String[];
|
|
resultsNum : number ;
|
|
|
|
publicationInfo: PublicationInfo;
|
|
params: RouteParams;
|
|
|
|
getPublicationInfo() {
|
|
console.info("inside getPublicationInfo of component");
|
|
|
|
this._publicationService.getPublicationInfo(this.params.get("articleId")).subscribe(
|
|
data => {
|
|
this.publicationInfo = data;
|
|
},
|
|
err => console.error(err)
|
|
);
|
|
}
|
|
|
|
}
|