+
{{ error }}
@@ -37,3 +37,14 @@
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.scss
index 293246c79e..a261ee6b71 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.scss
@@ -1,5 +1,5 @@
/**
- * Copyright © 2016-2021 The Thingsboard Authors
+ * Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
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 697c837a6e..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
@@ -1,5 +1,5 @@
///
-/// Copyright © 2016-2021 The Thingsboard Authors
+/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
@@ -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/lib/settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings.models.ts
index f7aac069a3..e5089d3070 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings.models.ts
@@ -1,5 +1,5 @@
///
-/// Copyright © 2016-2021 The Thingsboard Authors
+/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 1d798a88ca..e4df1cd311 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -1,5 +1,5 @@
///
-/// Copyright © 2016-2021 The Thingsboard Authors
+/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
index 98c3dd67a2..0ef9fa5d12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
@@ -1,5 +1,5 @@
/**
- * Copyright © 2016-2021 The Thingsboard Authors
+ * Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 4f193a6cd7..19f2429ff4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -1,6 +1,6 @@
-
+
{{section.icon}}
{{section.name | translate}}
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
index 3abcc4c738..da8df4b469 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
@@ -1,5 +1,5 @@
/**
- * Copyright © 2016-2021 The Thingsboard Authors
+ * Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts
index 58724b89f9..cae14d32b6 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts
@@ -1,5 +1,5 @@
///
-/// Copyright © 2016-2021 The Thingsboard Authors
+/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 0a41e75657..0635205581 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -1,6 +1,6 @@
+ routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
{{section.icon}}
{{section.name | translate}}
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
index 87899b02b5..a076fa77d6 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
@@ -1,5 +1,5 @@
/**
- * Copyright © 2016-2021 The Thingsboard Authors
+ * Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
index 6bbc5414fe..76a818c16b 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
@@ -1,5 +1,5 @@
///
-/// Copyright © 2016-2021 The Thingsboard Authors
+/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index 91275719e9..8a9f07f3c9 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -1,6 +1,6 @@