repackage with Vue CLI

spujadas · Oct 28, 2020 · 8310be0 · 8310be0
1 parent 2923820
commit 8310be0
Show file tree

Hide file tree

Showing 25 changed files with 10,028 additions and 157 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,24 @@
 /_*/
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -15,7 +15,39 @@ This front end Departure supports the following operators:
 
 
 
-See the [Departure-Python documentation page](https://departure-python.readthedocs.io/) for instructions on how to install the front end.
+See the [Departure-Python documentation page](https://departure-python.readthedocs.io/) for instructions on how to install the front end for use with the Departure web API server (`departure-web`).
+
+
+
+### Releases
+
+Pre-built releases of the static files (HTML, JavaScript, assets) of the front end can be found in the repository's [Releases](https://github.com/spujadas/departure-front-end/releases).
+
+
+
+### Build
+
+To build the static files yourself, for instance if you want to contribute to the project, first install [Node.js](https://nodejs.org/) and [yarn](https://yarnpkg.com/).
+
+Next, install the project's prerequisites:
+
+```
+yarn install
+```
+
+To compile and minify the app for production, run the following command:
+
+```
+yarn build
+```
+
+The bundled app will be located in the `dist` subdirectory, which you can then expose to the Departure web API server (`departure-web`).
+
+To automatically rebuild the app when you make a change to the source, you can run: 
+
+```
+yarn build --watch
+```
 
 
 

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "departure-front-end",
+  "version": "1.0.1",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.21.0",
+    "bootstrap": "4.5.2",
+    "core-js": "^3.6.5",
+    "jquery": "3.5.1",
+    "lodash": "^4.17.20",
+    "notyf": "^3.9.0",
+    "popper.js": "1.16.1",
+    "vue": "^2.6.11",
+    "vue-axios": "^3.1.3",
+    "vue-router": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/static/favicon.ico → public/favicon.ico b/static/favicon.ico → public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" style="overflow-y: scroll;">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Departure</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/static/App.vue → src/App.vue b/static/App.vue → src/App.vue
@@ -7,7 +7,7 @@
         </svg>
       </button>
       <nav id="sidebarMenu" class="col-lg-3 bg-light pt-3 sidebar d-lg-block collapse show">
-        <img src="images/departure.png" alt="Departure" class="img-fluid mx-auto d-block" />
+        <img src="./assets/departure.png" alt="Departure" class="img-fluid mx-auto d-block" />
         <hr/>
 
         <!-- providers -->
@@ -62,67 +62,46 @@
 </template>
 
 <script>
-const Ratp = httpVueLoader('Ratp.vue');
-const Transilien = httpVueLoader('Transilien.vue');
-const Sncf = httpVueLoader('Sncf.vue');
-const NationalRail = httpVueLoader('NationalRail.vue');
-const TflTube = httpVueLoader('TflTube.vue');
-const Ns = httpVueLoader('NS.vue');
-const Admin = httpVueLoader('Admin.vue');
+import axios from 'axios';
 
-const routes = [
-  { path: '/ratp', component: Ratp },
-  { path: '/transilien', component: Transilien },
-  { path: '/sncf', component: Sncf },
-  { path: '/national-rail', component: NationalRail },
-  { path: '/tfl-tube', component: TflTube },
-  { path: '/ns', component: Ns },
-  { path: '/admin', component: Admin },
-]
-
-const router = new VueRouter({
-  routes  // short for `routes: routes`
-})
-
-
-module.exports = {
-  router,  // inject the router option to make the whole app router-aware.
+export default {
+  inject: ['notyf'],
 
   created() {
     this.providers = {
       'tfl-tube': {
         'to': '/tfl-tube',
-        'logoSrc': 'images/tfl-tube.png',
+        'logoSrc': require('./assets/tfl-tube.png'),
         'logoAlt': '[Tube (TfL)]',
         'name': 'London Underground 🇬🇧'
       },
       'national-rail': {
         'to': '/national-rail',
-        'logoSrc': 'images/national-rail.png',
+        'logoSrc': require('./assets/national-rail.png'),
         'logoAlt': '[NR]',
         'name': 'National Rail 🇬🇧'
       },
       'ns': {
         'to': '/ns',
-        'logoSrc': 'images/ns.png',
+        'logoSrc': require('./assets/ns.png'),
         'logoAlt': '[NS]',
         'name': 'Nederlandse Spoorwegen 🇳🇱'
       },
       'ratp': {
         'to': '/ratp',
-        'logoSrc': 'images/ratp.png',
+        'logoSrc': require('./assets/ratp.png'),
         'logoAlt': '[RATP]',
         'name': 'RATP 🇫🇷'
       },
       'sncf': {
         'to': '/sncf',
-        'logoSrc': 'images/sncf.png',
+        'logoSrc': require('./assets/sncf.png'),
         'logoAlt': '[SNCF]',
         'name': 'SNCF 🇫🇷'
       },
       'transilien': {
         'to': '/transilien',
-        'logoSrc': 'images/transilien.png',
+        'logoSrc': require('./assets/transilien.png'),
         'logoAlt': '[Tube (TfL)]',
         'name': 'Transilien 🇫🇷'
       }
@@ -142,13 +121,13 @@ module.exports = {
     stopBoardClient() {
       axios
         .post('/stop-client')
-        .then(response => (notyf.success("Stopped departure board")));
+        .then(() => (this.notyf.success("Stopped departure board")));
     }
   },
 }
 </script>
 
-<style>
+<style scoped>
 .sidebar {
   position: fixed;
   top: 0;

diff --git a/static/images/departure.png → src/assets/departure.png b/static/images/departure.png → src/assets/departure.png
diff --git a/static/images/national-rail.png → src/assets/national-rail.png b/static/images/national-rail.png → src/assets/national-rail.png
diff --git a/static/images/ns.png → src/assets/ns.png b/static/images/ns.png → src/assets/ns.png
diff --git a/static/images/ratp.png → src/assets/ratp.png b/static/images/ratp.png → src/assets/ratp.png
diff --git a/static/images/sncf.png → src/assets/sncf.png b/static/images/sncf.png → src/assets/sncf.png
diff --git a/static/images/tfl-tube.png → src/assets/tfl-tube.png b/static/images/tfl-tube.png → src/assets/tfl-tube.png
diff --git a/static/images/transilien.png → src/assets/transilien.png b/static/images/transilien.png → src/assets/transilien.png
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import axios from 'axios';
+import VueAxios from 'vue-axios';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap';
+
+import { Notyf } from 'notyf';
+import 'notyf/notyf.min.css';
+
+Vue.config.productionTip = false;
+
+Vue.use(VueAxios, axios);
+
+new Vue({
+  router,
+  provide: () => {
+    return {
+      notyf: new Notyf({
+        duration: 4000
+      })
+    }
+  },
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Ratp from '../views/Ratp.vue'
+import Transilien from '../views/Transilien.vue'
+import Sncf from '../views/Sncf.vue'
+import NationalRail from '../views/NationalRail.vue'
+import TflTube from '../views/TflTube.vue'
+import Ns from '../views/NS.vue'
+import Admin from '../views/Admin.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  { path: '/ratp', component: Ratp },
+  { path: '/transilien', component: Transilien },
+  { path: '/sncf', component: Sncf },
+  { path: '/national-rail', component: NationalRail },
+  { path: '/tfl-tube', component: TflTube },
+  { path: '/ns', component: Ns },
+  { path: '/admin', component: Admin },
+]
+
+const router = new VueRouter({
+  routes  // short for `routes: routes`
+})
+
+export default router
diff --git a/static/Admin.vue → src/views/Admin.vue b/static/Admin.vue → src/views/Admin.vue
@@ -100,9 +100,11 @@
 </template>
 
 <script>
-module.exports = {
+export default {
   name: 'Admin',
 
+  inject: ['notyf'],
+
   computed: {
     boardServerShutdownButtonDisabled() {
       return this.refreshing || !this.boardServerUp
@@ -126,38 +128,38 @@ module.exports = {
 
   methods: {
     shutdownBoardServerHost() {
-      axios
+      this.axios
         .post('/shutdown-board-server')
         .then((response) => {
           if (response.data.status == "OK") {
-            notyf.success("Shutting down board server host");
+            this.notyf.success("Shutting down board server host");
           }
           else if (response.data.status == "error") {
-            notyf.error({
+            this.notyf.error({
               "message": "Could not shut down board server host: "
                 + response.data.message,
               "duration": 4000
             });
           }
         })
         .catch((error) =>
-            notyf.error({
+            this.notyf.error({
               "message": "Could not shut down board server host: " + error,
               "duration": 4000
             })
         );
     },
 
     shutdownWebServerHost() {
-      axios
+      this.axios
         .post('/shutdown-web-server')
         .then((response) => {
           if (response.data.status == "OK") {
-            notyf.success("Shutting down web server host – bye!");
+            this.notyf.success("Shutting down web server host – bye!");
           }
         })
         .catch((error) =>
-            notyf.error({
+            this.notyf.error({
               "message": "Could not shut down web server host: " + error,
               "duration": 4000
             })
@@ -169,7 +171,7 @@ module.exports = {
       this.refreshing = true;
       this.boardServerUp = false;
       this.webServerUp = false;
-      axios
+      this.axios
         .get('/board-server-status')
         .then((response) => {
           this.webServerUp = true;  // reset
@@ -178,7 +180,7 @@ module.exports = {
           }
           else if (response.data.status == "error") {
             this.boardServerUp = false;
-            notyf.error({
+            this.notyf.error({
               "message": "Could not get board server status: "
                 + response.data.message,
               "duration": 4000
@@ -187,7 +189,7 @@ module.exports = {
           this.refreshing = false;
         })
         .catch((error) => {
-          notyf.error({
+          this.notyf.error({
             "message": "Could not refresh: " + error,
             "duration": 4000
           });