+
{{ error }}
@@ -37,3 +37,14 @@
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
index 378e7089e2..96c36337a7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
@@ -14,7 +14,7 @@
/// limitations under the License.
///
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
import { WidgetContext } from '@home/models/widget-component.models';
import { UtilsService } from '@core/services/utils.service';
@@ -26,11 +26,14 @@ import { DatasourceType, widgetType } from '@shared/models/widget.models';
import { EntityType } from '@shared/models/entity-type.models';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { ResizeObserver } from '@juggle/resize-observer';
+import { ThemePalette } from '@angular/material/core/common-behaviors/color';
const switchAspectRation = 2.7893;
type RetrieveValueMethod = 'rpc' | 'attribute' | 'timeseries';
+type SwitchType = 'switch' | 'slide-toggle';
+
interface SwitchSettings {
initialValue: boolean;
title: string;
@@ -44,6 +47,8 @@ interface SwitchSettings {
requestTimeout: number;
requestPersistent: boolean;
persistentPollingInterval: number;
+ labelPosition: 'before' | 'after';
+ sliderColor: ThemePalette;
}
@Component({
@@ -51,28 +56,33 @@ interface SwitchSettings {
templateUrl: './switch.component.html',
styleUrls: ['./switch.component.scss']
})
-export class SwitchComponent extends PageComponent implements OnInit, OnDestroy {
-
- @ViewChild('switch', {static: true}) switchElementRef: ElementRef
;
- @ViewChild('switchContainer', {static: true}) switchContainerRef: ElementRef;
- @ViewChild('matSlideToggle', {static: true}) matSlideToggleRef: MatSlideToggle;
- @ViewChild('onoffContainer', {static: true}) onoffContainerRef: ElementRef;
- @ViewChild('onLabel', {static: true}) onLabelRef: ElementRef;
- @ViewChild('offLabel', {static: true}) offLabelRef: ElementRef;
- @ViewChild('switchTitleContainer', {static: true}) switchTitleContainerRef: ElementRef;
- @ViewChild('switchTitle', {static: true}) switchTitleRef: ElementRef;
- @ViewChild('textMeasure', {static: true}) textMeasureRef: ElementRef;
- @ViewChild('switchErrorContainer', {static: true}) switchErrorContainerRef: ElementRef;
- @ViewChild('switchError', {static: true}) switchErrorRef: ElementRef;
+export class SwitchComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy {
+
+ @ViewChild('switch', {static: false}) switchElementRef: ElementRef;
+ @ViewChild('switchContainer', {static: false}) switchContainerRef: ElementRef;
+ @ViewChild('matSlideToggle', {static: false}) matSlideToggleRef: MatSlideToggle;
+ @ViewChild('onoffContainer', {static: false}) onoffContainerRef: ElementRef;
+ @ViewChild('onLabel', {static: false}) onLabelRef: ElementRef;
+ @ViewChild('offLabel', {static: false}) offLabelRef: ElementRef;
+ @ViewChild('switchTitleContainer', {static: false}) switchTitleContainerRef: ElementRef;
+ @ViewChild('switchTitle', {static: false}) switchTitleRef: ElementRef;
+ @ViewChild('textMeasure', {static: false}) textMeasureRef: ElementRef;
+ @ViewChild('switchErrorContainer', {static: false}) switchErrorContainerRef: ElementRef;
+ @ViewChild('switchError', {static: false}) switchErrorRef: ElementRef;
@Input()
ctx: WidgetContext;
+ @Input()
+ switchType: SwitchType = 'switch';
+
showTitle = false;
value = false;
error = '';
title = '';
showOnOffLabels = false;
+ labelPosition: 'before' | 'after' = 'after';
+ sliderColor: ThemePalette = 'accent';
private isSimulated: boolean;
private requestTimeout: number;
@@ -87,7 +97,7 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
private valueSubscription: IWidgetSubscription;
- private executingUpdateValue: boolean;
+ public executingUpdateValue: boolean;
private scheduledValue: boolean;
private rpcValue: boolean;
@@ -111,22 +121,27 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
}
ngOnInit(): void {
- this.switchElement = $(this.switchElementRef.nativeElement);
- this.switchContainer = $(this.switchContainerRef.nativeElement);
- this.matSlideToggle = $(this.matSlideToggleRef._elementRef.nativeElement);
- this.onoffContainer = $(this.onoffContainerRef.nativeElement);
- this.onLabel = $(this.onLabelRef.nativeElement);
- this.offLabel = $(this.offLabelRef.nativeElement);
- this.switchTitleContainer = $(this.switchTitleContainerRef.nativeElement);
- this.switchTitle = $(this.switchTitleRef.nativeElement);
- this.textMeasure = $(this.textMeasureRef.nativeElement);
- this.switchErrorContainer = $(this.switchErrorContainerRef.nativeElement);
- this.switchError = $(this.switchErrorRef.nativeElement);
-
- this.switchResize$ = new ResizeObserver(() => {
- this.resize();
- });
- this.switchResize$.observe(this.switchContainerRef.nativeElement);
+ }
+
+ ngAfterViewInit() {
+ if (this.switchType === 'switch') {
+ this.switchElement = $(this.switchElementRef.nativeElement);
+ this.switchContainer = $(this.switchContainerRef.nativeElement);
+ this.matSlideToggle = $(this.matSlideToggleRef._elementRef.nativeElement);
+ this.onoffContainer = $(this.onoffContainerRef.nativeElement);
+ this.onLabel = $(this.onLabelRef.nativeElement);
+ this.offLabel = $(this.offLabelRef.nativeElement);
+ this.switchTitleContainer = $(this.switchTitleContainerRef.nativeElement);
+ this.switchTitle = $(this.switchTitleRef.nativeElement);
+ this.textMeasure = $(this.textMeasureRef.nativeElement);
+ this.switchErrorContainer = $(this.switchErrorContainerRef.nativeElement);
+ this.switchError = $(this.switchErrorRef.nativeElement);
+
+ this.switchResize$ = new ResizeObserver(() => {
+ this.resize();
+ });
+ this.switchResize$.observe(this.switchContainerRef.nativeElement);
+ }
this.init();
}
@@ -145,6 +160,8 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
this.title = isDefined(settings.title) ? settings.title : '';
this.showTitle = !!(this.title && this.title.length);
this.showOnOffLabels = isDefined(settings.showOnOffLabels) ? settings.showOnOffLabels : true;
+ this.labelPosition = isDefined(settings.labelPosition) ? settings.labelPosition : 'after';
+ this.sliderColor = isDefined(settings.sliderColor) ? settings.sliderColor : 'accent';
const initialValue = isDefined(settings.initialValue) ? settings.initialValue : false;
this.setValue(initialValue);
@@ -256,7 +273,9 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
private onError(error: string) {
this.error = error;
- this.setFontSize(this.switchError, this.error, this.switchErrorContainer.height(), this.switchErrorContainer.width());
+ if (this.switchType === 'switch') {
+ this.setFontSize(this.switchError, this.error, this.switchErrorContainer.height(), this.switchErrorContainer.width());
+ }
this.ctx.detectChanges();
}
@@ -278,6 +297,10 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
},
() => {
const errorText = this.ctx.defaultSubscription.rpcErrorText;
+ if (this.switchType === 'slide-toggle') {
+ this.ctx.defaultSubscription.rpcErrorText = null;
+ this.ctx.hideToast(this.ctx.toastTargetId);
+ }
this.onError(errorText);
}
);
@@ -304,6 +327,10 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
() => {
this.executingUpdateValue = false;
const errorText = this.ctx.defaultSubscription.rpcErrorText;
+ if (this.switchType === 'slide-toggle') {
+ this.ctx.defaultSubscription.rpcErrorText = null;
+ this.ctx.hideToast(this.ctx.toastTargetId);
+ }
this.onError(errorText);
}
);
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
index b4a8565d27..c34698bafd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
@@ -922,7 +922,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
} else if (this.modelValue) {
const config = this.modelValue.config;
if (this.widgetType === widgetType.rpc && this.modelValue.isDataEnabled) {
- if (!config.targetDeviceAliasIds || !config.targetDeviceAliasIds.length) {
+ if (!this.widgetEditMode && (!config.targetDeviceAliasIds || !config.targetDeviceAliasIds.length)) {
return {
targetDeviceAliasIds: {
valid: false