✨ Add an automation page

app/components/help/Automation.vue

@@ -0,0 +1,15 @@
+<template>
+  <help :visible="visible" @close="$emit('close')">Automatisation</help>
+</template>
+
+<script>
+import Help from './Help'
+
+export default {
+  props: ['visible'],
+  components: { Help }
+}
+</script>
+
+<style lang="sass" scoped>
+</style>

app/components/pages/Automation.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <help :visible="help" @close="help = false"></help>
+
+    <h1 class="title">
+      Automatisation
+      <a href="#" @click.prevent="help = true" data-balloon="Aide" data-balloon-pos="up">
+        <span class="icon is-medium">
+          <i class="fa fa-question-circle-o"></i>
+        </span>
+      </a>
+    </h1>
+    <h2 class="subtitle">
+      Ici, vous pouvez automatiser les comportements de vos périphériques.
+    </h2>
+  </div>
+</template>
+
+<script>
+import Help from '../help/Automation'
+
+export default {
+  data () {
+    return {
+      help: false
+    }
+  },
+  components: {
+    Help
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+</style>

app/components/partials/Header.vue

@@ -57,8 +57,24 @@
       <nav class="tabs is-boxed">
         <div class="container">
           <ul>
-            <li :class="{ 'is-active': route.path === '/' }"><router-link to="/" exact>Vue d'ensemble</router-link></li>
-            <li :class="{ 'is-active': route.path === '/peripheriques' }"><router-link to="/peripheriques" exact>Périphériques &nbsp;<i class="fa fa-cog"></i></router-link></li>
+            <li :class="{ 'is-active': route.path === '/' }">
+              <router-link to="/" exact>
+                <span class="icon is-small"><i class="fa fa-eye"></i></span>
+                <span>Vue d'ensemble</span>
+              </router-link>
+            </li>
+            <li :class="{ 'is-active': route.path === '/peripheriques' }">
+              <router-link to="/peripheriques" exact>
+                <span class="icon is-small"><i class="fa fa-lightbulb-o"></i></span>
+                <span>Périphériques</span>
+              </router-link>
+            </li>
+            <li :class="{ 'is-active': route.path === '/automatisation' }">
+              <router-link to="/automatisation" exact>
+                <span class="icon is-small"><i class="fa fa-magic"></i></span>
+                <span>Automatisation</span>
+              </router-link>
+            </li>
           </ul>
         </div>
       </nav>

app/index.js

@@ -6,18 +6,19 @@ import initializeStore, {SET_INTENDED_ROUTE, SET_IS_AUTHENTIFIED} from './store/
 
 import Overview from './components/pages/Overview'
 import Devices from './components/pages/Devices'
+import Automation from './components/pages/Automation'
 
 import Authentication from './components/standalones/Authentication'
 import AddDevice from './components/standalones/AddDevice'
 
-
 const app = new EVA({ mode: 'history' })
 
 initializeStore(app)
 
 app.router(route => [
   { meta: { title: "Vue d'ensemble" }, ...route('/', Overview) },
   { meta: { title: 'Périphériques' }, ...route('/peripheriques', Devices) },
+  { meta: { title: 'Automatisation' }, ...route('/automatisation', Automation) },
 
   { meta: { title: 'Authentifiez-vous', standalone: true }, ...route('/authentification', Authentication) },
   { meta: { title: "Ajout d'un périphérique", standalone: true }, ...route('/ajout-peripherique', AddDevice) },
@@ -49,4 +50,4 @@ app.$router.afterEach((to, from) => {
   document.title = `${to.meta.title} - Homie Dashboard`
 })
 app.use(AsyncComputed)
-app.start(App, '#app')
+app.start(App, '#app')