[Alarm UI] Support for adding/removing alarms.

This commit is contained in:
Fabio Manganiello 2023-12-18 00:12:16 +01:00
parent e617a9fe82
commit 29f65371d8
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 103 additions and 14 deletions

View file

@ -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>

View file

@ -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;

View file

@ -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 = {
name: this.value.name,
...this.changes,
}
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
if (this.changes.name != null) {
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;