D-Net

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

import {ActivatedRoute, Router} from '@angular/router';

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

import {EnvProperties} from '../../utils/properties/env-properties';

import {HtmlProjectReportService} from './htmlProjectReport.service';

import {ProjectService} from '../project/project.service';

import {PiwikService} from '../../utils/piwik/piwik.service';

import {SEOService} from '../../sharedComponents/SEO/SEO.service';

import {HelperService} from "../../utils/helper/helper.service";

import {Subscriber} from "rxjs";

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

declare var UIkit: any;

@Component({

  selector: 'htmlProjectReport',

  template: `

    <div id="tm-main" class=" uk-section  uk-padding-remove-top tm-middle">

      <div uk-grid>

        <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

          <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"

                  [texts]="pageContents['top']" styleName="uk-width-1-1"></helper>

          <div class="uk-container uk-margin-top uk-width-1-1">

            <div *ngIf="warningMessage" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>

            <div [style.display]="showLoading ? 'inline' : 'none'"

                 class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><span

              class="loading-gif  uk-align-center"></span></div>

            <div *ngIf="!showLoading && !warningMessage">

              <div *ngIf="header1" class="uk-h4 uk-text-bold ">{{header1}}</div>

              <div *ngIf="header1 || htmlResult" class=" ">{{header2}}</div>

              <div class="uk-clearfix uk-margin-bottom">

                <button *ngIf="htmlResult" class="uk-icon-clipboard uk-button uk-button-primary clipBtn uk-float-right"

                        (click)="copied()">

                  Copy to clipboard

                </button>

              </div>

              <!--div class="uk-panel-scrollable custom-html-table-height" *ngIf="htmlResult" id="clipboard" [innerHTML]="htmlResult"></div-->

              <div class="uk-overflow-auto custom-html-table-height" *ngIf="htmlResult" id="clipboard"

                   [innerHTML]="htmlResult"></div>

              <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>

            </div>

          </div>

          <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"

                  [texts]="pageContents['bottom']" styleName="uk-width-1-1"></helper>

        </div>

      </div>

    </div>

  `

})

export class HtmlProjectReportComponent {

  @Input() piwikSiteId = null;

  @Input() communityId = null;

  private projectId: string;

  private totalResults: number = 10;

  private resultsType: string = "publication";

  public header1: string = "";

  public header2: string = "";

  public htmlResult: string = "";

  subscriptions = [];

  public warningMessage: string = "";

  public errorMessage: string = "";

  public showLoading: boolean = true;

  properties: EnvProperties;

  public pageContents = null;

  public divContents = null;

  constructor(private  route: ActivatedRoute,

              private htmlService: HtmlProjectReportService,

              private _piwikService: PiwikService,

              private _projectService: ProjectService,

              private _meta: Meta,

              private _title: Title,

              private _router: Router,

              private helper: HelperService,

              private seoService: SEOService) {

  }

  ngOnInit() {

        this.properties = properties;

        //this.getDivContents();

        this.getPageContents();

        this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url);

        this.seoService.createLinkForCanonicalURL(this.properties.domain + this.properties.baseLink + this._router.url);

    this.subscriptions.push(this.route.queryParams.subscribe(params => {

      this.projectId = params['projectId'];

      if (params['size'] == parseInt(params['size'], 10)) {

        this.totalResults = params['size'];

      } else {

        this.showLoading = false;

        this.warningMessage = "Requested size is not an integer";

      }

      if (params['type'] && (params['type'] == "publication" || params['type'] == "dataset" || params['type'] == "software" || params['type'] == "other")) {

        if (params['type'] == "publication") {

          this.resultsType = 'publication';

        } else if (params['type'] == "dataset") {

          this.resultsType = 'research data';

        } else if (params['type'] == "software") {

          this.resultsType = 'software';

        } else if (params['type'] == "other") {

          this.resultsType = "other research product";

        }

        var title = "Project's " + this.resultsType + " report";

        var description = "project, project " + this.resultsType + " report, funding, open access, publications, research data, software, other research products";

        this.updateTitle(title);

        this.updateDescription(description);

      } else {

        this.showLoading = false;

        this.warningMessage = "Requested type should be publication or research data or software or other research product";

      }

      //showLoading is true if no warnings

      if (this.showLoading) {

        if (this.projectId) {

          this.createHeaders();

        } else {

          this.showLoading = false;

          this.warningMessage = "No valid project id";

        }

      }

    }));

  }

  private getPageContents() {

    if(this.communityId) {

      this.subscriptions.push(this.helper.getPageHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {

        this.pageContents = contents;

      }));

    }

  }

  private getDivContents() {

    if(this.communityId) {

      this.subscriptions.push(this.helper.getDivHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {

        this.divContents = contents;

      }));

    }

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscriber) {

        subscription.unsubscribe();

      }

    });

  }

  private createHeaders() {

    this.subscriptions.push(this._projectService.getHTMLInfo(this.projectId, this.properties).subscribe(

      data => {

        this.createHeader1(data);

        if (data.acronym) {

          this.updateTitle(data.acronym + " " + this.resultsType + " report");

        } else if (data.title) {

          this.updateTitle(data.title + " " + this.resultsType + " report");

        }

        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {

          this.subscriptions.push(this._piwikService.trackView(this.properties, ((data.acronym) ? data.acronym : data.title) + " " + this.resultsType + " report", this.piwikSiteId).subscribe());

        }

      },

      err => {

        this.handleError("Error getting html information for project id: " + this.projectId, err);

        //console.log(err);

        this.createClipboard();

      }

    ));

    if (this.resultsType == "publication") {

      this.header2 += this.totalResults.toLocaleString('en-US') + " publications";

    } else if (this.resultsType == "research data") {

      this.header2 += this.totalResults.toLocaleString('en-US') + " research data";

    } else if (this.resultsType == "software") {

      this.header2 += this.totalResults.toLocaleString('en-US') + " software";

    } else if (this.resultsType == "other research product") {

      this.header2 += this.totalResults.toLocaleString('en-US') + " other";

    }

  }

  private createClipboard() {

    let intro: string = '<!doctype html>';

    intro += '<html lang="en-gb" dir="ltr" vocab="http://schema.org/">';

    intro += '<head>';

    intro += '<title>' + this.header1 + '</title>'

    intro += '</head>';

    if (typeof window !== 'undefined') {

      this.subscriptions.push(this.htmlService.getHTML(this.projectId, this.resultsType, this.properties.csvAPIURL).subscribe(

        data => {

          //let body: string = intro+'<body><h1>'+this.header1+'</h1><h2>'+this.header2+'</h2>'+data+'</body></html>';

          let body: string = intro + '<body><h1>' + this.header1 + '</h1><h2>' + this.header2 + '</h2>';

          body += "<table><thead><tr> <th>Title</th><th>Authors</th><th>Publication Year</th><th>DOI</th><th>Permanent Identifier</th><th>Publication type</th><th>Journal</th><th>Project Name (GA Number)</th><th>Access Mode</th></tr></thead><tbody>" + data + "</tbody></table>";

          body += '</body></html>';

          //this.htmlResult = data;

          this.htmlResult = "<table><thead><tr> <th>Title</th><th>Authors</th><th>Publication Year</th><th>DOI</th><th>Permanent Identifier</th><th>Publication type</th><th>Journal</th><th>Project Name (GA Number)</th><th>Access Mode</th></tr></thead><tbody>" + data + "</tbody></table>";

          let clipboard;

          let Clipboard;

          Clipboard = require('clipboard');

          clipboard = new Clipboard('.clipBtn', {

            /*target: function(trigger) {

                return document.getElementById("clipboard");

            }*/

            text: function (trigger) {

              return body;//document.getElementById("clipboard").getAttribute('innerHTML');//"aaaa"+tmp+"oo";

            }

          });

          this.showLoading = false;

        },

        err => {

          //console.log(err);

          this.handleError("Error getting html for id: " + this.projectId, err);

          this.errorMessage = 'Service not available';

          this.showLoading = false;

        }

      ));

    }

  }

  createHeader1(data: { "title": string, "acronym": string, "callIdentifier": string }) {

    if (this.resultsType == "publication") {

      this.header1 += "Publications";

    } else if (this.resultsType == "research data") {

      this.header1 += "Research Data";

    } else if (this.resultsType == "software") {

      this.header1 += "Software";

    } else if (this.resultsType == "other research product") {

      this.header1 += "Other Research Products";

    }

    if (data != undefined) {

      if (data.title != undefined && data.title != "") {

        this.header1 += data.title;

      }

      if ((data.title != undefined && data.title != "") &&

        ((data.acronym != undefined && data.acronym != "") ||

          (data.callIdentifier != undefined && data.callIdentifier != ""))) {

        this.header1 += "(";

      }

      if (data.acronym != undefined && data.acronym != "") {

        this.header1 += data.acronym + " - ";

      }

      if (data.callIdentifier != undefined && data.callIdentifier != "") {

        this.header1 += data.callIdentifier;

      }

      if ((data.title != undefined && data.title != "") &&

        ((data.acronym != undefined && data.acronym != "") ||

          (data.callIdentifier != undefined && data.callIdentifier != ""))) {

        this.header1 += ")";

      }

    }

    this.createClipboard();

  }

  public copied() {

    UIkit.notification({

      message: '<strong>Raw html is copied. Please paste it on an html file.<strong>',

      status: 'success',

      timeout: 3000,

      pos: 'top-center'

    });

  }

  private updateDescription(description: string) {

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

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

  }

  private updateTitle(title: string) {

    var _prefix = "";

    if(!this.communityId) {

      _prefix = "OpenAIRE | ";

    }

    var _title = _prefix + ((title.length > 50) ? title.substring(0, 50) : title);

    this._title.setTitle(_title);

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

  }

  private updateUrl(url: string) {

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

  }

  private handleError(message: string, error) {

    console.error("Html Project Report Page: " + message, error);

  }

}