D-Net

import {Component, Output, EventEmitter, Input} from '@angular/core';

import {JSONP_PROVIDERS}  from '@angular/http';

import {Observable}       from 'rxjs/Observable';

@Component({

    selector: 'linking-home',

    template: `

          <div class="card-deck-wrapper">

          <div class="card-deck">

            <div class="card card-inverse card-info text-xs-center">

              <!--<img class="card-img-top" data-src="images/funders.png" alt="Card image cap"> -->

              <div class="card-block">

                <h4 class="card-title">Link with project</h4>

                <p class="card-text">Link your research result with funded projects.</p>

                <a  (click)="select('project')" class="btn btn-primary">Link with project</a>

                <!--<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>-->

              </div>

            </div>

            <div class="card card-inverse card-success text-xs-center" >

              <div class="card-block">

                <h4 class="card-title">Link with Community</h4>

                <p class="card-text">Link your research result with research communities.</p>

                <a  (click)="select('context')" class="btn btn-primary">Link with community</a>

                <!--<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->

              </div>

            </div>

            <div class="card card-inverse text-xs-center" style="background-color:pink;">

              <div class="card-block">

                <h4 class="card-title">Link with Software</h4>

                <p class="card-text">....</p>

                <a  (click)="select('software')" class="btn btn-primary">Link with software</a>

                <!--<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->

              </div>

            </div>

          </div>

          <div *ngIf=" !bulkMode " class="card-block">

            <h4 class="card-title">Bulk mode linking</h4>

            <p class="card-text">Link Research Results to projects,contects, etc, providing a CSV file with research results' DOIs</p>

            <a  href="/bulk-linking" class="btn btn-primary">Bulk mode linking</a>

          </div>

          </div>

        `

})

export class LinkingHomeComponent {

  @Output() linkTypeChange = new EventEmitter();

  @Input() bulkMode:boolean = false;

  linkType:string = "project";

  select(type:string){

    this.linkType = type;

    this.linkTypeChange.emit({

       value: this.linkType

     });

  }

}