diff --git a/platypush/backend/http/webapp/src/Events.vue b/platypush/backend/http/webapp/src/Events.vue index 9162b0c4d..19226c11d 100644 --- a/platypush/backend/http/webapp/src/Events.vue +++ b/platypush/backend/http/webapp/src/Events.vue @@ -181,6 +181,11 @@ export default { created() { bus.on('subscribe', this.subscribe) bus.on('unsubscribe', this.unsubscribe) + + this.$watch('opened', (open) => { + bus.emit(open ? 'connect' : 'disconnect') + }) + this.init() }, } diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue index 9d32ab51e..ebdee6913 100644 --- a/platypush/backend/http/webapp/src/components/Nav.vue +++ b/platypush/backend/http/webapp/src/components/Nav.vue @@ -3,6 +3,9 @@ <div class="toggler" @click="collapsed = !collapsed"> <i class="fas fa-bars" /> <span class="hostname" v-if="hostname" v-text="hostname" /> + <i class="icon status fas fa-circle" + :class="{ok: connected, error: !connected}" + :title="connected ? 'Connected' : 'Disconnected'" /> </div> <ul class="plugins" v-if="selectedPanel === 'settings'"> @@ -76,6 +79,7 @@ import icons from '@/assets/icons.json' import Utils from "@/Utils"; import configSections from '@/components/panels/Settings/sections.json'; +import { bus } from "@/bus"; export default { name: "Nav", @@ -137,11 +141,18 @@ export default { return name }, + + setConnected(connected) { + return () => { + this.connected = connected + } + }, }, data() { return { collapsed: true, + connected: false, icons: icons, host: null, configSections: configSections, @@ -150,6 +161,8 @@ export default { mounted() { this.collapsed = this.collapsedDefault + bus.on('connect', this.setConnected(true)) + bus.on('disconnect', this.setConnected(false)) }, } </script> @@ -239,10 +252,26 @@ nav { background: $nav-toggler-bg; display: flex; font-size: 1.5em; + position: relative; cursor: pointer; padding: 0.4em; align-items: center; box-shadow: $nav-toggler-shadow; + + .icon.status { + position: absolute; + top: calc($toggler-height / 2 + 0.3em); + right: 0.5em; + font-size: 0.5em; + + &.ok { + color: $ok-fg; + } + + &.error { + color: $error-fg; + } + } } .hostname { @@ -328,6 +357,11 @@ nav { background: $nav-toggler-collapsed-mobile-bg; color: $nav-toggler-collapsed-mobile-fg; } + + .icon.status { + top: 0.75em; + left: 2em; + } } .footer { diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue index 5631191f7..d5faabd21 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue @@ -39,7 +39,7 @@ </span> <span class="section center"> - <div class="title" v-text="pluginDisplayName(group.name)" /> + <div class="title" v-text="group.name" /> </span> <span class="section right"> diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss index 7e37f6d0f..4254e270a 100644 --- a/platypush/backend/http/webapp/src/style/themes/light.scss +++ b/platypush/backend/http/webapp/src/style/themes/light.scss @@ -6,6 +6,7 @@ $default-bg-4: #f1f3f2 !default; $default-bg-5: #edf0ee !default; $default-bg-6: #e4eae8 !default; $default-bg-7: #e4e4e4 !default; +$ok-fg: #17ad17 !default; $error-fg: #ad1717 !default; $default-fg: black !default;