tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Improvement UI device profile alarm scheduler, added text select time interval

pull/3567/head
Vladyslav_Prykhodko 6 years ago
parent
30a6a462da
commit
76485dfdad
5 changed files with 233 additions and 163 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts
  2. 315
      ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
  3. 20
      ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss
  4. 51
      ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
  5. 2
      ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html

8
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts
View File

@ -29,7 +29,7 @@ import { AlarmConditionType, AlarmConditionTypeTranslationMap, AlarmRule } from
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models'; import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { isDefinedAndNotNull } from '@core/utils'; import { isUndefined } from '@core/utils';
@Component({ @Component({
selector: 'tb-alarm-rule', selector: 'tb-alarm-rule',
@ -118,11 +118,11 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
writeValue(value: AlarmRule): void { writeValue(value: AlarmRule): void {
this.modelValue = value; this.modelValue = value;
if (!isDefinedAndNotNull(this.modelValue?.condition?.spec)) { if (this.modelValue !== null && isUndefined(this.modelValue?.condition?.spec)) {
this.modelValue = Object.assign({}, this.modelValue, {condition: {spec: {type: AlarmConditionType.SIMPLE}}}); this.modelValue = Object.assign(this.modelValue, {condition: {spec: {type: AlarmConditionType.SIMPLE}}});
} }
this.alarmRuleFormGroup.reset(this.modelValue || undefined, {emitEvent: false}); this.alarmRuleFormGroup.reset(this.modelValue || undefined, {emitEvent: false});
this.updateValidators(this.modelValue.condition.spec.type); this.updateValidators(this.modelValue?.condition?.spec?.type);
} }
public validate(c: FormControl) { public validate(c: FormControl) {

315
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
View File

@ -35,7 +35,7 @@
</tb-timezone-select> </tb-timezone-select>
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME"> <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 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="column" fxLayout.gt-md="row" fxLayoutGap="16px" style="padding-bottom: 16px;">
<div fxLayout="row" fxLayoutGap="16px"> <div fxLayout="row" fxLayoutGap="16px">
<mat-checkbox [formControl]="weeklyRepeatControl(0)"> <mat-checkbox [formControl]="weeklyRepeatControl(0)">
{{ 'device-profile.schedule-day.monday' | translate }} {{ 'device-profile.schedule-day.monday' | translate }}
@ -64,158 +64,189 @@
</div> </div>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</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"> <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex> <div fxLayout="row" fxLayoutGap="8px" fxFlex.gt-md>
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker"> <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
</mat-form-field> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
<mat-form-field fxFlex> </mat-form-field>
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
<mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle> <mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker"> <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
</mat-form-field> <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
</mat-form-field>
</div>
<div fxFlex fxLayoutAlign="center center" style="margin: auto">
<div style="text-align: center"
[innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
</div>
</div>
</div> </div>
</section> </section>
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM"> <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div> <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" formArrayName="items" fxLayoutGap="1em">
<div fxLayout="column" fxFlex fxFlex.gt-sm="50"> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="0" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<div fxLayout="row" fxLayoutGap="8px" formGroupName="0" fxLayoutAlign="start center"> <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 0)">
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 0)"> {{ 'device-profile.schedule-day.monday' | translate }}
{{ 'device-profile.schedule-day.monday' | translate }} </mat-checkbox>
</mat-checkbox> <div fxLayout="row" fxLayoutGap="8px" fxFlex>
<div fxLayout="row" fxLayoutGap="8px" fxFlex> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-form-field fxFlex="100px"> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-datetimepicker-toggle [for]="startTimePicker1" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker-toggle [for]="startTimePicker1" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker #startTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker>
<mat-datetimepicker #startTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker1">
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker1"> </mat-form-field>
</mat-form-field> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-form-field fxFlex="100px"> <mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-datetimepicker-toggle [for]="endTimePicker1" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker-toggle [for]="endTimePicker1" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker #endTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker>
<mat-datetimepicker #endTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker> <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker1">
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker1"> </mat-form-field>
</mat-form-field>
</div>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" formGroupName="1" fxLayoutAlign="start center"> <div fxFlex fxLayoutAlign="center center"
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 1)"> style="text-align: center"
{{ 'device-profile.schedule-day.tuesday' | translate }} [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(0))">
</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>
<div fxLayout="row" fxLayoutGap="8px" formGroupName="2" fxLayoutAlign="start center"> </div>
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 2)"> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="1" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
{{ 'device-profile.schedule-day.wednesday' | translate }} <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 1)">
</mat-checkbox> {{ 'device-profile.schedule-day.tuesday' | translate }}
<div fxLayout="row" fxLayoutGap="8px" fxFlex> </mat-checkbox>
<mat-form-field fxFlex="100px"> <div fxLayout="row" fxLayoutGap="8px" fxFlex>
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-datetimepicker-toggle [for]="startTimePicker3" matPrefix></mat-datetimepicker-toggle> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-datetimepicker #startTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker-toggle [for]="startTimePicker2" matPrefix></mat-datetimepicker-toggle>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker3"> <mat-datetimepicker #startTimePicker2 type="time" openOnFocus="true"></mat-datetimepicker>
</mat-form-field> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker2">
<mat-form-field fxFlex="100px"> </mat-form-field>
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-datetimepicker-toggle [for]="endTimePicker3" matPrefix></mat-datetimepicker-toggle> <mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-datetimepicker #endTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker-toggle [for]="endTimePicker2" matPrefix></mat-datetimepicker-toggle>
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker3"> <mat-datetimepicker #endTimePicker2 type="time" openOnFocus="true"></mat-datetimepicker>
</mat-form-field> <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker2">
</div> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" formGroupName="3" fxLayoutAlign="start center"> <div fxFlex fxLayoutAlign="center center"
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 3)"> style="text-align: center"
{{ 'device-profile.schedule-day.thursday' | translate }} [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(1))">
</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> </div>
<div fxLayout="column" fxFlex fxFlex.gt-sm="50"> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="2" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<div fxLayout="row" fxLayoutGap="8px" formGroupName="4" fxLayoutAlign="start center"> <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 2)">
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 4)"> {{ 'device-profile.schedule-day.wednesday' | translate }}
{{ 'device-profile.schedule-day.friday' | translate }} </mat-checkbox>
</mat-checkbox> <div fxLayout="row" fxLayoutGap="8px" fxFlex>
<div fxLayout="row" fxLayoutGap="8px" fxFlex> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-form-field fxFlex="100px"> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-datetimepicker-toggle [for]="startTimePicker3" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker-toggle [for]="startTimePicker5" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker #startTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker>
<mat-datetimepicker #startTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker3">
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker5"> </mat-form-field>
</mat-form-field> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-form-field fxFlex="100px"> <mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-datetimepicker-toggle [for]="endTimePicker3" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker-toggle [for]="endTimePicker5" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker #endTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker>
<mat-datetimepicker #endTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker> <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker3">
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker5"> </mat-form-field>
</mat-form-field> </div>
</div> <div fxFlex fxLayoutAlign="center center"
style="text-align: center"
[innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(2))">
</div>
</div>
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="3" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 3)">
{{ 'device-profile.schedule-day.thursday' | translate }}
</mat-checkbox>
<div fxLayout="row" fxLayoutGap="8px" fxFlex>
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="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.xs fxFlex.sm="100px" fxFlex.md="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 fxLayout="row" fxLayoutGap="8px" formGroupName="5" fxLayoutAlign="start center"> <div fxFlex fxLayoutAlign="center center"
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 5)"> style="text-align: center"
{{ 'device-profile.schedule-day.saturday' | translate }} [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(3))">
</mat-checkbox> </div>
<div fxLayout="row" fxLayoutGap="8px" fxFlex> </div>
<mat-form-field fxFlex="100px"> <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="4" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 4)">
<mat-datetimepicker-toggle [for]="startTimePicker6" matPrefix></mat-datetimepicker-toggle> {{ 'device-profile.schedule-day.friday' | translate }}
<mat-datetimepicker #startTimePicker6 type="time" openOnFocus="true"></mat-datetimepicker> </mat-checkbox>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker6"> <div fxLayout="row" fxLayoutGap="8px" fxFlex>
</mat-form-field> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
<mat-form-field fxFlex="100px"> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-datetimepicker-toggle [for]="startTimePicker5" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker-toggle [for]="endTimePicker6" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker #startTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker>
<mat-datetimepicker #endTimePicker6 type="time" openOnFocus="true"></mat-datetimepicker> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker5">
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker6"> </mat-form-field>
</mat-form-field> <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
</div> <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 fxFlex fxLayoutAlign="center center"
style="text-align: center"
[innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(4))">
</div>
</div>
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="5" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 5)">
{{ 'device-profile.schedule-day.saturday' | translate }}
</mat-checkbox>
<div fxLayout="row" fxLayoutGap="8px" fxFlex>
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="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.xs fxFlex.sm="100px" fxFlex.md="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 fxFlex fxLayoutAlign="center center"
style="text-align: center"
[innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(5))">
</div>
</div>
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" formGroupName="6" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
<mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, 6)">
{{ 'device-profile.schedule-day.sunday' | translate }}
</mat-checkbox>
<div fxLayout="row" fxLayoutGap="8px" fxFlex>
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="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.xs fxFlex.sm="100px" fxFlex.md="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 fxLayout="row" fxLayoutGap="8px" formGroupName="6" fxLayoutAlign="start center"> <div fxFlex fxLayoutAlign="center center"
<mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 6)"> style="text-align: center"
{{ 'device-profile.schedule-day.sunday' | translate }} [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(6))">
</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> </div>
</div> </div>

20
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss
View File

@ -0,0 +1,20 @@
/**
* 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.
*/
::ng-deep {
.nowrap {
white-space: nowrap;
}
}

51
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
View File

@ -16,6 +16,7 @@
import { Component, forwardRef, Input, OnInit } from '@angular/core'; import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { import {
AbstractControl,
ControlValueAccessor, ControlValueAccessor,
FormArray, FormArray,
FormBuilder, FormBuilder,
@ -35,6 +36,7 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
@Component({ @Component({
selector: 'tb-alarm-schedule', selector: 'tb-alarm-schedule',
templateUrl: './alarm-schedule.component.html', templateUrl: './alarm-schedule.component.html',
styleUrls: ['./alarm-schedule.component.scss'],
providers: [{ providers: [{
provide: NG_VALUE_ACCESSOR, provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AlarmScheduleComponent), useExisting: forwardRef(() => AlarmScheduleComponent),
@ -79,7 +81,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
items: this.fb.array(Array.from({length: 7}, (value, i) => this.defaultItemsScheduler(i))) items: this.fb.array(Array.from({length: 7}, (value, i) => this.defaultItemsScheduler(i)))
}); });
this.alarmScheduleForm.get('type').valueChanges.subscribe((type) => { this.alarmScheduleForm.get('type').valueChanges.subscribe((type) => {
this.alarmScheduleForm.reset({type, items: this.defaultItems}, {emitEvent: false}); this.alarmScheduleForm.reset({type, items: this.defaultItems, timezone: this.defaultTimezone}, {emitEvent: false});
this.updateValidators(type, true); this.updateValidators(type, true);
this.alarmScheduleForm.updateValueAndValidity(); this.alarmScheduleForm.updateValueAndValidity();
}); });
@ -131,13 +133,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
this.modelValue.items this.modelValue.items
.sort((a, b) => a.dayOfWeek - b.dayOfWeek) .sort((a, b) => a.dayOfWeek - b.dayOfWeek)
.forEach((item, index) => { .forEach((item, index) => {
if (item.enabled) { this.disabledSelectedTime(item.enabled, index);
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({ alarmDays.push({
enabled: item.enabled, enabled: item.enabled,
startsOn: this.timestampToTime(item.startsOn), startsOn: this.timestampToTime(item.startsOn),
@ -206,15 +202,15 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
.filter(day => !!day); .filter(day => !!day);
} }
if (isDefined(value.startsOn) && value.startsOn !== 0) { if (isDefined(value.startsOn) && value.startsOn !== 0) {
value.startsOn = this.timeToTimestamp(value.startsOn); value.startsOn = this.timeToTimestampUTC(value.startsOn);
} }
if (isDefined(value.endsOn) && value.endsOn !== 0) { if (isDefined(value.endsOn) && value.endsOn !== 0) {
value.endsOn = this.timeToTimestamp(value.endsOn); value.endsOn = this.timeToTimestampUTC(value.endsOn);
} }
if (isDefined(value.items)){ if (isDefined(value.items)){
value.items = this.alarmScheduleForm.getRawValue().items; value.items = this.alarmScheduleForm.getRawValue().items;
value.items = value.items.map((item) => { value.items = value.items.map((item) => {
return { ...item, startsOn: this.timeToTimestamp(item.startsOn), endsOn: this.timeToTimestamp(item.endsOn)}; return { ...item, startsOn: this.timeToTimestampUTC(item.startsOn), endsOn: this.timeToTimestampUTC(item.endsOn)};
}); });
} }
this.modelValue = value; this.modelValue = value;
@ -222,7 +218,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
} }
} }
private timeToTimestamp(date: Date | number): number { private timeToTimestampUTC(date: Date | number): number {
if (typeof date === 'number' || date === null) { if (typeof date === 'number' || date === null) {
return 0; return 0;
} }
@ -244,16 +240,39 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
changeCustomScheduler($event: MatCheckboxChange, index: number) { changeCustomScheduler($event: MatCheckboxChange, index: number) {
const value = $event.checked; const value = $event.checked;
if (value) { this.disabledSelectedTime(value, index, true);
}
private disabledSelectedTime(enable: boolean, index: number, emitEvent = false) {
if (enable) {
this.itemsSchedulerForm.at(index).get('startsOn').enable({emitEvent: false}); this.itemsSchedulerForm.at(index).get('startsOn').enable({emitEvent: false});
this.itemsSchedulerForm.at(index).get('endsOn').enable(); this.itemsSchedulerForm.at(index).get('endsOn').enable({emitEvent});
} else { } else {
this.itemsSchedulerForm.at(index).get('startsOn').disable({emitEvent: false}); this.itemsSchedulerForm.at(index).get('startsOn').disable({emitEvent: false});
this.itemsSchedulerForm.at(index).get('endsOn').disable(); this.itemsSchedulerForm.at(index).get('endsOn').disable({emitEvent});
}
}
private timeToMoment(date: Date | number): _moment.Moment {
if (typeof date === 'number' || date === null) {
return _moment([1970, 0, 1, 0, 0, 0, 0]);
}
return _moment([1970, 0, 1, date.getHours(), date.getMinutes(), 0, 0]);
}
getSchedulerRangeText(control: FormGroup | AbstractControl): string {
const start = this.timeToMoment(control.get('startsOn').value);
const end = this.timeToMoment(control.get('endsOn').value);
if (start < end) {
return `<span><span class="nowrap">${start.format('hh:mm A')}</span> – <span class="nowrap">${end.format('hh:mm A')}</span></span>`;
} else if (start.valueOf() === 0 && end.valueOf() === 0 || start.isSame(_moment([1970, 0])) && end.isSame(_moment([1970, 0]))) {
return '<span><span class="nowrap">12:00 AM</span> – <span class="nowrap">12:00 PM</span></span>';
} }
return `<span><span class="nowrap">12:00 AM</span> – <span class="nowrap">${end.format('hh:mm A')}</span>` +
` and <span class="nowrap">${start.format('hh:mm A')}</span> – <span class="nowrap">12:00 PM</span></span>`;
} }
private get itemsSchedulerForm(): FormArray { get itemsSchedulerForm(): FormArray {
return this.alarmScheduleForm.get('items') as FormArray; return this.alarmScheduleForm.get('items') as FormArray;
} }
} }

2
ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
View File

@ -39,7 +39,7 @@
</mat-tab> </mat-tab>
<mat-tab *ngIf="entity" <mat-tab *ngIf="entity"
label="{{'device-profile.alarm-rules' | translate: label="{{'device-profile.alarm-rules' | translate:
{count: entity.profileData.alarms.length ? {count: entity.profileData.alarms && entity.profileData.alarms.length ?
entity.profileData.alarms.length : 0} }}" #alarmRules="matTab"> entity.profileData.alarms.length : 0} }}" #alarmRules="matTab">
<div class="mat-padding" [formGroup]="detailsForm"> <div class="mat-padding" [formGroup]="detailsForm">
<div formGroupName="profileData"> <div formGroupName="profileData">

Write Preview
Loading…
Cancel
Save