dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lint anf typed leaflet AddMarker

Browse Source
This commit is contained in:
Adsumus 2020-03-18 13:21:46 +02:00
parent 700a6fa1ff
commit 825d920e35
24 changed files with 3954 additions and 3905 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5732
ui-ngx/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
ui-ngx/proxy.conf.js
View File

@ -18,7 +18,7 @@ const ruleNodeUiforwardPort = 8080;
const PROXY_CONFIG = {
"/api": {
"target": "http://localhost:8080",
"target": "http://64.225.65.220:8080",
"secure": false,
},
"/static/rulenode": {
@ -26,7 +26,7 @@ const PROXY_CONFIG = {
"secure": false,
},
"/api/ws": {
"target": "ws://localhost:8080",
"target": "ws://64.225.65.220:8080",
"ws": true,
},
};

8
ui-ngx/src/app/core/schema-utils.ts
View File

@ -18,7 +18,7 @@
export function initSchema() {
return {
schema: {
type: "object",
type: 'object',
properties: {},
required: []
},
@ -29,8 +29,8 @@ export function initSchema() {
export function addGroupInfo(schema, title: string) {
schema.groupInfoes.push({
"formIndex": schema.groupInfoes?.length || 0,
"GroupTitle": title
formIndex: schema.groupInfoes?.length || 0,
GroupTitle: title
});
}
@ -66,7 +66,7 @@ export function addCondition(schema, condition: String) {
if (typeof element === 'string') {
return {
key: element,
condition: condition
condition
}
}
if (typeof element == 'object') {

28
ui-ngx/src/app/core/utils.ts
View File

@ -222,8 +222,8 @@ function scrollParents(node: Node): Node[] {
}
function hashCode(str) {
var hash = 0;
var i, char;
let hash = 0;
let i, char;
if (str.length == 0) return hash;
for (i = 0; i < str.length; i++) {
char = str.charCodeAt(i);
@ -450,21 +450,22 @@ export function aspectCache(imageUrl: string): Observable<number> {
export function parseArray(input: any[]): any[] {
let alliases: any = _(input).groupBy(el => el?.datasource?.aliasName).values().value();
const alliases: any = _(input).groupBy(el => el?.datasource?.aliasName).values().value();
return alliases.map((alliasArray, dsIndex) =>
alliasArray[0].data.map((el, i) => {
const obj = {
aliasName: alliasArray[0]?.datasource?.aliasName,
entityName: alliasArray[0]?.datasource?.entityName,
$datasource: alliasArray[0]?.datasource,
dsIndex: dsIndex,
time: el[0]
dsIndex,
time: el[0],
deviceType: null
};
alliasArray.forEach(el => {
obj[el?.dataKey?.label] = el?.data[i][1];
obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
if (el?.dataKey?.label == 'type') {
obj['deviceType'] = el?.data[0][1];
obj.deviceType = el?.data[0][1];
}
});
return obj;
@ -478,13 +479,14 @@ export function parseData(input: any[]): any[] {
aliasName: alliasArray[0]?.datasource?.aliasName,
entityName: alliasArray[0]?.datasource?.entityName,
$datasource: alliasArray[0]?.datasource,
dsIndex: i
dsIndex: i,
deviceType: null
};
alliasArray.forEach(el => {
obj[el?.dataKey?.label] = el?.data[0][1];
obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
if (el?.dataKey?.label == 'type') {
obj['deviceType'] = el?.data[0][1];
obj.deviceType = el?.data[0][1];
}
});
return obj;
@ -493,7 +495,7 @@ export function parseData(input: any[]): any[] {
export function safeExecute(func: Function, params = []) {
let res = null;
if (func && typeof (func) == "function") {
if (func && typeof (func) == 'function') {
try {
res = func(...params);
}
@ -523,17 +525,17 @@ export function parseTemplate(template: string, data: object) {
let res = '';
try {
let variables = '';
let expressions = template
const expressions = template
.match(/\{(.*?)\}/g) // find expressions
.map(exp => exp.replace(/{|}/g, '')) // remove brackets
.map(exp => exp.replace(/{|}/g, '')) // remove brackets
.map(exp => exp.split(':'))
.filter(arr => !!arr[1]) //filter expressions without format
.filter(arr => !!arr[1]) // filter expressions without format
.reduce((res, current) => {
res[current[0]] = current[1];
return res;
}, {});
for (let key in data) {
for (const key in data) {
if (!key.includes('|'))
variables += `let ${key} = '${expressions[key] ? padValue(data[key], +expressions[key]) : data[key]}';`;
}

6
ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
View File

@ -243,9 +243,9 @@ export class CanvasDigitalGauge extends BaseGauge {
options.neonColorsRange = [];
}
for (let i = 0; i < options.levelColors.length; i++) {
let levelColor: any = options.levelColors[i];
const levelColor: any = options.levelColors[i];
if (levelColor !== null) {
let percentage = isColorProperty ? inc * i : CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
const percentage = isColorProperty ? inc * i : CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
let tColor = tinycolor(isColorProperty ? levelColor : levelColor.color);
options.colorsRange.push({
pct: percentage,
@ -274,7 +274,7 @@ export class CanvasDigitalGauge extends BaseGauge {
}
static normalizeValue (value: number, min: number, max: number): number {
let normalValue = (value - min) / (max - min);
const normalValue = (value - min) / (max - min);
if (normalValue <= 0) {
return 0;
}

40
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
View File

@ -28,8 +28,8 @@ import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/
import { DatePipe } from '@angular/common';
import {DataKey, Datasource, DatasourceType, JsonSettingsSchema, widgetType} from '@shared/models/widget.models';
import GenericOptions = CanvasGauges.GenericOptions;
import {IWidgetSubscription, WidgetSubscriptionOptions} from "@core/api/widget-api.models";
import {DataKeyType} from "@shared/models/telemetry/telemetry.models";
import {IWidgetSubscription, WidgetSubscriptionOptions} from '@core/api/widget-api.models';
import {DataKeyType} from '@shared/models/telemetry/telemetry.models';
const tinycolor = tinycolor_;
@ -202,55 +202,55 @@ export class TbCanvasDigitalGauge {
}
settingLevelColorsSubscribe(options) {
let levelColorsDatasource: Datasource[] = [];
let predefineLevelColors: colorLevelSetting[] = [];
const levelColorsDatasource: Datasource[] = [];
const predefineLevelColors: colorLevelSetting[] = [];
function setLevelColor(levelSetting, color) {
if (levelSetting.valueSource === 'predefinedValue' && isFinite(levelSetting.value)) {
predefineLevelColors.push({
value: levelSetting.value,
color: color
color
})
} else if (levelSetting.entityAlias && levelSetting.attribute) {
let entityAliasId = this.ctx.aliasController.getEntityAliasId(levelSetting.entityAlias);
const entityAliasId = this.ctx.aliasController.getEntityAliasId(levelSetting.entityAlias);
if (!entityAliasId) {
return;
}
let datasource = levelColorsDatasource.find((datasource) => {
const datasource = levelColorsDatasource.find((datasource) => {
return datasource.entityAliasId === entityAliasId;
});
let dataKey: DataKey = {
const dataKey: DataKey = {
type: DataKeyType.attribute,
name: levelSetting.attribute,
label: levelSetting.attribute,
settings: [{
color: color,
color,
index: predefineLevelColors.length
}],
_hash: Math.random()
};
if (datasource) {
let findDataKey = datasource.dataKeys.find((dataKey) => {
const findDataKey = datasource.dataKeys.find((dataKey) => {
return dataKey.name === levelSetting.attribute;
});
if (findDataKey) {
findDataKey.settings.push({
color: color,
color,
index: predefineLevelColors.length
});
} else {
datasource.dataKeys.push(dataKey)
}
} else {
let datasource: Datasource = {
const datasource: Datasource = {
type: DatasourceType.entity,
name: levelSetting.entityAlias,
aliasName: levelSetting.entityAlias,
entityAliasId: entityAliasId,
entityAliasId,
dataKeys: [dataKey]
};
levelColorsDatasource.push(datasource);
@ -261,7 +261,7 @@ export class TbCanvasDigitalGauge {
}
for (let i = 0; i < options.length; i++) {
let levelColor = options[i];
const levelColor = options[i];
if (levelColor.from) {
setLevelColor.call(this, levelColor.from, levelColor.color);
}
@ -282,20 +282,20 @@ export class TbCanvasDigitalGauge {
}
subscribeLevelColorsAttributes(datasources: Datasource[]) {
let TbCanvasDigitalGauge = this;
let levelColorsSourcesSubscriptionOptions: WidgetSubscriptionOptions = {
datasources: datasources,
const TbCanvasDigitalGauge = this;
const levelColorsSourcesSubscriptionOptions: WidgetSubscriptionOptions = {
datasources,
useDashboardTimewindow: false,
type: widgetType.latest,
callbacks: {
onDataUpdated: (subscription) => {
for (let i = 0; i < subscription.data.length; i++) {
let keyData = subscription.data[i];
const keyData = subscription.data[i];
if (keyData && keyData.data && keyData.data[0]) {
let attrValue = keyData.data[0][1];
const attrValue = keyData.data[0][1];
if (isFinite(attrValue)) {
for (let i = 0; i < keyData.dataKey.settings.length; i++) {
let setting = keyData.dataKey.settings[i];
const setting = keyData.dataKey.settings[i];
this.localSettings.levelColors[setting.index] = {
value: attrValue,
color: setting.color

12
ui-ngx/src/app/modules/home/components/widget/lib/maps/add-marker.ts Normal file
View File

@ -0,0 +1,12 @@
import * as L from 'leaflet'
declare module 'leaflet' {
namespace Control {
class AddMarker extends L.Control { }
}
namespace control {
function addMarker(options): Control.AddMarker;
}
}

35
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View File

@ -14,7 +14,8 @@
/// limitations under the License.
///
import * as L from 'leaflet';
import L from 'leaflet';
import './add-marker';
import 'leaflet-providers';
import 'leaflet.markercluster/dist/MarkerCluster.css'
@ -67,34 +68,34 @@ export default abstract class LeafletMap {
addMarkerControl() {
if (this.options.draggebleMarker)
L.Control['AddMarker'] = L.Control.extend({
onAdd: function (map) {
let img = L.DomUtil.create('img') as any;
L.Control.AddMarker = L.Control.extend({
onAdd (map) {
const img = L.DomUtil.create('img') as any;
img.src = `assets/add_location.svg`;
img.style.width = '32px';
img.style.height = '32px';
img.onclick = this.dragMarker;
return img;
},
addHooks: function () {
addHooks () {
L.DomEvent.on(window as any, 'onclick', this.enableDragMode, this);
},
onRemove: function (map) {
onRemove (map) {
},
dragMarker: ($event) => {
this.dragMode = !this.dragMode;
}
});
} as any);
L.control['addmarker'] = function (opts) {
return new L.Control['AddMarker'](opts);
L.control.addMarker = function (opts) {
return new L.Control.AddMarker(opts);
}
L.control['addmarker']({ position: 'topright' }).addTo(this.map);
L.control.addMarker({ position: 'topright' }).addTo(this.map);
}
inited() {///!!!!
/*inited() {/// !!!!
return !!this.map;
}
}*/
public setMap(map: L.Map) {
this.map = map;
@ -158,7 +159,7 @@ export default abstract class LeafletMap {
}
}
//Markers
// Markers
updateMarkers(markersData) {
markersData.forEach(data => {
if (data.rotationAngle) {
@ -188,7 +189,7 @@ export default abstract class LeafletMap {
private updateMarker(key, data, dataSources, settings: MarkerSettings) {
const marker: Marker = this.markers.get(key);
let location = this.convertPosition(data)
const location = this.convertPosition(data)
if (!location.equals(marker.location)) {
marker.updateMarkerPosition(location);
}
@ -203,12 +204,12 @@ export default abstract class LeafletMap {
}
//polyline
// polyline
updatePolylines(polyData: Array<Array<any>>) {
polyData.forEach(data => {
if (data.length) {
let dataSource = polyData.map(arr => arr[0]);
const dataSource = polyData.map(arr => arr[0]);
if (this.poly) {
this.updatePolyline(data, dataSource, this.options);
}
@ -237,7 +238,7 @@ export default abstract class LeafletMap {
});
}
//polygon
// polygon
updatePolygons(polyData: Array<Array<any>>) {
polyData.forEach((data: any) => {

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

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { MapProviders, MapOptions } from "./map-models";
import { MapProviders, MapOptions } from './map-models';
import LeafletMap from './leaflet-map';
import {
openstreetMapSettingsSchema,
@ -39,12 +39,6 @@ import { AttributeService } from '@app/core/public-api';
export class MapWidgetController implements MapWidgetInterface {
map: LeafletMap;
provider: MapProviders;
schema;
data;
settings;
constructor(public mapProvider: MapProviders, private drawRoutes, public ctx: WidgetContext, $element) {
if (this.map) {
this.map.map.remove();
@ -57,7 +51,7 @@ export class MapWidgetController implements MapWidgetInterface {
}
this.settings = this.initSettings(ctx.settings);
let MapClass = providerSets[this.provider]?.MapClass;
const MapClass = providerSets[this.provider]?.MapClass;
if (!MapClass) {
return;
}
@ -65,13 +59,64 @@ export class MapWidgetController implements MapWidgetInterface {
this.map.saveMarkerLocation = this.setMarkerLocation;
}
map: LeafletMap;
provider: MapProviders;
schema;
data;
settings;
public static dataKeySettingsSchema(): Object {
return {};
}
public static getProvidersSchema() {
return mergeSchemes([mapProviderSchema,
...Object.values(providerSets)?.map(
setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]);
}
public static settingsSchema(mapProvider, drawRoutes): Object {
const schema = initSchema();
addToSchema(schema, this.getProvidersSchema());
addGroupInfo(schema, 'Map Provider Settings');
addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, 'Common Map Settings');
if (drawRoutes) {
addToSchema(schema, routeMapSettingsSchema);
addGroupInfo(schema, 'Route Map Settings');
} else if (mapProvider !== 'image-map') {
const clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema])
addToSchema(schema, clusteringSchema);
addGroupInfo(schema, 'Markers Clustering Settings');
}
return schema;
}
public static actionSources(): Object {
return {
markerClick: {
name: 'widget-action.marker-click',
multiple: false
},
polygonClick: {
name: 'widget-action.polygon-click',
multiple: false
},
tooltipAction: {
name: 'widget-action.tooltip-tag-action',
multiple: true
}
};
}
onInit() {
}
setMarkerLocation = (e) => {
let s = this.ctx.$injector.get(AttributeService);
console.log("MapWidgetController -> setMarkerLocation -> s", s, s.saveEntityAttributes)
let attributeService = this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('attributeService'));
const s = this.ctx.$injector.get(AttributeService);
console.log('MapWidgetController -> setMarkerLocation -> s', s, s.saveEntityAttributes)
const attributeService = this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('attributeService'));
forkJoin(
this.data.filter(data => !!e[data.dataKey.name])
.map(data => {
@ -88,7 +133,7 @@ export class MapWidgetController implements MapWidgetInterface {
}]
);
})).subscribe(res => {
console.log("MapWidgetController -> setMarkerLocation -> res", res)
console.log('MapWidgetController -> setMarkerLocation -> res', res)
});
}
@ -114,7 +159,7 @@ export class MapWidgetController implements MapWidgetInterface {
markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
labelColor: this.ctx.widgetConfig.color,
tooltipPattern: settings.tooltipPattern ||
"<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
'<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' + settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}',
defaultCenterPosition: getDefCenterPosition(settings?.defaultCenterPosition),
useDraggableMarker: true,
currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? {
@ -138,7 +183,7 @@ export class MapWidgetController implements MapWidgetInterface {
}
onResize() {
this.map.onResize();//not work
this.map.onResize();// not work
}
resize() {
@ -146,51 +191,6 @@ export class MapWidgetController implements MapWidgetInterface {
this.map.onResize();
}
public static dataKeySettingsSchema(): Object {
return {};
}
public static getProvidersSchema() {
return mergeSchemes([mapProviderSchema,
...Object.values(providerSets)?.map(
setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]);
}
public static settingsSchema(mapProvider, drawRoutes): Object {
let schema = initSchema();
addToSchema(schema, this.getProvidersSchema());
addGroupInfo(schema, "Map Provider Settings");
addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, "Common Map Settings");
if (drawRoutes) {
addToSchema(schema, routeMapSettingsSchema);
addGroupInfo(schema, "Route Map Settings");
} else if (mapProvider !== 'image-map') {
let clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema])
addToSchema(schema, clusteringSchema);
addGroupInfo(schema, "Markers Clustering Settings");
}
return schema;
}
public static actionSources(): Object {
return {
'markerClick': {
name: 'widget-action.marker-click',
multiple: false
},
'polygonClick': {
name: 'widget-action.polygon-click',
multiple: false
},
'tooltipAction': {
name: 'widget-action.tooltip-tag-action',
multiple: true
}
};
}
onDestroy() {
}
}
@ -202,27 +202,27 @@ const providerSets = {
'openstreet-map': {
MapClass: OpenStreetMap,
schema: openstreetMapSettingsSchema,
name: "openstreet-map",
name: 'openstreet-map',
},
'tencent-map': {
MapClass: TencentMap,
schema: tencentMapSettingsSchema,
name: "tencent-map"
name: 'tencent-map'
},
'google-map': {
MapClass: GoogleMap,
schema: googleMapSettingsSchema,
name: "google-map"
name: 'google-map'
},
'here': {
here: {
MapClass: HEREMap,
schema: hereMapSettingsSchema,
name: "here"
name: 'here'
},
'image-map': {
MapClass: ImageMap,
schema: imageMapSettingsSchema,
name: "image-map"
name: 'image-map'
}
}
@ -235,16 +235,16 @@ const defaultSettings = {
lngKeyName: 'longitude',
polygonKeyName: 'coordinates',
showLabel: false,
label: "${entityName}",
label: '${entityName}',
showTooltip: false,
useDefaultCenterPosition: false,
showTooltipAction: "click",
showTooltipAction: 'click',
autocloseTooltip: false,
showPolygon: true,
labelColor: '#000000',
color: "#FE7569",
polygonColor: "#0000ff",
polygonStrokeColor: "#fe0001",
color: '#FE7569',
polygonColor: '#0000ff',
polygonStrokeColor: '#fe0001',
polygonOpacity: 0.5,
polygonStrokeOpacity: 1,
polygonStrokeWeight: 1,

22
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
View File

@ -30,7 +30,7 @@ export class Marker {
dataSources;
constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) {
//this.map = map;
// this.map = map;
this.location = location;
this.setDataSources(data, dataSources);
this.leafletMarker = L.marker(location, {
@ -108,7 +108,7 @@ export class Marker {
return;
}
let currentImage = this.settings.useMarkerImageFunction ?
const currentImage = this.settings.useMarkerImageFunction ?
safeExecute(this.settings.markerImageFunction,
[this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage;
@ -117,8 +117,8 @@ export class Marker {
aspectCache(currentImage.url).subscribe(
(aspect) => {
if (aspect) {
var width;
var height;
let width;
let height;
if (aspect > 1) {
width = currentImage.size;
height = currentImage.size / aspect;
@ -126,15 +126,15 @@ export class Marker {
width = currentImage.size * aspect;
height = currentImage.size;
}
var icon = L.icon({
const icon = L.icon({
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [width / 2, height],
popupAnchor: [0, -height]
});
var iconInfo = {
const iconInfo = {
size: [width, height],
icon: icon
icon
};
onMarkerIconReady(iconInfo);
} else {
@ -148,8 +148,8 @@ export class Marker {
}
createDefaultMarkerIcon(color, onMarkerIconReady) {
var pinColor = color.substr(1);
var icon = L.icon({
const pinColor = color.substr(1);
const icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34],
iconAnchor: [10, 34],
@ -158,9 +158,9 @@ export class Marker {
shadowSize: [40, 37],
shadowAnchor: [12, 35]
});
var iconInfo = {
const iconInfo = {
size: [21, 34],
icon: icon
icon
};
onMarkerIconReady(iconInfo);
}

6
ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
View File

@ -22,7 +22,7 @@ export class Polygon {
leafletPoly: L.Polygon;
tooltip;
constructor(public map, coordinates, dataSources, settings, onClickListener?) {
constructor(public map, coordinates, dataSources, settings, onClickListener?) {
this.leafletPoly = L.polygon(coordinates, {
fill: true,
fillColor: settings.polygonColor,
@ -45,10 +45,10 @@ export class Polygon {
}
updatePolygonColor(settings, color) {
let style = {
const style = {
fill: true,
fillColor: color,
color: color,
color,
weight: settings.polygonStrokeWeight,
fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity

6
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
View File

@ -20,7 +20,7 @@ import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models';
import 'leaflet.gridlayer.googlemutant';
var googleLoaded = false;
let googleLoaded = false;
export class GoogleMap extends LeafletMap {
@ -29,7 +29,7 @@ export class GoogleMap extends LeafletMap {
super($container, options);
this.loadGoogle(() => {
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
var roads = (L.gridLayer as any).googleMutant({
const roads = (L.gridLayer as any).googleMutant({
type: options?.gmDefaultMapType || 'roadmap'
}).addTo(map);
super.setMap(map);
@ -43,7 +43,7 @@ export class GoogleMap extends LeafletMap {
}
else {
googleLoaded = true;
let script = document.createElement('script');
const script = document.createElement('script');
script.onload = () => {
callback();
}

8
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
View File

@ -20,15 +20,15 @@ import { MapOptions } from '../map-models';
export class HEREMap extends LeafletMap {
constructor($container, options: MapOptions) {
console.log("HEREMap -> constructor -> options", options)
console.log('HEREMap -> constructor -> options', options)
const defaultCredentials =
{
app_id: "AhM6TzD9ThyK78CT3ptx",
app_code: "p6NPiITB3Vv0GMUFnkLOOg"
app_id: 'AhM6TzD9ThyK78CT3ptx',
app_code: 'p6NPiITB3Vv0GMUFnkLOOg'
}
super($container, options);
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
var tileLayer = (L.tileLayer as any).provider(options.mapProvider || "HERE.normalDay", options.credentials || defaultCredentials);
const tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'HERE.normalDay', options.credentials || defaultCredentials);
tileLayer.addTo(map);
super.setMap(map);
super.initSettings(options);

8
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
View File

@ -19,7 +19,7 @@ import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models';
import { aspectCache } from '@app/core/utils';
const maxZoom = 4;//?
const maxZoom = 4;// ?
export class ImageMap extends LeafletMap {
@ -102,12 +102,12 @@ export class ImageMap extends LeafletMap {
initMap(updateImage?) {
if (!this.map && this.aspect > 0) {
var center = this.pointToLatLng(this.width / 2, this.height / 2);
const center = this.pointToLatLng(this.width / 2, this.height / 2);
this.map = L.map(this.$container, {
minZoom: 1,
maxZoom: maxZoom,
maxZoom,
scrollWheelZoom: !this.options.disableScrollZooming,
center: center,
center,
zoom: 1,
crs: L.CRS.Simple,
attributionControl: false

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
View File

@ -22,7 +22,7 @@ export class OpenStreetMap extends LeafletMap {
constructor($container, options: MapOptions) {
super($container, options);
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
var tileLayer = (L.tileLayer as any).provider("OpenStreetMap.Mapnik");
const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik');
tileLayer.addTo(map);
super.setMap(map);
super.initSettings(options);

1726
ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
View File

File diff suppressed because it is too large Load Diff

36
ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
View File

@ -16,7 +16,7 @@
import L from 'leaflet';
import _ from 'lodash';
import tinycolor from "tinycolor2";
import tinycolor from 'tinycolor2';
import { interpolateOnPointSegment } from 'leaflet-geometryutil';
import { Component, OnInit, Input, ViewChild, AfterViewInit, ChangeDetectorRef, SecurityContext } from '@angular/core';
@ -27,6 +27,7 @@ import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils';
import { tripAnimationSchema } from '../lib/maps/schemes';
import { DomSanitizer } from '@angular/platform-browser';
import { WidgetConfig } from '@app/shared/public-api';
import { WidgetContext } from '@app/modules/home/models/widget-component.models';
@Component({
@ -36,7 +37,9 @@ import { WidgetConfig } from '@app/shared/public-api';
})
export class TripAnimationComponent implements OnInit, AfterViewInit {
@Input() ctx: WidgetConfig;
constructor(private cd: ChangeDetectorRef,private sanitizer: DomSanitizer) { }
@Input() ctx: WidgetContext;
@ViewChild('map') mapContainer;
@ -51,7 +54,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
visibleTooltip = false;
activeTrip;
constructor(private cd: ChangeDetectorRef,private sanitizer: DomSanitizer) { }
static getSettingsSchema() {
const schema = initSchema();
addToSchema(schema, TbMapWidgetV2.getProvidersSchema());
addGroupInfo(schema, 'Map Provider Settings');
addToSchema(schema, tripAnimationSchema);
addGroupInfo(schema, 'Trip Animation Settings');
return schema;
}
ngOnInit(): void {
this.widgetConfig = this.ctx.widgetConfig;
@ -63,7 +73,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
rotationAngle: 0
}
this.settings = { ...settings, ...this.ctx.settings };
let subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
if (subscription) subscription.callbacks.onDataUpdated = (updated) => {
this.historicalData = parseArray(this.ctx.data);
this.activeTrip = this.historicalData[0][0];
@ -75,7 +85,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
}
ngAfterViewInit() {
let ctxCopy = _.cloneDeep(this.ctx);
const ctxCopy: WidgetContext = _.cloneDeep(this.ctx);
ctxCopy.settings.showLabel = false;
ctxCopy.settings.showTooltip = false;
this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, ctxCopy, this.mapContainer.nativeElement);
@ -104,8 +114,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
showHideTooltip() {
console.log(this.activeTrip);
let tooltipText: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction) :
// this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip))
const tooltipText: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction) :
// this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip))
this.visibleTooltip = !this.visibleTooltip;
}
@ -141,16 +151,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
j++;
}
return result;
};
static getSettingsSchema() {
let schema = initSchema();
addToSchema(schema, TbMapWidgetV2.getProvidersSchema());
addGroupInfo(schema, "Map Provider Settings");
addToSchema(schema, tripAnimationSchema);
addGroupInfo(schema, "Trip Animation Settings");
return schema;
}
}
}}
export let TbTripAnimationWidget = TripAnimationComponent;

14
ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
View File

@ -14,13 +14,13 @@
/// limitations under the License.
///
import {Component, Inject, OnInit} from "@angular/core";
import {DialogComponent} from "@shared/components/dialog.component";
import {Store} from "@ngrx/store";
import {AppState} from "@core/core.state";
import {Router} from "@angular/router";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {FormBuilder, FormGroup} from "@angular/forms";
import {Component, Inject, OnInit} from '@angular/core';
import {DialogComponent} from '@shared/components/dialog.component';
import {Store} from '@ngrx/store';
import {AppState} from '@core/core.state';
import {Router} from '@angular/router';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {FormBuilder, FormGroup} from '@angular/forms';
export interface JsonObjectEdittDialogData {
jsonValue: Object;

6
ui-ngx/src/app/shared/components/directives/tb-json-to-string.directive.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import {Directive, ElementRef, forwardRef, HostListener, Renderer2, SkipSelf} from "@angular/core";
import {Directive, ElementRef, forwardRef, HostListener, Renderer2, SkipSelf} from '@angular/core';
import {
ControlValueAccessor,
FormControl, FormGroupDirective,
@ -22,8 +22,8 @@ import {
NG_VALUE_ACCESSOR, NgForm,
ValidationErrors,
Validator
} from "@angular/forms";
import {ErrorStateMatcher} from "@angular/material/core";
} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
@Directive({
selector: '[tb-json-to-string]',

8
ui-ngx/src/app/shared/components/value-input.component.ts
View File

@ -17,12 +17,12 @@
import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms';
import { ValueType, valueTypesMap } from '@shared/models/constants';
import { isObject } from "@core/utils";
import { MatDialog } from "@angular/material/dialog";
import { isObject } from '@core/utils';
import { MatDialog } from '@angular/material/dialog';
import {
JsonObjectEditDialogComponent,
JsonObjectEdittDialogData
} from "@shared/components/dialog/json-object-edit-dialog.component";
} from '@shared/components/dialog/json-object-edit-dialog.component';
@Component({
selector: 'tb-value-input',
@ -79,7 +79,7 @@ export class ValueInputComponent implements OnInit, ControlValueAccessor {
(res) => {
if (res) {
this.modelValue = res;
this.inputForm.control.patchValue({'value': this.modelValue});
this.inputForm.control.patchValue({value: this.modelValue});
}
}
);

2
ui-ngx/src/app/shared/pipe/tbJson.pipe.ts
View File

@ -15,7 +15,7 @@
///
import {Pipe, PipeTransform} from '@angular/core';
import {isObject, isNumber} from "@core/utils";
import {isObject, isNumber} from '@core/utils';
@Pipe({name: 'tbJson'})
export class TbJsonPipe implements PipeTransform {

2
ui-ngx/src/app/shared/pipe/template.pipe.ts
View File

@ -20,7 +20,7 @@ import { parseTemplate } from '@app/core/utils';
@Pipe({ name: 'tbParseTemplate' })
export class TbTemplatePipe implements PipeTransform {
transform(template, data): string {
console.log("TbTemplatePipe -> transform -> template, data", template, data)
console.log('TbTemplatePipe -> transform -> template, data', template, data)
return parseTemplate(template, data);
}
}

6
ui-ngx/src/app/shared/shared.module.ts
View File

@ -104,7 +104,7 @@ import { TbErrorComponent } from '@shared/components/tb-error.component';
import { EntityTypeListComponent } from '@shared/components/entity/entity-type-list.component';
import { EntitySubTypeListComponent } from '@shared/components/entity/entity-subtype-list.component';
import { TruncatePipe } from '@shared/pipe/truncate.pipe';
import { TbJsonPipe } from "@shared/pipe/tbJson.pipe";
import { TbJsonPipe } from '@shared/pipe/tbJson.pipe';
import { ColorPickerDialogComponent } from '@shared/components/dialog/color-picker-dialog.component';
import { MatChipDraggableDirective } from '@shared/components/mat-chip-draggable.directive';
import { ColorInputComponent } from '@shared/components/color-input.component';
@ -125,8 +125,8 @@ import { TbCheatSheetComponent } from '@shared/components/cheatsheet.component';
import { TbHotkeysDirective } from '@shared/components/hotkeys.directive';
import { NavTreeComponent } from '@shared/components/nav-tree.component';
import { LedLightComponent } from '@shared/components/led-light.component';
import { TbJsonToStringDirective } from "@shared/components/directives/tb-json-to-string.directive";
import { JsonObjectEditDialogComponent } from "@shared/components/dialog/json-object-edit-dialog.component";
import { TbJsonToStringDirective } from '@shared/components/directives/tb-json-to-string.directive';
import { JsonObjectEditDialogComponent } from '@shared/components/dialog/json-object-edit-dialog.component';
import { HistorySelectorComponent } from './components/time/history-selector/history-selector.component';
import { TbTemplatePipe } from './pipe/public-api';

2
ui-ngx/src/polyfills.ts
View File

@ -94,7 +94,7 @@ import { TbAnalogueLinearGauge } from '@home/components/widget/lib/analogue-line
import { TbCanvasDigitalGauge } from '@home/components/widget/lib/digital-gauge';
import { TbMapWidgetV2 } from '@home/components/widget/lib/maps/map-widget2';
import { TbTripAnimationWidget } from '@app/modules/home/components/widget/trip-animation/trip-animation.component';
import * as tinycolor_ from 'tinycolor2';
const tinycolor = tinycolor_;