connect/src/app/learn-how/learn-how.component.ts

import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {PiwikService}           from '../openaireLibrary/utils/piwik/piwik.service';
import {EnvProperties}          from '../openaireLibrary/utils/properties/env-properties';
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";

@Component({
    selector: 'learn-how',
    template: `
      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
      <ng-template #one>
          <h5 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h5>
          <div>
            First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together we’ll talk about how OpenAIRE RCD fits as a solution.
          </div>
      </ng-template>
      <ng-template #two>
          <h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
          <div>
            How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic configuration of your Community Gateway.
          </div>
      </ng-template>
      <ng-template #three>
          <h5 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h5>
          <div>
            You validate and test your new Community Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
          </div>
      </ng-template>
      <ng-template #four>
          <h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
          <div>
            We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
          </div>
      </ng-template>
      <div class="image-front-topbar" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
        <div  style=" min-height: calc(7.89999px + 60vh);"
              class="about-background uk-section uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
              <div class="uk-container uk-container-large uk-section">
                  <div class="uk-margin-large-top uk-grid">
                    <h1 class="uk-width-1-1 font-41 uk-text-bold">Learn the process</h1>
                    <div class="uk-width-1-2@l uk-width-1-1@s uk-h5 uk-margin-top">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</div>
                  </div>
                  <div class="uk-margin-large-top uk-flex uk-child-width-1-3@m uk-child-width-1-1@s uk-flex-center" uk-grid>
                    <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
                      <div>
                        <ng-container *ngTemplateOutlet="one"></ng-container>
                      </div>
                      <div class="uk-visible@m">
                        <ng-container *ngTemplateOutlet="four"></ng-container>
                      </div>
                      <div class="uk-hidden@m">
                        <ng-container *ngTemplateOutlet="two"></ng-container>
                      </div>
                    </div>
                    <div>
                      <img src="../../assets/about/cycle.png">
                    </div>
                    <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
                      <div class="uk-visible@m">
                        <ng-container *ngTemplateOutlet="two"></ng-container> 
                      </div>
                      <div class="uk-hidden@m uk-visible@s">
                        <ng-container *ngTemplateOutlet="four"></ng-container> 
                      </div>
                      <div>
                        <ng-container *ngTemplateOutlet="three"></ng-container>
                      </div>
                      <div class="uk-hidden@s uk-visible@xs">
                        <ng-container *ngTemplateOutlet="four"></ng-container> 
                      </div>
                    </div>
                  </div>
                <div class="uk-width-1-1 uk-text-center uk-text-large uk-margin-large-top">
                  <a class="uk-button portal-button uk-text-uppercase" routerLinkActive="router-link-active" routerLink="/about/learn-in-depth"> Learn more details</a>
                </div>
              </div>
        </div>
        <div class="cloud-abstract uk-background-norepeat uk-section uk-background-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
          <div class="uk-container uk-container-large">
            <gif-slider [gifs]="gifs"></gif-slider>
          </div>
        </div>
        <div class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
            <div class="uk-container uk-container-large uk-section">
                <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
                  <div class="uk-width-expand">
                    <h1 class="uk-text-bold">We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
                    <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
                    <div class="uk-inline">
                      <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
                    </div>
                  </div>
                  <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
                    <img width="263" height="250" src="../../assets/contact/3.png">
                  </div>
                </div>
              </div>
            </div>
      </div>
    `
  })
export class LearnHowComponent {
  public piwiksub: any;
  public gifs: {"gif": string, "header": string, "text"}[] = [];
  public pageContents = null;
  public divContents = null;


  private pageTitle = "OpenAIRE - Connect | Learn How";

  properties:EnvProperties;

  constructor (
      private route: ActivatedRoute,
      private _router: Router,
      private _title: Title,
      private _piwikService: PiwikService,
      private helper: HelperService) {
          this._title.setTitle(this.pageTitle);
  }

  public ngOnInit() {
    this.route.data
          .subscribe((data: { envSpecific: EnvProperties }) => {
            this.properties = data.envSpecific;
            if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
              this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
            }
            //this.getDivContents();
            this.getPageContents();
          });
          this.createGifs();
  }

  private getPageContents() {
    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
      this.pageContents = contents;
    })
  }

  private getDivContents() {
    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
      this.divContents = contents;
    })
  }

  public ngOnDestroy() {
    if(this.piwiksub){
      this.piwiksub.unsubscribe();
    }
  }

  private createGifs() {
    this.gifs.push({
      gif: "assets/about/gifs/profile.gif",
      header: "Profile",
      text: "Edit community information, change logo url, add community managers or organizations related to community."
    });
    this.gifs.push({
      gif: "assets/about/gifs/content.gif",
      header: "Content",
      text: "Manage projects, content providers, subjects and zenodo communities that are related to the research community."
    });
    this.gifs.push({
      gif: "assets/about/gifs/statistics.gif",
      header: "Statistics & Charts",
      text: "Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views."
    });
    this.gifs.push({
      gif: "assets/about/gifs/links.gif",
      header: "Links",
      text: " Manage user claims related to the research community."
    });
    this.gifs.push({
      gif: "assets/about/gifs/help.gif",
      header: " Help texts",
      text: "Add or edit help text in research community pages."
    });
    this.gifs.push({
      gif: "assets/about/gifs/users.gif",
      header: "Users",
      text: "Invite more users to subscribe, manage community subscribers, your personal info and notification settings."
    });
  }
}