diff --git a/platypush/backend/http/webapp/src/components/panels/Alarm/Index.vue b/platypush/backend/http/webapp/src/components/panels/Alarm/Index.vue index 22c9347f2..015abddce 100644 --- a/platypush/backend/http/webapp/src/components/panels/Alarm/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Alarm/Index.vue @@ -83,6 +83,9 @@ export default { methods: { addAlarm(alarm) { + if (alarm.external_id == null) + return + alarm.name = alarm?.meta?.name_override || alarm.name alarm.meta = { ...alarm.meta, @@ -92,6 +95,7 @@ export default { } this.alarms[alarm.external_id] = alarm + this.addAlarmModalVisible = false }, async refresh() { diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue index 59cb41055..c6924c28e 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue @@ -35,16 +35,22 @@
-
@@ -73,6 +79,34 @@ + +
+ + +
+

{{ value.name }} is running

+
+ +
+ + + +
+
+
+ Are you sure you want to remove alarm {{ value.name }}? @@ -84,6 +118,7 @@ import AlarmEditor from "./Alarm/AlarmEditor" import ConfirmDialog from "@/components/elements/ConfirmDialog" import EntityMixin from "./EntityMixin" import EntityIcon from "./EntityIcon" +import Modal from "@/components/Modal"; import ToggleSwitch from "@/components/elements/ToggleSwitch"; export default { @@ -93,7 +128,8 @@ export default { AlarmEditor, ConfirmDialog, EntityIcon, - ToggleSwitch + Modal, + ToggleSwitch, }, data: function() { @@ -130,14 +166,6 @@ export default { enableInputId() { return `alarm-input-${this.value.name}` }, - - snoozeInputId() { - return `alarm-snooze-${this.value.name}` - }, - - dismissInputId() { - return `alarm-dismiss-${this.value.name}` - }, }, methods: { @@ -337,5 +365,75 @@ $icon-width: 2em; } } } + + :deep(.modal-container) { + cursor: default; + + .content { + width: 50em; + max-width: 90%; + + .body { + width: 100%; + } + } + + .alarm-running-modal { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1em; + + .icon { + font-size: 3.5em; + color: $selected-fg; + } + + .title { + width: 100%; + display: flex; + justify-content: center; + margin-bottom: 1em; + } + + .buttons { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + + label { + width: 50%; + text-align: center; + cursor: pointer; + } + + button { + margin: 0.5em; + } + } + } + } +} + +.blink { + animation: blink-animation 2s infinite; +} + +@keyframes blink-animation { + 0% { + opacity: 1; + } + + 50% { + opacity: 0.1; + } + + 100% { + opacity: 1; + } }