Browse Source

UI: Fix trip animation widget label calculation. Map widgets code cleanup.

pull/6608/head
Igor Kulikov 4 years ago
parent
commit
2b8bf1972e
  1. 87
      ui-ngx/src/app/core/schema-utils.ts
  2. 19
      ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
  3. 5
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
  4. 52
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
  5. 1603
      ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
  6. 45
      ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

87
ui-ngx/src/app/core/schema-utils.ts

@ -1,87 +0,0 @@
///
/// Copyright © 2016-2022 The Thingsboard Authors
///
/// 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.
///
import { JsonSettingsSchema } from '@shared/models/widget.models';
export function initSchema(): JsonSettingsSchema {
return {
schema: {
type: 'object',
properties: {},
required: []
},
form: [],
groupInfoes: []
};
}
export function addGroupInfo(schema: JsonSettingsSchema, title: string) {
schema.groupInfoes.push({
formIndex: schema.groupInfoes?.length || 0,
GroupTitle: title
});
}
export function addToSchema(schema: JsonSettingsSchema, newSchema: JsonSettingsSchema) {
Object.assign(schema.schema.properties, newSchema.schema.properties);
schema.schema.required = schema.schema.required.concat(newSchema.schema.required);
schema.form.push(newSchema.form);
}
export function mergeSchemes(schemes: JsonSettingsSchema[]): JsonSettingsSchema {
return schemes.reduce((finalSchema: JsonSettingsSchema, schema: JsonSettingsSchema) => {
return {
schema: {
properties: {
...finalSchema.schema.properties,
...schema.schema.properties
},
required: [
...finalSchema.schema.required,
...schema.schema.required
]
},
form: [
...finalSchema.form,
...schema.form
]
} as JsonSettingsSchema;
}, initSchema());
}
export function addCondition(schema: JsonSettingsSchema, condition: string, exclude: string[] = []): JsonSettingsSchema {
schema.form = schema.form.map(element => {
if (!exclude.includes(element) && !exclude.includes(element.key)) {
if (typeof element === 'string') {
return {
key: element,
condition
};
}
if (typeof element === 'object') {
if (element.condition) {
element.condition += ' && ' + condition;
}
else {
element.condition = condition;
}
}
}
return element;
});
return schema;
}

19
ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts

@ -28,27 +28,8 @@ import {
import { Observable, Observer, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { FormattedData } from '@shared/models/widget.models';
import _ from 'lodash';
import { mapProviderSchema, providerSets } from '@home/components/widget/lib/maps/schemes';
import { addCondition, mergeSchemes } from '@core/schema-utils';
import L from 'leaflet';
export function getProviderSchema(mapProvider: MapProviders, ignoreImageMap = false) {
const providerSchema = _.cloneDeep(mapProviderSchema);
if (mapProvider) {
providerSchema.schema.properties.provider.default = mapProvider;
}
if (ignoreImageMap) {
providerSchema.form[0].items = providerSchema.form[0]?.items.filter(item => item.value !== 'image-map');
}
return mergeSchemes([providerSchema,
...Object.keys(providerSets)?.map(
(key: string) => {
const setting = providerSets[key];
return addCondition(setting?.schema, `model.provider === '${setting.name}'`);
})]);
}
export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number {
return (intermediateMoment - firsMoment) / (secondMoment - firsMoment);
}

5
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts

@ -14,8 +14,6 @@
/// limitations under the License.
///
import { JsonSettingsSchema } from '@shared/models/widget.models';
import { MapProviders } from '@home/components/widget/lib/maps/map-models';
import LeafletMap from '@home/components/widget/lib/maps/leaflet-map';
export interface MapWidgetInterface {
@ -26,8 +24,5 @@ export interface MapWidgetInterface {
}
export interface MapWidgetStaticInterface {
settingsSchema(mapProvider?: MapProviders, drawRoutes?: boolean): JsonSettingsSchema;
getProvidersSchema(mapProvider?: MapProviders, ignoreImageMap?: boolean): JsonSettingsSchema;
dataKeySettingsSchema(): object;
actionSources(): object;
}

52
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts

@ -14,26 +14,11 @@
/// limitations under the License.
///
import {
defaultMapSettings,
MapProviders,
UnitedMapSettings,
WidgetUnitedMapSettings
} from './map-models';
import { defaultMapSettings, MapProviders, UnitedMapSettings, WidgetUnitedMapSettings } from './map-models';
import LeafletMap from './leaflet-map';
import {
commonMapSettingsSchema,
editorSettingSchema,
mapCircleSchema,
mapPolygonSchema,
markerClusteringSettingsSchema,
markerClusteringSettingsSchemaLeaflet,
routeMapSettingsSchema
} from './schemes';
import { MapWidgetInterface, MapWidgetStaticInterface } from './map-widget.interface';
import { addCondition, addGroupInfo, addToSchema, initSchema, mergeSchemes } from '@core/schema-utils';
import { WidgetContext } from '@app/modules/home/models/widget-component.models';
import { getDefCenterPosition, getProviderSchema, parseWithTranslation } from './common-maps-utils';
import { getDefCenterPosition, parseWithTranslation } from './common-maps-utils';
import {
Datasource,
DatasourceData,
@ -108,39 +93,6 @@ export class MapWidgetController implements MapWidgetInterface {
settings: WidgetUnitedMapSettings;
pageLink: EntityDataPageLink;
public static dataKeySettingsSchema(): object {
return {};
}
public static getProvidersSchema(mapProvider: MapProviders, ignoreImageMap = false) {
return getProviderSchema(mapProvider, ignoreImageMap);
}
public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema {
const schema = initSchema();
addToSchema(schema, this.getProvidersSchema(mapProvider));
addGroupInfo(schema, 'Map Provider Settings');
addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, 'Common Map Settings');
addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true', ['showPolygon']));
addGroupInfo(schema, 'Polygon Settings');
addToSchema(schema, addCondition(mapCircleSchema, 'model.showCircle === true', ['showCircle']));
addGroupInfo(schema, 'Circle Settings');
if (drawRoutes) {
addToSchema(schema, routeMapSettingsSchema);
addGroupInfo(schema, 'Route Map Settings');
} else {
const clusteringSchema = mergeSchemes([markerClusteringSettingsSchema,
addCondition(markerClusteringSettingsSchemaLeaflet,
`model.useClusterMarkers === true && model.provider !== "image-map"`)]);
addToSchema(schema, clusteringSchema);
addGroupInfo(schema, 'Markers Clustering Settings');
addToSchema(schema, addCondition(editorSettingSchema, '(model.editablePolygon === true || model.draggableMarker === true)'));
addGroupInfo(schema, 'Editor settings');
}
return schema;
}
public static actionSources(): object {
return {
markerClick: {

1603
ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts

File diff suppressed because it is too large

45
ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

@ -32,30 +32,22 @@ import {
MapProviders,
WidgetUnitedTripAnimationSettings
} from '@home/components/widget/lib/maps/map-models';
import { addCondition, addGroupInfo, addToSchema, initSchema } from '@app/core/schema-utils';
import {
mapCircleSchema,
mapPolygonSchema,
pathSchema,
pointSchema,
tripAnimationSchema
} from '@home/components/widget/lib/maps/schemes';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { WidgetContext } from '@app/modules/home/models/widget-component.models';
import {
findAngle,
getProviderSchema,
getRatio,
interpolateOnLineSegment,
parseWithTranslation
} from '@home/components/widget/lib/maps/common-maps-utils';
import { FormattedData, JsonSettingsSchema, WidgetConfig } from '@shared/models/widget.models';
import { FormattedData, WidgetConfig } from '@shared/models/widget.models';
import moment from 'moment';
import {
deepClone,
formattedDataArrayFromDatasourceData, formattedDataFormDatasourceData,
formattedDataArrayFromDatasourceData,
formattedDataFormDatasourceData,
isDefined,
isUndefined, mergeFormattedData,
isUndefined,
mergeFormattedData,
parseFunction,
safeExecute
} from '@core/utils';
@ -101,23 +93,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy
useAnchors: boolean;
currentTime: number;
static getSettingsSchema(): JsonSettingsSchema {
const schema = initSchema();
addToSchema(schema, getProviderSchema(null, true));
addGroupInfo(schema, 'Map Provider Settings');
addToSchema(schema, tripAnimationSchema);
addGroupInfo(schema, 'Trip Animation Settings');
addToSchema(schema, pathSchema);
addGroupInfo(schema, 'Path Settings');
addToSchema(schema, addCondition(pointSchema, 'model.showPoints === true', ['showPoints']));
addGroupInfo(schema, 'Path Points Settings');
addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true', ['showPolygon']));
addGroupInfo(schema, 'Polygon Settings');
addToSchema(schema, addCondition(mapCircleSchema, 'model.showCircle === true', ['showCircle']));
addGroupInfo(schema, 'Circle Settings');
return schema;
}
ngOnInit(): void {
this.widgetConfig = this.ctx.widgetConfig;
this.settings = {
@ -286,10 +261,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy
}
calcLabel(points: FormattedData[]) {
const data = points[this.activeTrip.dsIndex];
const labelText: string = this.settings.useLabelFunction ?
safeExecute(this.settings.parsedLabelFunction, [data, points, data.dsIndex]) : this.settings.label;
this.label = this.sanitizer.bypassSecurityTrustHtml(parseWithTranslation.parseTemplate(labelText, data, true));
if (this.activeTrip) {
const data = points[this.activeTrip.dsIndex];
const labelText: string = this.settings.useLabelFunction ?
safeExecute(this.settings.parsedLabelFunction, [data, points, data.dsIndex]) : this.settings.label;
this.label = this.sanitizer.bypassSecurityTrustHtml(parseWithTranslation.parseTemplate(labelText, data, true));
}
}
private interpolateArray(originData: FormattedData[]): {[time: number]: FormattedData} {

Loading…
Cancel
Save