From 0b5d998626e41c47f523a5af856985940f933711 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 20 Sep 2019 16:02:37 +0100
Subject: [PATCH] Added snapshot polling to host cards

---
 .../connectComponents/hostCard.vue            | 62 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/viewComponents/connectComponents/hostCard.vue b/src/components/viewComponents/connectComponents/hostCard.vue
index d2afc895..26cf4df9 100644
--- a/src/components/viewComponents/connectComponents/hostCard.vue
+++ b/src/components/viewComponents/connectComponents/hostCard.vue
@@ -1,13 +1,21 @@
 <template>
 	<div class="hostCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
 
-    <div class="uk-card-body uk-padding-small uk-height-small">
+    <div class="uk-card-media-top">
+      <div class="snapshot-container uk-width-1-1 uk-height-auto">
+        <img class="uk-width-1-1" v-bind:data-src="snapshotSrc" width="300" height="225" uk-img>
+        <div v-if="!snapshotAvailable" class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">Snapshot unavailable</div>
+      </div>
+    </div>
 
+    <div class="uk-card-body uk-padding-small">
       <div class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
-        <div class="uk-width-expand host-description"><b>{{ name }}</b> ({{ hostname }}:{{ port }})</div>
+        <div class="uk-width-expand host-description">
+          <div class="host-description"><b>{{ name }}</b></div>
+          <div class="host-description">{{ hostname }}:{{ port }}</div>
+        </div>
         <a href="#" v-on:click="$emit('delete')" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a> 
       </div>
-
     </div>
 
     <div class="uk-card-footer uk-padding-small">
@@ -45,16 +53,55 @@ export default {
 
   data: function () {
     return {
+      snapshotSrc: "",
+      snapshotAvailable: false,
+      polling: null
     }  
   },
 
+  mounted() {
+    // Try to load the microscope snapshot when mounted
+    this.getSnapshotRequest()
+  },
+
+  beforeDestroy () {
+    clearInterval(this.polling)
+  },
+
   methods: {
+    getSnapshotRequest: function() {
+      // Send tag request
+      axios.get(this.snapshotURL)
+      .then(() => { 
+        // Tell the view that a snapshot is available
+        this.snapshotAvailable = true
+        // Set the snapshot image src to the snapshot URL
+        this.snapshotSrc = `${this.snapshotURL}?${Date.now()}`
+        // If not already polling, start polling
+        if (this.polling === null) {
+          this.updateSnapshotPoll()
+        }
+      })
+      .catch(error => {
+        // Tell the view that a snapshot is not available, and ignore
+        this.snapshotAvailable = false
+      })
+    },
+
+    updateSnapshotPoll: function() {
+      this.polling = setInterval(() => {
+        this.getSnapshotRequest()
+      }, 15000)
+    }
   },
 
   created: function () {
   },
 
   computed: {
+    snapshotURL: function () {
+      return `http://${this.hostname}:${this.port}/api/v1/snapshot`
+    },
   }
 
 }
@@ -65,4 +112,13 @@ export default {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.snapshot-container {
+  position: relative;
+}
+
+img[data-src][src*='data:image'] { 
+  background: rgba(0,0,0,0.1); 
+}
+
 </style>
\ No newline at end of file