Started templating gallery

src/components/paneDisplayComponents/galleryComponents/captureCard.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="captureCard uk-card uk-card-default uk-padding-small uk-width-medium uk-margin-right">
+
+    <div class="uk-card-header uk-padding-small">
+  		<h3>Capture</h3>
+    </div>
+
+    <div class="uk-card-body uk-padding-small">
+      {{ metadata.id }}
+    </div>
+
+    <div class="uk-card-footer uk-padding-small">
+      <span class="uk-label uk-margin-small-right">Tag1</span>
+      <span class="uk-label uk-margin-small-right">Tag2</span>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+// Export main app
+export default {
+  name: 'captureCard',
+
+  props: {
+    temporary: {
+      type: Boolean,
+      required: true
+    },
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    ThumbURL: function () {
+      return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/download?thumbnail=true"
+    }
+  }
+
+}
+</script>

src/components/paneDisplayComponents/galleryDisplay.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="galleryDisplay uk-padding">
+    
+    <div class="uk-grid-medium uk-padding" uk-grid>
+        
+      <captureCard 
+        v-for="capture in captureList" 
+        :key="capture.metadata.id"
+        :metadata="capture.metadata"
+        :temporary="capture.temporary"
+      />
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+import axios from 'axios'
+import captureCard from './galleryComponents/captureCard.vue'
+
+// Export main app
+export default {
+  name: 'galleryDisplay',
+
+  components: {
+    captureCard
+  },
+
+  data: function () {
+    return {
+      captureList: []
+    }  
+  },
+
+  methods: {
+    updateCaptureList: function() {
+      // Send move request
+      axios.get(this.captureApiUri)
+      .then(response => { 
+        this.$store.dispatch('updateState');  // Update store state for good measure
+        console.log(response.data)
+        this.captureList = response.data;  // Update boxes from response
+      })
+      .catch(error => {
+        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+      })
+    }
+  },
+
+  created: function () {
+    this.updateCaptureList()
+  },
+
+  computed: {
+    captureApiUri: function () {
+      return this.$store.getters.uri + "/camera/capture"
+    }
+  }
+
+}
+</script>

src/components/paneDisplayComponents/streamDisplay.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="streamDisplay scrollTarget">
 
-		<img v-on:dblclick="clickmonitor" v-if="$store.getters.ready" v-bind:src="streamImgUri" alt="Stream">
+		<img class="uk-align-center" v-on:dblclick="clickmonitor" v-if="$store.getters.ready" v-bind:src="streamImgUri" alt="Stream">
 
 		<div v-else-if="$store.state.waiting" class="uk-position-center">
 			<div uk-spinner="ratio: 4.5" ></div>

src/components/panelDisplay.vue

@@ -6,6 +6,7 @@
     </ul>
     <ul class="uk-switcher uk-flex uk-flex-1">
       <li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>
+      <li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 "><galleryDisplay/></li>
     </ul>
   </div>
 </template>
@@ -13,13 +14,15 @@
 <script>
 // Import components
 import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
+import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
 
 // Export main app
 export default {
   name: 'panelDisplay',
 
   components: {
-    streamDisplay
+    streamDisplay,
+    galleryDisplay
   },
 
   computed: {