Thumbnails and accurate durations in scan-list tab

webapp/src/App.vue

@@ -441,6 +441,12 @@ html {
   height: 100%;
 }
 
+.thumbnail-fit {
+  max-height: 120px;
+  object-fit: contain;
+  overflow-y: hidden;
+}
+
 // Style tour
 .v-tour__target--highlighted {
   box-shadow: 0px 40px 200px 30px rgba(0, 0, 0, 0.5),

webapp/src/assets/less/theme.less

@@ -201,8 +201,18 @@ h4, .uk-h4 {
     box-shadow: @small-shadow;
 }
 
+.uk-card-title {
+    margin: 0;
+    width: 240px;
+}
+
+.uk-card-body {
+    padding: 20px 16px 8px 16px;;
+}
+
 .uk-card-media-top img {
-    border-radius: @paper-border-radius @paper-border-radius 0 0;
+    width: 240px;
+    margin: 0 auto;
 }
 
 .uk-card-default .uk-card-footer {

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -42,10 +42,29 @@
       uk-lightbox="toggle: .lightbox-link"
     >
       <!-- Gallery capture cards -->
+      
       <div class="gallery-grid uk-grid-match" uk-grid>
+        <div v-if="scansEmpty">
+          <h2>No scans available</h2>
+          <p>
+            There are no scans available to show.
+          </p>
+        </div>
         <div v-for="item in scans" :key="item.id">
           <div class="uk-card">
             <div class="uk-card-body">
+              <div class="uk-card-media-top">
+                <div
+                  class="view-image uk-padding-remove uk-height-1-1"
+                >
+                  <img
+                    id="thumbnail-stitched-image"
+                    class="thumbnail-fit"
+                    :src="thumbnailPath(item.name)"
+                    onerror="this.src='/titleicon.svg';"
+                  />
+                </div>
+              </div>
               <h3 class="uk-card-title">{{ item.name }}</h3>
               <action-button
                 thing="smart_scan"
@@ -57,7 +76,10 @@
                 @response="downloadZipFile"
                 @error="modalError"
               />
-              <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan(item.name)">
+              <button
+                class="uk-button uk-button-default uk-width-1-1"
+                @click="deleteScan(item.name)"
+              >
                 Delete
               </button>
               <action-button
@@ -112,6 +134,9 @@ export default {
         "readproperty",
         true
       );
+    },
+    scansEmpty() {
+      return this.scans.length == 0;
     }
   },
 
@@ -153,24 +178,36 @@ export default {
   },
 
   methods: {
+    thumbnailPath(scan_name) {
+      return (
+        `${this.$store.getters.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=` +
+        scan_name
+      );
+    },
     visibilityChanged(isVisible) {
       if (isVisible) {
         this.updateScans();
       }
     },
     async updateScans() {
-      let scans = await this.readThingProperty("smart_scan", "scans");
-      if (!scans | (scans.length == 0)) {
+      try {
+        let scans = await this.readThingProperty("smart_scan", "scans");
+        if (!scans | (scans.length == 0)) {
+          this.scans = scans;
+        }
+        scans.forEach(scan => {
+          scan.modified = Date.parse(scan.modified);
+          scan.created = Date.parse(scan.created);
+        });
+        scans.sort((a, b) => {
+          return b.modified - a.modified;
+        });
         this.scans = scans;
+      } catch (err) {
+        console.log("Failed to refresh scans");
+        console.log(err);
+        this.scans = [];
       }
-      scans.forEach(scan => {
-        scan.modified = Date.parse(scan.modified);
-        scan.created = Date.parse(scan.created);
-      });
-      scans.sort((a, b) => {
-        return b.modified - a.modified;
-      });
-      this.scans = scans;
     },
     formatDate(timestamp) {
       let d = new Date(timestamp);
@@ -257,4 +294,4 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }*/
-</style>
+</style>