tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #2835 from vvlladd28/improvement/minor-fix 

[3.0] Improvement ui
pull/2865/head
Igor Kulikov 6 years ago
committed by GitHub
parent
02dd9ecdb9 d3dc4f73e1
commit
24ffaf26b7
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 61 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      application/src/main/data/json/system/widget_bundles/alarm_widgets.json
  2. 2
      ui-ngx/src/app/core/services/dashboard-utils.service.ts
  3. 2
      ui-ngx/src/app/core/services/resources.service.ts
  4. 4
      ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
  5. 2
      ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
  6. 3
      ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
  7. 1
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
  8. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
  9. 60
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
  10. 22
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
  11. 5
      ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.ts

4
application/src/main/data/json/system/widget_bundles/alarm_widgets.json
View File

@ -16,9 +16,9 @@
"templateHtml": "<tb-alarms-table-widget \n [ctx]=\"ctx\">\n</tb-alarms-table-widget>",
"templateCss": "",
"controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"AlarmTableSettings\",\n \"properties\": {\n \"alarmsTitle\": {\n \"title\": \"Alarms table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSelection\": {\n \"title\": \"Enable alarms selection\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSearch\": {\n \"title\": \"Enable alarms search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStatusFilter\": {\n \"title\": \"Enable alarm status filter\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayDetails\": {\n \"title\": \"Display alarm details\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowAcknowledgment\": {\n \"title\": \"Allow alarms acknowledgment\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowClear\": {\n \"title\": \"Allow alarms clear\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"-createdTime\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"alarmsTitle\",\n \"enableSelection\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableStatusFilter\",\n \"displayDetails\",\n \"allowAcknowledgment\",\n \"allowClear\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\"\n ]\n}",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"AlarmTableSettings\",\n \"properties\": {\n \"alarmsTitle\": {\n \"title\": \"Alarms table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSelection\": {\n \"title\": \"Enable alarms selection\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSearch\": {\n \"title\": \"Enable alarms search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStatusFilter\": {\n \"title\": \"Enable alarm status filter\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"displayDetails\": {\n \"title\": \"Display alarm details\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowAcknowledgment\": {\n \"title\": \"Allow alarms acknowledgment\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowClear\": {\n \"title\": \"Allow alarms clear\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"-createdTime\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"alarmsTitle\",\n \"enableSelection\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableStatusFilter\",\n \"enableStickyAction\",\n \"displayDetails\",\n \"allowAcknowledgment\",\n \"allowClear\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\"\n ]\n}",
"dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"columnWidth\": {\n \"title\": \"Column width (px or %)\",\n \"type\": \"string\",\n \"default\": \"0px\"\n },\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, alarm, filter)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"columnWidth\",\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\"\n }\n ]\n}",
"defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStatusFilter\":true},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{}}"
"defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStatusFilter\":true,\"enableStickyAction\":false},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{}}"
}
}
]

2
ui-ngx/src/app/core/services/dashboard-utils.service.ts
View File

@ -275,7 +275,7 @@ export class DashboardUtilsService {
layout.gridSettings.margin = layout.gridSettings.margins[0];
delete layout.gridSettings.margins;
}
layout.gridSettings.margin = layout.gridSettings.margin || 10;
layout.gridSettings.margin = isDefined(layout.gridSettings.margin) ? layout.gridSettings.margin : 10;
}
public setLayouts(dashboard: Dashboard, targetState: string, newLayouts: DashboardStateLayouts) {

2
ui-ngx/src/app/core/services/resources.service.ts
View File

@ -48,7 +48,7 @@ export class ResourcesService {
}
let fileType;
const match = /[.](css|less|html|htm|js)?((\?|#).*)?$/.exec(url);
const match = /[./](css|less|html|htm|js)?(([?#]).*)?$/.exec(url);
if (match !== null) {
fileType = match[1];
}

4
ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
View File

@ -196,7 +196,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
maxItemRows: 1000,
maxItemArea: 1000000,
outerMargin: true,
margin: this.margin ? this.margin : 10,
margin: isDefined(this.margin) ? this.margin : 10,
minItemCols: 1,
minItemRows: 1,
defaultItemCols: 8,
@ -495,7 +495,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
private updateLayoutOpts() {
this.gridsterOpts.minCols = this.columns ? this.columns : 24;
this.gridsterOpts.margin = this.margin ? this.margin : 10;
this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10;
}
private updateEditingOpts() {

2
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
View File

@ -84,7 +84,7 @@
[ngStyle]="cellStyle(alarm, column)">
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">

3
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
View File

@ -95,6 +95,7 @@ interface AlarmsTableWidgetSettings extends TableWidgetSettings {
alarmsTitle: string;
enableSelection: boolean;
enableStatusFilter: boolean;
enableStickyAction: boolean;
displayDetails: boolean;
allowAcknowledgment: boolean;
allowClear: boolean;
@ -122,6 +123,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
public enableSelection = true;
public displayPagination = true;
public enableStickyAction = false;
public pageSizeOptions;
public pageLink: PageLink;
public sortOrderProperty: string;
@ -291,6 +293,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
this.searchAction.show = isDefined(this.settings.enableSearch) ? this.settings.enableSearch : true;
this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : false;
this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true;
this.statusFilterAction.show = isDefined(this.settings.enableStatusFilter) ? this.settings.enableStatusFilter : true;

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

@ -48,6 +48,7 @@ export type MapSettings = {
mapImageUrl?: string;
provider?: MapProviders;
credentials?: any; // declare credentials format
gmApiKey?: string;
defaultCenterPosition?: LatLngTuple;
markerClusteringSetting?;
useDefaultCenterPosition?: boolean;

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

@ -76,7 +76,7 @@ export class MapWidgetController implements MapWidgetInterface {
return;
}
parseWithTranslation.setTranslate(this.translate);
this.map = new MapClass($element, this.settings);
this.map = new MapClass($element, this.settings, this.ctx.$injector);
this.map.setImageAlias(this.subscribeForImageAttribute());
this.map.saveMarkerLocation = this.setMarkerLocation;
}

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

@ -19,39 +19,45 @@ import L from 'leaflet';
import LeafletMap from '../leaflet-map';
import { UnitedMapSettings } from '../map-models';
import 'leaflet.gridlayer.googlemutant';
import { ResourcesService } from '@core/services/resources.service';
import { Injector } from '@angular/core';
let googleLoaded = false;
const gmGlobals: GmGlobal = {};
interface GmGlobal {
[key: string]: boolean;
}
export class GoogleMap extends LeafletMap {
constructor($container, options: UnitedMapSettings) {
private resource: ResourcesService;
super($container, options);
this.loadGoogle(() => {
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
(L.gridLayer as any).googleMutant({
type: options?.gmDefaultMapType || 'roadmap'
}).addTo(map);
super.setMap(map);
}, options.credentials.apiKey);
super.initSettings(options);
}
constructor($container, options: UnitedMapSettings, private injector: Injector) {
super($container, options);
this.resource = injector.get(ResourcesService);
this.loadGoogle(() => {
const map = L.map($container, {attributionControl: false}).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
(L.gridLayer as any).googleMutant({
type: options?.gmDefaultMapType || 'roadmap'
}).addTo(map);
super.setMap(map);
}, options.gmApiKey);
super.initSettings(options);
}
private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
if (googleLoaded) {
callback()
}
else {
googleLoaded = true;
const script = document.createElement('script');
script.onload = () => {
callback();
}
script.onerror = () => {
googleLoaded = false;
}
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
document.getElementsByTagName('head')[0].appendChild(script);
private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
if (gmGlobals[apiKey]) {
callback()
} else {
this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe(
() => {
gmGlobals[apiKey] = true;
callback();
},
(error) => {
gmGlobals[apiKey] = false;
console.error(`Google map api load failed!`, error);
}
);
}
}
}

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

@ -20,13 +20,17 @@ import LeafletMap from '../leaflet-map';
import { UnitedMapSettings } from '../map-models';
export class TencentMap extends LeafletMap {
constructor($container, options: UnitedMapSettings) {
super($container, options);
const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
const txLayer = L.tileLayer(txUrl, { subdomains: '0123', tms: true }).addTo(map);
txLayer.addTo(map);
super.setMap(map);
super.initSettings(options);
}
constructor($container, options: UnitedMapSettings) {
super($container, options);
const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
const txLayer = L.tileLayer(txUrl, {
subdomains: '0123',
tms: true,
attribution: '&copy;2020 Tencent - GS(2018)2236号- Data&copy; NavInfo'
}).addTo(map);
txLayer.addTo(map);
super.setMap(map);
super.initSettings(options);
}
}

5
ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.ts
View File

@ -25,7 +25,7 @@ import { DialogComponent } from '@app/shared/components/dialog.component';
import { UtilsService } from '@core/services/utils.service';
import { TranslateService } from '@ngx-translate/core';
import { DashboardSettings, GridSettings, StateControllerId } from '@app/shared/models/dashboard.models';
import { isUndefined } from '@core/utils';
import { isDefined, isUndefined } from '@core/utils';
import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
import { StatesControllerService } from './states/states-controller.service';
@ -96,7 +96,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
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: [this.gridSettings.margin || 10, [Validators.required, Validators.min(0), Validators.max(50)]],
margin: [isDefined(this.gridSettings.margin) ? this.gridSettings.margin : 10,
[Validators.required, Validators.min(0), Validators.max(50)]],
autoFillHeight: [isUndefined(this.gridSettings.autoFillHeight) ? false : this.gridSettings.autoFillHeight, []],
backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []],
backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []],

Write Preview
Loading…
Cancel
Save