D-Net

import {Component, ElementRef} from '@angular/core';

import { Subject } from 'rxjs/Subject';

import {Observable}       from 'rxjs/Observable';

import {OpenaireProjectsService} from '../services/openaireProjects.service';

import {SearchProjectsService} from '../services/searchProjects.service';

import {SearchPublicationsService} from '../services/searchPublications.service';

import {SearchDatasetsService} from '../services/searchDatasets.service';

import {ISVocabulariesService} from '../services/ISVocabularies.service';

import {Dates} from '../utils/dates.class';

@Component({

    selector: 'test',

    template: `

    <!--i-frame url="https://google.com" width="30%" height="250"></i-frame-->

    <div style ="width:30%; height:250px;" >

      <!--static-autocomplete2 [(list)]=lan [(filtered)] =filtered [(selected)] =selected [showSelected]=true placeHolderMessage = "Search for languages" title = "Languages:"  [multipleSelections]=false ></static-autocomplete2-->

    <div>

<div style ="width:30%; height:250px;" >

  <static-autocomplete [(filtered)] =filtered [(selected)] =selected [showSelected]=true placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)" ></static-autocomplete>

<div>

Selected::

<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >

 <span >{{item.label}} </span>

 </span>

 <div style ="width:80%; height:250px;" >

   <dynamic-autocomplete  [showSelected]=true

   placeHolderMessage = "Search for Projects" title = "Projects:"  ></dynamic-autocomplete>

 <div>

 <div class="container" >

          <div class="title">

              Welcome

          </div>

          <div class="panel-body">

              <div class="row">

                  <div class="input-field col s12">

                      <input [(ngModel)]="user.email" id="email"

                          type="email" class="validate">

                      <label for="email">Email</label>

                  </div>

              </div>

              <div class="row">

                  <div class="input-field col s12">

                      <input [(ngModel)]="user.password" id="password"

                          type="password" class="validate">

                      <label for="password">Password</label>

                  </div>

              </div>

              <span>{{errorMsg}}</span>

              <button (click)="login()"

                  class="btn waves-effect waves-light"

                  type="submit" name="action">Login</button>

          </div>

      </div>

`

//[(filtered)] =filteredObs [(selected)] =selectedObs

// [(searchTermStream)] = searchTermStream

//(keywordChange)="keywordChanged($event)"

})

export class TestComponent {

  // for auto complete observable:

  // searchTermStream = new Subject<string>();

  // private selectedObs = [];

  // filteredObs: Observable<{}> = this.searchTermStream

  // .debounceTime(300).distinctUntilChanged()

  // .switchMap((term: string) => this.service(term));

  private lan;

  private types;

  private user:{password:string,email:string} = {password:"",email:""};

  constructor(private _projectService: OpenaireProjectsService,private _searchProjectsService:SearchProjectsService,private _searchPubService:SearchPublicationsService,private _searchDataService:SearchDatasetsService, private _vocabulariesService: ISVocabulariesService) {

    // this.elementRef = myElement;

  }

  ngOnInit() {

    // this.lan = this._vocabulariesService.getLanguages();

    this.lan = this._vocabulariesService.getLanguagesJsonFile();

    this.types = this._vocabulariesService.getPublicationTypesJsonFile();

    this.user.email = localStorage.getItem("email");

    this.user.password = localStorage.getItem("password");

    //&collectedFrom=openaire____::4a39de251a65e801bb88d3e75b47623f&cl=and

    this._searchDataService.searchDatasets("&collectedFrom=openaire____::fdb035c8b3e0540a8d9a561a6c44f4de&cl=and" ,"&refine=true&fields=resulthostingdatasourceid", 1, 0, ["resulthostingdatasourceid"]).subscribe(

        data => {

            console.info("done" +data[0]);

        },

        err => {

            console.error(err)

        }

    );

    this._searchPubService.searchPublications("&fq=collectedfromdatasourceid exact openaire____::fdb035c8b3e0540a8d9a561a6c44f4de","&refine=true&fields=resulthostingdatasourceid" , 0, 0, ["resulthostingdatasourceid"]).subscribe(

        data => {

            console.info("done" +data[0]);

        },

        err => {

            console.error(err)

        }

    );

    this._searchProjectsService.getProjectsforDataProvider("openaire____::db600878200645bd752cf7fd96a37df5",1,10).subscribe(

        data => {

            console.info("done" +data[0]);

        },

        err => {

            console.error(err)

        }

    );

  }

  login(){

    localStorage.setItem("email",this.user.email);

    localStorage.setItem("password",this.user.password);

    console.info("Save email/ password in local Storage. Email is:" + localStorage.getItem("email"));

  }

  service(term) {

      var projects = this._projectService.searchForProjectsObs(term, "this.selectedFunderId");

      console.info("Results: "+ projects);

      for( var i = 0 ; i<projects.length ; i++){

      }

     return projects;

  }

  private filtered = [];

  private selected = [];

  keywordChanged($event) {

    console.log("keyword Changed"+this.lan.length+" "+this.lan[0].id+"-"+this.lan[0].label);

    var keyword = $event.value;

    this.filtered = this.types.filter(function(el){

        return el.label.toLowerCase().indexOf(keyword.toLowerCase()) > -1;

    }.bind(this));

  }

  public countries = [

    {id: '0', label: "Albania"},{id: '1', label: "Andorra"},{id: '2', label: "Armenia"},

    {id: '3', label: "Austria"},{id: '4', label: "Azerbaijan"},{id: '5', label: "Belarus"},{id: '6', label: "Belgium"},

    {id: '7', label: "Bosnia & Herzegovina"},{id: '8', label: "Bulgaria"},{id: '9', label: "Croatia"},

    {id: '10', label: "Cyprus"},{id: '11', label: "Czech Republic"},{id: '12', label: "Denmark"},{id: '13', label: "Estonia"},

    {id: '14', label: "Finland"},{id: '15', label: "France"},{id: '16', label: "Georgia"},

    {id: '17', label: "Germany"},{id: '18', label: "Greece"},{id: '19', label: "Hungary"},{id: '20', label: "Iceland"},

    {id: '21', label: "Ireland"},{id: '22', label: "Italy"},{id: '23', label: "Kosovo"},

    {id: '24', label: "Latvia"},{id: '25', label: "Liechtenstein"},{id: '26', label: "Lithuania"},{id: '27', label: "Luxembourg"}];

                      // "Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",

                      // "Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",

                      // "Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",

                      // "Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];

}