connect-admin/src/app/pages/customization/customization.component.ts

import {Component, ElementRef, OnInit} 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 {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
import {DomSanitizer} from '@angular/platform-browser';
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
import {LayoutService} from "../../openaireLibrary/services/layout.service";

@Component({
  selector: 'customization',
  templateUrl: './customization.component.html',
})

export class CustomizationComponent implements OnInit {

  menuSelected = 'main';
  color = 'white';
  communityUrl = 'http://mpagasas.di.uoa.gr:4200/?communityId=ee';
  customizationOptions: CustomizationOptions = new CustomizationOptions();
  appliedCustomizationOptions: CustomizationOptions = this.copyObject(this.customizationOptions);
  previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
  buttonDarkBackgroundPreview;
  buttonLightBackgroundPreview;
  linkDarkBackgroundPreview;
  linkLightBackgroundPreview;
  public showLoading = true;
  public updateErrorMessage = '';
  public successfulSaveMessage = '';

  public curatorsEnabled;
  public newCurator;

  public communityId = null;

  public affiliationsChanged = false;
  public hasChanged = false;
  public curatorId = null;
  public curator: Curator = null;
  public photo: any = null;
  public properties: EnvProperties = null;

  private file: File = null;
  private maxsize: number = 200 * 1024;
  public enabled = true;
  private deletePhoto = false;


  constructor(private element: ElementRef,
              private route: ActivatedRoute,
              private _router: Router,
              private sanitizer: DomSanitizer,
              private layoutService: LayoutService) {
  }


  ngOnInit() {
    this.initializeCustomizationOptions();
    console.log(this.customizationOptions);
    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
      this.properties = data.envSpecific;
      if (!Session.isLoggedIn()) {
        this._router.navigate(['/user-info'], {
          queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
        });
      } else {
        this.route.queryParams.subscribe((params) => {
          this.communityId = params['communityId'];
          this.showLoading = true;
          this.updateErrorMessage = '';
          this.layoutService.getLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/').subscribe(layout => {
            this.customizationOptions = layout;
            this.appliedCustomizationOptions = this.copyObject(this.customizationOptions);
            this.communityUrl = 'http://mpagasas.di.uoa.gr:4200/?communityId=' + this.communityId;
            this.initializeCustomizationOptions();
            this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
          });
        });
      }
    });

  }

  saveLayout() {
    this.layoutService.
    saveLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/', this.appliedCustomizationOptions).subscribe(layout => {
      this.customizationOptions = layout;
      this.appliedCustomizationOptions = this.copyObject(this.customizationOptions);
      this.initializeCustomizationOptions();
      this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
    });
  }

  initializeCustomizationOptions() {
    this.buttonDarkBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.darkBackground);
    this.buttonLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.lightBackground);
    this.linkDarkBackgroundPreview = this.changeFontsStyle(this.appliedCustomizationOptions.links.darkBackground, this.appliedCustomizationOptions.links.darkBackground.color);
    this.linkLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.links.lightBackground, this.appliedCustomizationOptions.links.lightBackground.color);
    // this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
  }

  changeStyle(colorOptions, borderOptions = null) {
    let style = '';
    if (!borderOptions) {
      borderOptions = colorOptions;
    }
    if (colorOptions.color) {
      style += '; color:' + colorOptions.color;
    }
    if (colorOptions.backgroundColor) {
      style += '; background-color:' + colorOptions.backgroundColor;
    }
    if (colorOptions.borderColor) {
      style += '; border-color:' + colorOptions.borderColor;
    }
    if (borderOptions.borderStyle) {
      style += '; border-style:' + borderOptions.borderStyle;
    }
    if (borderOptions.borderWidth) {
      style += '; border-width:' + borderOptions.borderWidth + 'px';
    }
    if (borderOptions.borderRadius) {
      style += '; border-radius:' + borderOptions.borderRadius + 'px';
    }

    return this.sanitizer.bypassSecurityTrustStyle(style);
  }


  changeFontsStyle(options, color = null) {
    let style = '';


    if (options.family) {
      style += '; font-family:' + options.family;
    }

    if (options.size) {
      style += '; font-size:' + options.size + 'px';
    }

    if (options.weight) {
      style += '; font-weight:' + options.weight;
    }

    if (color) {
      style += '; color:' + color;
    }

    return this.sanitizer.bypassSecurityTrustStyle(style);
  }

  getCommunityUrlSatinized(customization: CustomizationOptions) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(customization));
  }

  getCommunityUrlNewLayout(customization: CustomizationOptions) {
    // console.log("here!");
    let layout = JSON.stringify(customization);
    // console.log(layout);
    return this.communityUrl + '&layout=' + StringUtils.URIEncode(layout);
  }

  copyObject(obj) {
    return JSON.parse(JSON.stringify(obj));
  }

  resetBackgroundsBanners() {
    this.appliedCustomizationOptions.panel.onDarkBackground = this.customizationOptions.panel.onDarkBackground;
    this.appliedCustomizationOptions.panel.background.color = this.customizationOptions.panel.background.color;
  }

}