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 {CustomizationService} from '../../openaireLibrary/services/customization.service'; import {properties} from '../../../environments/environment'; import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; import {Subscription} from 'rxjs'; import {UserManagementService} from "../../openaireLibrary/services/user-management.service"; import {AlertModal} from "../../openaireLibrary/utils/modal/alert"; import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service"; declare var UIkit; @Component({ selector: 'customization', templateUrl: './customization.component.html', styles:[` .functionalities-container{ padding-left:15px; padding-right:15px; } .functionalities-border{ border-left: 1px solid #EAEAEA; padding: 5px 10px; margin: 25px 0px; } .refresh-indicator { background-color: rgba(0, 0, 0, 0.80); border-radius: 4px; position: absolute; color: white; } iframe, .refresh-indicator{ height:100% } #container{ position: relative; width: 100%; overflow: hidden; /*padding-top: 56.25%; !* 16:9 Aspect Ratio *!*/ padding-top: 65%; background-color:black; border-radius:40px; } #iframecontainer{ position: absolute; top: 4.5%; left: 3.5%; bottom: 4.5%; right: 3.5%; width: 93%; height: 91%; border: none; border-radius:20px; background-color: white; } .menu_section.uk-overflow-auto{ overflow: hidden; } .menu_section.uk-overflow-auto:hover { overflow-y: scroll; } `] }) export class CustomizationComponent implements OnInit { homeMenu = {name:"Customization", id : "home", icon: "" } menuSelected = this.homeMenu; buttonsSelected = 'light'; 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; private subscriptions: any[] = []; public enabled = true; sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" }, {name:"Backgrounds", id : "backgrounds", icon: "wallpaper" }, {name:"Buttons", id : "buttons", icon: "smart_button" }] @ViewChild('leaveModal') closeModal: AlertModal; constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private title: Title, private sanitizer: DomSanitizer, private layoutService: CustomizationService, private utilsService: UtilitiesService, private userManagementService: UserManagementService, private _clearCacheService: ClearCacheService) { } ngOnDestroy() { this.deleteDraftImages(); } cleanUp(){ this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { subscription.unsubscribe(); } }); } ngOnInit() { this.properties = properties; this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { if (!user) { this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url } }); } })); this.subscriptions.push(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.subscriptions.push(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' }); })); })); } formHasChanges(obj1:CustomizationOptions, obj2:CustomizationOptions){ return obj1.backgrounds.form.imageUrl != obj2.backgrounds.form.imageUrl || obj1.backgrounds.form.imageFile != obj2.backgrounds.form.imageFile || obj1.backgrounds.form.position != obj2.backgrounds.form.position; } 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.copyObject(this.draftCustomizationOptions); this.publishedCustomizationOptions = this.copyObject(this.publishedLayout.layoutOptions) this.publishedLayout.date = new Date(); this.subscriptions.push(this.layoutService.createCSS(this.communityId,this.properties.connectPortalUrl, this.publishedLayout.date.valueOf(), this.publishedLayout.layoutOptions).subscribe(data => { this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => { this.publishedLayout._id = layout._id; this._clearCacheService.purgeBrowserCache("Layout added/ updated", this.communityId); setTimeout(() => { this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization); }, 4000); this.deleteOldImages(); UIkit.notification("Customizations was successfully saved!", { status: 'success', timeout: 6000, pos: 'bottom-right' }); }, error => { UIkit.notification("An error occurred on save css", { status: 'danger', timeout: 6000, pos: 'bottom-right' }); })); }, error => { UIkit.notification("An error occurred on save layout", { status: 'danger', timeout: 6000, pos: 'bottom-right' }); })); } private deleteOldImages( ) { if( this.publishedCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){ this.deleteImage(this.publishedCustomizationOptions.backgrounds.form.imageFile) } } private deleteDraftImages( ) { if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){ this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe( re => { this.cleanUp() } )); }else{ this.cleanUp() } } private deleteImage( filename:string) { this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe()); } initializeCustomizationOptions(updatePreviewUrl) { this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions); this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions); if(updatePreviewUrl){ this.previewCustomization = this.copyObject(this.publishedCustomizationOptions); this.previewUrl = this.getCommunityUrlSatinized(null); } } applyLayout() { this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions); if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){ let d = new Date(); let prefix = "-preview-" + d.valueOf(); this.subscriptions.push(this.layoutService.createCSS(this.communityId, this.properties.connectPortalUrl, prefix, this.appliedCustomizationOptions).subscribe(data => { setTimeout(() => { this.previewUrl = this.getCommunityUrlSatinized(this.communityId + prefix); }, 4000); }, error => { UIkit.notification("An error occurred preview layout", { status: 'danger', timeout: 6000, pos: 'bottom-right' }); })); } } resetLayout() { this.deleteDraftImages(); this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != 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; this.resetImageTo(backgrounds); } resetImageTo(backgrounds) { this.deleteDraftImages(); this.draftCustomizationOptions.backgrounds.form.imageUrl = backgrounds.form.imageUrl; this.draftCustomizationOptions.backgrounds.form.imageFile = backgrounds.form.imageFile; this.draftCustomizationOptions.backgrounds.form.position = backgrounds.form.position; } resetBackgroundsAndButtonsTo(c:CustomizationOptions){ this.resetBackgroundsTo(c.backgrounds); this.resetButtonsTo(c.buttons); } resetBackgroundsAndButtonsToPublished(){ this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions); } resetButtonsToDefault(){ this.resetButtonsTo(this.defaultCustomizationOptions.buttons); this.updateButtonsBasedOnIdentity(); } resetBackgroundsToDefault(){ this.resetBackgroundsTo(this.defaultCustomizationOptions.backgrounds); this.updateBackgroundsBasedOnIdentity(); } 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.updateButtonsBasedOnIdentity(); this.updateBackgroundsBasedOnIdentity(); } resetIdentityToDefault() { this.resetIdentityTo( this.defaultCustomizationOptions); this.draftCustomizationOptions.identityIsCustom = false; this.updateButtonsBasedOnIdentity(); this.updateBackgroundsBasedOnIdentity(); } updateButtonsBasedOnIdentity(){ let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor); if(!this.draftCustomizationOptions.buttonsIsCustom) { this.resetButtonsTo(tmp.buttons); } } updateBackgroundsBasedOnIdentity(){ let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor); if(!this.draftCustomizationOptions.backgroundsIsCustom) { this.resetBackgroundsTo(tmp.backgrounds); } } getCommunityUrlSatinized(prefix: string) { return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrl(prefix)); } getCommunityUrl(prefix) { if(this.properties.environment == 'production' || this.properties.environment == 'beta') return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu' + (prefix?("?previewLayout=" + prefix):""); return this.properties.connectPortalUrl + (prefix?("?previewLayout=" + prefix):""); } copyObject(obj) { return JSON.parse(JSON.stringify(obj)); } changeMenu( menuSelected){ this.menuSelected = menuSelected; } close(){ if(this.menuSelected.id !='home'){ this.menuSelected = this.homeMenu; return; } if(!this.hasChanges(this.publishedCustomizationOptions, this.draftCustomizationOptions)) { this._router.navigate(["../info/profile"], {relativeTo: this.route}); }else{ this.closeModal.alertTitle = "Discard changes"; this.closeModal.message = "Unsaved changes will be lost."; this.closeModal.okButtonText = "Leave"; this.closeModal.cancelButtonText = "Cancel"; this.closeModal.okButtonLeft = false; this.closeModal.open(); } } confirmClose(){ this._router.navigate(["../info/profile"], {relativeTo: this.route}); } }