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

@ -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,19 +1,94 @@
<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>
<form>
<div class="form-group" v-for="field in ['description', 'box']" :key="field">
<label>{{ field }}</label>
<input type="text" class="form-control" v-model="item[field]">
</div>
</form>
<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>
<input type="text" class="form-control" v-model="item[field]">
</div>
</form>
</div>
</template>
<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>

View file

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