D-Net

import {Component, OnDestroy, OnInit} from "@angular/core";

import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";

import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";

import {Subscription} from "rxjs";

import {Meta, Title} from "@angular/platform-browser";

import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";

import {properties} from "../../environments/environment";

import {Router} from "@angular/router";

import {StakeholderUtils} from "../utils/indicator-utils";

@Component({

  selector: 'develop',

  template: `

    <div page-content>

      <div inner>

        <div *ngIf="stakeholder" class="uk-container uk-container-large uk-section-small">

          <h2 class="uk-text-center">

            Develop

          </h2>

          <div class="uk-margin-medium-top uk-card uk-card-body uk-card-default">

            <h3 class="uk-text-center">Help developers with <span

                class="portal-color uk-text-bold">OpenAIRE APIs</span>

            </h3>

            <div class="uk-margin-large-top uk-margin-medium-bottom">

              Not sure where to start? Let us give you some guides and request examples.

            </div>

            <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-grid>

              <div>

                <p>

                  <span class="uk-text-bold">For research outcomes </span>

                  (publications, datasets, software and other research data) you can use the

                  <a href="http://api.openaire.eu/api.html" target="_blank">Selective Access APIs</a>

                  by adding the <span class="uk-text-lowercase">{{type}}</span> parameter.

                </p>

                <p>

                  Request examples:

                </p>

                <ul class="portal-circle">

                  <li>

                    <span class="uk-text-bold">Access “Publications”</span><br>

                    <span class="uk-text-bold">GET</span>

                    <span class="uk-text-break space">https://api.openaire.eu/search/publications?funder={{stakeholder.index_shortName}}</span>

                  </li>

                  <li>

                    <span class="uk-text-bold">Access “Open Access Publications”</span><br>

                    <span class="uk-text-bold">GET</span>

                    <span class="uk-text-break space">http://api.openaire.eu/search/publications?funder={{stakeholder.index_shortName}}&OA=true</span>

                  </li>

                  <li>

                    <span class="uk-text-bold">Access “Datasets”</span><br>

                    <span class="uk-text-bold">GET</span>

                    <span class="uk-text-break space">https://api.openaire.eu/search/datasets?funder={{stakeholder.index_shortName}}</span>

                  </li>

                  <li>

                    <span class="uk-text-bold">Access “Software”</span><br>

                    <span class="uk-text-bold">GET</span>

                    <span class="uk-text-break space">https://api.openaire.eu/search/software?funder={{stakeholder.index_shortName}}</span>

                  </li>

                  <li>

                    <span class="uk-text-bold">Access “Other Research”</span><br>

                    <span class="uk-text-bold">GET</span>

                    <span class="uk-text-break space">https://api.openaire.eu/search/other?funder={{stakeholder.index_shortName}}</span>

                  </li>

                </ul>

              </div>

              <div>

                <p>

                  <span class="uk-text-bold">For projects</span> you can use the <a href="http://api.openaire.eu/api.html" target="_blank">Selective Access APIs</a>

                  and the <a href="http://api.openaire.eu/bulk-projects.html" target="_blank">Bulk Access APIs</a>.

                </p>

                <p>

                  Request examples:

                </p>

                <ul class="portal-circle">

                  <li>

                    <span class="uk-text-bold">For the “Selective Access”</span><br>

                    <span class="uk-text-break space">https://api.openaire.eu/search/projects?funder={{stakeholder.index_shortName}}</span>

                  </li>

                  <li>

                    <span class="uk-text-bold">For the “Bulk Access”</span><br>

                    <span class="uk-text-bold uk-text-nowrap">DSpace endpoint:</span>

                    <span class="uk-text-break space">https://api.openaire.eu/projects/dspace/{{stakeholder.index_shortName}}/ALL/ ALL</span><br>

                    <span class="uk-text-bold uk-text-nowrap">ePrints endpoint:</span>

                    <span class="uk-text-break space">https://api.openaire.eu/projects/eprints/{{stakeholder.index_shortName}}/ALL/ ALL</span>

                  </li>

                </ul>

                <div class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-top">

                  <img width="350" src="assets/develop.png">

                </div>

              </div>

            </div>

            <div class="uk-margin-large-top uk-flex uk-flex-center uk-padding">

              <div class="documentation">

                For <span class="uk-text-bold">more information</span> on the full potential of the OpenAIRE APIs please check

                the <a href="http://develop.openaire.eu/" target="_blank">OpenAIRE API Documentation</a>.

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  `,

  styleUrls: ['develop.component.css']

})

export class DevelopComponent implements OnInit, OnDestroy {

  public stakeholder: Stakeholder;

  private subscriptions: any[] = [];

  private stakeholderUtils: StakeholderUtils = new StakeholderUtils();

  public type: string;

  constructor(private stakeholderService: StakeholderService,

              private seoService: SEOService,

              private _meta: Meta,

              private _router: Router,

              private _title: Title) {

  }

  ngOnInit() {

    this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {

      this.stakeholder = stakeholder;

      if (this.stakeholder) {

        if(stakeholder.type !== "funder") {

          this.navigateToError();

        }

        /* Metadata */

        const url = properties.domain + properties.baseLink + this._router.url;

        this.seoService.createLinkForCanonicalURL(url, false);

        this._meta.updateTag({content: url}, "property='og:url'");

        const description = "Develop | " + this.stakeholder.name;

        const title = "Develop | " + this.stakeholder.name;

        this._meta.updateTag({content: description}, "name='description'");

        this._meta.updateTag({content: description}, "property='og:description'");

        this._meta.updateTag({content: title}, "property='og:title'");

        this._title.setTitle(title);

        /* Initializations */

        this.stakeholderUtils.types.forEach(type => {

          if (type.value === stakeholder.type) {

            this.type = type.label;

          }

        });

      }

    }));

  }

  private navigateToError() {

    this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    });

  }

}