|
|
|
@ -71,19 +71,33 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS |
|
|
|
this.gridSettings = this.data.gridSettings; |
|
|
|
|
|
|
|
if (this.settings) { |
|
|
|
const showTitle = isUndefined(this.settings.showTitle) ? true : this.settings.showTitle; |
|
|
|
const showDashboardLogo = isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo; |
|
|
|
const hideToolbar = isUndefined(this.settings.hideToolbar) ? false : this.settings.hideToolbar; |
|
|
|
this.settingsFormGroup = this.fb.group({ |
|
|
|
stateControllerId: [isUndefined(this.settings.stateControllerId) ? 'entity' : this.settings.stateControllerId, []], |
|
|
|
toolbarAlwaysOpen: [isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen, []], |
|
|
|
showTitle: [isUndefined(this.settings.showTitle) ? true : this.settings.showTitle, []], |
|
|
|
titleColor: [isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor, []], |
|
|
|
showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []], |
|
|
|
showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []], |
|
|
|
showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []], |
|
|
|
showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo, []], |
|
|
|
dashboardLogoUrl: [isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, []], |
|
|
|
showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []], |
|
|
|
showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []], |
|
|
|
showUpdateDashboardImage: [isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage, []] |
|
|
|
showTitle: [showTitle, []], |
|
|
|
titleColor: [{value: isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor, |
|
|
|
disabled: !showTitle}, []], |
|
|
|
showDashboardLogo: [showDashboardLogo, []], |
|
|
|
dashboardLogoUrl: [{value: isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, |
|
|
|
disabled: !showDashboardLogo}, []], |
|
|
|
hideToolbar: [hideToolbar, []], |
|
|
|
toolbarAlwaysOpen: [{value: isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen, |
|
|
|
disabled: hideToolbar}, []], |
|
|
|
showDashboardsSelect: [{value: isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, |
|
|
|
disabled: hideToolbar}, []], |
|
|
|
showEntitiesSelect: [{value: isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, |
|
|
|
disabled: hideToolbar}, []], |
|
|
|
showFilters: [{value: isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, |
|
|
|
disabled: hideToolbar}, []], |
|
|
|
showDashboardTimewindow: [{value: isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, |
|
|
|
disabled: hideToolbar}, []], |
|
|
|
showDashboardExport: [{value: isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, |
|
|
|
disabled: hideToolbar}, []], |
|
|
|
showUpdateDashboardImage: [ |
|
|
|
{value: isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage, |
|
|
|
disabled: hideToolbar}, []] |
|
|
|
}); |
|
|
|
this.settingsFormGroup.get('stateControllerId').valueChanges.subscribe( |
|
|
|
(stateControllerId: StateControllerId) => { |
|
|
|
@ -92,13 +106,52 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
this.settingsFormGroup.get('showTitle').valueChanges.subscribe( |
|
|
|
(showTitleValue: boolean) => { |
|
|
|
if (showTitleValue) { |
|
|
|
this.settingsFormGroup.get('titleColor').enable(); |
|
|
|
} else { |
|
|
|
this.settingsFormGroup.get('titleColor').disable(); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
this.settingsFormGroup.get('showDashboardLogo').valueChanges.subscribe( |
|
|
|
(showDashboardLogoValue: boolean) => { |
|
|
|
if (showDashboardLogoValue) { |
|
|
|
this.settingsFormGroup.get('dashboardLogoUrl').enable(); |
|
|
|
} else { |
|
|
|
this.settingsFormGroup.get('dashboardLogoUrl').disable(); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
this.settingsFormGroup.get('hideToolbar').valueChanges.subscribe( |
|
|
|
(hideToolbarValue: boolean) => { |
|
|
|
if (hideToolbarValue) { |
|
|
|
this.settingsFormGroup.get('toolbarAlwaysOpen').disable(); |
|
|
|
this.settingsFormGroup.get('showDashboardsSelect').disable(); |
|
|
|
this.settingsFormGroup.get('showEntitiesSelect').disable(); |
|
|
|
this.settingsFormGroup.get('showFilters').disable(); |
|
|
|
this.settingsFormGroup.get('showDashboardTimewindow').disable(); |
|
|
|
this.settingsFormGroup.get('showDashboardExport').disable(); |
|
|
|
this.settingsFormGroup.get('showUpdateDashboardImage').disable(); |
|
|
|
} else { |
|
|
|
this.settingsFormGroup.get('toolbarAlwaysOpen').enable(); |
|
|
|
this.settingsFormGroup.get('showDashboardsSelect').enable(); |
|
|
|
this.settingsFormGroup.get('showEntitiesSelect').enable(); |
|
|
|
this.settingsFormGroup.get('showFilters').enable(); |
|
|
|
this.settingsFormGroup.get('showDashboardTimewindow').enable(); |
|
|
|
this.settingsFormGroup.get('showDashboardExport').enable(); |
|
|
|
this.settingsFormGroup.get('showUpdateDashboardImage').enable(); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
} else { |
|
|
|
this.settingsFormGroup = this.fb.group({}); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.gridSettings) { |
|
|
|
const mobileAutoFillHeight = isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight; |
|
|
|
this.gridSettingsFormGroup = this.fb.group({ |
|
|
|
color: [this.gridSettings.color || 'rgba(0,0,0,0.870588)', []], |
|
|
|
columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]], |
|
|
|
margin: [isDefined(this.gridSettings.margin) ? this.gridSettings.margin : 10, |
|
|
|
[Validators.required, Validators.min(0), Validators.max(50)]], |
|
|
|
@ -106,10 +159,19 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS |
|
|
|
backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []], |
|
|
|
backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []], |
|
|
|
backgroundSizeMode: [this.gridSettings.backgroundSizeMode || '100%', []], |
|
|
|
mobileAutoFillHeight: [isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight, []], |
|
|
|
mobileRowHeight: [isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight, |
|
|
|
[Validators.required, Validators.min(5), Validators.max(200)]] |
|
|
|
mobileAutoFillHeight: [mobileAutoFillHeight, []], |
|
|
|
mobileRowHeight: [{ value: isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight, |
|
|
|
disabled: mobileAutoFillHeight}, [Validators.required, Validators.min(5), Validators.max(200)]] |
|
|
|
}); |
|
|
|
this.gridSettingsFormGroup.get('mobileAutoFillHeight').valueChanges.subscribe( |
|
|
|
(mobileAutoFillHeightValue: boolean) => { |
|
|
|
if (mobileAutoFillHeightValue) { |
|
|
|
this.gridSettingsFormGroup.get('mobileRowHeight').disable(); |
|
|
|
} else { |
|
|
|
this.gridSettingsFormGroup.get('mobileRowHeight').enable(); |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
} else { |
|
|
|
this.gridSettingsFormGroup = this.fb.group({}); |
|
|
|
} |
|
|
|
@ -133,10 +195,10 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS |
|
|
|
let settings: DashboardSettings = null; |
|
|
|
let gridSettings: GridSettings = null; |
|
|
|
if (this.settings) { |
|
|
|
settings = {...this.settings, ...this.settingsFormGroup.value}; |
|
|
|
settings = {...this.settings, ...this.settingsFormGroup.getRawValue()}; |
|
|
|
} |
|
|
|
if (this.gridSettings) { |
|
|
|
gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.value}; |
|
|
|
gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.getRawValue()}; |
|
|
|
} |
|
|
|
this.dialogRef.close({settings, gridSettings}); |
|
|
|
} |
|
|
|
|
Igor Kulikov
5 years ago