[Alarm UI] Support for adding/removing alarms.

platypush/backend/http/webapp/src/components/panels/Alarm/Index.vue

@@ -20,20 +20,35 @@
     @close="selectedAlarm = null"
     v-if="modalVisible" />
 
+  <Modal title="Add Alarm" :visible="addAlarmModalVisible" @close="addAlarmModalVisible = false">
+    <AlarmEditor :value="newAlarm" new-alarm @input="addAlarm" v-if="addAlarmModalVisible" />
+  </Modal>
+
   <FloatingButton icon-class="fa fa-stopwatch" text="Add Alarm"
                   @click="addAlarmModalVisible = true" />
 </template>
 
 <script>
-import Utils from "@/Utils";
+import AlarmEditor from "@/components/panels/Entities/Alarm/AlarmEditor";
 import Loading from "@/components/Loading";
 import EntityModal from "@/components/panels/Entities/Modal";
 import Entity from "@/components/panels/Entities/Entity";
 import FloatingButton from "@/components/elements/FloatingButton";
+import Modal from "@/components/Modal";
 import NoItems from "@/components/elements/NoItems";
+import Utils from "@/Utils";
 
 export default {
-  components: {Entity, EntityModal, FloatingButton, Loading, NoItems},
+  components: {
+    AlarmEditor,
+    Entity,
+    EntityModal,
+    FloatingButton,
+    Loading,
+    Modal,
+    NoItems,
+  },
+
   mixins: [Utils],
   props: {
     pluginName: {
@@ -52,6 +67,11 @@ export default {
       addAlarmModalVisible: false,
       alarms: {},
       selectedAlarm: null,
+      newAlarm: {
+        condition_type: 'cron',
+        when: '* * * * *',
+        audio_volume: this.$root.config?.alarm?.audio_volume ?? 100
+      },
     }
   },
 
@@ -172,4 +192,10 @@ export default {
     }
   }
 }
+
+:deep(.modal) {
+  .content .body {
+    padding: 0;
+  }
+}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue

@@ -25,7 +25,7 @@
     </div>
 
     <div class="body children" v-if="!collapsed" @click.stop="prevent">
-      <div class="child">
+      <div class="child enable">
         <label :for="enableInputId" class="label">
           <div class="name col-6">Enabled</div>
           <div class="value col-6">
@@ -49,6 +49,14 @@
         </label>
       </div>
 
+      <div class="child remove" @click="$refs.removeDialog.show" v-if="hasEdit">
+        <label class="label">
+          <div class="value">
+            <i class="fas fa-trash" /> &nbsp; Remove
+          </div>
+        </label>
+      </div>
+
       <div class="child edit" v-if="hasEdit">
         <div class="head" :class="{collapsed: editCollapsed}"
              @click.stop="editCollapsed = !editCollapsed">
@@ -64,19 +72,30 @@
         <AlarmEditor v-if="!editCollapsed" :value="value" />
       </div>
     </div>
+
+    <ConfirmDialog ref="removeDialog" @input="remove">
+      Are you sure you want to remove alarm <b>{{ value.name }}</b>?
+    </ConfirmDialog>
   </div>
 </template>
 
 <script>
 import AlarmEditor from "./Alarm/AlarmEditor"
+import ConfirmDialog from "@/components/elements/ConfirmDialog"
 import EntityMixin from "./EntityMixin"
 import EntityIcon from "./EntityIcon"
 import ToggleSwitch from "@/components/elements/ToggleSwitch";
 
 export default {
-  components: {AlarmEditor, EntityIcon, ToggleSwitch},
   mixins: [EntityMixin],
   emits: ['loading'],
+  components: {
+    AlarmEditor,
+    ConfirmDialog,
+    EntityIcon,
+    ToggleSwitch
+  },
+
   data: function() {
     return {
       collapsed: true,
@@ -168,6 +187,20 @@ export default {
       }
     },
 
+    async remove() {
+      this.$emit('loading', true)
+      try {
+        await this.request(
+          'alarm.delete',
+          {
+            name: this.value.name,
+          }
+        )
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+
     prevent(e) {
       e.stopPropagation()
     },
@@ -274,6 +307,15 @@ $icon-width: 2em;
     }
   }
 
+  .remove {
+    color: $error-fg;
+    cursor: pointer;
+
+    label {
+      cursor: pointer;
+    }
+  }
+
   .edit {
     &.child {
       flex-direction: column;

platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue

@@ -201,6 +201,11 @@ export default {
       type: Object,
       required: true,
     },
+
+    newAlarm: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -285,20 +290,36 @@ export default {
 
     async save() {
       this.loading = true
+      let args = {}
+      let action = null
 
-      const request = {
+      if (this.newAlarm) {
+        action = 'alarm.add'
+        args = {
+          name: this.editForm.name,
+          when: this.editForm.when,
+          media: this.editForm.media,
+          media_plugin: this.editForm.media_plugin,
+          audio_volume: this.editForm.audio_volume,
+          snooze_interval: this.editForm.snooze_interval,
+          actions: this.editForm.actions,
+        }
+      } else {
+        action = 'alarm.edit'
+        args = {
           name: this.value.name,
           ...this.changes,
         }
 
         if (this.changes.name != null) {
-        request.name = this.value.name
-        request.new_name = this.changes.name
+          args.name = this.value.name
+          args.new_name = this.changes.name
+        }
       }
 
       try {
-        const newAlarm = await this.request('alarm.edit', request)
-        this.$emit('input', newAlarm)
+        const alarm = await this.request(action, args)
+        this.$emit('input', alarm)
       } finally {
         this.loading = false
       }
@@ -319,7 +340,7 @@ $header-height: 3.5em;
 .alarm-editor-container {
   width: 100%;
   height: 50em;
-  max-height: 70vh;
+  max-height: 65vh;
   background: $default-bg-2;
   cursor: default;