ziver/hal
1
1
Fork 0
Code Pull requests Releases Activity

Fixed Event overview page to properly modify events

Browse source
This commit is contained in:
Ziver Koc 2024-09-26 00:54:58 +02:00
parent d049e524d5
commit 60024dc915
3 changed files with 110 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

52
hal-core/resources/web/js/vue/components/EventActionComponent.js vendored
View file

@ -1,4 +1,5 @@
import {eventStore} from 'EventStore'
import { alertStore } from 'AlertStore'
export default {
props: {
@ -11,25 +12,38 @@ export default {
checkboxChecked: internalEvent.data?.valueStr == 'ON',
}
},
methods: {
changeState(changeEvent) {
fetch('/api/event?' + new URLSearchParams({
id: this.event.id,
action: "modify",
data: changeEvent.target.type == "checkbox" ? this.checkboxChecked : changeEvent.target.value
}).toString(), {
method: 'PUT',
headers: {
'Accept': 'application/json',
},
})
.then(response => response.json())
.then(json => {
if (json['error'] != null) {
alertStore.alertError(json['error']);
return;
}
})
}
},
template: `
<form method="POST">
<input type="hidden" name="action" value="modify">
<input type="hidden" name="action-id" :value="event.id">
<div class="btn-toolbar pull-right">
<template v-if="event.dataType === 'ColorEventData'">
<input type="hidden" name="type" value="color">
<input type="color" name="data" onchange="this.form.submit()" :value="event.data?.valueStr">
</template>
<template v-else-if="event.dataType === 'LevelEventData'">
<input type="hidden" name="type" value="level">
<input class="styled-slider slider-progress" type="range" name="data" min="0" max="100" step="10" onchange="this.form.submit()" :value="event.data?.value * 100">
</template>
<template v-else-if="event.dataType === 'OnOffEventData'">
<input type="hidden" name="type" value="on-off">
<input class="switch" type="checkbox" name="data" onchange="this.form.submit()" v-model="checkboxChecked">
</template>
</div>
</form>
<div class="btn-toolbar pull-right">
<template v-if="event.dataType === 'ColorEventData'">
<input type="color" @change="changeState" :value="event.data?.valueStr">
</template>
<template v-else-if="event.dataType === 'LevelEventData'">
<input class="styled-slider slider-progress" type="range" min="0.0" max="1.0" step="0.1" @change="changeState" :value="event.data?.value">
</template>
<template v-else-if="event.dataType === 'OnOffEventData'">
<input class="switch" type="checkbox" @change="changeState" v-model="checkboxChecked">
</template>
</div>
`
}