Implemented entities refresh on the UI

This commit is contained in:
Fabio Manganiello 2022-04-12 00:43:22 +02:00
parent 2aa8778078
commit 9ddcf5eaeb
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
4 changed files with 89 additions and 15 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View file

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

View file

@ -2,10 +2,18 @@
<div class="row plugin entities-container">
<Loading v-if="loading" />
<div class="entity-selector-container">
<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>
<div class="groups-container" v-else>
@ -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 {

View file

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