feat(helper functions) + update readme

Author: betaWeb

.env

@@ -1,4 +1,5 @@
 APP_ENV="production"
+API_ONLY=false
 
 API_PROTOCOL="http"
 API_HOST="localhost"

README.md

@@ -22,6 +22,7 @@ npm run serve:prod
 The server starts by default on port `3000`. To launch app with other port, or define other environment variables, you can edit `.env` file.
 ```
 APP_ENV="production"
+API_ONLY=false
 
 API_PROTOCOL="http"
 API_HOST="localhost"
@@ -35,4 +36,7 @@ CONF_PATH="/etc/apache2/"
 CONF_EXTENSION=".conf"
 CONF_AVAILABLES="sites-available/"
 CONF_ENABLED="sites-enabled/"
-```
+```
+
+If you only want to launch the API, you can set `API_ONLY` env variable value at `true`.
+It allows you to access the app via an HTTP server like Apache2, Nginx etc (the entry point is `build/index.html`).

server.js

@@ -131,7 +131,7 @@ api.put('/api/vh/:id/disable', async (req, res) => {
 
 api.listen(config.api.port, () => console.log(`API started on ${config.api.protocol}://${config.api.host}:${config.api.port}`))
 
-if (env === 'production') {
+if (env === 'production' && process.env.API_ONLY === false) {
     const app = express()
     app.use(express.static(__dirname + '/dist/'));
     app.get('/', (req, res) => res.sendFile(__dirname + '/dist/index.html'))

src/components/Actions.vue

@@ -53,10 +53,10 @@ export default {
             try {
                 const id = this.item.id
                 const info = await VHMaganer.duplicate(id)
-                this.$root.$emit('vh.duplicated', { id, info })
-                this.$root.$emit('flash', { message: "VHost dupliqué avec succès", type: 'success' })
+                dispatch('vh.duplicated', { id, info })
+                flash("VHost dupliqué avec succès", "success")
             } catch (e) {
-                this.$root.$emit('flash', { message: e })
+                flash(e)
             }
         },
 
@@ -65,10 +65,10 @@ export default {
             try {
                 const id = this.item.id
                 await VHMaganer.destroy(id)
-                this.$root.$emit('vh.destroyed', { id })
-                this.$root.$emit('flash', { message: "VHost supprimé avec succès", type: 'success' })
+                dispatch('vh.destroyed', { id })
+                flash("VHost supprimé avec succès", "success")
             } catch (e) {
-                this.$root.$emit('flash', { message: e })
+                flash(e)
             }
         },
 
@@ -82,7 +82,7 @@ export default {
             } catch (e) {
                 message = e
             }
-            this.$root.$emit('flash', { message, type })
+            flash(message, type)
         }
     },
 

src/components/FlashComponent/FlashContainer.vue

@@ -38,8 +38,10 @@ export default {
     },
 
     mounted () {
-        this.$root.$on('flash', this.addItem.bind(this))
-        this.$root.$on('flash.close', ({ id }) => this.removeItem(id))
+        this.$nextTick(() => {
+            listen('flash', this.addItem.bind(this))
+            listen('flash.close', ({ id }) => this.removeItem(id))
+        })
     }
 }
 </script>

src/components/Form.vue

@@ -98,7 +98,7 @@ export default {
                 this.item = {...this.item, ...response}
                 this.initEditor(this.parsed)
             } catch (e) {
-                this.$root.$emit('flash', { message: e })
+                flash(e)
             }
         },
 
@@ -129,7 +129,7 @@ export default {
                 let message = 'VHost %s avec succès'
                 let state = this.editing ? 'mis à jour' : 'créé'
                 if (enabled) state = `${state} et activé`
-                this.$root.$emit('flash', { message: message.replace('%s', state), type: 'success' })
+                flash(message.replace('%s', state), 'success')
             } catch (e) {
                 this.configtest = e.message ? e.message : e
                 this.lineError = VHMaganer.getLineError(this.configtest)
@@ -160,7 +160,10 @@ export default {
             } catch (e) {
                 if (this.hasConfigError) {
                     this.lineError = VHMaganer.getLineError(e)
-                    if (this.lineError !== null) this.editor.addLineClass(this.lineError, 'wrap', 'error__bg')
+                    if (this.lineError !== null) {
+                        this.editor.addLineClass(this.lineError, 'wrap', 'error__bg')
+                        this.editor.scrollIntoView(this.lineError)
+                    }
                 }
             }
             this.loader = false
@@ -241,7 +244,7 @@ export default {
                 position: relative;
 
                 &.has__error .CodeMirror {
-                    padding-bottom: 50px;
+                    padding-bottom: 60px;
 
                     .CodeMirror-scroll {
                         overflow: hidden !important;
@@ -273,10 +276,10 @@ export default {
                 width: 100%;
                 font-size: .85em;
                 font-style: italic;
-                height: 50px;
+                max-height: 60px;
                 margin: 0;
-                padding: .25em 1em;
-                background-color: transparent;
+                padding: .5em 1em;
+                background-color: $bg-color;
                 transform: translateY(-20px);
                 z-index: 100;
                 overflow-y: auto;

src/components/Home.vue

@@ -52,7 +52,8 @@ export default {
                 this.list = await VHMaganer.all()
                 this.filteredList = this.list
             } catch (e) {
-                this.$root.$emit('flash', { message: e })
+                // this.$root.$emit('flash', { message: e })
+                flash(e)
             }
             this.loader = false
         },
@@ -80,8 +81,8 @@ export default {
 
     async mounted () {
         await this.fetchList()
-        this.$root.$on('vh.duplicated', ({ info }) => this.filteredList.push(info))
-        this.$root.$on('vh.destroyed', ({ id }) => this.filteredList = this.filteredList.filter(item => item.id != id))
+        listen('vh.duplicated', ({ info }) => this.filteredList.push(info))
+        listen('vh.destroyed', ({ id }) => this.filteredList = this.filteredList.filter(item => item.id != id))
     }
 }
 </script>

src/components/Show.vue

@@ -3,7 +3,7 @@
       <Loader v-show="loader" />
       <div v-show="!loader && item">
         <div class="toolbar toolbar__show">
-            <router-link class="toolbar__link back__link" :to="{ name: 'vh.index'}">Retour</router-link>
+            <router-link class="toolbar__link back__link" :to="{ name: 'vh.index' }">Retour</router-link>
             <Actions :item="item" class="toolbar__actions" />
         </div>
         <div class="info">
@@ -45,7 +45,7 @@ export default {
             try {
                 this.item = await VHMaganer.find(this.$route.params.id)
             } catch (e) {
-                this.$root.$emit('flash', { message: e })
+                flash(e)
             }
             this.loader = false
         }

src/main.js

@@ -1,5 +1,3 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
@@ -12,9 +10,13 @@ Vue.filter('join', function (value, glue = ', ') {
 })
 
 /* eslint-disable no-new */
-new Vue({
+const app = new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })
+
+window.listen = (name, cb) => app.$root.$on(name, cb)
+window.dispatch = (name, data = {}) => app.$root.$emit(name, data)
+window.flash = (message, type, timeout) => dispatch('flash', { message, type, timeout })

static/scss/_variables.scss

@@ -3,6 +3,6 @@ $black-color: #000;
 $dark-color: #2b2828;
 $main-color: #ae18ae;
 $text-color: #4d4d4d;
-$bg-color: #ddd;
+$bg-color: #282a36;
 $success-color: #26A65B;
 $error-color: #D64541;