2019-09-06 20:17:45 +03:00
|
|
|
///
|
2024-01-09 10:46:16 +02:00
|
|
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
2019-09-06 20:17:45 +03:00
|
|
|
///
|
|
|
|
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
/// you may not use this file except in compliance with the License.
|
|
|
|
|
/// You may obtain a copy of the License at
|
|
|
|
|
///
|
|
|
|
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
///
|
|
|
|
|
/// Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
/// See the License for the specific language governing permissions and
|
|
|
|
|
/// limitations under the License.
|
|
|
|
|
///
|
|
|
|
|
|
2022-05-11 18:16:30 +03:00
|
|
|
import { ComponentFactory, Inject, Injectable, Optional, Type } from '@angular/core';
|
2019-09-06 20:17:45 +03:00
|
|
|
import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';
|
|
|
|
|
import { WidgetService } from '@core/http/widget.service';
|
2020-12-28 16:06:36 +02:00
|
|
|
import { forkJoin, from, Observable, of, ReplaySubject, Subject, throwError } from 'rxjs';
|
2019-09-23 20:35:31 +03:00
|
|
|
import {
|
|
|
|
|
ErrorWidgetType,
|
|
|
|
|
MissingWidgetType,
|
|
|
|
|
toWidgetInfo,
|
|
|
|
|
toWidgetType,
|
|
|
|
|
WidgetInfo,
|
|
|
|
|
WidgetTypeInstance
|
|
|
|
|
} from '@home/models/widget-component.models';
|
2019-09-06 20:17:45 +03:00
|
|
|
import cssjs from '@core/css/css';
|
|
|
|
|
import { UtilsService } from '@core/services/utils.service';
|
2022-05-11 18:16:30 +03:00
|
|
|
import { ModulesWithFactories, ResourcesService } from '@core/services/resources.service';
|
2023-11-08 15:32:44 +02:00
|
|
|
import {
|
|
|
|
|
IWidgetSettingsComponent,
|
|
|
|
|
Widget,
|
|
|
|
|
widgetActionSources,
|
|
|
|
|
WidgetControllerDescriptor,
|
|
|
|
|
WidgetType
|
|
|
|
|
} from '@shared/models/widget.models';
|
2020-12-28 16:06:36 +02:00
|
|
|
import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators';
|
2019-09-06 20:17:45 +03:00
|
|
|
import { isFunction, isUndefined } from '@core/utils';
|
|
|
|
|
import { TranslateService } from '@ngx-translate/core';
|
|
|
|
|
import { DynamicWidgetComponent } from '@home/components/widget/dynamic-widget.component';
|
|
|
|
|
import { WidgetComponentsModule } from '@home/components/widget/widget-components.module';
|
2019-09-10 15:12:10 +03:00
|
|
|
import { WINDOW } from '@core/services/window.service';
|
|
|
|
|
|
2019-09-23 20:35:31 +03:00
|
|
|
import { NULL_UUID } from '@shared/models/id/has-uuid';
|
|
|
|
|
import { WidgetTypeId } from '@app/shared/models/id/widget-type-id';
|
|
|
|
|
import { TenantId } from '@app/shared/models/id/tenant-id';
|
2020-01-29 17:20:28 +02:00
|
|
|
import { SharedModule } from '@shared/shared.module';
|
2020-08-17 16:11:01 +03:00
|
|
|
import { MODULES_MAP } from '@shared/public-api';
|
2023-04-11 16:00:33 +03:00
|
|
|
import tinycolor from 'tinycolor2';
|
2020-12-28 16:06:36 +02:00
|
|
|
import moment from 'moment';
|
2021-12-06 12:54:48 +02:00
|
|
|
import { IModulesMap } from '@modules/common/modules-map.models';
|
2022-12-28 14:35:29 +02:00
|
|
|
import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
|
2022-05-11 18:16:30 +03:00
|
|
|
import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module';
|
2023-11-08 15:32:44 +02:00
|
|
|
import { basicWidgetConfigComponentsMap } from '@home/components/widget/config/basic/basic-widget-config.module';
|
|
|
|
|
import { IBasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
|
2020-12-28 16:06:36 +02:00
|
|
|
|
2022-12-28 14:35:29 +02:00
|
|
|
@Injectable()
|
2019-09-06 20:17:45 +03:00
|
|
|
export class WidgetComponentService {
|
|
|
|
|
|
|
|
|
|
private cssParser = new cssjs();
|
|
|
|
|
|
|
|
|
|
private widgetsInfoFetchQueue = new Map<string, Array<Subject<WidgetInfo>>>();
|
|
|
|
|
|
|
|
|
|
private init$: Observable<any>;
|
|
|
|
|
|
|
|
|
|
private missingWidgetType: WidgetInfo;
|
|
|
|
|
private errorWidgetType: WidgetInfo;
|
2019-09-23 20:35:31 +03:00
|
|
|
private editingWidgetType: WidgetType;
|
2019-09-06 20:17:45 +03:00
|
|
|
|
2019-09-10 15:12:10 +03:00
|
|
|
constructor(@Inject(WINDOW) private window: Window,
|
2021-12-06 12:54:48 +02:00
|
|
|
@Optional() @Inject(MODULES_MAP) private modulesMap: IModulesMap,
|
2022-12-28 14:35:29 +02:00
|
|
|
@Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
|
2019-09-10 15:12:10 +03:00
|
|
|
private dynamicComponentFactoryService: DynamicComponentFactoryService,
|
2019-09-06 20:17:45 +03:00
|
|
|
private widgetService: WidgetService,
|
|
|
|
|
private utils: UtilsService,
|
|
|
|
|
private resources: ResourcesService,
|
|
|
|
|
private translate: TranslateService) {
|
2019-09-10 15:12:10 +03:00
|
|
|
|
2019-09-06 20:17:45 +03:00
|
|
|
this.cssParser.testMode = false;
|
2019-09-23 20:35:31 +03:00
|
|
|
|
2019-09-06 20:17:45 +03:00
|
|
|
this.init();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private init(): Observable<any> {
|
|
|
|
|
if (this.init$) {
|
|
|
|
|
return this.init$;
|
|
|
|
|
} else {
|
|
|
|
|
this.missingWidgetType = {...MissingWidgetType};
|
|
|
|
|
this.errorWidgetType = {...ErrorWidgetType};
|
2019-09-23 20:35:31 +03:00
|
|
|
if (this.utils.widgetEditMode) {
|
|
|
|
|
this.editingWidgetType = toWidgetType(
|
|
|
|
|
{
|
|
|
|
|
widgetName: this.utils.editWidgetInfo.widgetName,
|
2023-08-18 17:02:16 +03:00
|
|
|
fullFqn: 'system.customWidget',
|
2023-08-18 16:14:21 +03:00
|
|
|
deprecated: false,
|
2019-09-23 20:35:31 +03:00
|
|
|
type: this.utils.editWidgetInfo.type,
|
|
|
|
|
sizeX: this.utils.editWidgetInfo.sizeX,
|
|
|
|
|
sizeY: this.utils.editWidgetInfo.sizeY,
|
|
|
|
|
resources: this.utils.editWidgetInfo.resources,
|
|
|
|
|
templateHtml: this.utils.editWidgetInfo.templateHtml,
|
|
|
|
|
templateCss: this.utils.editWidgetInfo.templateCss,
|
|
|
|
|
controllerScript: this.utils.editWidgetInfo.controllerScript,
|
|
|
|
|
settingsSchema: this.utils.editWidgetInfo.settingsSchema,
|
|
|
|
|
dataKeySettingsSchema: this.utils.editWidgetInfo.dataKeySettingsSchema,
|
2022-03-28 13:39:26 +03:00
|
|
|
latestDataKeySettingsSchema: this.utils.editWidgetInfo.latestDataKeySettingsSchema,
|
2022-03-19 10:08:53 +02:00
|
|
|
settingsDirective: this.utils.editWidgetInfo.settingsDirective,
|
|
|
|
|
dataKeySettingsDirective: this.utils.editWidgetInfo.dataKeySettingsDirective,
|
2022-03-30 11:14:54 +03:00
|
|
|
latestDataKeySettingsDirective: this.utils.editWidgetInfo.latestDataKeySettingsDirective,
|
2023-05-25 17:03:52 +03:00
|
|
|
hasBasicMode: this.utils.editWidgetInfo.hasBasicMode,
|
|
|
|
|
basicModeDirective: this.utils.editWidgetInfo.basicModeDirective,
|
2019-09-23 20:35:31 +03:00
|
|
|
defaultConfig: this.utils.editWidgetInfo.defaultConfig
|
2023-09-01 18:55:29 +03:00
|
|
|
}, new WidgetTypeId('1'), new TenantId( NULL_UUID ), undefined
|
2019-09-23 20:35:31 +03:00
|
|
|
);
|
|
|
|
|
}
|
2023-02-06 13:09:43 +02:00
|
|
|
const initSubject = new ReplaySubject<void>();
|
2019-09-06 20:17:45 +03:00
|
|
|
this.init$ = initSubject.asObservable();
|
2020-12-28 16:06:36 +02:00
|
|
|
|
2021-01-05 11:37:05 +02:00
|
|
|
const w = (this.window as any);
|
|
|
|
|
|
|
|
|
|
w.tinycolor = tinycolor;
|
|
|
|
|
w.cssjs = cssjs;
|
|
|
|
|
w.moment = moment;
|
|
|
|
|
w.$ = $;
|
|
|
|
|
w.jQuery = $;
|
2020-12-28 16:06:36 +02:00
|
|
|
|
|
|
|
|
const widgetModulesTasks: Observable<any>[] = [];
|
2021-01-05 11:37:05 +02:00
|
|
|
widgetModulesTasks.push(from(import('jquery.terminal')));
|
|
|
|
|
|
|
|
|
|
widgetModulesTasks.push(from(import('flot/src/jquery.flot.js')).pipe(
|
|
|
|
|
mergeMap(() => {
|
|
|
|
|
const flotJsPluginsTasks: Observable<any>[] = [];
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/lib/jquery.colorhelpers.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/src/plugins/jquery.flot.time.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/src/plugins/jquery.flot.selection.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/src/plugins/jquery.flot.pie.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/src/plugins/jquery.flot.crosshair.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/src/plugins/jquery.flot.stack.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot/src/plugins/jquery.flot.symbol.js')));
|
|
|
|
|
flotJsPluginsTasks.push(from(import('flot.curvedlines/curvedLines.js')));
|
|
|
|
|
return forkJoin(flotJsPluginsTasks);
|
|
|
|
|
})
|
|
|
|
|
));
|
|
|
|
|
|
2020-12-28 16:06:36 +02:00
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/flot-widget')).pipe(
|
|
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbFlot = mod.TbFlot;
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/analogue-compass')).pipe(
|
|
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbAnalogueCompass = mod.TbAnalogueCompass;
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/analogue-radial-gauge')).pipe(
|
|
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbAnalogueRadialGauge = mod.TbAnalogueRadialGauge;
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/analogue-linear-gauge')).pipe(
|
|
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbAnalogueLinearGauge = mod.TbAnalogueLinearGauge;
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/digital-gauge')).pipe(
|
|
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbCanvasDigitalGauge = mod.TbCanvasDigitalGauge;
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/maps/map-widget2')).pipe(
|
|
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbMapWidgetV2 = mod.TbMapWidgetV2;
|
|
|
|
|
}))
|
|
|
|
|
);
|
2023-06-02 19:43:13 +03:00
|
|
|
widgetModulesTasks.push(from(import('@home/components/widget/lib/trip-animation/trip-animation.component')).pipe(
|
2020-12-28 16:06:36 +02:00
|
|
|
tap((mod) => {
|
|
|
|
|
(window as any).TbTripAnimationWidget = mod.TbTripAnimationWidget;
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
forkJoin(widgetModulesTasks).subscribe(
|
2019-09-06 20:17:45 +03:00
|
|
|
() => {
|
2020-12-28 16:06:36 +02:00
|
|
|
const loadDefaultWidgetInfoTasks = [
|
2021-12-22 17:15:10 +02:00
|
|
|
this.loadWidgetResources(this.missingWidgetType, 'global-widget-missing-type',
|
2022-12-28 14:35:29 +02:00
|
|
|
[SharedModule, WidgetComponentsModule, this.homeComponentsModule]),
|
2021-12-22 17:15:10 +02:00
|
|
|
this.loadWidgetResources(this.errorWidgetType, 'global-widget-error-type',
|
2022-12-28 14:35:29 +02:00
|
|
|
[SharedModule, WidgetComponentsModule, this.homeComponentsModule]),
|
2020-12-28 16:06:36 +02:00
|
|
|
];
|
|
|
|
|
forkJoin(loadDefaultWidgetInfoTasks).subscribe(
|
|
|
|
|
() => {
|
|
|
|
|
initSubject.next();
|
|
|
|
|
},
|
|
|
|
|
(e) => {
|
|
|
|
|
let errorMessages = ['Failed to load default widget types!'];
|
|
|
|
|
if (e && e.length) {
|
|
|
|
|
errorMessages = errorMessages.concat(e);
|
|
|
|
|
}
|
|
|
|
|
console.error('Failed to load default widget types!');
|
|
|
|
|
initSubject.error({
|
|
|
|
|
widgetInfo: this.errorWidgetType,
|
|
|
|
|
errorMessages
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
2019-09-06 20:17:45 +03:00
|
|
|
},
|
2020-01-29 17:20:28 +02:00
|
|
|
(e) => {
|
2020-12-28 16:06:36 +02:00
|
|
|
let errorMessages = ['Failed to load widget modules!'];
|
2020-01-29 17:20:28 +02:00
|
|
|
if (e && e.length) {
|
|
|
|
|
errorMessages = errorMessages.concat(e);
|
|
|
|
|
}
|
2020-12-28 16:06:36 +02:00
|
|
|
console.error('Failed to load widget modules!');
|
2020-01-29 17:20:28 +02:00
|
|
|
initSubject.error({
|
|
|
|
|
widgetInfo: this.errorWidgetType,
|
|
|
|
|
errorMessages
|
|
|
|
|
});
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
return this.init$;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-25 19:37:29 +03:00
|
|
|
public getInstantWidgetInfo(widget: Widget): WidgetInfo {
|
2023-08-18 16:14:21 +03:00
|
|
|
const widgetInfo = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn);
|
2019-09-25 19:37:29 +03:00
|
|
|
if (widgetInfo) {
|
|
|
|
|
return widgetInfo;
|
|
|
|
|
} else {
|
|
|
|
|
return {} as WidgetInfo;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
public getWidgetInfo(fullFqn: string): Observable<WidgetInfo> {
|
2019-09-06 20:17:45 +03:00
|
|
|
return this.init().pipe(
|
2023-08-18 16:14:21 +03:00
|
|
|
mergeMap(() => this.getWidgetInfoInternal(fullFqn))
|
2019-09-06 20:17:45 +03:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
public clearWidgetInfo(widgetInfo: WidgetInfo): void {
|
2023-08-08 18:54:07 +03:00
|
|
|
this.dynamicComponentFactoryService.destroyDynamicComponent(widgetInfo.componentType);
|
2023-08-18 16:14:21 +03:00
|
|
|
this.widgetService.deleteWidgetInfoFromCache(widgetInfo.fullFqn);
|
2023-05-22 15:30:57 +03:00
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
private getWidgetInfoInternal(fullFqn: string): Observable<WidgetInfo> {
|
2019-09-06 20:17:45 +03:00
|
|
|
const widgetInfoSubject = new ReplaySubject<WidgetInfo>();
|
2023-08-18 16:14:21 +03:00
|
|
|
const widgetInfo = this.widgetService.getWidgetInfoFromCache(fullFqn);
|
2019-09-06 20:17:45 +03:00
|
|
|
if (widgetInfo) {
|
|
|
|
|
widgetInfoSubject.next(widgetInfo);
|
|
|
|
|
widgetInfoSubject.complete();
|
|
|
|
|
} else {
|
|
|
|
|
if (this.utils.widgetEditMode) {
|
2023-08-18 16:14:21 +03:00
|
|
|
this.loadWidget(this.editingWidgetType, widgetInfoSubject);
|
2019-09-06 20:17:45 +03:00
|
|
|
} else {
|
2023-08-18 16:14:21 +03:00
|
|
|
let fetchQueue = this.widgetsInfoFetchQueue.get(fullFqn);
|
2019-09-06 20:17:45 +03:00
|
|
|
if (fetchQueue) {
|
|
|
|
|
fetchQueue.push(widgetInfoSubject);
|
|
|
|
|
} else {
|
|
|
|
|
fetchQueue = new Array<Subject<WidgetInfo>>();
|
2023-08-18 16:14:21 +03:00
|
|
|
this.widgetsInfoFetchQueue.set(fullFqn, fetchQueue);
|
|
|
|
|
this.widgetService.getWidgetType(fullFqn, {ignoreErrors: true}).subscribe(
|
2019-09-06 20:17:45 +03:00
|
|
|
(widgetType) => {
|
2023-08-18 16:14:21 +03:00
|
|
|
this.loadWidget(widgetType, widgetInfoSubject);
|
2019-09-06 20:17:45 +03:00
|
|
|
},
|
|
|
|
|
() => {
|
|
|
|
|
widgetInfoSubject.next(this.missingWidgetType);
|
|
|
|
|
widgetInfoSubject.complete();
|
2023-08-18 16:14:21 +03:00
|
|
|
this.resolveWidgetsInfoFetchQueue(fullFqn, this.missingWidgetType);
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return widgetInfoSubject.asObservable();
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
private loadWidget(widgetType: WidgetType, widgetInfoSubject: Subject<WidgetInfo>) {
|
2019-09-06 20:17:45 +03:00
|
|
|
const widgetInfo = toWidgetInfo(widgetType);
|
|
|
|
|
let widgetControllerDescriptor: WidgetControllerDescriptor = null;
|
|
|
|
|
try {
|
2023-08-18 16:14:21 +03:00
|
|
|
widgetControllerDescriptor = this.createWidgetControllerDescriptor(widgetInfo);
|
2019-09-06 20:17:45 +03:00
|
|
|
} catch (e) {
|
|
|
|
|
const details = this.utils.parseException(e);
|
|
|
|
|
const errorMessage = `Failed to compile widget script. \n Error: ${details.message}`;
|
2023-08-18 16:14:21 +03:00
|
|
|
this.processWidgetLoadError([errorMessage], widgetInfo.fullFqn, widgetInfoSubject);
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
|
|
|
|
if (widgetControllerDescriptor) {
|
2023-08-18 16:14:21 +03:00
|
|
|
const widgetNamespace = `widget-type-${widgetInfo.fullFqn.replace(/\./g, '-')}`;
|
2022-12-28 14:35:29 +02:00
|
|
|
this.loadWidgetResources(widgetInfo, widgetNamespace, [SharedModule, WidgetComponentsModule, this.homeComponentsModule]).subscribe(
|
2019-09-06 20:17:45 +03:00
|
|
|
() => {
|
|
|
|
|
if (widgetControllerDescriptor.settingsSchema) {
|
|
|
|
|
widgetInfo.typeSettingsSchema = widgetControllerDescriptor.settingsSchema;
|
|
|
|
|
}
|
|
|
|
|
if (widgetControllerDescriptor.dataKeySettingsSchema) {
|
|
|
|
|
widgetInfo.typeDataKeySettingsSchema = widgetControllerDescriptor.dataKeySettingsSchema;
|
|
|
|
|
}
|
2022-03-28 13:39:26 +03:00
|
|
|
if (widgetControllerDescriptor.latestDataKeySettingsSchema) {
|
|
|
|
|
widgetInfo.typeLatestDataKeySettingsSchema = widgetControllerDescriptor.latestDataKeySettingsSchema;
|
|
|
|
|
}
|
2019-09-06 20:17:45 +03:00
|
|
|
widgetInfo.typeParameters = widgetControllerDescriptor.typeParameters;
|
|
|
|
|
widgetInfo.actionSources = widgetControllerDescriptor.actionSources;
|
|
|
|
|
widgetInfo.widgetTypeFunction = widgetControllerDescriptor.widgetTypeFunction;
|
2023-08-18 16:14:21 +03:00
|
|
|
this.widgetService.putWidgetInfoToCache(widgetInfo);
|
2019-09-06 20:17:45 +03:00
|
|
|
if (widgetInfoSubject) {
|
|
|
|
|
widgetInfoSubject.next(widgetInfo);
|
|
|
|
|
widgetInfoSubject.complete();
|
|
|
|
|
}
|
2023-08-18 16:14:21 +03:00
|
|
|
this.resolveWidgetsInfoFetchQueue(widgetInfo.fullFqn, widgetInfo);
|
2019-09-06 20:17:45 +03:00
|
|
|
},
|
|
|
|
|
(errorMessages: string[]) => {
|
2023-08-18 16:14:21 +03:00
|
|
|
this.processWidgetLoadError(errorMessages, widgetInfo.fullFqn, widgetInfoSubject);
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-29 17:20:28 +02:00
|
|
|
private loadWidgetResources(widgetInfo: WidgetInfo, widgetNamespace: string, modules?: Type<any>[]): Observable<any> {
|
2019-09-06 20:17:45 +03:00
|
|
|
this.cssParser.cssPreviewNamespace = widgetNamespace;
|
|
|
|
|
this.cssParser.createStyleElement(widgetNamespace, widgetInfo.templateCss);
|
|
|
|
|
const resourceTasks: Observable<string>[] = [];
|
2022-05-11 18:16:30 +03:00
|
|
|
const modulesTasks: Observable<ModulesWithFactories | string>[] = [];
|
2019-09-06 20:17:45 +03:00
|
|
|
if (widgetInfo.resources.length > 0) {
|
2020-07-15 12:44:16 +03:00
|
|
|
widgetInfo.resources.filter(r => r.isModule).forEach(
|
|
|
|
|
(resource) => {
|
|
|
|
|
modulesTasks.push(
|
2022-05-11 18:16:30 +03:00
|
|
|
this.resources.loadFactories(resource.url, this.modulesMap).pipe(
|
2020-07-15 12:44:16 +03:00
|
|
|
catchError((e: Error) => of(e?.message ? e.message : `Failed to load widget resource module: '${resource.url}'`))
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
widgetInfo.resources.filter(r => !r.isModule).forEach(
|
|
|
|
|
(resource) => {
|
2019-09-06 20:17:45 +03:00
|
|
|
resourceTasks.push(
|
|
|
|
|
this.resources.loadResource(resource.url).pipe(
|
2022-12-28 15:10:09 +02:00
|
|
|
catchError(() => of(`Failed to load widget resource: '${resource.url}'`))
|
2019-09-06 20:17:45 +03:00
|
|
|
)
|
|
|
|
|
);
|
2020-07-15 12:44:16 +03:00
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
2022-05-11 18:16:30 +03:00
|
|
|
let modulesObservable: Observable<string | ModulesWithFactories>;
|
2020-07-15 12:44:16 +03:00
|
|
|
if (modulesTasks.length) {
|
|
|
|
|
modulesObservable = forkJoin(modulesTasks).pipe(
|
|
|
|
|
map(res => {
|
|
|
|
|
const msg = res.find(r => typeof r === 'string');
|
|
|
|
|
if (msg) {
|
|
|
|
|
return msg as string;
|
|
|
|
|
} else {
|
2022-05-11 18:16:30 +03:00
|
|
|
const modulesWithFactoriesList = res as ModulesWithFactories[];
|
|
|
|
|
const resModulesWithFactories: ModulesWithFactories = {
|
|
|
|
|
modules: modulesWithFactoriesList.map(mf => mf.modules).flat(),
|
|
|
|
|
factories: modulesWithFactoriesList.map(mf => mf.factories).flat()
|
|
|
|
|
};
|
2020-07-15 12:44:16 +03:00
|
|
|
if (modules && modules.length) {
|
2023-02-03 16:00:37 +02:00
|
|
|
resModulesWithFactories.modules = resModulesWithFactories.modules.concat(modules);
|
2020-07-15 12:44:16 +03:00
|
|
|
}
|
2022-05-11 18:16:30 +03:00
|
|
|
return resModulesWithFactories;
|
2020-07-15 12:44:16 +03:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
} else {
|
2022-05-11 18:16:30 +03:00
|
|
|
modulesObservable = modules && modules.length ? of({modules, factories: []}) : of({modules: [], factories: []});
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
2020-07-15 12:44:16 +03:00
|
|
|
|
2019-09-06 20:17:45 +03:00
|
|
|
resourceTasks.push(
|
2020-07-15 12:44:16 +03:00
|
|
|
modulesObservable.pipe(
|
|
|
|
|
mergeMap((resolvedModules) => {
|
|
|
|
|
if (typeof resolvedModules === 'string') {
|
|
|
|
|
return of(resolvedModules);
|
|
|
|
|
} else {
|
2022-05-11 18:16:30 +03:00
|
|
|
this.registerWidgetSettingsForms(widgetInfo, resolvedModules.factories);
|
2023-08-08 18:54:07 +03:00
|
|
|
return this.dynamicComponentFactoryService.createDynamicComponent(
|
2020-07-15 12:44:16 +03:00
|
|
|
class DynamicWidgetComponentInstance extends DynamicWidgetComponent {},
|
|
|
|
|
widgetInfo.templateHtml,
|
2022-05-11 18:16:30 +03:00
|
|
|
resolvedModules.modules
|
2020-07-15 12:44:16 +03:00
|
|
|
).pipe(
|
2023-08-08 18:54:07 +03:00
|
|
|
map((componentData) => {
|
|
|
|
|
widgetInfo.componentType = componentData.componentType;
|
|
|
|
|
widgetInfo.componentModuleRef = componentData.componentModuleRef;
|
2020-07-15 12:44:16 +03:00
|
|
|
return null;
|
|
|
|
|
}),
|
|
|
|
|
catchError(e => {
|
|
|
|
|
const details = this.utils.parseException(e);
|
|
|
|
|
const errorMessage = `Failed to compile widget html. \n Error: ${details.message}`;
|
|
|
|
|
return of(errorMessage);
|
|
|
|
|
})
|
2020-08-17 16:11:01 +03:00
|
|
|
);
|
2020-07-15 12:44:16 +03:00
|
|
|
}
|
|
|
|
|
}))
|
2019-09-06 20:17:45 +03:00
|
|
|
);
|
|
|
|
|
return forkJoin(resourceTasks).pipe(
|
|
|
|
|
switchMap(msgs => {
|
|
|
|
|
let errors: string[];
|
|
|
|
|
if (msgs && msgs.length) {
|
|
|
|
|
errors = msgs.filter(msg => msg && msg.length > 0);
|
|
|
|
|
}
|
|
|
|
|
if (errors && errors.length) {
|
|
|
|
|
return throwError(errors);
|
|
|
|
|
} else {
|
|
|
|
|
return of(null);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
));
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-11 18:16:30 +03:00
|
|
|
private registerWidgetSettingsForms(widgetInfo: WidgetInfo, factories: ComponentFactory<any>[]) {
|
|
|
|
|
const directives: string[] = [];
|
2023-11-08 15:32:44 +02:00
|
|
|
const basicDirectives: string[] = [];
|
2022-05-11 18:16:30 +03:00
|
|
|
if (widgetInfo.settingsDirective && widgetInfo.settingsDirective.length) {
|
|
|
|
|
directives.push(widgetInfo.settingsDirective);
|
|
|
|
|
}
|
|
|
|
|
if (widgetInfo.dataKeySettingsDirective && widgetInfo.dataKeySettingsDirective.length) {
|
|
|
|
|
directives.push(widgetInfo.dataKeySettingsDirective);
|
|
|
|
|
}
|
|
|
|
|
if (widgetInfo.latestDataKeySettingsDirective && widgetInfo.latestDataKeySettingsDirective.length) {
|
|
|
|
|
directives.push(widgetInfo.latestDataKeySettingsDirective);
|
|
|
|
|
}
|
2023-05-25 17:03:52 +03:00
|
|
|
if (widgetInfo.basicModeDirective && widgetInfo.basicModeDirective.length) {
|
2023-11-08 15:32:44 +02:00
|
|
|
basicDirectives.push(widgetInfo.basicModeDirective);
|
2023-05-25 17:03:52 +03:00
|
|
|
}
|
2023-11-08 15:32:44 +02:00
|
|
|
|
|
|
|
|
this.expandSettingComponentMap(widgetSettingsComponentsMap, directives, factories);
|
|
|
|
|
this.expandSettingComponentMap(basicWidgetConfigComponentsMap, basicDirectives, factories);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private expandSettingComponentMap(settingsComponentsMap: {[key: string]: Type<IWidgetSettingsComponent | IBasicWidgetConfigComponent>},
|
|
|
|
|
directives: string[], factories: ComponentFactory<any>[]): void {
|
2022-05-11 18:16:30 +03:00
|
|
|
if (directives.length) {
|
|
|
|
|
factories.filter((factory) => directives.includes(factory.selector))
|
|
|
|
|
.forEach((foundFactory) => {
|
2023-11-08 15:32:44 +02:00
|
|
|
settingsComponentsMap[foundFactory.selector] = foundFactory.componentType;
|
2022-05-11 18:16:30 +03:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
private createWidgetControllerDescriptor(widgetInfo: WidgetInfo): WidgetControllerDescriptor {
|
|
|
|
|
let widgetTypeFunctionBody = `return function _${widgetInfo.fullFqn.replace(/\./g, '_')} (ctx) {\n` +
|
2019-09-06 20:17:45 +03:00
|
|
|
' var self = this;\n' +
|
|
|
|
|
' self.ctx = ctx;\n\n'; /*+
|
|
|
|
|
|
|
|
|
|
' self.onInit = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.onDataUpdated = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.useCustomDatasources = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.typeParameters = function() {\n\n' +
|
|
|
|
|
return {
|
|
|
|
|
useCustomDatasources: false,
|
|
|
|
|
maxDatasources: -1, //unlimited
|
|
|
|
|
maxDataKeys: -1, //unlimited
|
|
|
|
|
dataKeysOptional: false,
|
|
|
|
|
stateData: false
|
|
|
|
|
};
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.actionSources = function() {\n\n' +
|
|
|
|
|
return {
|
|
|
|
|
'headerButton': {
|
|
|
|
|
name: 'Header button',
|
|
|
|
|
multiple: true
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}\n\n' +
|
|
|
|
|
' self.onResize = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.onEditModeChanged = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.onMobileModeChanged = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.getSettingsSchema = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.getDataKeySettingsSchema = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
|
|
|
|
|
' self.onDestroy = function() {\n\n' +
|
|
|
|
|
|
|
|
|
|
' }\n\n' +
|
|
|
|
|
'}';*/
|
|
|
|
|
|
|
|
|
|
widgetTypeFunctionBody += widgetInfo.controllerScript;
|
|
|
|
|
widgetTypeFunctionBody += '\n};\n';
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
|
|
const widgetTypeFunction = new Function(widgetTypeFunctionBody);
|
|
|
|
|
const widgetType = widgetTypeFunction.apply(this);
|
|
|
|
|
const widgetTypeInstance: WidgetTypeInstance = new widgetType();
|
|
|
|
|
const result: WidgetControllerDescriptor = {
|
|
|
|
|
widgetTypeFunction: widgetType
|
|
|
|
|
};
|
|
|
|
|
if (isFunction(widgetTypeInstance.getSettingsSchema)) {
|
|
|
|
|
result.settingsSchema = widgetTypeInstance.getSettingsSchema();
|
|
|
|
|
}
|
|
|
|
|
if (isFunction(widgetTypeInstance.getDataKeySettingsSchema)) {
|
|
|
|
|
result.dataKeySettingsSchema = widgetTypeInstance.getDataKeySettingsSchema();
|
|
|
|
|
}
|
2022-03-28 13:39:26 +03:00
|
|
|
if (isFunction(widgetTypeInstance.getLatestDataKeySettingsSchema)) {
|
|
|
|
|
result.latestDataKeySettingsSchema = widgetTypeInstance.getLatestDataKeySettingsSchema();
|
|
|
|
|
}
|
2019-09-06 20:17:45 +03:00
|
|
|
if (isFunction(widgetTypeInstance.typeParameters)) {
|
|
|
|
|
result.typeParameters = widgetTypeInstance.typeParameters();
|
|
|
|
|
} else {
|
|
|
|
|
result.typeParameters = {};
|
|
|
|
|
}
|
|
|
|
|
if (isFunction(widgetTypeInstance.useCustomDatasources)) {
|
|
|
|
|
result.typeParameters.useCustomDatasources = widgetTypeInstance.useCustomDatasources();
|
|
|
|
|
} else {
|
|
|
|
|
result.typeParameters.useCustomDatasources = false;
|
|
|
|
|
}
|
2020-06-22 18:55:15 +03:00
|
|
|
if (isUndefined(result.typeParameters.hasDataPageLink)) {
|
|
|
|
|
result.typeParameters.hasDataPageLink = false;
|
|
|
|
|
}
|
2019-09-06 20:17:45 +03:00
|
|
|
if (isUndefined(result.typeParameters.maxDatasources)) {
|
|
|
|
|
result.typeParameters.maxDatasources = -1;
|
|
|
|
|
}
|
|
|
|
|
if (isUndefined(result.typeParameters.maxDataKeys)) {
|
|
|
|
|
result.typeParameters.maxDataKeys = -1;
|
|
|
|
|
}
|
2020-06-22 18:55:15 +03:00
|
|
|
if (isUndefined(result.typeParameters.singleEntity)) {
|
2020-06-25 20:08:07 +03:00
|
|
|
result.typeParameters.singleEntity = false;
|
2020-06-22 18:55:15 +03:00
|
|
|
}
|
2022-03-28 13:39:26 +03:00
|
|
|
if (isUndefined(result.typeParameters.hasAdditionalLatestDataKeys)) {
|
|
|
|
|
result.typeParameters.hasAdditionalLatestDataKeys = false;
|
|
|
|
|
}
|
2020-06-26 17:02:41 +03:00
|
|
|
if (isUndefined(result.typeParameters.warnOnPageDataOverflow)) {
|
|
|
|
|
result.typeParameters.warnOnPageDataOverflow = true;
|
|
|
|
|
}
|
2021-03-02 13:21:53 +02:00
|
|
|
if (isUndefined(result.typeParameters.ignoreDataUpdateOnIntervalTick)) {
|
|
|
|
|
result.typeParameters.ignoreDataUpdateOnIntervalTick = false;
|
2021-02-15 18:41:44 +02:00
|
|
|
}
|
2019-09-06 20:17:45 +03:00
|
|
|
if (isUndefined(result.typeParameters.dataKeysOptional)) {
|
|
|
|
|
result.typeParameters.dataKeysOptional = false;
|
|
|
|
|
}
|
2021-10-19 22:22:06 +03:00
|
|
|
if (isUndefined(result.typeParameters.datasourcesOptional)) {
|
|
|
|
|
result.typeParameters.datasourcesOptional = false;
|
|
|
|
|
}
|
2019-09-06 20:17:45 +03:00
|
|
|
if (isUndefined(result.typeParameters.stateData)) {
|
|
|
|
|
result.typeParameters.stateData = false;
|
|
|
|
|
}
|
2022-07-11 17:09:46 +05:00
|
|
|
if (isUndefined(result.typeParameters.processNoDataByWidget)) {
|
|
|
|
|
result.typeParameters.processNoDataByWidget = false;
|
|
|
|
|
}
|
2023-07-21 18:26:14 +03:00
|
|
|
if (isUndefined(result.typeParameters.previewWidth)) {
|
|
|
|
|
result.typeParameters.previewWidth = '100%';
|
|
|
|
|
}
|
|
|
|
|
if (isUndefined(result.typeParameters.previewHeight)) {
|
|
|
|
|
result.typeParameters.previewHeight = '70%';
|
|
|
|
|
}
|
2023-08-08 18:54:07 +03:00
|
|
|
if (isUndefined(result.typeParameters.embedTitlePanel)) {
|
|
|
|
|
result.typeParameters.embedTitlePanel = false;
|
2023-07-27 17:18:39 +03:00
|
|
|
}
|
2023-09-14 18:45:22 +03:00
|
|
|
if (isUndefined(result.typeParameters.hideDataSettings)) {
|
|
|
|
|
result.typeParameters.hideDataSettings = false;
|
|
|
|
|
}
|
2023-10-18 15:14:16 +03:00
|
|
|
if (!isFunction(result.typeParameters.defaultDataKeysFunction)) {
|
|
|
|
|
result.typeParameters.defaultDataKeysFunction = null;
|
|
|
|
|
}
|
|
|
|
|
if (!isFunction(result.typeParameters.defaultLatestDataKeysFunction)) {
|
|
|
|
|
result.typeParameters.defaultLatestDataKeysFunction = null;
|
|
|
|
|
}
|
2024-01-23 20:03:14 +02:00
|
|
|
if (isUndefined(result.typeParameters.displayRpcMessageToast)) {
|
|
|
|
|
result.typeParameters.displayRpcMessageToast = true;
|
|
|
|
|
}
|
2019-09-06 20:17:45 +03:00
|
|
|
if (isFunction(widgetTypeInstance.actionSources)) {
|
|
|
|
|
result.actionSources = widgetTypeInstance.actionSources();
|
|
|
|
|
} else {
|
|
|
|
|
result.actionSources = {};
|
|
|
|
|
}
|
|
|
|
|
for (const actionSourceId of Object.keys(widgetActionSources)) {
|
|
|
|
|
result.actionSources[actionSourceId] = {...widgetActionSources[actionSourceId]};
|
|
|
|
|
result.actionSources[actionSourceId].name = this.translate.instant(result.actionSources[actionSourceId].name);
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
} catch (e) {
|
|
|
|
|
this.utils.processWidgetException(e);
|
|
|
|
|
throw e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
private processWidgetLoadError(errorMessages: string[], fullFqn: string, widgetInfoSubject: Subject<WidgetInfo>) {
|
2019-09-06 20:17:45 +03:00
|
|
|
if (widgetInfoSubject) {
|
|
|
|
|
widgetInfoSubject.error({
|
|
|
|
|
widgetInfo: this.errorWidgetType,
|
|
|
|
|
errorMessages
|
|
|
|
|
});
|
|
|
|
|
}
|
2023-08-18 16:14:21 +03:00
|
|
|
this.resolveWidgetsInfoFetchQueue(fullFqn, this.errorWidgetType, errorMessages);
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
|
|
|
|
|
2023-08-18 16:14:21 +03:00
|
|
|
private resolveWidgetsInfoFetchQueue(fullFqn: string, widgetInfo: WidgetInfo, errorMessages?: string[]) {
|
|
|
|
|
const fetchQueue = this.widgetsInfoFetchQueue.get(fullFqn);
|
2019-09-06 20:17:45 +03:00
|
|
|
if (fetchQueue) {
|
|
|
|
|
fetchQueue.forEach(subject => {
|
|
|
|
|
if (!errorMessages) {
|
|
|
|
|
subject.next(widgetInfo);
|
|
|
|
|
subject.complete();
|
|
|
|
|
} else {
|
|
|
|
|
subject.error({
|
|
|
|
|
widgetInfo,
|
|
|
|
|
errorMessages
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-08-18 16:14:21 +03:00
|
|
|
this.widgetsInfoFetchQueue.delete(fullFqn);
|
2019-09-06 20:17:45 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|