[ADD] connection status component

src/App.vue

@@ -40,6 +40,7 @@
                             :selected='selectedStore'
                             @onSelect='selectStore'
                         )
+                connection-status
                 .wizard-footer-right
                     wizard-button(
                         v-if='!props.isLastStep'
@@ -72,11 +73,9 @@
     import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
     import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
-    import ProductStep from './components/steps/Product'
-    import CustomerStep from './components/steps/Customer'
-    import PaymentStep from './components/steps/Payment'
     import SettingsModal from './components/modals/SettingsModal'
-    import { LoadingOverlay, SettingsButton, InputSelect } from './components/common'
+    import {Product as ProductStep, Customer as CustomerStep, Payment as PaymentStep} from './components/steps'
+    import { LoadingOverlay, SettingsButton, InputSelect, ConnectionStatus } from './components/common'
 
     export default {
         components: {
@@ -89,7 +88,8 @@
             LoadingOverlay,
             SettingsButton,
             SettingsModal,
-            InputSelect
+            InputSelect,
+            ConnectionStatus
         },
         computed: mapGetters([
             'isSale',
@@ -209,6 +209,7 @@
                 position: absolute
                 bottom: 0
                 text-align: center
+                box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.26)
                 .wizard-footer-center
                     width: 270px
                     display: inline-block
@@ -219,12 +220,14 @@
                             width: 200px
                             margin-left: 15px
                             display: inline-block
-                .wizard-btn
-                    width: 160px
-                    height: 40px
-                    border-radius: 0
-                    box-shadow: none
-                    border: none
-                    &:hover, &:focus
-                        background: $app-main-color
+                .wizard-footer-left, .wizard-footer-right
+                    margin-top: 3px
+                    .wizard-btn
+                        width: 160px
+                        height: 40px
+                        border-radius: 0
+                        box-shadow: none
+                        border: none
+                        &:hover, &:focus
+                            background: $app-main-color
 </style>

src/components/common/ConnectionStatus.vue

@@ -0,0 +1,74 @@
+<template lang="pug">
+    .connection-status(:class="{'status-ok': isWired, 'status-ko': !isWired}")
+        i.fa.fa-plug(aria-hidden='true')
+        h3 {{ message }}
+</template>
+
+<script>
+    import axios from 'axios'
+
+    export default {
+        methods: {
+            startNetWatcher() {
+                this.intevalId = setInterval(() => {
+                    const url = '/web/static/src/img/favicon.ico?_=' + new Date().getTime()
+                    axios.get(url).then(() => {
+                        this.isWired = true
+                    }).catch(() => {
+                        this.isWired = false
+                    })
+                }, 1000)
+            },
+            stopNetWatcher() {
+                clearInterval(this.intevalId)
+            },
+            notifyNetStatus() {
+                this.$emit('onNet', this.isWired)
+            }
+        },
+        watch: {
+            isWired(value) {
+                if (value) {
+                    this.message = 'Conectado al servidor'
+                } else {
+                    this.message = 'Sin conexión al servidor'
+                }
+                
+                this.notifyNetStatus()
+            }
+        },
+        data() {
+            return {
+                message: 'Estableciendo conexión',
+                isWired: false,
+                intevalId: null
+            }
+        },
+        mounted() {
+            this.startNetWatcher()
+        },
+        destroyed() {
+            this.stopNetWatcher()
+        }
+    }
+</script>
+
+<style lang="sass">
+    .connection-status
+        display: inline-block
+        width: 200px
+        height: 50px
+        line-height: 50px
+        &.status-ok
+            color: #4caf50
+        &.status-ko
+            color: #f44336
+        .fa
+            display: inline-block
+            font-size: 12pt
+        h3
+            display: inline-block
+            font-size: 10pt
+            margin: 0
+            margin-left: 5px
+</style>

src/components/common/SettingsButton.vue

@@ -37,13 +37,13 @@
     @import '../../assets/variables'
 
     .settings-button
-        width: 45px;
-        height: 45px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        background: $app-main-color;
-        border-radius: 0 0 0 90%;
+        width: 45px
+        height: 45px
+        position: absolute
+        top: 0
+        right: 0
+        background: $app-main-color
+        border-radius: 0 0 0 90%
         &:hover
             cursor: pointer
         .fa

src/components/common/index.js

@@ -9,6 +9,7 @@ import LoadingOverlay from './LoadingOverlay'
 import SettingsButton from './SettingsButton'
 import SwitchButtonInput from './SwitchButtonInput'
 import InputSelect from './InputSelect'
+import ConnectionStatus from './ConnectionStatus'
 
 export {
     CardGrid,
@@ -21,5 +22,6 @@ export {
     LoadingOverlay,
     SettingsButton,
     SwitchButtonInput,
-    InputSelect
+    InputSelect,
+    ConnectionStatus
 }

src/components/steps/index.js

@@ -0,0 +1,9 @@
+import Product from './Product'
+import Customer from './Customer'
+import Payment from './Payment'
+
+export {
+    Product,
+    Customer,
+    Payment
+}

src/store/actions.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { Db } from '../utils'
 
 const actions = {
     notify(_, message) {
@@ -25,14 +26,16 @@ const actions = {
             console.error(error)
         })
     },
-    explodeData({ dispatch, commit }, payload) {
-        for (let value in payload) {
+    explodeData({ dispatch, commit }, data) {
+        Db.create(data)
+
+        for (let value in data) {
             if (value === 'settings') {
-                commit('updateSettings', payload[value])
+                commit('updateSettings', data[value])
                 continue
             }
 
-            dispatch(`init${value[0].toUpperCase()}${value.slice(1)}`, payload[value])
+            dispatch(`init${value[0].toUpperCase()}${value.slice(1)}`, data[value])
         }
     },
     createProduct({ dispatch }, payload) {

src/store/index.js

@@ -43,9 +43,9 @@ const store = new Vuex.Store({
     strict: true
 })
 
-store.subscribe((mutation, state) => {
-    console.log(mutation)
-    console.log(state)
-})
+// store.subscribe((mutation, state) => {
+//     console.log(mutation)
+//     console.log(state)
+// })
 
 export default store

src/utils/db.js

@@ -1,10 +1,8 @@
-export class Db {
+const create = data => {
+    console.log(data)
+}
 
-    /**
-     * 
-     * @param {*} model 
-     * @param {*} data 
-     */
-    save(model, data) {
-    }
+
+export default {
+    create
 }

src/utils/index.js

@@ -1,4 +1,4 @@
-import { Db } from './db'
+import Db from './db'
 
 export {
     Db