+
+ {{ 'device-profile.schedule-day.thursday' | translate }}
+
+
+
+ device-profile.schedule-time-from
+
+
+
+
+
+ device-profile.schedule-time-to
+
+
+
+
-
-
- {{ 'device-profile.schedule-day.saturday' | translate }}
-
-
-
- device-profile.schedule-time-from
-
-
-
-
-
- device-profile.schedule-time-to
-
-
-
-
-
+
+
+
+
+
+ {{ 'device-profile.schedule-day.friday' | translate }}
+
+
+
+ device-profile.schedule-time-from
+
+
+
+
+
+ device-profile.schedule-time-to
+
+
+
+
+
+
+
+
+
+
+ {{ 'device-profile.schedule-day.saturday' | translate }}
+
+
+
+ device-profile.schedule-time-from
+
+
+
+
+
+ device-profile.schedule-time-to
+
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss
new file mode 100644
index 0000000000..1746a5fbf5
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss
@@ -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;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
index 8cf9dc8d30..0062687d5d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
@@ -16,6 +16,7 @@
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import {
+ AbstractControl,
ControlValueAccessor,
FormArray,
FormBuilder,
@@ -35,6 +36,7 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
@Component({
selector: 'tb-alarm-schedule',
templateUrl: './alarm-schedule.component.html',
+ styleUrls: ['./alarm-schedule.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
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)))
});
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.alarmScheduleForm.updateValueAndValidity();
});
@@ -131,13 +133,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
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});
- }
+ this.disabledSelectedTime(item.enabled, index);
alarmDays.push({
enabled: item.enabled,
startsOn: this.timestampToTime(item.startsOn),
@@ -206,15 +202,15 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
.filter(day => !!day);
}
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) {
- value.endsOn = this.timeToTimestamp(value.endsOn);
+ value.endsOn = this.timeToTimestampUTC(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)};
+ return { ...item, startsOn: this.timeToTimestampUTC(item.startsOn), endsOn: this.timeToTimestampUTC(item.endsOn)};
});
}
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) {
return 0;
}
@@ -244,16 +240,39 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
changeCustomScheduler($event: MatCheckboxChange, index: number) {
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('endsOn').enable();
+ this.itemsSchedulerForm.at(index).get('endsOn').enable({emitEvent});
} else {
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 `
${start.format('hh:mm A')} – ${end.format('hh:mm A')}`;
+ } else if (start.valueOf() === 0 && end.valueOf() === 0 || start.isSame(_moment([1970, 0])) && end.isSame(_moment([1970, 0]))) {
+ return '
12:00 AM – 12:00 PM';
}
+ return `
12:00 AM – ${end.format('hh:mm A')}` +
+ ` and ${start.format('hh:mm A')} – 12:00 PM`;
}
- private get itemsSchedulerForm(): FormArray {
+ get itemsSchedulerForm(): FormArray {
return this.alarmScheduleForm.get('items') as FormArray;
}
}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
index 6886e19152..e1883256bb 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
@@ -48,7 +48,7 @@
@@ -57,7 +57,7 @@
(click)="addCreateAlarmRule()"
matTooltip="{{ 'device-profile.add-create-alarm-rule' | translate }}"
matTooltipPosition="above">
- add_circle_outline
+ add_circle_outline
{{ 'device-profile.add-create-alarm-rule' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss
index b823629076..eedaac2ca1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss
@@ -16,7 +16,7 @@
:host {
.create-alarm-rule {
- border: 1px groove rgba(0, 0, 0, .25);
+ border: 2px groove rgba(0, 0, 0, .45);
border-radius: 4px;
padding: 8px;
}
@@ -28,4 +28,9 @@
width: 160px;
}
}
+ .button-icon{
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index d4a72da751..7d2ad8b75d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -18,24 +18,11 @@