forked from platypush/platypush
Added VariableModal to set variables from the dashboard.
This commit is contained in:
parent
a3888be216
commit
6d9c34f06f
GPG key ID:
D90FBA7F76362774
2 changed files with 202 additions and 8 deletions
|
|
@ -7,10 +7,12 @@
|
|||
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
|
||||
</div>
|
||||
|
||||
<div class="col-1 right">
|
||||
<button title="Refresh" @click="refresh">
|
||||
<i class="fa fa-sync-alt" />
|
||||
</button>
|
||||
<div class="col-1 actions-container right">
|
||||
<Dropdown title="Actions" icon-class="fas fa-ellipsis">
|
||||
<DropdownItem icon-class="fa fa-sync-alt" text="Refresh" @click="refresh" />
|
||||
<DropdownItem icon-class="fa fa-square-root-variable"
|
||||
text="Set Variable" @click="variableModalVisible = true" />
|
||||
</Dropdown>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -26,6 +28,7 @@
|
|||
v-if="modalEntityId && entities[modalEntityId]"
|
||||
/>
|
||||
|
||||
<VariableModal :visible="variableModalVisible" @close="variableModalVisible = false" />
|
||||
<NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
|
||||
|
||||
<div class="groups-container" v-else>
|
||||
|
|
@ -75,6 +78,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from "@/components/elements/Dropdown";
|
||||
import DropdownItem from "@/components/elements/DropdownItem";
|
||||
import Utils from "@/Utils"
|
||||
import Loading from "@/components/Loading";
|
||||
import Icon from "@/components/elements/Icon";
|
||||
|
|
@ -82,14 +87,25 @@ import NoItems from "@/components/elements/NoItems";
|
|||
import Entity from "./Entity.vue";
|
||||
import Selector from "./Selector.vue";
|
||||
import EntityModal from "./Modal"
|
||||
import VariableModal from "./VariableModal"
|
||||
import { bus } from "@/bus";
|
||||
import icons from '@/assets/icons.json'
|
||||
import meta from './meta.json'
|
||||
|
||||
export default {
|
||||
name: "Entities",
|
||||
components: {Loading, Icon, Entity, Selector, NoItems, EntityModal},
|
||||
mixins: [Utils],
|
||||
components: {
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
Entity,
|
||||
EntityModal,
|
||||
Icon,
|
||||
Loading,
|
||||
NoItems,
|
||||
Selector,
|
||||
VariableModal,
|
||||
},
|
||||
|
||||
props: {
|
||||
// Entity scan timeout in seconds
|
||||
|
|
@ -108,6 +124,7 @@ export default {
|
|||
entities: {},
|
||||
modalEntityId: null,
|
||||
modalVisible: false,
|
||||
variableModalVisible: false,
|
||||
selector: {
|
||||
grouping: 'category',
|
||||
selectedEntities: {},
|
||||
|
|
@ -205,10 +222,10 @@ export default {
|
|||
const entities = (group ? group.entities : this.entities) || {}
|
||||
const args = {}
|
||||
if (group)
|
||||
args.plugins = Object.keys(entities.reduce((obj, entity) => {
|
||||
args.plugins = Object.values(entities).reduce((obj, entity) => {
|
||||
obj[entity.plugin] = true
|
||||
return obj
|
||||
}, {}))
|
||||
}, {})
|
||||
|
||||
this.loadingEntities = Object.values(entities).reduce((obj, entity) => {
|
||||
if (this._shouldSkipLoading(entity))
|
||||
|
|
@ -419,12 +436,44 @@ export default {
|
|||
right: 0;
|
||||
text-align: right;
|
||||
margin-right: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
padding-right: 0;
|
||||
|
||||
button {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.right) {
|
||||
.dropdown-container {
|
||||
.dropdown {
|
||||
min-width: 10em;
|
||||
|
||||
.item {
|
||||
box-shadow: none;
|
||||
|
||||
.text {
|
||||
text-align: left;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groups-canvas {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<Modal :visible="visible" title="Set Variable" ref="modal" @open="onOpen">
|
||||
<div class="variable-modal-container">
|
||||
<form @submit.prevent="setValue">
|
||||
<div class="row">
|
||||
<div class="col-s-12 col-m-4 label">
|
||||
<label for="name">Variable Name</label>
|
||||
</div>
|
||||
<div class="col-s-12 col-m-8 value">
|
||||
<input type="text" id="variable-name" v-model="varName"
|
||||
placeholder="Variable Name" :disabled="loading" ref="varName" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-s-12 col-m-4 label">
|
||||
<label for="name">Variable Value</label>
|
||||
</div>
|
||||
<div class="col-s-12 col-m-8 value">
|
||||
<input type="text" id="variable-value" v-model="varValue" ref="varValue"
|
||||
placeholder="Variable Value" :disabled="loading" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row button-container">
|
||||
<button type="submit" title="Set" :disabled="loading">
|
||||
<i class="fas fa-check" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "@/components/Modal";
|
||||
import Utils from "@/Utils";
|
||||
|
||||
export default {
|
||||
name: "VariableModal",
|
||||
components: {Modal},
|
||||
mixins: [Utils],
|
||||
emits: ['close'],
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
varName: null,
|
||||
varValue: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async clearValue() {
|
||||
this.loading = true
|
||||
try {
|
||||
await this.request('variable.unset', {name: this.varName.trim()})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async setValue() {
|
||||
const varName = this.varName.trim()
|
||||
if (!varName?.length) {
|
||||
this.notifyWarning('No variable name has been specified')
|
||||
}
|
||||
|
||||
const value = this.varValue
|
||||
if (!value?.length) {
|
||||
await this.clearValue()
|
||||
} else {
|
||||
this.loading = true
|
||||
try {
|
||||
const args = {}
|
||||
args[varName] = value
|
||||
await this.request('variable.set', args)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
this.$refs.varName.value = ''
|
||||
this.$refs.varValue.value = ''
|
||||
this.$refs.modal.close()
|
||||
},
|
||||
|
||||
onOpen() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.varName.focus()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "common";
|
||||
|
||||
.variable-modal-container {
|
||||
form {
|
||||
padding: 1em 0;
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 0.25em 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: -0.75em;
|
||||
padding-top: 0.5em;
|
||||
border-top: 1px solid $border-color-1;
|
||||
|
||||
button {
|
||||
min-width: 10em;
|
||||
background: none;
|
||||
border-radius: 1.5em;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include from($tablet) {
|
||||
.value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue