fix: code cleanup

src/components/DetectionBoxes.vue

@@ -56,7 +56,10 @@ export default {
     }
   },
   props: {
-    detections: Array
+    detections: {
+      type: Array,
+      default: () => []
+    }
   },
   directives: {
     resize
@@ -76,8 +79,8 @@ export default {
       // console.log('container parent: ', container.parentElement)
 
       // Resize the canvas to fit its parent's width.
-      let width = container.offsetWidth
-      let height = container.offsetHeight
+      const width = container.offsetWidth
+      const height = container.offsetHeight
       // console.log('container w, h: ', width, height)
 
       this.stageSize.width = width

src/remote/edgeAPI.js

@@ -24,8 +24,8 @@ async function getRootURL () {
   Get one page of timeline events.
 */
 export async function getTimelinePage (pageNum = 1) {
-  let apiRoot = await getRootURL()
-  let timelineURL = apiRoot + 'timeline.json'
+  const apiRoot = await getRootURL()
+  const timelineURL = apiRoot + 'timeline.json'
   let timelinePage = []
   try {
     timelinePage = await axios.get(timelineURL, {
@@ -43,8 +43,8 @@ export async function getTimelinePage (pageNum = 1) {
   Return full image URL given an image file name and a relative directory.
 */
 export async function getImageURL (relDir, imageName) {
-  let apiRoot = await getRootURL()
-  let p = apiRoot + 'data/' + relDir + '/' + imageName
+  const apiRoot = await getRootURL()
+  const p = apiRoot + 'data/' + relDir + '/' + imageName
   // console.debug('imagePath: ' + p)
   return p
 }

src/views/About.vue

@@ -5,7 +5,7 @@
       justify="center"
     >
       <v-tooltip right>
-        <template v-slot:activator="{ on }">
+        <template>
           <v-card
             max-width="344"
             class="mx-auto"

src/views/Timeline.vue

@@ -49,7 +49,7 @@
                     </v-row>
                   </template>
                   <template
-                    v-if='isImageLoaded[index]'
+                    v-if="isImageLoaded[index]"
                   >
                     <detection-boxes
                       :detections="sample.args.inference_result"
@@ -86,25 +86,23 @@
                   >
                     <v-col cols="7">
                       <v-tooltip bottom>
-                        <template v-slot:activator="{ on }">
+                        <template>
                           <v-btn
                             fab
                             color="success lighten-2"
                             class="mx-2"
-                            v-on="on"
                           >
                             <v-icon>mdi-check</v-icon>
                           </v-btn>
                         </template>
                         <span>Looks fine</span>
                       </v-tooltip>
                       <v-tooltip bottom>
-                        <template v-slot:activator="{ on }">
+                        <template>
                           <v-btn
                             color="error lighten-2"
                             fab
                             class="mx-2"
-                            v-on="on"
                           >
                             <v-icon>mdi-bell</v-icon>
                           </v-btn>
@@ -114,32 +112,29 @@
                     </v-col>
                     <v-col cols="1">
                       <v-tooltip bottom>
-                        <template v-slot:activator="{ on }">
+                        <template>
                           <v-btn
                             icon
-                            v-on="on"
                           >
                             <v-icon>mdi-heart</v-icon>
                           </v-btn>
                         </template>
                         <span>Save to Favorites</span>
                       </v-tooltip>
                       <v-tooltip bottom>
-                        <template v-slot:activator="{ on }">
+                        <template>
                           <v-btn
                             icon
-                            v-on="on"
                           >
                             <v-icon>mdi-pen</v-icon>
                           </v-btn>
                         </template>
                         <span>Edit event details</span>
                       </v-tooltip>
                       <v-tooltip bottom>
-                        <template v-slot:activator="{ on }">
+                        <template>
                           <v-btn
                             icon
-                            v-on="on"
                           >
                             <v-icon>mdi-share-variant</v-icon>
                           </v-btn>
@@ -259,7 +254,7 @@ export default {
           console.log('new timeline events: ', data.timeline.length)
           // eslint-disable-next-line
           // console.log('timeline slice: ' + JSON.stringify(data.timeline))
-          let startIndex = this.timeline.length
+          const startIndex = this.timeline.length
           // update full image URLs
           data.timeline.map(
             (sample, index) =>
@@ -306,7 +301,7 @@ export default {
     },
     eventIcon (event) {
       let topLabel = 'none'
-      let inf = event.args.inference_result
+      const inf = event.args.inference_result
       if (inf.length > 0) {
         topLabel = inf[0].label
       }
@@ -339,7 +334,7 @@ export default {
       return moment(datetime).calendar()
     },
     asPercentage (number) {
-      let p = Number(number).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 0 })
+      const p = Number(number).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 0 })
       return p
     }
   }