revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Refactored/simplified UI code for entities management

Browse source
This commit is contained in:
Fabio Manganiello 2022-05-01 15:34:15 +02:00
parent 8d91fec771
commit f760d44224
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
6 changed files with 195 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
View file

@ -1,62 +1,30 @@
<template>
<div class="row item entity">
<div class="status-container">
<img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
<i class="fas fa-circle-exclamation error" v-else-if="error" />
<Icon v-bind="value.meta?.icon || {}" v-else />
</div>
<div class="component-container">
<component :is="component"
:value="value"
@input="$emit('input', $event)"
:loading="loading"
@loading="$emit('loading', $event)"
/>
</div>
<div class="row item entity-container">
<component :is="component"
:value="value"
:loading="loading"
:error="error || value?.reachable == false"
@input="$emit('input', $event)"
@loading="$emit('loading', $event)"
/>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
import Utils from "@/Utils"
import Icon from "@/components/elements/Icon";
import EntityMixin from "./EntityMixin"
export default {
name: "Entity",
components: {Icon},
mixins: [Utils],
mixins: [EntityMixin],
emits: ['input', 'loading'],
props: {
loading: {
type: Boolean,
default: false,
},
error: {
type: Boolean,
default: false,
},
value: {
type: Object,
required: true,
},
},
data() {
return {
component: null,
modalVisible: false,
}
},
computed: {
type() {
let entityType = (this.value.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
mounted() {
if (this.type !== 'Entity')
this.component = defineAsyncComponent(
@ -67,42 +35,11 @@ export default {
</script>
<style lang="scss" scoped>
@import "vars";
@import "common";
.entity {
.entity-container {
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;
}
.error {
color: $error-fg;
margin-left: .5em;
}
}
.icon-container,
.component-container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.component-container {
width: calc(100% - #{$icon-container-size});
}
position: relative;
padding: 0 !important;
}
</style>

71
platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<div class="entity-icon-container">
<img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
<i class="fas fa-circle-exclamation error" v-else-if="error" />
<Icon v-bind="icon" v-else />
</div>
</template>
<script>
import Icon from "@/components/elements/Icon";
export default {
name: "EntityIcon",
components: {Icon},
props: {
loading: {
type: Boolean,
default: false,
},
error: {
type: Boolean,
default: false,
},
icon: {
type: Object,
required: true,
},
},
data() {
return {
component: null,
modalVisible: false,
}
},
computed: {
type() {
let entityType = (this.entity.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
}
</script>
<style lang="scss" scoped>
@import "vars";
.entity-icon-container {
width: 2.5em;
height: 1.5em;
margin-top: 0.25em;
position: relative;
text-align: center;
.loading {
position: absolute;
bottom: 0;
transform: translate(50%, -50%);
width: 1em;
height: 1em;
}
.error {
color: $error-fg;
margin-left: .5em;
}
}
</style>

38
platypush/backend/http/webapp/src/components/panels/Entities/EntityMixin.vue Normal file
View file

@ -0,0 +1,38 @@
<script>
import Utils from "@/Utils"
export default {
name: "EntityMixin",
mixins: [Utils],
emits: ['input'],
props: {
loading: {
type: Boolean,
default: false,
},
error: {
type: Boolean,
default: false,
},
value: {
type: Object,
required: true,
},
},
data() {
return {
modalVisible: false,
}
},
computed: {
type() {
let entityType = (this.value.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
}
</script>

2
platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
View file

@ -78,7 +78,7 @@
<div v-for="value, attr in entity.data || {}" :key="attr">
<div class="table-row" v-if="value != null">
<div class="title" v-text="attr" />
<div class="title" v-text="prettify(attr)" />
<div class="value" v-text="'' + value" />
</div>
</div>

42
platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
View file

@ -1,36 +1,32 @@
<template>
<div class="switch-container">
<div class="col-10 label">
<div class="name" v-text="value.name" />
</div>
<div class="entity switch-container">
<div class="head">
<div class="col-1 icon">
<EntityIcon :icon="value.meta?.icon || {}"
:loading="loading" :error="error" />
</div>
<div class="col-2 switch pull-right">
<ToggleSwitch :value="value.state" @input="toggle"
@click.stop :disabled="loading || value.is_read_only" />
<div class="col-9 label">
<div class="name" v-text="value.name" />
</div>
<div class="col-2 switch pull-right">
<ToggleSwitch :value="value.state" @input="toggle"
@click.stop :disabled="loading || value.is_read_only" />
</div>
</div>
</div>
</template>
<script>
import ToggleSwitch from "@/components/elements/ToggleSwitch"
import Utils from "@/Utils"
import EntityIcon from "./EntityIcon"
import EntityMixin from "./EntityMixin"
export default {
name: 'Switch',
components: {ToggleSwitch},
emits: ['input'],
mixins: [Utils],
props: {
value: {
type: Object,
required: true,
},
loading: {
type: Boolean,
default: false,
},
},
components: {ToggleSwitch, EntityIcon},
mixins: [EntityMixin],
methods: {
async toggle(event) {
@ -51,7 +47,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "vars";
@import "common";
.switch-container {
.switch {

52
platypush/backend/http/webapp/src/components/panels/Entities/common.scss Normal file
View file

@ -0,0 +1,52 @@
@import "vars";
.entity {
width: 100%;
display: flex;
flex-direction: column;
.head {
padding: 0.75em 0.25em;
.label {
margin-top: 0.25em;
}
&.expanded {
background: $selected-bg;
font-weight: bold;
}
.pull-right {
display: inline-flex;
align-items: center;
direction: rtl;
padding-right: 0.5em;
:deep(.power-switch) {
margin-top: 0.25em;
}
}
}
.body {
@extend .fade-in;
display: flex;
flex-direction: column;
padding: 0.5em;
background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
border-top: 1px solid $border-color-1;
box-shadow: $border-shadow-bottom;
}
button {
height: 2em;
background: none;
border: none;
padding: 0 0 0 1em;
&:hover {
color: $default-hover-fg;
}
}
}