switched from vue-resource to axios

as vue-resource is retired from official recommendation status
we switch to axios, which is better maintained and supports a
similar API.

for more background see:
https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4

config/dev.env.js

@@ -4,8 +4,6 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  API_STEERING: '"http://127.0.0.1:3000/api/v1/"',
-  API_STEERING_SHOWS: '"http://127.0.0.1:3000/api/v1/shows/"'
-  //API_STEERING: '"http://127.0.0.1:8000/api/v1/"',
-  //API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"'
+  API_STEERING: '"http://127.0.0.1:8000/api/v1/"',
+  API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"'
 })

package.json

@@ -14,6 +14,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "axios": "^0.17.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/components/ShowManager.vue

@@ -206,6 +206,7 @@
 
 <script>
 import timeslotSort from '../mixins/timeslotSort'
+import axios from 'axios'
 
 function leadingZero (num) {
   if (num < 10) return '0' + num
@@ -250,28 +251,22 @@ export default {
       this.currentShow = index
       this.currentShowID = this.shows[this.currentShow].id
       // now fetch the single timeslots for a given show from PV backend
-      this.$http.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots').then(response => {
-        if (response.body.hasOwnProperty('error')) alert(response.body.error)
-        else {
-          this.timeslots = response.body
-          this.timeslotsLoaded = true
-          // now that we have the timeslots we can fetch notes for all those timeslots
-          // TODO: curently we are fetching all notes for the show into a single array
-          // for bigger data sets it might be preferable to fetch only the notes for those
-          // timeslots that are also visible to the user
-          this.$http.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => {
-            if (response.body.hasOwnProperty('error')) alert(response.body.error)
-            else {
-              this.notes = response.body
-              this.notesLoaded = true
-            }
-          }, response => {
-            alert('There was an error fetching notes from the server')
-          })
-          // done fetching notes
-        }
-      }, response => {
-        alert('There was an error fetching timeslots from the server')
+      axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots').then(response => {
+        this.timeslots = response.data
+        this.timeslotsLoaded = true
+        // now that we have the timeslots we can fetch notes for all those timeslots
+        // TODO: curently we are fetching all notes for the show into a single array
+        // for bigger data sets it might be preferable to fetch only the notes for those
+        // timeslots that are also visible to the user
+        axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => {
+          this.notes = response.body
+          this.notesLoaded = true
+        }).catch(error => {
+          alert('There was an error fetching notes from the server' + error)
+        })
+        // done fetching notes
+      }).catch(error => {
+        alert('There was an error fetching timeslots from the server' + error)
       })
       // done fetching timeslots
     },
@@ -312,19 +307,14 @@ export default {
     }
   },
   created () {
-    // fetch sendereihen from PV backend
-    this.$http.get(process.env.API_STEERING_SHOWS).then(response => {
-      if (response.body.hasOwnProperty('error')) {
-        alert(response.body.error)
-      } else {
-        this.shows = response.body
-        this.currentShowID = this.shows[0].id
-        this.currentShow = 0
-        this.showsLoaded = true
-        this.switchShow(this.currentShow)
-      }
-    }, response => {
-      alert('There was an error fetching shows from the server')
+    axios.get(process.env.API_STEERING_SHOWS).then(response => {
+      this.shows = response.data
+      this.currentShowID = this.shows[0].id
+      this.currentShow = 0
+      this.showsLoaded = true
+      this.switchShow(this.currentShow)
+    }).catch(error => {
+      alert('There was an error fetching shows from the server: ' + error)
     })
   }
 }

src/main.js

@@ -3,10 +3,8 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import VueResource from 'vue-resource'
 import BootstrapVue from 'bootstrap-vue'
 
-Vue.use(VueResource)
 Vue.use(BootstrapVue)
 
 Vue.config.productionTip = false