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;
+ }
}