Show online indicator.

Closes #37.
This commit is contained in:
D. Berge
2020-09-23 22:18:51 +02:00
parent 46b9978d3f
commit c25f350c7a
4 changed files with 17 additions and 4 deletions

View File

@@ -9,6 +9,9 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-icon v-if="serverConnected" class="mr-6" small title="Connected to server">mdi-lan-connect</v-icon>
<v-icon v-else class="mr-6" small color="red" title="Server connection lost">mdi-lan-disconnect</v-icon>
<dougal-notifications-control class="mr-6"></dougal-notifications-control> <dougal-notifications-control class="mr-6"></dougal-notifications-control>
<div title="Night mode"> <div title="Night mode">
@@ -35,6 +38,7 @@
</style> </style>
<script> <script>
import { mapState } from 'vuex';
import DougalHelpDialog from '@/components/help-dialog'; import DougalHelpDialog from '@/components/help-dialog';
import DougalNotificationsControl from '@/components/notifications-control'; import DougalNotificationsControl from '@/components/notifications-control';
@@ -51,7 +55,9 @@ export default {
year () { year () {
const date = new Date(); const date = new Date();
return date.getUTCFullYear(); return date.getUTCFullYear();
} },
...mapState({serverConnected: state => state.notify.serverConnected})
} }
}; };
</script> </script>

View File

@@ -59,6 +59,7 @@ new Vue({
this.ws.addEventListener("open", (ev) => { this.ws.addEventListener("open", (ev) => {
console.log("WebSocket connection open", ev); console.log("WebSocket connection open", ev);
this.setServerConnectionState(true);
}); });
this.ws.addEventListener("close", (ev) => { this.ws.addEventListener("close", (ev) => {
@@ -74,11 +75,12 @@ new Vue({
delete this.ws; delete this.ws;
this.ws = null; this.ws = null;
setTimeout( this.initWs, 60000 ); setTimeout( this.initWs, 60000 );
this.setServerConnectionState(false);
}); });
}, },
...mapMutations(['setServerEvent']) ...mapMutations(['setServerEvent', 'setServerConnectionState'])
}, },

View File

@@ -7,4 +7,8 @@ function clearServerEvent (state) {
state.serverEvent = null; state.serverEvent = null;
} }
export default { setServerEvent, clearServerEvent }; function setServerConnectionState (state, isConnected) {
state.serverConnected = !!isConnected;
}
export default { setServerEvent, clearServerEvent, setServerConnectionState };

View File

@@ -1,5 +1,6 @@
const state = () => ({ const state = () => ({
serverEvent: null serverEvent: null,
serverConnected: false
}); });
export default state; export default state;