Improve request error handling (#87)

Closes: #79

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#87

src/pages/detect.vue

@@ -342,10 +342,13 @@
         var xhr = new XMLHttpRequest()
         xhr.open("GET", modelURL)
         xhr.setRequestHeader('Content-Type', 'application/json')
+        xhr.timeout = 10000
+        xhr.ontimeout = this.remoteTimeout
         xhr.onload = function () {
           if (this.status !== 200) {
-            //this.response.text().then(function(message){alert(message)})
             console.log(xhr.response)
+            const errorResponse = JSON.parse(xhr.response)
+            f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
             return;
           }
           var detectors = JSON.parse(xhr.response).detectors
@@ -355,6 +358,7 @@
             .map( l => { return {'name': l, 'detect': true} } )
           self.detectorLabels = findLabel || []
         }
+        
         xhr.send()
       }
       window.onresize = (e) => { this.selectChip('redraw') }
@@ -398,17 +402,19 @@
           var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
           var xhr = new XMLHttpRequest()
           xhr.open("POST", modelURL)
+          xhr.timeout = 10000
+          xhr.ontimeout = this.remoteTimeout
           xhr.setRequestHeader('Content-Type', 'application/json')
           xhr.onload = function () {
+            self.detecting = false
             if (this.status !== 200) {
-              //this.response.text().then(function(message){alert(message)})
               console.log(xhr.response)
-              self.detecting = false
+              const errorResponse = JSON.parse(xhr.response)
+              f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
               return;
             }
             self.resultData = JSON.parse(xhr.response)
             self.uploadDirty = true
-            self.detecting = false
           }
           
           var doodsData = {
@@ -425,6 +431,10 @@
           f7.dialog.alert('Using built-in model')
         }
       },
+      remoteTimeout () {
+        this.detecting = false
+        f7.dialog.alert('No connection to remote ALVINN instance.  Please check app settings.')
+      },
       selectAll (ev) {
         if (ev.target.checked) {
           this.detectorLabels.forEach( s => s.detect = true )