Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Feat: Show connection status at the bottom of Navbar (#255)
  • Loading branch information
aalyokhin committed May 3, 2021
1 parent 7230db6 commit 204d74c
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 4 deletions.
40 changes: 40 additions & 0 deletions src/components/Navbar/ConnectionStatus.vue
@@ -0,0 +1,40 @@
<template>
<v-tooltip top>
<template #activator="{ on }">
<div class="d-flex justify-center fill-height">
<v-icon class="white--text" v-on="on">
{{ currentIcon }}
</v-icon>
</div>
</template>

<span>{{ status || 'unknown' }}</span>
</v-tooltip>
</template>

<script>
import {
mdiCheckNetwork,
mdiNetworkOff,
mdiCloseNetwork,
mdiHelpNetwork
} from '@mdi/js'
export default {
props: ['status'],
computed: {
currentIcon() {
const icons = {
connected: mdiCheckNetwork,
disconnected: mdiNetworkOff,
firewalled: mdiCloseNetwork
}
const icon = icons?.[this.status]
if (!this.status || !icon) return mdiHelpNetwork
return icon
}
}
}
</script>
28 changes: 24 additions & 4 deletions src/components/Navbar/NavbarActions.vue
Expand Up @@ -54,6 +54,9 @@
<span>done notification</span>
</v-tooltip>
</v-col>-->
<v-col>
<connection-status :status="connectionStatus" />
</v-col>
<v-col>
<v-tooltip top>
<template #activator="{ on }">
Expand All @@ -78,10 +81,22 @@
<script>
import qbit from '@/services/qbit'
import { mapGetters } from 'vuex'
import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js'
import {
mdiBrightness4,
mdiSpeedometerSlow,
mdiBrightness7,
mdiSpeedometer,
mdiExitToApp,
mdiBell,
mdiBellOff
} from '@mdi/js'
import ConnectionStatus from './ConnectionStatus.vue'
export default {
name: 'BottomActions',
components: {
ConnectionStatus
},
data: () => ({
//commonStyle: 'primarytext--text',
commonStyle: 'white--text',
Expand All @@ -104,11 +119,16 @@ export default {
alarm() {
return this.getAlarm()
},
status() {
return this.getStatus()
},
altSpeed() {
const status = this.getStatus()
if (status && status.altSpeed) return status.altSpeed
if (this.status && this.status.altSpeed) return this.status.altSpeed
return null
},
connectionStatus() {
return this.status.status
}
},
methods: {
Expand All @@ -130,4 +150,4 @@ export default {
}
}
}
</script>
</script>

0 comments on commit 204d74c

Please sign in to comment.