Psion-fanatic/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[Alarm UI] Added snooze/dismiss modal when alarm is running.

Browse source
This commit is contained in:
Fabio Manganiello 2023-12-18 01:36:58 +01:00
parent aff02e0732
commit 250858fe99
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 115 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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() {

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

@ -35,16 +35,22 @@
</div>
<div class="child buttons" v-if="isRunning || isSnoozed">
<label :for="snoozeInputId" class="label col-6" v-if="isRunning">
<label class="label col-6" v-if="isRunning">
<div class="value">
<button class="btn btn-default" @click="snooze">Snooze</button>
<button class="btn btn-default" @click="snooze">
<i class="fas fa-pause" /> &nbsp;
Snooze
</button>
</div>
</label>
<label :for="dismissInputId" class="label"
<label class="label"
:class="{'col-6': isRunning, 'col-12': !isRunning}">
<div class="value">
<button class="btn btn-default" @click="dismiss">Dismiss</button>
<button class="btn btn-default" @click="dismiss">
<i class="fas fa-times" /> &nbsp;
Dismiss
</button>
</div>
</label>
</div>
@ -73,6 +79,34 @@
</div>
</div>
<Modal title="Alarm Running" ref="runningModal" :visible="isRunning">
<div class="alarm-running-modal">
<div class="icon blink">
<i class="fas fa-stopwatch" />
</div>
<div class="title">
<h3><b>{{ value.name }}</b> is running</h3>
</div>
<div class="buttons">
<label class="label">
<button class="btn btn-default" @click="snooze">
<i class="fas fa-pause" /> &nbsp;
Snooze
</button>
</label>
<label class="label">
<button class="btn btn-default" @click="dismiss">
<i class="fas fa-times" /> &nbsp;
Dismiss
</button>
</label>
</div>
</div>
</Modal>
<ConfirmDialog ref="removeDialog" @input="remove">
Are you sure you want to remove alarm <b>{{ value.name }}</b>?
</ConfirmDialog>
@ -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;
}
}
</style>