bootstrap item creation and picture-taking

This commit is contained in:
busti 2019-12-20 23:43:10 +01:00
parent 4970428430
commit fbadf46a60
6 changed files with 151 additions and 23 deletions

View file

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

View file

@ -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>

View file

@ -1,7 +1,36 @@
<template> <template>
<div> <div>
<img class="img-fluid rounded mx-auto d-block mb-3" :src="`https://c3lf.de/api/1/thumbs/${item.file}`"/> <img
<h6>Editing Item <span class="badge badge-secondary">#{{ item[badge] }}</span></h6> 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> <form>
<div class="form-group" v-for="field in ['description', 'box']" :key="field"> <div class="form-group" v-for="field in ['description', 'box']" :key="field">
<label>{{ field }}</label> <label>{{ field }}</label>
@ -14,6 +43,52 @@
<script> <script>
export default { export default {
name: 'Add', 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> </script>

View file

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

View file

@ -11,10 +11,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
// fontawesome // fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'; 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'; 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); Vue.component('font-awesome-icon', FontAwesomeIcon);

View file

@ -47,6 +47,9 @@ const store = new Vuex.Store({
updateItem(state, updatedItem) { updateItem(state, updatedItem) {
const item = state.loadedItems.filter(({ item_uid }) => item_uid === updatedItem.item_uid)[0]; const item = state.loadedItems.filter(({ item_uid }) => item_uid === updatedItem.item_uid)[0];
Object.assign(item, updatedItem); Object.assign(item, updatedItem);
},
appendItem(state, item) {
state.loadedItems.push(item);
} }
}, },
actions: { actions: {
@ -72,6 +75,12 @@ const store = new Vuex.Store({
async updateItem({ commit, getters }, item) { async updateItem({ commit, getters }, item) {
const { data } = await axios.put(`/1/${getters.getEventSlug}/item/${item.iid}`, item); const { data } = await axios.put(`/1/${getters.getEventSlug}/item/${item.iid}`, item);
commit('updateItem', data); 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);
} }
} }
}); });