D-Net

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

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

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

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

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

import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';

import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';

import {LayoutService} from '../../openaireLibrary/services/layout.service';

import {AlertModal} from '../../openaireLibrary/utils/modal/alert';

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

declare var UIkit;

@Component({

  selector: 'customization',

  templateUrl: './customization.component.html',

  styles:[`

  .refresh-indicator {

    background-color: rgba(0, 0, 0, 0.50);

    border-radius: 4px;

    position: absolute;

    color: white;

  }

  iframe, .refresh-indicator{

      height:900px;

  }

  `]

})

export class CustomizationComponent implements OnInit {

  menuSelected = 'identity';

  color = 'white';

  defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();

  publishedLayout: Layout = null;

  publishedCustomizationOptions: CustomizationOptions = null;

  draftCustomizationOptions: CustomizationOptions = null;

  appliedCustomizationOptions: CustomizationOptions = null;

  previewUrl = null;

  previewCustomization = null;

  public showLoading = true;

  public communityId = null;

  public properties: EnvProperties = null;

  public enabled = true;

/*  @ViewChild('backAlert') backAlert: AlertModal;

  @ViewChild('exitAlert') exitAlert: AlertModal;*/

  constructor(private element: ElementRef,

              private route: ActivatedRoute,

              private _router: Router,

              private title: Title,

              private sanitizer: DomSanitizer,

              private layoutService: LayoutService) {

  }

  ngOnInit() {

    this.properties = properties;

    if (!Session.isLoggedIn()) {

      this._router.navigate(['/user-info'], {

        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}

      });

    } else {

      this.route.params.subscribe((params) => {

        this.communityId = params['community'];

        if(this.communityId == "covid-19"){

          this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);

        }

        this.title.setTitle('Administration Dashboard | Customization');

        this.showLoading = true;

         this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {

         this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));

         this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));

         this.initializeCustomizationOptions(true);

        }, error => {

          this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);

          this.initializeCustomizationOptions(true);

           UIkit.notification("An error occured fetching customizations options", {

             status: 'danger',

             timeout: 6000,

             pos: 'bottom-right'

           });

        });

      });

    }

  }

  hasChanges(object1,object2):boolean{

    return JSON.stringify(object1) != JSON.stringify(object2);

  }

  saveLayout() {

    if (!Session.isLoggedIn()) {

      this._router.navigate(['/user-info'], {

        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}

      });

    }

    this.publishedLayout.layoutOptions = this.draftCustomizationOptions;

    this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {

      this.publishedLayout = layout;

      this.publishedCustomizationOptions = layout.layoutOptions;

      this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);

      UIkit.notification("Customizations was succesfully saved!", {

        status: 'success',

        timeout: 6000,

        pos: 'bottom-right'

      });

    }, error => {

      UIkit.notification("An error occured on save", {

        status: 'danger',

        timeout: 6000,

        pos: 'bottom-right'

      });

    });

  }

  initializeCustomizationOptions(updatePreviewUrl) {

    this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);

    this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);

    if(updatePreviewUrl){

      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));

    }

  }

  applyLayout() {

    this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions);

    if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){

      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));

    }

  }

  resetLayout() {

    this.initializeCustomizationOptions(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization);

  }

  resetBackgroundsTo(backgrounds) {

    this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;

    this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;

    this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;

  }

  resetBackgroundsAndButtonsTo(c:CustomizationOptions){

    this.resetBackgroundsTo(c.backgrounds);

    this.resetButtonsTo(c.buttons);

   }

  resetBackgroundsAndButtonsToPublished(){

    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);

  }

  resetBackgroundsAndButtonsToDefault(){

    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);

    this.updateBackgroundsAndButtonsBasedOnIdentity();

  }

  resetButtonsTo(buttonsToRevert) {

    this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);

  }

  resetIdentityTo( original:CustomizationOptions) {

    this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);

    this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);

  }

  resetIdentityToPublished() {

    this.resetIdentityTo( this.publishedCustomizationOptions);

    this.updateBackgroundsAndButtonsBasedOnIdentity()

  }

  resetIdentityToDefault() {

    this.resetIdentityTo( this.defaultCustomizationOptions);

    this.draftCustomizationOptions.identityIsCustom = false;

    this.updateBackgroundsAndButtonsBasedOnIdentity()

  }

  updateBackgroundsAndButtonsBasedOnIdentity(){

    if(!this.draftCustomizationOptions.backgroundsAndButtonsIsCustom){

      let tmp =   new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);

      this.resetBackgroundsAndButtonsTo(tmp);

    }

  }

  getCommunityUrlSatinized(layout: string) {

    return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));

  }

  getCommunityUrl() {

    // return 'http://spitoo.di.uoa.gr:4000';

    return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';

  }

  getCommunityUrlNewLayout(layout: string) {

    this.previewCustomization = layout;

      return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);

  }

  copyObject(obj) {

    return JSON.parse(JSON.stringify(obj));

  }

  /*back() {

    if (JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions) ||

      JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.appliedCustomizationOptions)) {

      this.menuSelected = 'main';

    } else {

      this.backAlert.okButtonText = 'Yes';

      this.backAlert.cancelButtonText = 'No';

      this.backAlert.alertTitle = '';

      this.backAlert.okButtonLeft = true;

      this.backAlert.open();

    }

  }

  resetToAppliedOptions() {

    this.draftCustomizationOptions = this.copyObject(this.appliedCustomizationOptions);

    this.menuSelected = 'main';

  }

  exit() {

    if (JSON.stringify(this.appliedCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions)) {

      this.exitCustomization();

    } else {

      this.exitAlert.okButtonText = 'Yes';

      this.exitAlert.cancelButtonText = 'No';

      this.exitAlert.alertTitle = '';

      this.exitAlert.okButtonLeft = true;

      this.exitAlert.open();

    }

  }

  exitCustomization() {

    this._router.navigate(['/dashboard'], {

      queryParams: {'communityId': this.communityId}

    });

  }

  downloadCustomization(){

     let options= JSON.parse(JSON.stringify(this.publishedCustomizationOptions));

    delete options['_id'];

    console.info("Here!" +JSON.stringify(options));

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

      let dataStr = JSON.stringify(options);

      let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);

      let exportFileDefaultName = 'layoutOptions.json';

      let linkElement = document.createElement('a');

      linkElement.setAttribute('href', dataUri);

      linkElement.setAttribute('download', exportFileDefaultName);

      linkElement.click();

    }

  }

  fileChangeEvent(fileInput: any) {

      let filesToUpload = <Array<File>>fileInput.target.files;

      if (filesToUpload.length == 0) {

        UIkit.notification("There is no selected file to upload.", {

          status: 'danger',

          timeout: 6000,

          pos: 'bottom-right'

        });

        return;

      } else {

        if (filesToUpload[0].name.indexOf(".json") == -1 ||

          (filesToUpload[0].type != "application/json" )) {

           UIkit.notification("No valid file type. The required type is json "+filesToUpload[0].type, {

            status: 'danger',

            timeout: 6000,

            pos: 'bottom-right'

          });

          return;

        }

      }

      this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], filesToUpload).then((result) => {

       let layout:CustomizationOptions = JSON.parse(result.toString());

        if( layout && layout.backgrounds && layout.buttons){

          this.draftCustomizationOptions = layout;

          //put the same id to not have any difference

          if(this.publishedCustomizationOptions['_id']){

            this.draftCustomizationOptions['_id'] = this.publishedCustomizationOptions['_id'];

          }

        }else{

          UIkit.notification("No valid file", {

            status: 'danger',

            timeout: 6000,

            pos: 'bottom-right'

          });

        }

      }, (error) => {

        UIkit.notification("No valid file", {

          status: 'danger',

          timeout: 6000,

          pos: 'bottom-right'

        });

      });

    }

  makeFileRequest(url: string, params: Array<string>, files: Array<File>) {

    return new Promise((resolve, reject) => {

      const formData: any = new FormData();

      const xhr = new XMLHttpRequest();

      for (let i = 0; i < files.length; i++) {

        formData.append("uploads[]", files[i], files[i].name);

      }

      xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {

          if (xhr.status == 200) {

            resolve(xhr.response);

          } else {

            reject(xhr.response);

          }

        }

      }

      xhr.open("POST", url, true);

      xhr.send(formData);

    });

  }

*/

public isForLightBackground(color:string){

  return CustomizationOptions.isForLightBackground(color);

}

}