bootstrap item creation and picture-taking

src/App.vue

@@ -1,18 +1,31 @@
 <template>
     <div id="app">
-        <Navbar/>
-        <router-view></router-view>
+        <AddItem v-if="addModalOpen" @close="closeAddModal()" isModal="true"/>
+        <Navbar @addClicked="openAddModal()"/>
+        <router-view/>
     </div>
 </template>
 
 <script>
 import Navbar from '@/components/Navbar';
+import AddItem from '@/components/AddItem';
 import { mapState } from 'vuex';
 
 export default {
   name: 'app',
-  components: { Navbar },
-  computed: mapState(['loadedItems', 'layout'])
+  components: { Navbar, AddItem },
+  computed: mapState(['loadedItems', 'layout']),
+  data: () => ({
+    addModalOpen: false
+  }),
+  methods: {
+    openAddModal() {
+      this.addModalOpen = true;
+    },
+    closeAddModal() {
+      this.addModalOpen = false;
+    }
+  }
 };
 </script>
 

src/components/AddItem.vue

@@ -0,0 +1,36 @@
+<template>
+   <div>
+       <Modal v-if="isModal" title="Add Item" @close="$emit('close')">
+           <template #body>
+               <EditItem :item="item"/>
+           </template>
+           <template #buttons>
+               <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
+               <button type="button" class="btn btn-success" @click="saveNewItem()">Save new Item</button>
+           </template>
+       </Modal>
+   </div>
+</template>
+
+<script>
+import Modal from '@/components/Modal';
+import EditItem from '@/components/EditItem';
+
+export default {
+  name: 'AddItem',
+  components: { Modal, EditItem },
+  props: ['isModal'],
+  data: () => ({
+    item: {}
+  }),
+  methods: {
+    saveNewItem() {
+      this.$store.dispatch('postItem', this.item);
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/EditItem.vue

@@ -1,7 +1,36 @@
 <template>
   <div>
-    <img class="img-fluid rounded mx-auto d-block mb-3" :src="`https://c3lf.de/api/1/thumbs/${item.file}`"/>
-    <h6>Editing Item <span class="badge badge-secondary">#{{ item[badge] }}</span></h6>
+      <img
+        v-if="!capturing"
+        class="img-fluid rounded mx-auto d-block mb-3"
+        :src="item.dataImage || `https://c3lf.de/api/1/thumbs/${item.file}`"
+        alt="Image not available."
+      />
+      <video v-if="capturing" ref="video" class="img-fluid">Video stream not available.</video>
+      <canvas ref="canvas" class="img-fluid d-none"/>
+      <div v-if="capturing && !streaming" class="d-flex justify-content-center">
+          <div class="spinner-grow text-danger" role="status">
+              <span class="sr-only">Loading...</span>
+          </div>
+      </div>
+      <div class="row m-auto">
+          <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
+            <font-awesome-icon icon="camera"/>
+          </button>
+          <div v-if="capturing" class="btn-group my-2 ml-auto">
+              <button class="btn btn-success" @click="captureVideoImage()">
+                  <font-awesome-icon icon="camera"/>&nbsp;Capture
+              </button>
+              <button
+                  class="btn"
+                  :class="(item.file || item.dataImage) ? 'btn-danger' : 'btn-secondary disabled'"
+                  @click="(item.file || item.dataImage) && closeStream()"
+              >
+                  <font-awesome-icon icon="stop"/>&nbsp;Abort
+              </button>
+          </div>
+      </div>
+      <h6>Editing Item <span class="badge badge-secondary">#{{ item.item_uid }}</span></h6>
       <form>
           <div class="form-group" v-for="field in ['description', 'box']" :key="field">
               <label>{{ field }}</label>
@@ -14,6 +43,52 @@
 <script>
 export default {
   name: 'Add',
-  props: ['item', 'badge']
+  props: ['item'],
+  data: () => ({
+    capturing: false,
+    streaming: false,
+    stream: undefined
+  }),
+  methods: {
+    openStream() {
+      if (!this.capturing) {
+        this.capturing = true;
+        this.streaming = false;
+        navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(stream => {
+          this.stream = stream;
+          const { video } = this.$refs;
+          video.srcObject = stream;
+          video.play();
+          video.addEventListener('canplay', () => {
+            this.streaming = true;
+          }, false);
+        }).catch(err => console.log(err)); // todo: toast error
+      }
+    },
+    captureVideoImage() {
+      const { video, canvas } = this.$refs;
+      const context = canvas.getContext('2d');
+      const { videoWidth, videoHeight } = video;
+      canvas.width = videoWidth;
+      canvas.height = videoHeight;
+      context.drawImage(video, 0, 0, videoWidth, videoHeight);
+      this.item.dataImage = canvas.toDataURL('image/png');
+      this.closeStream();
+    },
+    closeStream() {
+      if (this.capturing) {
+        this.stream.getTracks().forEach(s => s.stop());
+        this.capturing = false;
+        this.streaming = false;
+      }
+    }
+  },
+  mounted() {
+    if (!this.item.file)
+      this.openStream();
+  },
+  beforeDestroy() {
+    this.closeStream();
+  }
 };
 </script>

src/components/Navbar.vue

@@ -12,8 +12,8 @@
         </div>
 
         <div class="custom-control-inline mr-1">
-            <button type="button" class="btn mx-1 text-nowrap" v-for="(button, index) in buttons" v-bind:key="index" :class="['btn-' + button.color]">
-                <font-awesome-icon :icon="button.icon"/><span class="d-none d-md-inline">&nbsp;{{ button.title }}</span>
+            <button type="button" class="btn mx-1 text-nowrap btn-success" @click="$emit('addClicked')">
+                <font-awesome-icon icon="plus"/><span class="d-none d-md-inline">&nbsp;Add</span>
             </button>
             <div class="btn-group btn-group-toggle">
                 <button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
@@ -58,8 +58,7 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations, mapGetters} from 'vuex';
-
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
 
 export default {
   name: 'Navbar',
@@ -71,10 +70,6 @@ export default {
     ],
     links: [
       {'title':'howto engel','path':'/howto/'}
-    ],
-    buttons: [
-      { title: 'Add', icon: 'plus', color: 'success' },
-      //{ title: 'Refresh', icon: 'sync-alt', color: 'primary' },
     ]
   }),
   computed: {

src/main.js

@@ -11,10 +11,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
 
 // fontawesome
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose);
+library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 

src/store/index.js

@@ -47,6 +47,9 @@ const store = new Vuex.Store({
     updateItem(state, updatedItem) {
       const item = state.loadedItems.filter(({ item_uid }) => item_uid === updatedItem.item_uid)[0];
       Object.assign(item, updatedItem);
+    },
+    appendItem(state, item) {
+      state.loadedItems.push(item);
     }
   },
   actions: {
@@ -72,6 +75,12 @@ const store = new Vuex.Store({
     async updateItem({ commit, getters }, item) {
       const { data } = await axios.put(`/1/${getters.getEventSlug}/item/${item.iid}`, item);
       commit('updateItem', data);
+    },
+    async postItem({ commit, getters }, item) {
+      console.log('Image data URL is at', item.dataImage); // todo: use image data URI in the request somehow
+      const { data } = await axios.post(`/1/${getters.getEventSlug}/item`, item);
+      console.log(data); // todo: maybe preprocess item data?
+      commit('appendItem', data);
     }
   }
 });