Added functioning tag deletion

src/components/paneDisplayComponents/galleryComponents/captureCard.vue

@@ -1,31 +1,51 @@
 <template>
-	<div class="captureCard uk-card uk-card-default uk-padding-small uk-width-medium uk-margin-right">
+	<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">
+
+    <div class="uk-card-media-top">
+        
+          <a class="lightbox-link" v-bind:href="ImgURL" v-bind:data-caption="metadata.filename">
+            <img class="uk-width-1-1" v-bind:src="ThumbURL" v-bind:alt="metadata.id" uk-img>
+          </a>
 
-    <div class="uk-card-header uk-padding-small">
-      <div class="uk-grid-small uk-flex-middle" uk-grid>
-          <div class="uk-width-auto">
-              <img class="uk-border-circle" width="40" height="40" src="../../../assets/images/logo.png">
-          </div>
-          <div class="uk-width-expand">
-              <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
-              <p class="uk-text-meta uk-margin-remove-top"><time>{{ metadata.time }}</time></p>
-          </div>
-      </div>
     </div>
 
     <div class="uk-card-body uk-padding-small">
-      {{ metadata.id }}
+      <p> {{ metadata.filename }} </p>
+      <p class="uk-text-meta uk-margin-remove-top"><time>{{ metadata.time }}</time></p>
+      
     </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>
+      <span v-for="tag in tags" :key="tag" v-on:click="delTagConfirm(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
+
+      <a v-bind:href="TagModalTarget" uk-toggle>
+        <span class="uk-label uk-label-success uk-margin-small-right">Add</span>
+      </a>
+
+    </div>
+
+    <div v-bind:id="TagModalID" uk-modal>
+
+      <form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" @submit.prevent="handleTagSubmit">
+
+          <div class="uk-inline">
+            <span class="uk-form-icon" uk-icon="icon: tag"></span>
+            <input v-model="newtag" class="uk-input uk-form-width-medium uk-form-small" type="text" name="tagname" placeholder="tag">
+
+            <button class="uk-button uk-button-default uk-margin-left uk-form-small uk-modal-close" type="button">Cancel</button>
+            <button type="submit" class="uk-button uk-button-primary uk-margin-left uk-form-small">Save</button>
+          </div>
+
+      </form>
+
     </div>
 
 	</div>
 </template>
 
 <script>
+import UIkit from 'uikit';
+import axios from 'axios'
 
 // Export main app
 export default {
@@ -42,11 +62,104 @@ export default {
     }
   },
 
+  data: function () {
+    return {
+      tags: [],
+      newtag: "",
+    }  
+  },
+
+  methods: {
+    handleTagSubmit: function(event) {
+      console.log(this.TagURL);
+      console.log(this.newtag);
+      this.newTagRequest(this.newtag);
+      this.newtag = "";
+      UIkit.modal(event.target.parentNode).hide();
+    },
+
+    newTagRequest: function(tag_string) {
+      // Send tag PUT request
+      axios.put(this.TagURL, [tag_string])
+      .then(response => { 
+        // Update tag array
+        this.getTagRequest()
+      })
+      .catch(error => {
+        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+      })
+    },
+
+    delTagConfirm: function(tag_string) {
+      var self = this;
+      UIkit.modal.confirm(`Remove tag '${tag_string}'?`).then(function() {
+        self.delTagRequest(tag_string)
+      }, function () {
+        console.log('Rejected.')
+      });
+    },
+
+    delTagRequest: function(tag_string) {
+      console.log(tag_string)
+      // Send tag DELETE request
+      axios.delete(this.TagURL, {data: [tag_string]})
+      .then(response => { 
+        // Update tag array
+        this.getTagRequest()
+      })
+      .catch(error => {
+        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+      })
+    },
+
+    getTagRequest: function() {
+      // Send tag request
+      axios.get(this.TagURL)
+      .then(response => { 
+        this.tags = response.data.metadata.tags
+      })
+      .catch(error => {
+        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+      })
+    },
+
+    makeModalName: function(prefix) {
+      return prefix + this.metadata.id
+    }
+
+  },
+
+  created: function () {
+    this.getTagRequest()
+  },
+
   computed: {
+    TagModalID: function () {
+      return this.makeModalName("tag-modal-")
+    },
+    TagModalTarget: function () {
+      return "#" + this.TagModalID
+    },
     ThumbURL: function () {
       return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/download?thumbnail=true"
+    },
+    ImgURL: function () {
+      return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/download/" + this.metadata.filename
+    },
+    TagURL: function () {
+      return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/tags"
     }
   }
 
 }
-</script>
+</script>
+
+<style scoped lang="less">
+.deletable-label {
+  cursor: pointer;
+}
+
+.deletable-label:hover {
+  background-color: #f0506e;
+}
+</style>

src/components/paneDisplayComponents/galleryDisplay.vue

@@ -1,14 +1,17 @@
 <template>
 	<div class="galleryDisplay uk-padding uk-padding-remove-right">
     
-    <div class="uk-grid-medium uk-padding uk-padding-remove-right" uk-grid>
-        
-      <captureCard 
-        v-for="capture in captureList" 
-        :key="capture.metadata.id"
-        :metadata="capture.metadata"
-        :temporary="capture.temporary"
-      />
+    <div uk-lightbox="toggle: .lightbox-link">
+      <div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>
+      
+        <captureCard 
+          v-for="capture in captureList" 
+          :key="capture.metadata.id"
+          :metadata="capture.metadata"
+          :temporary="capture.temporary"
+        />
+    
+      </div>
 
     </div>
 
@@ -39,7 +42,6 @@ export default {
       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 => {
@@ -55,8 +57,14 @@ export default {
   computed: {
     captureApiUri: function () {
       return this.$store.getters.uri + "/camera/capture"
+    },
+    orderedcaptureList: function () {
+      return _.orderBy(this.captureList, 'metadata_path', 'desc')
     }
   }
 
 }
-</script>
+</script>
+
+<style scoped lang="less">
+</style>

src/components/panelDisplay.vue

@@ -6,7 +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>
+      <li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 uk-overflow-auto "><galleryDisplay/></li>
     </ul>
   </div>
 </template>