|
|
|
@ -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<HTMLElement>; |
|
|
|
@ViewChild('switchContainer', {static: true}) switchContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('matSlideToggle', {static: true}) matSlideToggleRef: MatSlideToggle; |
|
|
|
@ViewChild('onoffContainer', {static: true}) onoffContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('onLabel', {static: true}) onLabelRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('offLabel', {static: true}) offLabelRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchTitleContainer', {static: true}) switchTitleContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchTitle', {static: true}) switchTitleRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('textMeasure', {static: true}) textMeasureRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchErrorContainer', {static: true}) switchErrorContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchError', {static: true}) switchErrorRef: ElementRef<HTMLElement>; |
|
|
|
export class SwitchComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy { |
|
|
|
|
|
|
|
@ViewChild('switch', {static: false}) switchElementRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchContainer', {static: false}) switchContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('matSlideToggle', {static: false}) matSlideToggleRef: MatSlideToggle; |
|
|
|
@ViewChild('onoffContainer', {static: false}) onoffContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('onLabel', {static: false}) onLabelRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('offLabel', {static: false}) offLabelRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchTitleContainer', {static: false}) switchTitleContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchTitle', {static: false}) switchTitleRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('textMeasure', {static: false}) textMeasureRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchErrorContainer', {static: false}) switchErrorContainerRef: ElementRef<HTMLElement>; |
|
|
|
@ViewChild('switchError', {static: false}) switchErrorRef: ElementRef<HTMLElement>; |
|
|
|
|
|
|
|
@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); |
|
|
|
} |
|
|
|
); |
|
|
|
|
Andrii Shvaika
5 years ago