+
this.dashboardWidgets.sortWidgets(),
itemInitCallback: (item, itemComponent) => {
(itemComponent.item as DashboardWidget).gridsterItemComponent = itemComponent;
+ },
+ colWidthUpdateCallback: (colWidth) => {
+ if (this.colWidthInteger) {
+ return Math.floor(colWidth);
+ } else {
+ return colWidth;
+ }
}
};
- this.updateMobileOpts();
+ this.updateGridOpts();
this.breakpointObserverSubscription = this.breakpointObserver
.observe(MediaBreakpoints['gt-sm']).subscribe(
() => {
- this.updateMobileOpts();
+ this.updateGridOpts();
this.notifyGridsterOptionsChanged();
}
);
@@ -266,20 +302,24 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
}
ngOnChanges(changes: SimpleChanges): void {
- let updateMobileOpts = false;
- let updateLayoutOpts = false;
+ let updateGridOpts = false;
+ let updateColumnOpts = false;
let updateEditingOpts = false;
+ let updateDisplayGridOpts = false;
let updateWidgets = false;
let updateDashboardTimewindow = false;
for (const propName of Object.keys(changes)) {
const change = changes[propName];
if (!change.firstChange && change.currentValue !== change.previousValue) {
- if (['isMobile', 'isMobileDisabled', 'autofillHeight', 'mobileAutofillHeight', 'mobileRowHeight'].includes(propName)) {
- updateMobileOpts = true;
+ if (['isMobile', 'isMobileDisabled', 'autofillHeight', 'mobileAutofillHeight',
+ 'mobileRowHeight', 'colWidthInteger'].includes(propName)) {
+ updateGridOpts = true;
} else if (['outerMargin', 'margin', 'columns'].includes(propName)) {
- updateLayoutOpts = true;
- } else if (propName === 'isEdit') {
+ updateColumnOpts = true;
+ } else if (['isEdit', 'isEditingWidget'].includes(propName)) {
updateEditingOpts = true;
+ } else if (propName === 'displayGrid') {
+ updateDisplayGridOpts = true;
} else if (['widgets', 'widgetLayouts'].includes(propName)) {
updateWidgets = true;
} else if (propName === 'dashboardTimewindow') {
@@ -293,16 +333,19 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow);
}
- if (updateLayoutOpts) {
- this.updateLayoutOpts();
+ if (updateColumnOpts) {
+ this.updateColumnOpts();
}
- if (updateMobileOpts) {
- this.updateMobileOpts();
+ if (updateGridOpts) {
+ this.updateGridOpts();
}
if (updateEditingOpts) {
this.updateEditingOpts();
}
- if (updateMobileOpts || updateLayoutOpts || updateEditingOpts) {
+ if (updateDisplayGridOpts) {
+ this.updateDisplayGridOpts();
+ }
+ if (updateGridOpts || updateColumnOpts || updateEditingOpts || updateDisplayGridOpts) {
this.notifyGridsterOptionsChanged();
}
}
@@ -352,6 +395,15 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
}
}
+ onDashboardMouseDown($event: MouseEvent) {
+ if (this.callbacks && this.callbacks.onDashboardMouseDown) {
+ if ($event) {
+ $event.stopPropagation();
+ }
+ this.callbacks.onDashboardMouseDown($event);
+ }
+ }
+
openDashboardContextMenu($event: MouseEvent) {
if (this.callbacks && this.callbacks.prepareDashboardContextMenu) {
const items = this.callbacks.prepareDashboardContextMenu($event);
@@ -519,7 +571,15 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
});
}
- private updateMobileOpts(parentHeight?: number) {
+ private onGridsterParentResize() {
+ const parentHeight = this.gridster.el.offsetHeight;
+ if (this.isMobileSize && this.mobileAutofillHeight && parentHeight) {
+ this.updateGridOpts(parentHeight);
+ }
+ this.notifyGridsterOptionsChanged();
+ }
+
+ private updateGridOpts(parentHeight?: number) {
let updateWidgetRowsAndSort = false;
const isMobileSize = this.checkIsMobileSize();
if (this.isMobileSize !== isMobileSize) {
@@ -530,7 +590,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
if (autofillHeight) {
this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fit;
} else {
- this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.ScrollVertical;
+ this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : this.gridType || GridType.ScrollVertical;
}
const mobileBreakPoint = this.isMobileSize ? 20000 : 0;
this.gridsterOpts.mobileBreakpoint = mobileBreakPoint;
@@ -543,23 +603,19 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
}
}
- private onGridsterParentResize() {
- const parentHeight = this.gridster.el.offsetHeight;
- if (this.isMobileSize && this.mobileAutofillHeight && parentHeight) {
- this.updateMobileOpts(parentHeight);
- }
- this.notifyGridsterOptionsChanged();
- }
-
- private updateLayoutOpts() {
+ private updateColumnOpts() {
this.gridsterOpts.minCols = this.columns ? this.columns : 24;
this.gridsterOpts.outerMargin = isDefined(this.outerMargin) ? this.outerMargin : true;
this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10;
}
private updateEditingOpts() {
- this.gridsterOpts.resizable.enabled = this.isEdit;
- this.gridsterOpts.draggable.enabled = this.isEdit;
+ this.gridsterOpts.resizable.enabled = this.isEdit && !this.isEditingWidget;
+ this.gridsterOpts.draggable.enabled = this.isEdit && !this.isEditingWidget;
+ }
+
+ private updateDisplayGridOpts() {
+ this.gridsterOpts.displayGrid = this.displayGrid;
}
public notifyGridsterOptionsChanged() {
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index d3e50ca1d7..2483a5b5e3 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -40,7 +40,7 @@
search
-
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.ts b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
index bdcfbd636b..3b536c809e 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
@@ -28,6 +28,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { UntypedFormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
+import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
selector: 'tb-details-panel',
@@ -44,6 +45,10 @@ export class DetailsPanelComponent extends PageComponent implements OnDestroy {
@Input() isShowSearch = false;
@Input() backgroundColor = '#FFF';
+ @Input()
+ @coerceBoolean()
+ showCloseDetails = true;
+
private theFormValue: UntypedFormGroup;
private formSubscription: Subscription = null;
diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index 5390a915d3..6678497820 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -124,7 +124,10 @@ import { EdgeDownlinkTableHeaderComponent } from '@home/components/edge/edge-dow
import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-page/widget-types-panel.component';
import { AlarmDurationPredicateValueComponent } from '@home/components/profile/alarm/alarm-duration-predicate-value.component';
import { DashboardImageDialogComponent } from '@home/components/dashboard-page/dashboard-image-dialog.component';
-import { WidgetContainerComponent } from '@home/components/widget/widget-container.component';
+import {
+ EditWidgetActionsTooltipComponent,
+ WidgetContainerComponent
+} from '@home/components/widget/widget-container.component';
import { SnmpDeviceProfileTransportModule } from '@home/components/profile/device/snmp/snmp-device-profile-transport.module';
import { DeviceCredentialsModule } from '@home/components/device/device-credentials.module';
import { DeviceProfileCommonModule } from '@home/components/profile/device/common/device-profile-common.module';
@@ -171,6 +174,7 @@ import {
import { WidgetConfigComponentsModule } from '@home/components/widget/config/widget-config-components.module';
import { BasicWidgetConfigModule } from '@home/components/widget/config/basic/basic-widget-config.module';
import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delete-timeseries-panel.component';
+import { MoveWidgetsDialogComponent } from '@home/components/dashboard-page/layout/move-widgets-dialog.component';
@NgModule({
declarations:
@@ -207,6 +211,7 @@ import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delet
EntityAliasDialogComponent,
DashboardComponent,
WidgetContainerComponent,
+ EditWidgetActionsTooltipComponent,
WidgetComponent,
WidgetConfigComponent,
WidgetPreviewComponent,
@@ -283,6 +288,7 @@ import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delet
EditWidgetComponent,
DashboardWidgetSelectComponent,
AddWidgetDialogComponent,
+ MoveWidgetsDialogComponent,
ManageDashboardLayoutsDialogComponent,
DashboardSettingsDialogComponent,
ManageDashboardStatesDialogComponent,
@@ -345,6 +351,7 @@ import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delet
EntityAliasDialogComponent,
DashboardComponent,
WidgetContainerComponent,
+ EditWidgetActionsTooltipComponent,
WidgetComponent,
WidgetConfigComponent,
WidgetPreviewComponent,
@@ -414,6 +421,7 @@ import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delet
EditWidgetComponent,
DashboardWidgetSelectComponent,
AddWidgetDialogComponent,
+ MoveWidgetsDialogComponent,
ManageDashboardLayoutsDialogComponent,
DashboardSettingsDialogComponent,
ManageDashboardStatesDialogComponent,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
index 06af5402ca..a32d7c2311 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
@@ -142,6 +142,7 @@ import {
import {
UnreadNotificationBasicConfigComponent
} from '@home/components/widget/config/basic/cards/unread-notification-basic-config.component';
+import { ScadaSymbolBasicConfigComponent } from '@home/components/widget/config/basic/scada/scada-symbol-basic-config.component';
@NgModule({
declarations: [
@@ -189,7 +190,8 @@ import {
MobileAppQrCodeBasicConfigComponent,
LabelCardBasicConfigComponent,
LabelValueCardBasicConfigComponent,
- UnreadNotificationBasicConfigComponent
+ UnreadNotificationBasicConfigComponent,
+ ScadaSymbolBasicConfigComponent
],
imports: [
CommonModule,
@@ -235,6 +237,7 @@ import {
BarChartBasicConfigComponent,
PolarAreaChartBasicConfigComponent,
RadarChartBasicConfigComponent,
+ ScadaSymbolBasicConfigComponent,
DigitalSimpleGaugeBasicConfigComponent,
MobileAppQrCodeBasicConfigComponent,
LabelCardBasicConfigComponent,
@@ -283,5 +286,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type
widgets.action-button.on-click
@@ -38,9 +38,9 @@