forked from platypush/platypush
Implemented entities refresh on the UI
This commit is contained in:
parent
2aa8778078
commit
9ddcf5eaeb
4 changed files with 89 additions and 15 deletions
BIN
platypush/backend/http/webapp/public/img/spinner.gif
Normal file
BIN
platypush/backend/http/webapp/public/img/spinner.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<div class="row item entity">
|
||||
<Loading v-if="loading" />
|
||||
<Icon v-bind="value.meta?.icon || {}" />
|
||||
<div class="status-container">
|
||||
<img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
|
||||
<Icon v-bind="value.meta?.icon || {}" v-else />
|
||||
</div>
|
||||
<div class="component-container">
|
||||
<component :is="component" :value="value" @input="$emit('input', $event)" />
|
||||
<component :is="component" :value="value"
|
||||
@input="$emit('input', $event)"
|
||||
@loading="$emit('loading', $event)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -11,14 +15,13 @@
|
|||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import Utils from "@/Utils"
|
||||
import Loading from "@/components/Loading"
|
||||
import Icon from "@/components/elements/Icon";
|
||||
|
||||
export default {
|
||||
name: "Entity",
|
||||
components: {Loading, Icon},
|
||||
components: {Icon},
|
||||
mixins: [Utils],
|
||||
emits: ['input'],
|
||||
emits: ['input', 'loading'],
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
|
@ -53,13 +56,29 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "vars";
|
||||
|
||||
.entity {
|
||||
width: 100%;
|
||||
display: table;
|
||||
|
||||
.status-container {
|
||||
width: 2.5em;
|
||||
height: 1.5em;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transform: translate(50%, -50%);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-container,
|
||||
.component-container {
|
||||
height: 100%;
|
||||
|
|
|
@ -2,9 +2,17 @@
|
|||
<div class="row plugin entities-container">
|
||||
<Loading v-if="loading" />
|
||||
|
||||
<div class="entity-selector-container">
|
||||
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
|
||||
</div>
|
||||
<header>
|
||||
<div class="col-11">
|
||||
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
|
||||
</div>
|
||||
|
||||
<div class="col-1 pull-right">
|
||||
<button title="Refresh" @click="refresh">
|
||||
<i class="fa fa-sync-alt" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="groups-canvas">
|
||||
<NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
|
||||
|
@ -30,7 +38,12 @@
|
|||
|
||||
<div class="body">
|
||||
<div class="entity-frame" v-for="entity in group.entities" :key="entity.id">
|
||||
<Entity :value="entity" @input="entities[entity.id] = $event" />
|
||||
<Entity
|
||||
:value="entity"
|
||||
@input="onEntityInput"
|
||||
:loading="!!loadingEntities[entity.id]"
|
||||
@loading="loadingEntities[entity.id] = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -58,6 +71,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loadingEntities: {},
|
||||
entities: {},
|
||||
selector: {
|
||||
grouping: 'type',
|
||||
|
@ -118,6 +132,27 @@ export default {
|
|||
},
|
||||
|
||||
async refresh() {
|
||||
const actions = Object.keys(
|
||||
Object.values(this.selector.selectedEntities).reduce((obj, entity) => {
|
||||
if (entity.plugin)
|
||||
obj[entity.plugin] = true
|
||||
return obj
|
||||
}, {})
|
||||
).map((plugin) => `${plugin}.status`)
|
||||
|
||||
this.loadingEntities = {
|
||||
...this.loadingEntities,
|
||||
...Object.keys(this.selector.selectedEntities).reduce((obj, id) => {
|
||||
obj[id] = true
|
||||
return obj
|
||||
}, {}),
|
||||
}
|
||||
|
||||
// Force refresh by calling `.status` on all the selected plugins
|
||||
await Promise.all(actions.map((act) => this.request(act)))
|
||||
},
|
||||
|
||||
async sync() {
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
|
@ -137,10 +172,19 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
onEntityInput(entity) {
|
||||
const entityId = entity.id
|
||||
this.entities[entityId] = entity
|
||||
if (this.loadingEntities[entity.id])
|
||||
delete this.loadingEntities[entity.id]
|
||||
},
|
||||
|
||||
onEntityUpdate(event) {
|
||||
const entityId = event.entity.id
|
||||
if (entityId == null)
|
||||
return
|
||||
if (this.loadingEntities[entityId])
|
||||
delete this.loadingEntities[entityId]
|
||||
|
||||
this.entities[entityId] = {
|
||||
...event.entity,
|
||||
|
@ -159,7 +203,7 @@ export default {
|
|||
'platypush.message.event.entities.EntityUpdateEvent'
|
||||
)
|
||||
|
||||
this.refresh()
|
||||
this.sync()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -187,8 +231,21 @@ export default {
|
|||
color: $default-fg-2;
|
||||
font-weight: 400;
|
||||
|
||||
.entity-selector-container {
|
||||
button {
|
||||
background: #ffffff00;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: $selector-height;
|
||||
display: flex;
|
||||
background: $default-bg-2;
|
||||
box-shadow: $border-shadow-bottom;
|
||||
}
|
||||
|
||||
.groups-canvas {
|
||||
|
|
|
@ -172,10 +172,8 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.entities-selectors-container {
|
||||
width: 100%;
|
||||
background: $default-bg-2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: $border-shadow-bottom;
|
||||
|
||||
.selector {
|
||||
height: 100%;
|
||||
|
|
Loading…
Reference in a new issue