2022-06-29 16:30:53 +02:00
|
|
|
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
2019-10-07 16:36:53 +02:00
|
|
|
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';
|
2020-04-01 15:40:48 +02:00
|
|
|
import {DomSanitizer, Title} from '@angular/platform-browser';
|
2021-05-19 13:40:29 +02:00
|
|
|
import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';
|
2019-10-07 16:36:53 +02:00
|
|
|
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
|
2019-10-10 17:17:43 +02:00
|
|
|
import {LayoutService} from '../../openaireLibrary/services/layout.service';
|
2021-05-19 13:40:29 +02:00
|
|
|
import {properties} from '../../../environments/environment';
|
|
|
|
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
|
|
|
|
import {Subscription} from 'rxjs';
|
2022-06-29 16:30:53 +02:00
|
|
|
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
|
2022-07-04 13:12:55 +02:00
|
|
|
import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
|
|
|
|
import {MenuItem} from "../../openaireLibrary/sharedComponents/menu";
|
2022-07-04 13:29:47 +02:00
|
|
|
import {AlertModal} from "../../openaireLibrary/utils/modal/alert";
|
2021-05-19 13:40:29 +02:00
|
|
|
|
|
|
|
declare var UIkit;
|
2019-10-07 16:36:53 +02:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'customization',
|
|
|
|
templateUrl: './customization.component.html',
|
2021-05-19 13:40:29 +02:00
|
|
|
styles:[`
|
2022-07-04 13:12:55 +02:00
|
|
|
.functionalities-container{
|
|
|
|
padding-left:15px;
|
|
|
|
}
|
|
|
|
.functionalities-border{
|
2022-06-29 16:30:53 +02:00
|
|
|
border-left: 1px solid #EAEAEA;
|
|
|
|
padding: 5px 10px;
|
|
|
|
margin: 25px 0px;
|
|
|
|
}
|
2022-07-04 13:12:55 +02:00
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
.refresh-indicator {
|
|
|
|
background-color: rgba(0, 0, 0, 0.50);
|
|
|
|
border-radius: 4px;
|
|
|
|
position: absolute;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
iframe, .refresh-indicator{
|
2022-06-29 16:30:53 +02:00
|
|
|
height:100%
|
|
|
|
}
|
2022-07-05 15:43:18 +02:00
|
|
|
#container{
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
padding-top: 56.25%; /* 16:9 Aspect Ratio */
|
|
|
|
background-color:black;
|
|
|
|
border-radius:10px;
|
2021-05-19 13:40:29 +02:00
|
|
|
}
|
2022-06-29 16:30:53 +02:00
|
|
|
#iframecontainer{
|
2022-07-05 15:43:18 +02:00
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
top: 2%;
|
|
|
|
left: 2.5%;
|
|
|
|
bottom: 2%;
|
|
|
|
right: 2.5%;
|
|
|
|
width: 95%;
|
|
|
|
height: 96%;
|
|
|
|
border: none;
|
|
|
|
border-radius:10px;
|
2022-07-25 16:01:00 +02:00
|
|
|
background-color: white;
|
2022-07-04 13:12:55 +02:00
|
|
|
}
|
2022-07-05 15:43:18 +02:00
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
`]
|
2019-10-07 16:36:53 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
export class CustomizationComponent implements OnInit {
|
2022-07-04 13:12:55 +02:00
|
|
|
homeMenu = {name:"Customization", id : "home", icon: "" }
|
|
|
|
menuSelected = this.homeMenu;
|
|
|
|
buttonsSelected = 'light';
|
2019-10-07 16:36:53 +02:00
|
|
|
color = 'white';
|
2021-05-19 13:40:29 +02:00
|
|
|
defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
|
|
|
|
publishedLayout: Layout = null;
|
2019-10-10 17:17:43 +02:00
|
|
|
publishedCustomizationOptions: CustomizationOptions = null;
|
|
|
|
draftCustomizationOptions: CustomizationOptions = null;
|
|
|
|
appliedCustomizationOptions: CustomizationOptions = null;
|
|
|
|
previewUrl = null;
|
|
|
|
previewCustomization = null;
|
2019-10-07 16:36:53 +02:00
|
|
|
public showLoading = true;
|
|
|
|
public communityId = null;
|
|
|
|
public properties: EnvProperties = null;
|
2021-05-19 13:40:29 +02:00
|
|
|
private subscriptions: any[] = [];
|
2019-10-07 16:36:53 +02:00
|
|
|
public enabled = true;
|
2022-07-04 13:12:55 +02:00
|
|
|
sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
|
|
|
|
{name:"Backgrounds", id : "backgrounds", icon: "wallpaper" },
|
|
|
|
{name:"Buttons", id : "buttons", icon: "smart_button" }]
|
2022-07-04 13:29:47 +02:00
|
|
|
@ViewChild('leaveModal') closeModal: AlertModal;
|
2019-10-07 16:36:53 +02:00
|
|
|
|
|
|
|
constructor(private element: ElementRef,
|
|
|
|
private route: ActivatedRoute,
|
|
|
|
private _router: Router,
|
2020-04-01 15:40:48 +02:00
|
|
|
private title: Title,
|
2019-10-08 16:18:38 +02:00
|
|
|
private sanitizer: DomSanitizer,
|
2021-05-19 13:40:29 +02:00
|
|
|
private layoutService: LayoutService,
|
2022-07-04 13:12:55 +02:00
|
|
|
private utilsService: UtilitiesService,
|
|
|
|
private userManagementService: UserManagementService) {
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
ngOnDestroy() {
|
|
|
|
this.deleteDraftImages();
|
2019-10-07 16:36:53 +02:00
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
}
|
|
|
|
cleanUp(){
|
|
|
|
this.subscriptions.forEach(subscription => {
|
|
|
|
if (subscription instanceof Subscription) {
|
|
|
|
subscription.unsubscribe();
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|
|
|
|
});
|
2021-05-19 13:40:29 +02:00
|
|
|
}
|
|
|
|
ngOnInit() {
|
2022-06-29 16:30:53 +02:00
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
this.properties = properties;
|
2022-07-04 13:12:55 +02:00
|
|
|
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'
|
|
|
|
});
|
2021-05-19 13:40:29 +02:00
|
|
|
}));
|
2022-07-04 13:12:55 +02:00
|
|
|
}));
|
2021-05-19 13:40:29 +02:00
|
|
|
|
2019-10-07 16:36:53 +02:00
|
|
|
|
2022-07-04 13:12:55 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
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;
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|
2020-01-20 15:33:36 +01:00
|
|
|
hasChanges(object1,object2):boolean{
|
|
|
|
return JSON.stringify(object1) != JSON.stringify(object2);
|
|
|
|
}
|
2019-10-08 16:18:38 +02:00
|
|
|
saveLayout() {
|
2020-01-20 15:33:36 +01:00
|
|
|
if (!Session.isLoggedIn()) {
|
|
|
|
this._router.navigate(['/user-info'], {
|
|
|
|
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
|
|
|
});
|
|
|
|
}
|
2022-07-25 16:01:00 +02:00
|
|
|
this.publishedLayout.layoutOptions = this.copyObject(this.draftCustomizationOptions);
|
|
|
|
this.publishedCustomizationOptions = this.copyObject(this.publishedLayout.layoutOptions)
|
2022-07-22 17:35:51 +02:00
|
|
|
this.publishedLayout.date = new Date();
|
2021-05-19 13:40:29 +02:00
|
|
|
this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
|
2022-07-22 17:35:51 +02:00
|
|
|
|
2022-07-25 16:01:00 +02:00
|
|
|
|
|
|
|
this.subscriptions.push(this.layoutService.createCSS(this.communityId, this.publishedLayout.date.valueOf(), this.publishedLayout.layoutOptions).subscribe(data => {
|
2022-07-22 17:35:51 +02:00
|
|
|
console.log(data)
|
2022-07-25 16:01:00 +02:00
|
|
|
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
|
|
|
|
this.deleteOldImages();
|
2022-07-22 17:35:51 +02:00
|
|
|
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'
|
|
|
|
});
|
|
|
|
}));
|
2020-01-20 15:33:36 +01:00
|
|
|
}, error => {
|
2019-10-08 16:18:38 +02:00
|
|
|
|
2022-07-22 17:35:51 +02:00
|
|
|
UIkit.notification("An error occurred on save layout", {
|
2021-05-19 13:40:29 +02:00
|
|
|
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());
|
|
|
|
}
|
2019-10-10 17:17:43 +02:00
|
|
|
initializeCustomizationOptions(updatePreviewUrl) {
|
|
|
|
this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
|
|
|
|
this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
|
|
|
|
if(updatePreviewUrl){
|
2022-07-25 16:01:00 +02:00
|
|
|
this.previewCustomization = this.copyObject(this.publishedCustomizationOptions);
|
|
|
|
this.previewUrl = this.getCommunityUrlSatinized(null);
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
applyLayout() {
|
|
|
|
this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions);
|
|
|
|
if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){
|
2022-07-22 17:35:51 +02:00
|
|
|
let d = new Date();
|
|
|
|
let prefix = "-preview-" + d.valueOf();
|
|
|
|
this.subscriptions.push(this.layoutService.createCSS(this.communityId, prefix, this.appliedCustomizationOptions).subscribe(data => {
|
|
|
|
this.previewUrl = this.getCommunityUrlSatinized(this.communityId + prefix);
|
|
|
|
|
|
|
|
}, error => {
|
|
|
|
|
|
|
|
UIkit.notification("An error occurred preview layout", {
|
|
|
|
status: 'danger',
|
|
|
|
timeout: 6000,
|
|
|
|
pos: 'bottom-right'
|
|
|
|
});
|
|
|
|
}));
|
|
|
|
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
resetLayout() {
|
2021-11-26 13:45:12 +01:00
|
|
|
this.deleteDraftImages();
|
2021-05-21 12:10:34 +02:00
|
|
|
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
2021-05-19 13:40:29 +02:00
|
|
|
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;
|
2019-10-10 17:17:43 +02:00
|
|
|
|
|
|
|
}
|
2022-07-04 13:12:55 +02:00
|
|
|
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;
|
|
|
|
}
|
2019-10-10 17:17:43 +02:00
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
resetBackgroundsAndButtonsTo(c:CustomizationOptions){
|
|
|
|
this.resetBackgroundsTo(c.backgrounds);
|
|
|
|
this.resetButtonsTo(c.buttons);
|
|
|
|
}
|
|
|
|
resetBackgroundsAndButtonsToPublished(){
|
|
|
|
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
2021-05-19 13:40:29 +02:00
|
|
|
resetBackgroundsAndButtonsToDefault(){
|
|
|
|
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
|
|
|
|
this.updateBackgroundsAndButtonsBasedOnIdentity();
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
resetButtonsTo(buttonsToRevert) {
|
|
|
|
this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
|
|
|
|
2021-05-19 13:40:29 +02:00
|
|
|
resetIdentityTo( original:CustomizationOptions) {
|
|
|
|
this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);
|
|
|
|
this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
2021-05-19 13:40:29 +02:00
|
|
|
resetIdentityToPublished() {
|
|
|
|
this.resetIdentityTo( this.publishedCustomizationOptions);
|
|
|
|
this.updateBackgroundsAndButtonsBasedOnIdentity()
|
2019-10-10 17:17:43 +02:00
|
|
|
}
|
2021-05-19 13:40:29 +02:00
|
|
|
resetIdentityToDefault() {
|
|
|
|
this.resetIdentityTo( this.defaultCustomizationOptions);
|
|
|
|
this.draftCustomizationOptions.identityIsCustom = false;
|
|
|
|
this.updateBackgroundsAndButtonsBasedOnIdentity()
|
2019-10-10 17:17:43 +02:00
|
|
|
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|
2021-05-19 13:40:29 +02:00
|
|
|
updateBackgroundsAndButtonsBasedOnIdentity(){
|
2022-07-04 13:12:55 +02:00
|
|
|
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
|
|
|
|
if(!this.draftCustomizationOptions.backgroundsIsCustom) {
|
|
|
|
this.resetBackgroundsTo(tmp.backgrounds);
|
|
|
|
}
|
|
|
|
if(!this.draftCustomizationOptions.buttonsIsCustom) {
|
|
|
|
this.resetButtonsTo(tmp.buttons);
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|
|
|
|
}
|
2022-07-22 17:35:51 +02:00
|
|
|
getCommunityUrlSatinized(prefix: string) {
|
|
|
|
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrl(prefix));
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|
2022-07-22 17:35:51 +02:00
|
|
|
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 "http://scoobydoo.di.uoa.gr:4200" + (prefix?("?previewLayout=" + prefix):"");
|
2020-01-20 15:33:36 +01:00
|
|
|
}
|
2019-10-07 16:36:53 +02:00
|
|
|
|
2022-07-22 17:35:51 +02:00
|
|
|
|
2019-10-07 16:36:53 +02:00
|
|
|
|
2019-10-08 16:18:38 +02:00
|
|
|
copyObject(obj) {
|
|
|
|
return JSON.parse(JSON.stringify(obj));
|
|
|
|
}
|
2022-06-29 16:30:53 +02:00
|
|
|
|
2022-07-04 13:12:55 +02:00
|
|
|
changeMenu( menuSelected){
|
|
|
|
this.menuSelected = menuSelected;
|
2022-06-29 16:30:53 +02:00
|
|
|
}
|
|
|
|
close(){
|
2022-07-04 13:12:55 +02:00
|
|
|
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{
|
2022-07-04 13:29:47 +02:00
|
|
|
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();
|
2022-07-04 13:12:55 +02:00
|
|
|
}
|
2022-06-29 16:30:53 +02:00
|
|
|
}
|
2022-07-04 13:29:47 +02:00
|
|
|
|
|
|
|
confirmClose(){
|
|
|
|
this._router.navigate(["../info/profile"], {relativeTo: this.route});
|
|
|
|
}
|
2019-10-07 16:36:53 +02:00
|
|
|
}
|