Connect detect page to model server for results (#16)

Closes #3

Allows for configuration of model server settings (address and port) and can dynamically select the model based on the detection page selected.

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

Reviewed-on: Georgi_Lab/ALVINN_f7#16

src/pages/detect.vue

@@ -58,7 +58,6 @@
 
 <script>
     import { f7 } from 'framework7-vue'
-    import fakeData from './testData.js'
 
     export default {
         props: {
@@ -73,6 +72,8 @@
             imageRegion: '',
             imageLoaded: false,
             imageView: '../assets/icons/image.svg',
+            reader: new FileReader(),
+            detectorName: ''
             }
         },
         created () {
@@ -80,14 +81,17 @@
                 case 'thorax':
                 this.activeRegion = 0
                 this.imageRegion = '../assets/regions/thorax.svg'
+                this.detectorName = 'thorax'
                     break;
                 case 'abdomen':
                 this.activeRegion = 1
                 this.imageRegion = '../assets/regions/abdpel.svg'
+                this.detectorName = 'combined'
                     break;
                 case 'limbs':
                 this.activeRegion = 2
                 this.imageRegion = '../assets/regions/limb.svg'
+                this.detectorName = 'defaultNew'
                     break;
                 case 'head':
                 this.activeRegion = 3
@@ -99,18 +103,38 @@
             chipColor (confVal) {
                 if (confVal >= 90) return 'green'
                 if (confVal >= 70) return 'lime'
-                return 'yellow';
+                return 'yellow'
             },
             setData () {
+                var self = this
                 var loadServerSettings = localStorage.getItem('serverSettings')
                 if (loadServerSettings) var serverSettings = JSON.parse(loadServerSettings)
                 if (serverSettings && serverSettings.use) {
-                    f7.dialog.alert(`Using server at ${serverSettings.address}`)
+                    var modelURL = `http://${serverSettings.address}:${serverSettings.port}/detect`
+                    var xhr = new XMLHttpRequest()
+                    xhr.open("POST", modelURL)
+                    xhr.setRequestHeader('Content-Type', 'application/json')
+                    xhr.onload = function () {
+                        if (this.status !== 200) {
+                            //this.response.text().then(function(message){alert(message)})
+                            console.log(this.response)
+                            return;
+                        }
+                        self.resultData = JSON.parse(this.response)
+                    }
+                    
+                    var doodsData = {
+                        "detector_name": this.detectorName,
+                        "detect": {
+                            "*":50
+                        }
+                    }
+                    doodsData.data = this.reader.result.split(',')[1]
+
+                    xhr.send(JSON.stringify(doodsData))
                 } else {
                     f7.dialog.alert('Using built-in model')
                 }
-                //Placeholder data
-                this.resultData = fakeData.testData
             },
             selectImage () {
                 var loadResult = this.$refs.image_chooser.click()
@@ -143,8 +167,9 @@
                 });
             },
             getImage () {
-                var example = this.$refs.image_chooser.files[0];
+                const example = this.$refs.image_chooser.files[0];
                 this.imageView = URL.createObjectURL(example);
+                this.reader.readAsDataURL(example)
                 this.imageLoaded = true;
             }
         }