replaced most console statements with proper error messages for failed requests

Author: Gretel5X

webapp/src/App.vue

@@ -52,7 +52,7 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-main class="accent" v-if="$store.state.loading">
+    <v-main class="accent" v-if="!$store.state.loading">
       <v-container fluid fill-height>
         <router-view/>
       </v-container>
@@ -73,7 +73,6 @@ export default {
     this.$ajax
       .get('api/v1/ts/')
       .then(res => {
-        console.log(res)
         if (res.data) {
           this.$store.state.devices = res.data
           this.$store.state.active_device = Object.keys(res.data)[0]
@@ -82,9 +81,6 @@ export default {
           this.$store.state.loading = false
         }
       })
-      .catch(error => {
-        console.log(error);
-      });
   },
   data () {
     return {
@@ -99,6 +95,7 @@ export default {
       ],
       right: null,
       active_device: "No Devices connected...",
+      dialog: false
     }
   },
   methods: {

webapp/src/views/Config.vue

@@ -28,6 +28,20 @@
             <v-icon left>mdi-cancel</v-icon> Cancel
           </v-btn>
           </v-container>
+          <v-card-text>
+            <v-alert
+            v-model="alert"
+            dense
+            text
+            type="warning"
+            transition="scale-transition"
+            ><v-row align="center">
+                <v-col class="grow">{{ status }}</v-col>
+                <v-col class="shrink">
+                  <v-btn color="warning" @click="fetch_data()">Reload</v-btn>
+                </v-col>
+              </v-row></v-alert>
+          </v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
@@ -46,10 +60,7 @@
           <v-btn
             color="primary"
             text
-            @click="dialog = false"
-          >
-            Ok
-          </v-btn>
+            @click="dialog = false">Ok</v-btn>
         </v-card-actions>
       </v-card>
   </v-dialog>
@@ -63,25 +74,32 @@ export default {
       data_objects: null,
       base_data: null,
       diff: {},
-      dialog: false
+      dialog: false,
+      status: "",
+      alert: false
     }
   },
   created() {
-    let id = this.$store.state.active_device_id
+    this.fetch_data()
+  },
+  methods: {
+    fetch_data: function() {
+      let id = this.$store.state.active_device_id
     this.$ajax
       .get("api/v1/ts/" + id + "/conf")
       .then(res => {
+        this.alert = false
         this.data_objects = res.data
         // keep a copy so we can make a diff to reduce size,
         // writing to eeprom in the MCU takes long...
         // this only works with basic datatypes, not with Date() etc.
         this.base_data = JSON.parse(JSON.stringify(res.data))
       })
       .catch(error => {
-        console.log(error)
+        this.status = "Configuration Information could not be fetched: " + error.response.status + "-" + error.response.data
+        this.alert = true
       })
-  },
-  methods: {
+    },
     reset_values: function() {
       this.data_objects = this.base_data
     },
@@ -92,15 +110,13 @@ export default {
           this.diff[key] = this.data_objects[key]
         }
       }, this)
-      console.log(this.diff)
       this.$ajax
       .patch("api/v1/ts/" + id + "/conf", this.diff)
       .then(res => {
           this.base_data = this.data_objects
       })
       .catch(error => {
         this.dialog = true
-        //console.log(error)
       })
     }
   }

webapp/src/views/Home.vue

@@ -15,6 +15,20 @@
               Firmware version: <span class="grey--text">{{fw_version}}</span>
             </div>
           </v-card-title>
+          <v-card-text>
+            <v-alert
+            v-model="alert"
+            dense
+            text
+            type="warning"
+            transition="scale-transition"
+            ><v-row align="center">
+                <v-col class="grow">{{ status }}</v-col>
+                <v-col class="shrink">
+                  <v-btn color="warning" @click="fetch_data()">Reload</v-btn>
+                </v-col>
+              </v-row></v-alert>
+          </v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
@@ -29,23 +43,32 @@ export default {
       device_id: null,
       device_type: null,
       hw_version: null,
-      fw_version: null
+      fw_version: null,
+      alert: false,
+      status: null
     }
   },
   mounted() {
-    let id = this.$store.state.active_device_id
-    this.$ajax
+    this.fetch_data()
+  },
+  methods: {
+    fetch_data: function() {
+      let id = this.$store.state.active_device_id
+      this.$ajax
       .get("api/v1/ts/" + id + "/info")
       .then(res => {
+        this.alert = false
         this.manufacturer = res.data.Manufacturer;
         this.device_id = res.data.DeviceID;
         this.device_type = res.data.DeviceType;
         this.hw_version = res.data.HardwareVersion;
         this.fw_version = res.data.FirmwareVersion;
       })
       .catch(error => {
-        console.log(error);
+        this.status = "Device Information could not be fetched: " + error.response.status + "-" + error.response.data
+        this.alert = true
       });
+    }
   }
 }
 </script>

webapp/vue.config.js

@@ -32,7 +32,7 @@ module.exports = {
     plugins: [new CompressionPlugin({
       filename: '[name][ext].gz',
       algorithm: "gzip",
-      deleteOriginalAssets: true,
+      deleteOriginalAssets: process.env.NODE_ENV === 'production' ? true : false,
     })]
   }
 }