223 lines
9.8 KiB
TypeScript
223 lines
9.8 KiB
TypeScript
import {Component, Input} from '@angular/core';
|
|
import {JSONP_PROVIDERS} from '@angular/http';
|
|
import {Observable} from 'rxjs/Observable';
|
|
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
|
import {ClaimContextComponent} from './claimContext/claimContext.component';
|
|
import {ClaimResultComponent} from './claimResult/claimResult.component';
|
|
import {ClaimSelectedComponent} from './selected/selected.component';
|
|
import {ClaimInsertComponent} from './insertClaim/insertClaim.component';
|
|
import {ClaimProjectsComponent} from './claimProject/claimProject.component';
|
|
import {LinkingHomeComponent} from './linkingHome.component';
|
|
|
|
@Component({
|
|
selector: 'linking',
|
|
//providers: [MdRadioDispatcher],
|
|
directives: [ROUTER_DIRECTIVES, ClaimContextComponent, ClaimSelectedComponent, ClaimInsertComponent, ClaimProjectsComponent, LinkingHomeComponent, ClaimResultComponent],
|
|
template: `
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Link research resutls</h1>
|
|
</div>
|
|
<linking-home *ngIf=" show == 'home' " (linkTypeChange)="linkTypeChange($event)" ></linking-home>
|
|
<div *ngIf=" show != 'home' && show != 'myclaims' " >
|
|
<ol *ngIf=" show != 'myclaims' " class="breadcrumb">
|
|
<li *ngIf="linkType == 'project'" [class]="(show == 'project' )?'active':''"><a *ngIf="show != 'project'" (click)="showChangedType('project')" >Project</a><span *ngIf="show == 'project'">Project</span></li>
|
|
<li *ngIf="linkType == 'context'" [class]="(show == 'context' )?'active':''"><a *ngIf="show != 'context'" (click)="showChangedType('context')" >Context</a><span *ngIf="show == 'context'">Context</span></li>
|
|
<li *ngIf="linkType == 'software'" [class]="(show == 'software' )?'active':''"><a *ngIf="show != 'software'" (click)="showChangedType('software')" >Software</a><span *ngIf="show == 'software'">Software</span> </li>
|
|
<li [class]="(show == 'result' || show == 'publication' || show == 'dataset')?'active':''"><a *ngIf="show != 'result' && show != 'publication' && show != 'dataset'" (click)="showChangedType('result')" >Research Result</a><span *ngIf="show == 'result' || show == 'publication' || show == 'dataset'">Research Result</span></li>
|
|
<li [class]="(show == 'claim' )?'active':''"><span *ngIf="show == 'claim'">Link</span><a *ngIf="show != 'claim'" (click)="showChangedType('claim')">Link</a> </li>
|
|
</ol>
|
|
|
|
<div *ngIf=" show != 'claim' && show != 'myclaims'" class="row" >
|
|
<div class="col-sm-6">
|
|
|
|
<div *ngIf=" show=='result' " >
|
|
<claim-result [selectedDatasets]="datasets" [selectedPublications]="publications" (datasetsChange)="datasetsChange($event)" (publicationsChange)="publicationsChange($event)" > </claim-result>
|
|
</div>
|
|
<!--<div *ngIf=" show=='result' " >
|
|
<form>
|
|
|
|
!--<md-input class="demo-full-width default" placeholder="Search for Research Results" [(ngModel)]="keyword"></md-input>
|
|
|
|
<md-radio-group class="default" [(value)]="searchType">
|
|
<md-radio-button [value]="publication" [checked]="searchType === 'publication'" >Publication</md-radio-button>
|
|
<md-radio-button [value]="dataset" [checked]="searchType != 'publication'">Dataset</md-radio-button>
|
|
</md-radio-group> --
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{(searchType === 'publication')?"Publication":"Dataset"}} </button>
|
|
<ul class="dropdown-menu">
|
|
<li (click)="typeChanged('publication')" ><a >Publication</a></li>
|
|
<li (click)="typeChanged('dataset')" ><a >Dataset</a></li>
|
|
</ul>
|
|
</div>
|
|
!-- <div class="resultType">
|
|
<span class="input-group-addon">
|
|
<input #publication name="searchType" type="radio" [checked]="searchType === 'publication'" value="publication" (click)="searchType = publication.value" />Publication
|
|
<input #dataset name="searchType" [checked]="searchType === 'dataset'" type="radio" value="dataset" (click)="searchType = dataset.value" />Dataset
|
|
</div>
|
|
</span>--
|
|
<input class=" form-control" [(ngModel)]="keyword"/>
|
|
|
|
<span class="input-group-btn">
|
|
<button (click)="search()" type="submit" class="btn btn-default">Search</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div> -->
|
|
<!-- <div *ngIf=" show=='publication' ">
|
|
<claim-publication [keyword]="keyword" [selectedPublications]="publications" (publicationsChange)="publicationsChange($event)" > </claim-publication>
|
|
</div>
|
|
<div *ngIf=" show=='dataset' " >
|
|
<claim-dataset [keyword]="keyword" [selectedDatasets]="datasets" (datasetsChange)="datasetsChange($event)" > </claim-dataset>
|
|
</div> -->
|
|
<div *ngIf=" show=='project' " >
|
|
<claim-projects [selectedProjects]="projects" (projectsChange)="projectsChange($event)" > </claim-projects>
|
|
</div>
|
|
<div *ngIf=" show=='software' " >
|
|
<p>TODO software</p>
|
|
</div>
|
|
<div *ngIf=" show == 'context'" >
|
|
<claim-contexts [selectedList]="contexts" (contextsChange)="contextsChange($event)" > </claim-contexts>
|
|
</div>
|
|
<!-- <div *ngIf=" show == 'claim'" >
|
|
<claim-insert [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" ></claim-insert>
|
|
</div>-->
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<claim-selected [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show]="show"
|
|
(projectsChange)="projectsChange($event)" (contextsChange)="contextsChange($event)" (datasetsChange)="datasetsChange($event)"
|
|
(publicationsChange)="publicationsChange($event)" (showChange)="showChange($event)" > </claim-selected>
|
|
</div>
|
|
</div>
|
|
<div *ngIf=" show == 'claim'" >
|
|
<claim-selected [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show]="show" (showChange)="showChange($event)" [showAccessRights]="'true'" > </claim-selected>
|
|
<claim-insert [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show] = "show" (showChange)="showChange($event)"></claim-insert>
|
|
</div>
|
|
<nav>
|
|
<ul *ngIf="show != 'home'" class="pager">
|
|
<li class="previous" (click)="prev()"><a ><span aria-hidden="true">←</span> Previous</a></li>
|
|
<li class="next" *ngIf="show != 'claim'" (click)="next()" ><a >Next <span aria-hidden="true">→</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
<!--<button class="btn btn-primary" *ngIf="show != 'home'" (click)="prev()">Prev</button>
|
|
<button class="btn btn-primary" *ngIf="show != 'claim'" (click)="next()" >Next</button> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
`
|
|
|
|
})
|
|
//[(ngModel)]="date"
|
|
export class LinkingComponent {
|
|
constructor ( private _router: Router ) {
|
|
}
|
|
sourceType:string;
|
|
targetType:string;
|
|
step:number = 1;
|
|
contexts=[];
|
|
projects=[];
|
|
publications=[];
|
|
datasets=[];
|
|
show = "home";
|
|
searchType="publication"; //publication or dataset
|
|
date='8-6-2016';
|
|
keyword: string = "";
|
|
linkType:string ="project"; // link type (selected in home page) : project, context, software, etc
|
|
ngOnInit() {
|
|
|
|
}
|
|
next(){
|
|
|
|
if((this.show == 'project' || this.show == 'context' || this.show == 'software')){
|
|
this.show='result';
|
|
}else if((this.show == 'result' && this.keyword == '')||(this.show == 'dataset' || this.show == 'publication')){
|
|
this.show='claim';
|
|
// }else if(this.show == 'result' ){
|
|
// if(this.searchType == 'publication' ){
|
|
// this.show="publication";
|
|
// }else{
|
|
// this.show="dataset";
|
|
// }
|
|
}
|
|
}
|
|
prev(){
|
|
if(this.show == 'result'){
|
|
this.show = this.linkType;
|
|
// if(this.linkType == 'project'){
|
|
// this.show='project';
|
|
// }else if(this.linkType == 'context'){
|
|
// this.show='context';
|
|
// }else if(this.linkType == 'software'){
|
|
// this.show='software';
|
|
// }else{
|
|
// this.show='home';
|
|
//
|
|
// }
|
|
}else if(this.show == 'context' || this.show == 'project' || this.show == 'software' ){
|
|
this.show='home';
|
|
// }else if(this.show == 'dataset' || this.show == 'publication'){
|
|
// this.show='result';
|
|
} else if(this.show == 'claim'){
|
|
this.show='result';
|
|
}
|
|
}
|
|
goto(term: string) {
|
|
this._router.navigate( ['Search', { keyword: term }] );
|
|
}
|
|
|
|
search() {
|
|
if(this.searchType == 'publication' ){
|
|
this.show="publication";
|
|
}else{
|
|
this.show="dataset";
|
|
}
|
|
|
|
}
|
|
|
|
sourceTypeChange($event) {
|
|
this.sourceType=$event.value;
|
|
console.log($event.value);
|
|
}
|
|
targetTypeChange($event) {
|
|
this.targetType=$event.value;
|
|
console.log($event.value);
|
|
}
|
|
contextsChange($event) {
|
|
this.contexts=$event.value;
|
|
console.log($event.value);
|
|
}
|
|
publicationsChange($event) {
|
|
this.publications=$event.value;
|
|
}
|
|
datasetsChange($event) {
|
|
this.datasets=$event.value;
|
|
}
|
|
projectsChange($event) {
|
|
this.projects=$event.value;
|
|
}
|
|
typeChanged(type:string) {
|
|
this.searchType = type;
|
|
}
|
|
linkTypeChange($event) {
|
|
this.linkType =$event.value;
|
|
this.show=$event.value;
|
|
|
|
}
|
|
showChange($event) {
|
|
this.show=$event.value;
|
|
this.showChangedType($event.value);
|
|
|
|
|
|
}
|
|
showChangedType(type:string) {
|
|
this.show=type;
|
|
if(this.show == 'project' || this.show == 'context' || this.show == 'software'){
|
|
this.linkType = this.show;
|
|
}
|
|
|
|
|
|
}
|
|
}
|