Refactored/simplified UI code for entities management
This commit is contained in:
parent
8d91fec771
commit
f760d44224
GPG Key ID:
D90FBA7F76362774
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue