Vladyslav_Prykhodko
6 years ago
16 changed files with 848 additions and 10 deletions
@ -0,0 +1,224 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<section [formGroup]="alarmScheduleForm" fxLayout="column"> |
||||
|
<mat-form-field class="mat-block" hideRequiredMarker floatLabel="always"> |
||||
|
<mat-label> </mat-label> |
||||
|
<mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}"> |
||||
|
<mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType"> |
||||
|
{{ alarmScheduleTypeTranslate.get(alarmScheduleType) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
<mat-error *ngIf="alarmScheduleForm.get('type').hasError('required')"> |
||||
|
{{ 'device-profile.schedule-type-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<div *ngIf="alarmScheduleForm.get('type').value !== alarmScheduleType.ANY_TIME"> |
||||
|
<tb-timezone-select |
||||
|
[defaultTimezone]="defaultTimezone" |
||||
|
required |
||||
|
formControlName="timezone"> |
||||
|
</tb-timezone-select> |
||||
|
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME"> |
||||
|
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div> |
||||
|
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" style="padding-bottom: 16px;"> |
||||
|
<div fxLayout="row" fxLayoutGap="16px"> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(0)"> |
||||
|
{{ 'device-profile.schedule-day.monday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(1)"> |
||||
|
{{ 'device-profile.schedule-day.tuesday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(2)"> |
||||
|
{{ 'device-profile.schedule-day.wednesday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(3)"> |
||||
|
{{ 'device-profile.schedule-day.thursday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayoutGap="16px"> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(4)"> |
||||
|
{{ 'device-profile.schedule-day.friday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(5)"> |
||||
|
{{ 'device-profile.schedule-day.saturday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox [formControl]="weeklyRepeatControl(6)"> |
||||
|
{{ 'device-profile.schedule-day.sunday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div> |
||||
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM"> |
||||
|
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div> |
||||
|
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="16px" formArrayName="items"> |
||||
|
<div fxLayout="column" fxFlex fxFlex.gt-sm="50"> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="0" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 0)"> |
||||
|
{{ 'device-profile.schedule-day.monday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker1" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker1"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker1" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker1"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="1" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 1)"> |
||||
|
{{ 'device-profile.schedule-day.tuesday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker2" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker2 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker2"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker2" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker2 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker2"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="2" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 2)"> |
||||
|
{{ 'device-profile.schedule-day.wednesday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker3" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker3"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker3" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker3"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="3" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 3)"> |
||||
|
{{ 'device-profile.schedule-day.thursday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker4" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker4 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker4"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker4" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker4 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker4"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxLayout="column" fxFlex fxFlex.gt-sm="50"> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="4" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 4)"> |
||||
|
{{ 'device-profile.schedule-day.friday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker5" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker5"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker5" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker5"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="5" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 5)"> |
||||
|
{{ 'device-profile.schedule-day.saturday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker6" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker6 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker6"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker6" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker6 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker6"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" formGroupName="6" fxLayoutAlign="start center"> |
||||
|
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 6)"> |
||||
|
{{ 'device-profile.schedule-day.sunday' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<div fxLayout="row" fxLayoutGap="8px" fxFlex> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-from</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="startTimePicker7" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #startTimePicker7 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker7"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="100px"> |
||||
|
<mat-label translate>device-profile.schedule-time-to</mat-label> |
||||
|
<mat-datetimepicker-toggle [for]="endTimePicker7" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #endTimePicker7 type="time" openOnFocus="true"></mat-datetimepicker> |
||||
|
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker7"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</section> |
||||
@ -0,0 +1,259 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
ValidationErrors, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { AlarmSchedule, AlarmScheduleType, AlarmScheduleTypeTranslationMap } from '@shared/models/device.models'; |
||||
|
import { isDefined, isDefinedAndNotNull } from '@core/utils'; |
||||
|
import * as _moment from 'moment-timezone'; |
||||
|
import { MatCheckboxChange } from '@angular/material/checkbox'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarm-schedule', |
||||
|
templateUrl: './alarm-schedule.component.html', |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => AlarmScheduleComponent), |
||||
|
multi: true |
||||
|
}, { |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => AlarmScheduleComponent), |
||||
|
multi: true |
||||
|
}] |
||||
|
}) |
||||
|
export class AlarmScheduleComponent implements ControlValueAccessor, Validator, OnInit { |
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
alarmScheduleForm: FormGroup; |
||||
|
|
||||
|
defaultTimezone = _moment.tz.guess(); |
||||
|
|
||||
|
alarmScheduleTypes = Object.keys(AlarmScheduleType); |
||||
|
alarmScheduleType = AlarmScheduleType; |
||||
|
alarmScheduleTypeTranslate = AlarmScheduleTypeTranslationMap; |
||||
|
|
||||
|
private modelValue: AlarmSchedule; |
||||
|
|
||||
|
private defaultItems = Array.from({length: 7}, (value, i) => ({ |
||||
|
enabled: true, |
||||
|
dayOfWeek: i |
||||
|
})); |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.alarmScheduleForm = this.fb.group({ |
||||
|
type: [AlarmScheduleType.ANY_TIME, Validators.required], |
||||
|
timezone: [null, Validators.required], |
||||
|
daysOfWeek: this.fb.array(new Array(7).fill(false)), |
||||
|
startsOn: [0, Validators.required], |
||||
|
endsOn: [0, Validators.required], |
||||
|
items: this.fb.array(Array.from({length: 7}, (value, i) => this.defaultItemsScheduler(i))) |
||||
|
}); |
||||
|
this.alarmScheduleForm.get('type').valueChanges.subscribe((type) => { |
||||
|
this.alarmScheduleForm.reset({type, items: this.defaultItems}, {emitEvent: false}); |
||||
|
this.updateValidators(type, true); |
||||
|
this.alarmScheduleForm.updateValueAndValidity(); |
||||
|
}); |
||||
|
this.alarmScheduleForm.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.alarmScheduleForm.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.alarmScheduleForm.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: AlarmSchedule): void { |
||||
|
this.modelValue = value; |
||||
|
if (!isDefinedAndNotNull(this.modelValue)) { |
||||
|
this.modelValue = { |
||||
|
type: AlarmScheduleType.ANY_TIME |
||||
|
}; |
||||
|
} |
||||
|
switch (this.modelValue.type) { |
||||
|
case AlarmScheduleType.SPECIFIC_TIME: |
||||
|
let daysOfWeek = new Array(7).fill(false); |
||||
|
if (isDefined(this.modelValue.daysOfWeek)) { |
||||
|
daysOfWeek = daysOfWeek.map((item, index) => this.modelValue.daysOfWeek.indexOf(index + 1) > -1); |
||||
|
} |
||||
|
this.alarmScheduleForm.patchValue({ |
||||
|
type: this.modelValue.type, |
||||
|
timezone: this.modelValue.timezone, |
||||
|
daysOfWeek, |
||||
|
startsOn: this.timestampToTime(this.modelValue.startsOn), |
||||
|
endsOn: this.timestampToTime(this.modelValue.endsOn) |
||||
|
}, {emitEvent: false}); |
||||
|
break; |
||||
|
case AlarmScheduleType.CUSTOM: |
||||
|
if (this.modelValue.items) { |
||||
|
const alarmDays = []; |
||||
|
this.modelValue.items |
||||
|
.sort((a, b) => a.dayOfWeek - b.dayOfWeek) |
||||
|
.forEach((item, index) => { |
||||
|
if (item.enabled) { |
||||
|
this.itemsSchedulerForm.at(index).get('startsOn').enable({emitEvent: false}); |
||||
|
this.itemsSchedulerForm.at(index).get('endsOn').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.itemsSchedulerForm.at(index).get('startsOn').disable({emitEvent: false}); |
||||
|
this.itemsSchedulerForm.at(index).get('endsOn').disable({emitEvent: false}); |
||||
|
} |
||||
|
alarmDays.push({ |
||||
|
enabled: item.enabled, |
||||
|
startsOn: this.timestampToTime(item.startsOn), |
||||
|
endsOn: this.timestampToTime(item.endsOn) |
||||
|
}); |
||||
|
}); |
||||
|
this.alarmScheduleForm.patchValue({ |
||||
|
type: this.modelValue.type, |
||||
|
timezone: this.modelValue.timezone, |
||||
|
items: alarmDays |
||||
|
}, {emitEvent: false}); |
||||
|
} |
||||
|
break; |
||||
|
default: |
||||
|
this.alarmScheduleForm.patchValue(this.modelValue || undefined, {emitEvent: false}); |
||||
|
} |
||||
|
this.updateValidators(this.modelValue.type); |
||||
|
} |
||||
|
|
||||
|
validate(control: FormGroup): ValidationErrors | null { |
||||
|
return this.alarmScheduleForm.valid ? null : { |
||||
|
alarmScheduler: { |
||||
|
valid: false |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
weeklyRepeatControl(index: number): FormControl { |
||||
|
return (this.alarmScheduleForm.get('daysOfWeek') as FormArray).at(index) as FormControl; |
||||
|
} |
||||
|
|
||||
|
private updateValidators(type: AlarmScheduleType, changedType = false){ |
||||
|
switch (type){ |
||||
|
case AlarmScheduleType.ANY_TIME: |
||||
|
this.alarmScheduleForm.get('timezone').disable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('daysOfWeek').disable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('startsOn').disable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('endsOn').disable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('items').disable({emitEvent: false}); |
||||
|
break; |
||||
|
case AlarmScheduleType.SPECIFIC_TIME: |
||||
|
this.alarmScheduleForm.get('timezone').enable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('daysOfWeek').enable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('startsOn').enable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('endsOn').enable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('items').disable({emitEvent: false}); |
||||
|
break; |
||||
|
case AlarmScheduleType.CUSTOM: |
||||
|
this.alarmScheduleForm.get('timezone').enable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('daysOfWeek').disable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('startsOn').disable({emitEvent: false}); |
||||
|
this.alarmScheduleForm.get('endsOn').disable({emitEvent: false}); |
||||
|
if (changedType) { |
||||
|
this.alarmScheduleForm.get('items').enable({emitEvent: false}); |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value = this.alarmScheduleForm.value; |
||||
|
if (this.modelValue) { |
||||
|
if (isDefined(value.daysOfWeek)) { |
||||
|
value.daysOfWeek = value.daysOfWeek |
||||
|
.map((day: boolean, index: number) => day ? index + 1 : null) |
||||
|
.filter(day => !!day); |
||||
|
} |
||||
|
if (isDefined(value.startsOn) && value.startsOn !== 0) { |
||||
|
value.startsOn = this.timeToTimestamp(value.startsOn); |
||||
|
} |
||||
|
if (isDefined(value.endsOn) && value.endsOn !== 0) { |
||||
|
value.endsOn = this.timeToTimestamp(value.endsOn); |
||||
|
} |
||||
|
if (isDefined(value.items)){ |
||||
|
value.items = this.alarmScheduleForm.getRawValue().items; |
||||
|
value.items = value.items.map((item) => { |
||||
|
return { ...item, startsOn: this.timeToTimestamp(item.startsOn), endsOn: this.timeToTimestamp(item.endsOn)}; |
||||
|
}); |
||||
|
} |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private timeToTimestamp(date: Date | number): number { |
||||
|
if (typeof date === 'number' || date === null) { |
||||
|
return 0; |
||||
|
} |
||||
|
return _moment.utc([1970, 0, 1, date.getHours(), date.getMinutes(), date.getSeconds(), 0]).valueOf(); |
||||
|
} |
||||
|
|
||||
|
private timestampToTime(time = 0): Date { |
||||
|
return new Date(time + new Date().getTimezoneOffset() * 60 * 1000); |
||||
|
} |
||||
|
|
||||
|
private defaultItemsScheduler(index): FormGroup { |
||||
|
return this.fb.group({ |
||||
|
enabled: [true], |
||||
|
dayOfWeek: [index], |
||||
|
startsOn: [0, Validators.required], |
||||
|
endsOn: [0, Validators.required] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
changeCustomScheduler($event: MatCheckboxChange, index: number) { |
||||
|
const value = $event.checked; |
||||
|
if (value) { |
||||
|
this.itemsSchedulerForm.at(index).get('startsOn').enable({emitEvent: false}); |
||||
|
this.itemsSchedulerForm.at(index).get('endsOn').enable(); |
||||
|
} else { |
||||
|
this.itemsSchedulerForm.at(index).get('startsOn').disable({emitEvent: false}); |
||||
|
this.itemsSchedulerForm.at(index).get('endsOn').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private get itemsSchedulerForm(): FormArray { |
||||
|
return this.alarmScheduleForm.get('items') as FormArray; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,50 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="mat-block"> |
||||
|
<mat-label translate>timezone.timezone</mat-label> |
||||
|
<input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}" |
||||
|
#timezoneInput |
||||
|
formControlName="timezone" |
||||
|
(focusin)="onFocus()" |
||||
|
[required]="required" |
||||
|
[matAutocomplete]="timezoneAutocomplete"> |
||||
|
<button *ngIf="selectTimezoneFormGroup.get('timezone').value && !disabled" |
||||
|
type="button" style="margin-right: 1px" |
||||
|
matSuffix mat-button mat-icon-button aria-label="Clear" |
||||
|
(mousedown)="ignoreClosePanel = true" |
||||
|
(click)="clear()"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
<mat-autocomplete class="tb-autocomplete" |
||||
|
#timezoneAutocomplete="matAutocomplete" |
||||
|
(closed)="onPanelClosed()" |
||||
|
(optionSelected)="ignoreClosePanel = true" |
||||
|
[displayWith]="displayTimezoneFn"> |
||||
|
<mat-option *ngFor="let timezone of filteredTimezones | async" [value]="timezone"> |
||||
|
<span [innerHTML]="displayTimezoneFn(timezone) | highlight:searchText"></span> |
||||
|
</mat-option> |
||||
|
<mat-option *ngIf="!(filteredTimezones | async)?.length" [value]="null"> |
||||
|
<span> |
||||
|
{{ translate.get('timezone.no-timezones-matching', {timezone: searchText}) | async }} |
||||
|
</span> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
<mat-error *ngIf="selectTimezoneFormGroup.get('timezone').hasError('required')"> |
||||
|
{{ 'timezone.timezone-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,221 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { AfterViewInit, Component, forwardRef, Input, NgZone, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { map, mergeMap, share, tap } from 'rxjs/operators'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@app/core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import * as _moment from 'moment-timezone'; |
||||
|
import { MatAutocompleteTrigger } from '@angular/material/autocomplete'; |
||||
|
|
||||
|
interface TimezoneInfo { |
||||
|
id: string; |
||||
|
name: string; |
||||
|
offset: string; |
||||
|
nOffset: number; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timezone-select', |
||||
|
templateUrl: './timezone-select.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => TimezoneSelectComponent), |
||||
|
multi: true |
||||
|
}] |
||||
|
}) |
||||
|
export class TimezoneSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit { |
||||
|
|
||||
|
selectTimezoneFormGroup: FormGroup; |
||||
|
|
||||
|
modelValue: string | null; |
||||
|
|
||||
|
defaultTimezoneId: string = null; |
||||
|
|
||||
|
defaultTimezoneInfo: TimezoneInfo = null; |
||||
|
|
||||
|
timezones: TimezoneInfo[] = _moment.tz.names().map((zoneName) => { |
||||
|
const tz = _moment.tz(zoneName); |
||||
|
return { |
||||
|
id: zoneName, |
||||
|
name: zoneName.replace(/_/g, ' '), |
||||
|
offset: `UTC${tz.format('Z')}`, |
||||
|
nOffset: tz.utcOffset() |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
@Input() |
||||
|
set defaultTimezone(timezone: string) { |
||||
|
if (this.defaultTimezoneId !== timezone) { |
||||
|
this.defaultTimezoneId = timezone; |
||||
|
if (this.defaultTimezoneId) { |
||||
|
this.defaultTimezoneInfo = |
||||
|
this.timezones.find((timezoneInfo) => timezoneInfo.id === this.defaultTimezoneId); |
||||
|
} else { |
||||
|
this.defaultTimezoneInfo = null; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private requiredValue: boolean; |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
this.requiredValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@ViewChild('timezoneInput', {static: true, read: MatAutocompleteTrigger}) timezoneInputTrigger: MatAutocompleteTrigger; |
||||
|
|
||||
|
filteredTimezones: Observable<Array<TimezoneInfo>>; |
||||
|
|
||||
|
searchText = ''; |
||||
|
|
||||
|
ignoreClosePanel = false; |
||||
|
|
||||
|
private dirty = false; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
public translate: TranslateService, |
||||
|
private ngZone: NgZone, |
||||
|
private fb: FormBuilder) { |
||||
|
this.selectTimezoneFormGroup = this.fb.group({ |
||||
|
timezone: [null] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.filteredTimezones = this.selectTimezoneFormGroup.get('timezone').valueChanges |
||||
|
.pipe( |
||||
|
tap(value => { |
||||
|
let modelValue; |
||||
|
if (typeof value === 'string' || !value) { |
||||
|
modelValue = null; |
||||
|
} else { |
||||
|
modelValue = value.id; |
||||
|
} |
||||
|
this.updateView(modelValue); |
||||
|
if (value === null) { |
||||
|
this.clear(); |
||||
|
} |
||||
|
}), |
||||
|
map(value => value ? (typeof value === 'string' ? value : value.name) : ''), |
||||
|
mergeMap(name => this.fetchTimezones(name) ), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.selectTimezoneFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.selectTimezoneFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: string | null): void { |
||||
|
this.searchText = ''; |
||||
|
let foundTimezone: TimezoneInfo = null; |
||||
|
if (value !== null) { |
||||
|
foundTimezone = this.timezones.find(timezoneInfo => timezoneInfo.id === value); |
||||
|
} |
||||
|
if (foundTimezone !== null) { |
||||
|
this.modelValue = value; |
||||
|
this.selectTimezoneFormGroup.get('timezone').patchValue(foundTimezone, {emitEvent: false}); |
||||
|
} else { |
||||
|
if (this.defaultTimezoneInfo) { |
||||
|
this.selectTimezoneFormGroup.get('timezone').patchValue(this.defaultTimezoneInfo, {emitEvent: false}); |
||||
|
setTimeout(() => { |
||||
|
this.updateView(this.defaultTimezoneInfo.id); |
||||
|
}, 0); |
||||
|
} else { |
||||
|
this.modelValue = null; |
||||
|
this.selectTimezoneFormGroup.get('timezone').patchValue('', {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
this.dirty = true; |
||||
|
} |
||||
|
|
||||
|
onFocus() { |
||||
|
if (this.dirty) { |
||||
|
this.selectTimezoneFormGroup.get('timezone').updateValueAndValidity({onlySelf: true, emitEvent: true}); |
||||
|
this.dirty = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onPanelClosed() { |
||||
|
if (this.ignoreClosePanel) { |
||||
|
this.ignoreClosePanel = false; |
||||
|
} else { |
||||
|
if (!this.modelValue && this.defaultTimezoneInfo) { |
||||
|
this.ngZone.run(() => { |
||||
|
this.selectTimezoneFormGroup.get('timezone').reset(this.defaultTimezoneInfo, {emitEvent: true}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
updateView(value: string | null) { |
||||
|
if (this.modelValue !== value) { |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
displayTimezoneFn(timezone?: TimezoneInfo): string | undefined { |
||||
|
return timezone ? `${timezone.name} (${timezone.offset})` : undefined; |
||||
|
} |
||||
|
|
||||
|
fetchTimezones(searchText?: string): Observable<Array<TimezoneInfo>> { |
||||
|
this.searchText = searchText; |
||||
|
let result = this.timezones; |
||||
|
if (searchText && searchText.length) { |
||||
|
result = this.timezones.filter((timezoneInfo) => |
||||
|
timezoneInfo.name.toLowerCase().includes(searchText.toLowerCase())); |
||||
|
} |
||||
|
return of(result); |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
this.selectTimezoneFormGroup.get('timezone').patchValue('', {emitEvent: true}); |
||||
|
setTimeout(() => { |
||||
|
this.timezoneInputTrigger.openPanel(); |
||||
|
}, 0); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue