简柏林 / thingskit · Commits

Commit 24ffaf26b74a14ce900afd9299943d3a3d243168

Authored by Igor Kulikov
Committed by GitHub
2 parents 02dd9ecd d3dc4f73

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

[3.0] Improvement ui
Inline Side-by-side
Showing 11 changed files with 61 additions and 46 deletions
... ... @@ -16,9 +16,9 @@
16 16 "templateHtml": "<tb-alarms-table-widget \n [ctx]=\"ctx\">\n</tb-alarms-table-widget>",
17 17 "templateCss": "",
18 18 "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",
19   - "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}",
  19 + "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}",
20 20 "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}",
21   - "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\":{}}"
  21 + "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\":{}}"
22 22 }
23 23 }
24 24 ]
... ...
... ... @@ -275,7 +275,7 @@ export class DashboardUtilsService {
275 275 layout.gridSettings.margin = layout.gridSettings.margins[0];
276 276 delete layout.gridSettings.margins;
277 277 }
278   - layout.gridSettings.margin = layout.gridSettings.margin || 10;
  278 + layout.gridSettings.margin = isDefined(layout.gridSettings.margin) ? layout.gridSettings.margin : 10;
279 279 }
280 280
281 281 public setLayouts(dashboard: Dashboard, targetState: string, newLayouts: DashboardStateLayouts) {
... ...
... ... @@ -48,7 +48,7 @@ export class ResourcesService {
48 48 }
49 49
50 50 let fileType;
51   - const match = /[.](css|less|html|htm|js)?((\?|#).*)?$/.exec(url);
  51 + const match = /[./](css|less|html|htm|js)?(([?#]).*)?$/.exec(url);
52 52 if (match !== null) {
53 53 fileType = match[1];
54 54 }
... ...
... ... @@ -196,7 +196,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
196 196 maxItemRows: 1000,
197 197 maxItemArea: 1000000,
198 198 outerMargin: true,
199   - margin: this.margin ? this.margin : 10,
  199 + margin: isDefined(this.margin) ? this.margin : 10,
200 200 minItemCols: 1,
201 201 minItemRows: 1,
202 202 defaultItemCols: 8,
... ... @@ -495,7 +495,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
495 495
496 496 private updateLayoutOpts() {
497 497 this.gridsterOpts.minCols = this.columns ? this.columns : 24;
498   - this.gridsterOpts.margin = this.margin ? this.margin : 10;
  498 + this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10;
499 499 }
500 500
501 501 private updateEditingOpts() {
... ...
... ... @@ -84,7 +84,7 @@
84 84 [ngStyle]="cellStyle(alarm, column)">
85 85 </mat-cell>
86 86 </ng-container>
87   - <ng-container matColumnDef="actions" stickyEnd>
  87 + <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
88 88 <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
89 89 maxWidth: (actionCellDescriptors.length * 40) + 'px',
90 90 width: (actionCellDescriptors.length * 40) + 'px' }">
... ...
... ... @@ -95,6 +95,7 @@ interface AlarmsTableWidgetSettings extends TableWidgetSettings {
95 95 alarmsTitle: string;
96 96 enableSelection: boolean;
97 97 enableStatusFilter: boolean;
  98 + enableStickyAction: boolean;
98 99 displayDetails: boolean;
99 100 allowAcknowledgment: boolean;
100 101 allowClear: boolean;
... ... @@ -122,6 +123,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
122 123
123 124 public enableSelection = true;
124 125 public displayPagination = true;
  126 + public enableStickyAction = false;
125 127 public pageSizeOptions;
126 128 public pageLink: PageLink;
127 129 public sortOrderProperty: string;
... ... @@ -291,6 +293,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
291 293
292 294 this.searchAction.show = isDefined(this.settings.enableSearch) ? this.settings.enableSearch : true;
293 295 this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
  296 + this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : false;
294 297 this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true;
295 298 this.statusFilterAction.show = isDefined(this.settings.enableStatusFilter) ? this.settings.enableStatusFilter : true;
296 299
... ...
... ... @@ -48,6 +48,7 @@ export type MapSettings = {
48 48 mapImageUrl?: string;
49 49 provider?: MapProviders;
50 50 credentials?: any; // declare credentials format
  51 + gmApiKey?: string;
51 52 defaultCenterPosition?: LatLngTuple;
52 53 markerClusteringSetting?;
53 54 useDefaultCenterPosition?: boolean;
... ...
... ... @@ -76,7 +76,7 @@ export class MapWidgetController implements MapWidgetInterface {
76 76 return;
77 77 }
78 78 parseWithTranslation.setTranslate(this.translate);
79   - this.map = new MapClass($element, this.settings);
  79 + this.map = new MapClass($element, this.settings, this.ctx.$injector);
80 80 this.map.setImageAlias(this.subscribeForImageAttribute());
81 81 this.map.saveMarkerLocation = this.setMarkerLocation;
82 82 }
... ...
... ... @@ -19,39 +19,45 @@ import L from 'leaflet';
19 19 import LeafletMap from '../leaflet-map';
20 20 import { UnitedMapSettings } from '../map-models';
21 21 import 'leaflet.gridlayer.googlemutant';
  22 +import { ResourcesService } from '@core/services/resources.service';
  23 +import { Injector } from '@angular/core';
22 24
23   -let googleLoaded = false;
  25 +const gmGlobals: GmGlobal = {};
24 26
  27 +interface GmGlobal {
  28 + [key: string]: boolean;
  29 +}
25 30
26 31 export class GoogleMap extends LeafletMap {
27   - constructor($container, options: UnitedMapSettings) {
  32 + private resource: ResourcesService;
28 33
29   - super($container, options);
30   - this.loadGoogle(() => {
31   - const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
32   - (L.gridLayer as any).googleMutant({
33   - type: options?.gmDefaultMapType || 'roadmap'
34   - }).addTo(map);
35   - super.setMap(map);
36   - }, options.credentials.apiKey);
37   - super.initSettings(options);
38   - }
  34 + constructor($container, options: UnitedMapSettings, private injector: Injector) {
  35 + super($container, options);
  36 + this.resource = injector.get(ResourcesService);
  37 + this.loadGoogle(() => {
  38 + const map = L.map($container, {attributionControl: false}).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
  39 + (L.gridLayer as any).googleMutant({
  40 + type: options?.gmDefaultMapType || 'roadmap'
  41 + }).addTo(map);
  42 + super.setMap(map);
  43 + }, options.gmApiKey);
  44 + super.initSettings(options);
  45 + }
39 46
40   - private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
41   - if (googleLoaded) {
42   - callback()
43   - }
44   - else {
45   - googleLoaded = true;
46   - const script = document.createElement('script');
47   - script.onload = () => {
48   - callback();
49   - }
50   - script.onerror = () => {
51   - googleLoaded = false;
52   - }
53   - script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
54   - document.getElementsByTagName('head')[0].appendChild(script);
  47 + private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
  48 + if (gmGlobals[apiKey]) {
  49 + callback()
  50 + } else {
  51 + this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe(
  52 + () => {
  53 + gmGlobals[apiKey] = true;
  54 + callback();
  55 + },
  56 + (error) => {
  57 + gmGlobals[apiKey] = false;
  58 + console.error(`Google map api load failed!`, error);
55 59 }
  60 + );
56 61 }
  62 + }
57 63 }
... ...
... ... @@ -20,13 +20,17 @@ import LeafletMap from '../leaflet-map';
20 20 import { UnitedMapSettings } from '../map-models';
21 21
22 22 export class TencentMap extends LeafletMap {
23   - constructor($container, options: UnitedMapSettings) {
24   - super($container, options);
25   - const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
26   - const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
27   - const txLayer = L.tileLayer(txUrl, { subdomains: '0123', tms: true }).addTo(map);
28   - txLayer.addTo(map);
29   - super.setMap(map);
30   - super.initSettings(options);
31   - }
  23 + constructor($container, options: UnitedMapSettings) {
  24 + super($container, options);
  25 + const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
  26 + const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
  27 + const txLayer = L.tileLayer(txUrl, {
  28 + subdomains: '0123',
  29 + tms: true,
  30 + attribution: '&copy;2020 Tencent - GS(2018)2236号- Data&copy; NavInfo'
  31 + }).addTo(map);
  32 + txLayer.addTo(map);
  33 + super.setMap(map);
  34 + super.initSettings(options);
  35 + }
32 36 }
... ...
... ... @@ -25,7 +25,7 @@ import { DialogComponent } from '@app/shared/components/dialog.component';
25 25 import { UtilsService } from '@core/services/utils.service';
26 26 import { TranslateService } from '@ngx-translate/core';
27 27 import { DashboardSettings, GridSettings, StateControllerId } from '@app/shared/models/dashboard.models';
28   -import { isUndefined } from '@core/utils';
  28 +import { isDefined, isUndefined } from '@core/utils';
29 29 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
30 30 import { StatesControllerService } from './states/states-controller.service';
31 31
... ... @@ -96,7 +96,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
96 96 this.gridSettingsFormGroup = this.fb.group({
97 97 color: [this.gridSettings.color || 'rgba(0,0,0,0.870588)', []],
98 98 columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]],
99   - margin: [this.gridSettings.margin || 10, [Validators.required, Validators.min(0), Validators.max(50)]],
  99 + margin: [isDefined(this.gridSettings.margin) ? this.gridSettings.margin : 10,
  100 + [Validators.required, Validators.min(0), Validators.max(50)]],
100 101 autoFillHeight: [isUndefined(this.gridSettings.autoFillHeight) ? false : this.gridSettings.autoFillHeight, []],
101 102 backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []],
102 103 backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []],
... ...