Moved UI error handling to mixin

src/components/paneCapture.vue

@@ -175,7 +175,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit';
 
 // Export main app
 export default {
@@ -279,7 +278,7 @@ export default {
           this.$root.$emit('globalUpdateCaptureList')
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
     },
 
@@ -291,10 +290,10 @@ export default {
           return this.$store.dispatch('pollTask', [response.data.id, 3600, 5])
         })
         .then(() => {
-          UIkit.notification({message: "Finished scan.", status: 'success'})
+          this.modalNotify("Finished scan.")
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error)
         })
         .finally(() => {
           this.isScanning = false

src/components/paneConnect.vue

@@ -126,6 +126,12 @@ export default {
       ]);
       // Try to get config and state JSON from the newly submitted host
       this.$store.dispatch('firstConnect')
+      .then (() => {
+        console.log("Connected!")
+      })
+      .catch(error => {
+        this.modalError(error) // Let mixin handle error
+      })
     },
 
     setLocalMode: function (state) {

src/components/paneDisplayComponents/galleryComponents/captureCard.vue

@@ -105,15 +105,14 @@ export default {
       console.log(this.newtag);
       this.newTagRequest(this.newtag);
       this.newtag = "";
-      UIkit.modal(event.target.parentNode).hide();
+      UIkit.modal(event.target.parentNode).hide();  // TODO: Remove somehow
     },
 
     delCaptureConfirm: function(tag_string) {
       var context = this
-      UIkit.modal.confirm('Permanantly delete capture?').then(function() {
+      this.modalConfirm('Permanantly delete capture?')
+      .then(function() {
         context.delCaptureRequest()
-      }, function () {
-        console.log('Rejected.')
       });
     },
 
@@ -125,7 +124,7 @@ export default {
         this.$root.$emit('globalUpdateCaptureList')
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
@@ -137,16 +136,14 @@ export default {
         this.getTagRequest()
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
     delTagConfirm: function(tag_string) {
       var context = this;
-      UIkit.modal.confirm(`Remove tag '${tag_string}'?`).then(function() {
+      this.modalConfirm(`Remove tag '${tag_string}'?`).then(function() {
         context.delTagRequest(tag_string)
-      }, function () {
-        console.log('Rejected.')
       });
     },
 
@@ -159,7 +156,7 @@ export default {
         this.getTagRequest()
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
@@ -170,7 +167,7 @@ export default {
         this.tags = response.data.metadata.tags
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 

src/components/paneDisplayComponents/galleryComponents/scanCard.vue

@@ -44,7 +44,6 @@
 </template>
 
 <script>
-import UIkit from 'uikit';
 import axios from 'axios'
 
 // Export main app

src/components/paneDisplayComponents/galleryDisplay.vue

@@ -99,7 +99,7 @@ export default {
         this.captureList = response.data;  // Update boxes from response
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 

src/components/paneDisplayComponents/streamDisplay.vue

@@ -156,7 +156,7 @@ export default {
 					this.$store.dispatch('updateState');  // Update store state
 				})
 				.catch(error => {
-					this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+					this.modalError(error) // Let mixin handle error
 				})
 			}
     },

src/components/paneNavigate.vue

@@ -94,7 +94,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit'
 
 // Key Codes
 const keyCodes = {
@@ -207,7 +206,7 @@ export default {
           this.setPosition = response.data.stage.position;  // Update boxes from response
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
         .then(() => {
           this.$store.commit('changeMoveLock', false)  // Release the move lock
@@ -230,8 +229,7 @@ export default {
           console.log("Successfully finished autofocus")
         })
         .catch(error => {
-          UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error}`, status: 'danger'})
+          this.modalError(error) // Let mixin handle error
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
         })
         .finally(() => {
           console.log("Cleaning up after autofocus.")
@@ -256,8 +254,7 @@ export default {
           console.log("Successfully finished autofocus")
         })
         .catch(error => {
-          UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error}`, status: 'danger'})
+          this.modalError(error) // Let mixin handle error
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
         })
         .finally(() => {
           console.log("Cleaning up after autofocus.")

src/components/paneSettingsComponents/cameraSettings.vue

@@ -40,7 +40,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit';
 
 // Export main app
 export default {
@@ -81,7 +80,7 @@ export default {
         .then(this.updateInputValues)
         .then(r=>{console.log("Updated Config: ", payload.picamera_settings)})
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
     },
     recalibrateConfirm: function() {
@@ -102,7 +101,7 @@ export default {
           return this.$store.dispatch('pollTask', [response.data.id, null, null])
         })
         .then(() => {
-          UIkit.notification({message: "Finished recalibration.", status: 'success'})
+          this.modalNotify("Finished recalibration.")
           return new Promise(r => setTimeout(r, 500)) // wait 500ms before updating config, so it's fresh
         })
         .then(() => {
@@ -110,7 +109,7 @@ export default {
         })
         .then(this.updateInputValues)
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
         .finally(() => {
           this.isCalibrating = false

src/components/paneSettingsComponents/microscopeSettings.vue

@@ -44,7 +44,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit';
 
 // Export main app
 export default {
@@ -79,10 +78,10 @@ export default {
         .then(response => { 
           this.$store.dispatch('updateConfig');
           this.updateInputValues
-          UIkit.notification({message: "Microscope config applied.", status: 'success'})
+          this.modalNotify("Microscope config applied.")
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
     }
 

src/store.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import UIkit from 'uikit';
 
 Vue.use(Vuex)
 
@@ -58,12 +57,22 @@ export default new Vuex.Store({
       // Reset the state when reconnecting starts
       context.dispatch('resetState')
       // Mark as loading
-      context.commit('changeWaiting', true)
+      context.dispatch('waitingState')
-      // Do requests
+
-      context.dispatch('updateConfig')
+      var sendRequest = function(resolve, reject) {
-      .then (() => {
+        // Do requests
-        context.dispatch('updateState')
+        context.dispatch('updateConfig')
-      })
+        .then (() => {
+          context.dispatch('updateState')
+        })
+        .then (() => {
+          resolve()
+        })
+        .catch(error => {
+          reject(error)
+        })
+      }
+      return new Promise(sendRequest)
     },
 
     updateConfig(context, uri=`${context.getters.uri}/config`) {
@@ -77,7 +86,6 @@ export default new Vuex.Store({
           resolve()
         })
         .catch(error => {
-          context.dispatch('handleHTTPError', error)
           reject(new Error(error))
         })
       }
@@ -95,7 +103,6 @@ export default new Vuex.Store({
           resolve()
         })
         .catch(error => {
-          context.dispatch('handleHTTPError', error)
           reject(new Error(error))
         })
       }
@@ -136,34 +143,6 @@ export default new Vuex.Store({
       
     },
 
-    handleHTTPError(context, error) {
-      console.log(error.response)
-      var errormsg = '';
-
-      // If a response was obtained
-      if (error.response) {
-        // If the response is a nicely formatted JSON response from the server
-        if (error.response.data.message) {
-          errormsg = `${error.response.status}: ${error.response.data.message}`
-          console.log(errormsg)
-        }
-        // If the response is just some generic error response
-        else {
-          errormsg = `${error.response.status}: ${error.response.data}`
-          console.log(errormsg)
-        }
-      // If the error occured during the request
-      } else if (error.request) {
-        errormsg = `${error.message}`
-        console.log(errormsg)
-      // Everything else
-      } else {
-        errormsg = `${error.message}`
-        console.log(errormsg)
-      }
-      context.dispatch('errorState', errormsg);
-    },
-
     resetState(context) {
       context.commit('changeWaiting', false)
       context.commit('changeAvailable', true)
@@ -185,7 +164,7 @@ export default new Vuex.Store({
       context.commit('changeWaiting', false)
       context.commit('changeAvailable', false)
       context.commit('commitError', msg)
-      UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${msg}`, status: 'danger'})
+      // TODO: Re-implement error notifications as mixins
     }
   },