From f8cd369c56d03a66d09402d98605ef808bb6a96b Mon Sep 17 00:00:00 2001
From: Steffen <steffen@infrabox.net>
Date: Thu, 17 Jan 2019 19:05:46 +0000
Subject: [PATCH] Replace reconnect modal with button in header

---
 src/dashboard-client/src/App.vue              | 25 ++++++++++++---
 .../src/components/utils/Disconnect.vue       | 31 -------------------
 src/dashboard-client/src/events.js            |  3 ++
 3 files changed, 24 insertions(+), 35 deletions(-)
 delete mode 100644 src/dashboard-client/src/components/utils/Disconnect.vue

diff --git a/src/dashboard-client/src/App.vue b/src/dashboard-client/src/App.vue
index d76056fb8..3e7d93402 100644
--- a/src/dashboard-client/src/App.vue
+++ b/src/dashboard-client/src/App.vue
@@ -1,6 +1,5 @@
 <template>
     <div id='app'>
-        <ib-disconnect></ib-disconnect>
         <ib-notifications></ib-notifications>
         <md-toolbar>
             <md-button v-if="$store.state.user" class="md-icon-button" @click="toggleLeftSidenav">
@@ -12,6 +11,10 @@
                 </a>
             </div>
             <h2 class="md-title" style="flex: 1"></h2>
+
+            <md-button v-if="$store.state.user && !connected" class="md-button" @click="reconnect" md-right>
+                <i class="fa fa-fw fa-bolt"></i> Disconnected
+            </md-button>
             <md-button v-if="!$store.state.user" class="md-button" @click="login" md-right>
                 <i class="fa fa-sign-in"></i> Login
             </md-button>
@@ -118,16 +121,30 @@
 <script>
 import store from './store'
 import router from './router'
-import Disconnect from './components/utils/Disconnect'
+import events from './events'
 import UserService from './services/UserService'
 
 export default {
     name: 'app',
-    components: {
-        'ib-disconnect': Disconnect
+    data () {
+        return {
+            connected: true
+        }
     },
     store,
+    created () {
+        events.$on('DISCONNECTED', () => {
+            this.connected = false
+        })
+
+        events.$on('CONNECTED', () => {
+            this.connected = true
+        })
+    },
     methods: {
+        reconnect () {
+            window.location.reload(false)
+        },
         toggleLeftSidenav () {
             this.$refs.leftSidenav.toggle()
         },
diff --git a/src/dashboard-client/src/components/utils/Disconnect.vue b/src/dashboard-client/src/components/utils/Disconnect.vue
deleted file mode 100644
index 66254c3e7..000000000
--- a/src/dashboard-client/src/components/utils/Disconnect.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <md-dialog ref="disconnected-dialog">
-      <md-dialog-title>Disconnected</md-dialog-title>
-
-      <md-dialog-content>You have been disconnected from InfraBox.</md-dialog-content>
-
-      <md-dialog-actions>
-          <md-button class="md-primary" @click="reload()">reconnect</md-button>
-      </md-dialog-actions>
-    </md-dialog>
-</template>
-
-<script>
-import events from '../../events'
-import store from '../../store'
-
-export default {
-    created () {
-        events.$on('DISCONNECTED', () => {
-            if (store.state.user) {
-                this.$refs['disconnected-dialog'].open()
-            }
-        })
-    },
-    methods: {
-        reload () {
-            window.location.reload(false)
-        }
-    }
-}
-</script>
diff --git a/src/dashboard-client/src/events.js b/src/dashboard-client/src/events.js
index 3626c593b..adb820035 100644
--- a/src/dashboard-client/src/events.js
+++ b/src/dashboard-client/src/events.js
@@ -22,6 +22,9 @@ Vue.use(VueSocketio, socket)
 
 export default new Vue({
     sockets: {
+        connect () {
+            this.$emit('CONNECTED')
+        },
         disconnect () {
             this.$emit('DISCONNECTED')
         },