Move to vue-cli

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.eslintrc.js

@@ -1,6 +1,17 @@
-const { Neutrino } = require('neutrino');
-
-module.exports = Neutrino({ root: __dirname })
-  .use('.neutrinorc.js')
-  .call('eslintrc');
-
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

.gitignore

@@ -1,17 +1,21 @@
-node_modules/
-/dist/
-/build/
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode/
-*~
-[._]*.s[a-v][a-z]
-[._]*.sw[a-p]
-[._]s[a-rt-v][a-z]
-[._]ss[a-gi-z]
-[._]sw[a-p]
-Session.vim
-[._]*.un~
-
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.gitlab-ci.yml

@@ -1,19 +1,29 @@
 image: node:alpine
+stages:
+  - lint
+  - deploy
+
+before_script:
+  - npm ci
+
+cache:
+  paths:
+    - node_modules
+
+lint:
+  stage: lint
+  script:
+    - npm run lint
 
 pages:
   stage: deploy
-  before_script:
-    - apk --update add build-base libpng-dev autoconf automake bash
-    - npm install
   script:
     - npm run build
-    - mv build public
+    - mv public public-vue
+    - mv dist public
   artifacts:
     paths:
       - public
-  cache:
-    paths:
-      - node_modules
   only:
     - master
 

.neutrinorc.js

@@ -1,20 +0,0 @@
-module.exports = {
-  use: [
-    '@neutrinojs/airbnb-base',
-    [
-      '@neutrinojs/vue',
-      {
-        html: {
-          title: 'Transporte',
-          links: [
-            {
-              href: 'static/favicon.ico',
-              rel: 'icon',
-              type: 'image/x-icon'
-	    }
-	  ]
-        }
-      }
-    ]
-  ]
-}

README.md

@@ -13,21 +13,21 @@ npm install
 ### Dev server
 
 ```
-npm start
+npm run serve
 ```
 
-Starts the Webpack dev server on [localhost:5000](http://localhost:5000).
+Starts the Webpack dev server on [localhost:5000](http://localhost:8080).
 
 ### Linting
 
 This project uses ESLint with the Airbnb Base style.
 
 ```
-npm lint
+npm run lint
 ```
 
 ## Build for production
 
 ```
-npm build
+npm run build
 ```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};

package.json

@@ -2,25 +2,30 @@
   "name": "transporte",
   "version": "1.0.0",
   "description": "Trouver la porte la mieux appropriée dans le métro lillois pour sortir le plus vite possible.",
-  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
   "dependencies": {
-    "bootstrap": "^4.2.1",
-    "bootswatch": "^4.2.1",
-    "jquery": "^3.3.1",
-    "popper.js": "^1.14.7",
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.2"
+    "bootstrap": "^4.3.1",
+    "bootswatch": "^4.3.1",
+    "core-js": "^2.6.5",
+    "jquery": "^3.4.1",
+    "popper.js": "^1.15.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.3"
   },
   "devDependencies": {
-    "@neutrinojs/airbnb-base": "^8.3.0",
-    "@neutrinojs/vue": "^8.3.0",
-    "neutrino": "^8.3.0"
-  },
-  "scripts": {
-    "start": "neutrino start",
-    "build": "neutrino build",
-    "lint": "neutrino lint",
-    "test": "neutrino test"
+    "@vue/cli-plugin-babel": "^3.9.0",
+    "@vue/cli-plugin-eslint": "^3.9.0",
+    "@vue/cli-service": "^3.9.0",
+    "@vue/eslint-config-airbnb": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
   },
   "repository": {
     "type": "git",

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>transporte</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but transporte doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/data.json

@@ -2,7 +2,7 @@
     "lines": {
         "M1": {
             "label": "Ligne 1",
-            "icon": "static/m1.svg",
+            "icon": "img/m1.svg",
             "stations": [
                 "CAL",
                 "LAM",
@@ -26,7 +26,7 @@
         },
         "M2": {
             "label": "Ligne 2",
-            "icon": "static/m2.svg",
+            "icon": "img/m2.svg",
             "stations": [
                 "SPH",
                 "BRG",
@@ -2516,31 +2516,31 @@
     },
     "icons": {
         "elevator": {
-            "path": "static/elevator.svg",
+            "path": "img/elevator.svg",
             "label": "Sortie par ascenseur accessible aux personnes à mobilité réduite"
         },
         "stairs": {
-            "path": "static/stairs.svg",
+            "path": "img/stairs.svg",
             "label": "Sortie par escaliers"
         },
         "escalator": {
-            "path": "static/escalator.svg",
+            "path": "img/escalator.svg",
             "label": "Sortie par escalier mécanique"
         },
         "m1": {
-            "path": "static/m1.svg",
+            "path": "img/m1.svg",
             "label": "Correspondance vers la ligne 1 du métro"
         },
         "m2": {
-            "path": "static/m2.svg",
+            "path": "img/m2.svg",
             "label": "Correspondance vers la ligne 2 du métro"
         },
         "tr": {
-            "path": "static/tr.svg",
+            "path": "img/tr.svg",
             "label": "Correspondance avec la ligne R du tramway"
         },
         "tt": {
-            "path": "static/tt.svg",
+            "path": "img/tt.svg",
             "label": "Correspondance avec la ligne T du tramway"
         }
     },

src/main.js

@@ -1,14 +1,12 @@
 import 'bootstrap';
 import 'bootswatch/dist/cerulean/bootstrap.min.css';
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import App from './App.vue';
 import router from './router';
 
-Vue.use(VueRouter);
+Vue.config.productionTip = false;
 
-export default new Vue({
-  el: '#root',
-  render: h => h(App),
+new Vue({
   router,
-});
+  render: h => h(App),
+}).$mount('#app');

src/router.js

@@ -1,11 +1,14 @@
+import Vue from 'vue';
 import Router from 'vue-router';
-import Lines from './components/Lines.vue';
-import LineStations from './components/LineStations.vue';
-import Doors from './components/Doors.vue';
-import Stations from './components/Stations.vue';
-import Station from './components/Station.vue';
-import About from './components/About.vue';
-import NotFound from './components/NotFound.vue';
+import Lines from './views/Lines.vue';
+import LineStations from './views/LineStations.vue';
+import Doors from './views/Doors.vue';
+import Stations from './views/Stations.vue';
+import Station from './views/Station.vue';
+import About from './views/About.vue';
+import NotFound from './views/NotFound.vue';
+
+Vue.use(Router);
 
 export default new Router({
   routes: [

src/views/Doors.vue

@@ -9,7 +9,7 @@
             <strong>{{ station.label }}</strong>
         </a>
     </p>
-    <img src="static/val.svg" :class="{'flipx': doors['reverse']}" />
+    <img src="../assets/val.svg" :class="{'flipx': isReversed}" />
     <div class="row waggon-row">
         <div class="col waggon-col"
          v-for="waggon in [['1','2','3'],['4','5','6']]"
@@ -26,7 +26,7 @@
         </div>
     </div>
     <ul>
-        <li v-for="(dooricons, code) in doors" v-bind:key="code" v-if="code !== 'reverse'">
+        <li v-for="(dooricons, code) in doors" v-bind:key="code">
             Porte {{ code }}
             <ul>
                 <li v-for="icon in dooricons" v-bind:key="icon">
@@ -46,11 +46,21 @@ export default {
       line: this.$parent.$data.lines[this.$route.params.line],
       destination: this.$parent.$data.stations[this.$route.params.dest],
       station: this.$parent.$data.stations[this.$route.params.station],
-      doors: this.$parent.$data.stations[this.$route.params.station]
+      doorData: this.$parent.$data.stations[this.$route.params.station]
         .doors[this.$route.params.line][this.$route.params.dest],
       icons: this.$parent.$data.icons,
     };
   },
+  computed: {
+    isReversed() {
+      return this.doorData.reverse;
+    },
+    doors() {
+      const doorCopy = Object.assign({}, this.doorData);
+      delete doorCopy.reverse;
+      return doorCopy;
+    },
+  },
 };
 </script>
 

src/views/LineStations.vue

@@ -28,7 +28,7 @@ export default {
   computed: {
     lineStations() {
       return this.line.stations[0] === this.$route.params.dest
-        ? this.line.stations.reverse()
+        ? this.line.stations.slice().reverse()
         : this.line.stations;
     },
   },
@@ -39,15 +39,15 @@ export default {
     .list-group-item {
         padding: 1em 1em 1em 4em;
         min-height: 4em;
-        background-image: url('../static/station.svg');
+        background-image: url('../assets/station.svg');
         background-repeat: no-repeat;
         background-position: 1em 0;
         background-size: contain;
     }
     .list-group-item:first-child {
-        background-image: url('../static/station_first.svg');
+        background-image: url('../assets/station_first.svg');
     }
     .list-group-item:last-child {
-        background-image: url('../static/station_last.svg');
+        background-image: url('../assets/station_last.svg');
     }
 </style>

src/views/Stations.vue

@@ -7,7 +7,7 @@
         v-on:keyup="search" v-model="searchText" required />
       <div class="input-group-append">
         <button class="btn btn-primary" type="button" v-on:click="search">
-          <img src="static/search.svg" />
+          <img src="../assets/search.svg" />
         </button>
       </div>
   </div>
@@ -45,9 +45,8 @@ export default {
   methods: {
     search() {
       Object.keys(this.$data.stations).forEach((code) => {
-        this.$data.stationsVisibility[code] =
-          (this.$data.stations[code].label.toLowerCase()
-            .indexOf(this.$data.searchText.toLowerCase()) !== -1);
+        this.$data.stationsVisibility[code] = (this.$data.stations[code].label.toLowerCase()
+          .indexOf(this.$data.searchText.toLowerCase()) !== -1);
       });
     },
   },
@@ -62,16 +61,16 @@ export default {
 .list-group-item {
     padding: 1em 1em 1em 4em;
     min-height: 4em;
-    background-image: url('../static/station.svg');
+    background-image: url('../assets/station.svg');
     background-repeat: no-repeat;
     background-position: 1em 0;
     background-size: contain;
 }
 .list-group-item:first-child {
-    background-image: url('../static/station_first.svg');
+    background-image: url('../assets/station_first.svg');
 }
 .list-group-item:last-child {
-    background-image: url('../static/station_last.svg');
+    background-image: url('../assets/station_last.svg');
 }
 button img {
     max-width: 20px;