Update components, add ConnectionStatus

src/components/ConnectionStatus.vue

@@ -0,0 +1,109 @@
+<template lang="pug">
+  .connection-status(:class='status.css')
+    loading-bar(:step='waitingPercentage')
+    .line-item
+      waiting-dots.line-item(v-if='!connected && isWaiting')
+      .message(v-else) {{status.msg}}
+      .time(v-if='showTime') {{status.time | m-seconds-ago}}
+</template>
+<script>
+import { CONNECTION_STATUS as STATUS } from '../config/types'
+import { mapState, mapGetters } from 'vuex'
+import WaitingDots from './WaitingDots'
+import LoadingBar from './LoadingBar'
+import { mSecondsAgo } from '../filters/TimeFilters'
+const WAITING_TIME = 15 * 1000
+export default {
+  name: 'connection-status',
+  components: {
+    WaitingDots,
+    LoadingBar
+  },
+  filters: {
+    mSecondsAgo
+  },
+  data () {
+    return {
+      interval: undefined,
+      startTime: 0,
+      watcher: undefined
+    }
+  },
+  created () {
+    this.startTime = Date.now()
+    this.watcher = this.$store.watch(state => state.socketConnected,
+      (newValue, oldValue) => {
+        if (!newValue) this.startTime = Date.now()
+      })
+  },
+  beforeDestroy () {
+    this.watcher()
+  },
+  computed: {
+    ...mapState({
+      now: state => state.date,
+      connected: state => state.socketConnected
+    }),
+    ...mapGetters([
+      'connectionStart',
+      'connectionEnd'
+    ]),
+    showMessage () {
+      return true
+    },
+    lostTime () {
+      let { connectionEnd, now } = this
+      return (connectionEnd) ? now - connectionEnd : 0
+    },
+    waitingTime () {
+      return (this.now - this.startTime) || 0
+    },
+    waitingPercentage () {
+      const total = WAITING_TIME
+      const { waitingTime } = this
+      const time = (waitingTime <= WAITING_TIME) ? waitingTime : WAITING_TIME
+      return Math.floor(100 * time / total)
+    },
+    isLost () {
+      return (this.connectionEnd) ? this.lostTime > WAITING_TIME : 0
+    },
+    connectedTime () {
+      let { connectionStart, now } = this
+      return (connectionStart) ? (now - connectionStart) || 0 : 0
+    },
+    isWaiting () {
+      return this.waitingTime < WAITING_TIME
+    },
+    connectionStatus () {
+      let { isLost, isWaiting, connected, lostTime, waitingTime, connectedTime } = this
+      if (connected) return [STATUS.CONNECTED, 'brand', connectedTime]
+      if (isLost) return [STATUS.LOST, 'warn', lostTime]
+      if (isWaiting) return [STATUS.WAITING, 'brand', waitingTime]
+      return [STATUS.UNABLE, 'error', waitingTime]
+    },
+    status () {
+      let [msg, css, time] = this.connectionStatus
+      return { msg, css, time }
+    },
+    showTime () {
+      return false
+    }
+  }
+}
+</script>
+<style lang="stylus">
+  @import '../lib/styl/style.styl'
+  @import '../lib/styl/mixins.styl'
+
+  .connection-status
+    // font-family $monospace-font
+    display flex
+    flex-flow column nowrap
+    color $color
+    font-size 0.75em
+    align-self flex-start
+    flex-centered()
+    width 100%
+    max-width 100%
+    height auto
+</style>

src/config/types.js

@@ -49,3 +49,10 @@ export const SORT = 'sort'
 export const Q = 'q'
 
 export const SEPARATOR = '__'
+
+export const CONNECTION_STATUS = {
+  CONNECTED: 'Connected',
+  WAITING: 'Waiting for connection',
+  LOST: 'Connection lost',
+  UNABLE: 'Cannot connect to backend'
+}

src/lib/styl/classes.styl

@@ -99,4 +99,8 @@ ul.inline
     margin-top 0
 
 .section + .subtitle
-  margin-top 2em   
+  margin-top 2em  
+
+.line-item
+  margin .5em 1em
+  flex 1 0