IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix-qr-code-items

Browse Source
This commit is contained in:
ogerly 2021-03-24 13:24:26 +01:00
parent 3fa6a33ffb
commit 42ec2f7704
2 changed files with 45 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/views/KontoOverview/GddSend.vue
View File

@ -6,31 +6,47 @@
<b-alert variant="warning" show dismissible > <b-alert variant="warning" show dismissible >
<strong>Achtung!</strong> Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden. <strong>Achtung!</strong> Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
</b-alert> </b-alert>
<b-card > <b-card class="p-0 p-md-3">
<div v-if="scan">
<b-row> <b-alert show variant="secondary">
<span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
<b-col v-show="!scan" lg="12" class="text-right ">
<img src="/img/icons/gradido/qr-scan-pure.png" height="50" @click="scan = true">
</b-col>
<b-alert v-show="scan" show variant="warning">
<span class="alert-text" @click="scan=false"><strong>schließen!</strong></span>
</b-alert>
<div v-if="scan">
<!-- <b-row>
<qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture> <qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture>
</b-row> </b-row> -->
<b-row>
<qrcode-stream @decode="onDecode" @detect="onDetect" ></qrcode-stream>
<b-alert show variant="secondary">
<span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
</b-alert>
<b-alert show variant="warning" >
<span class="alert-text" @click="scan=false"><strong>abrechen!</strong></span>
</b-alert>
</b-row>
<qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect" ></qrcode-stream>
<b-container >
<b-row>
<b-col lg="8">
<b-alert show variant="secondary">
<span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
</b-alert>
</b-col>
</b-row>
</b-container>
</div> </div>
</b-alert>
<validation-observer v-slot="{handleSubmit}" ref="formValidator"> <validation-observer v-slot="{handleSubmit}" ref="formValidator">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset" v-if="show"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset" v-if="show">
<br> <br>
<qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone> <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
<br> <br>
<div> <div>
<b-col class="text-left pl-6"> <b-col class="text-left p-3 p-sm-1">
Empfänger Empfänger
</b-col> </b-col>
<b-input-group <b-input-group
@ -41,7 +57,7 @@
size="lg" size="lg"
class="mb-3" class="mb-3"
> >
<b-input-group-prepend class="p-3"> <b-input-group-prepend class="p-3 d-none d-md-block ">
<b-icon icon="envelope" class="display-3"></b-icon> <b-icon icon="envelope" class="display-3"></b-icon>
</b-input-group-prepend> </b-input-group-prepend>
<b-form-input <b-form-input
@ -56,7 +72,7 @@
</div> </div>
<br> <br>
<div> <div>
<b-col class="text-left pl-6"> <b-col class="text-left p-3 p-sm-1">
Betrag Betrag
</b-col> </b-col>
@ -66,7 +82,7 @@
<b-input-group id="input-group-2" label="Betrag:" label-for="input-2" <b-input-group id="input-group-2" label="Betrag:" label-for="input-2"
size="lg" size="lg"
class="mb-3"> class="mb-3">
<b-input-group-prepend> <b-input-group-prepend class="p-3 d-none d-md-block ">
<div class="h3 pt-3 pr-3">GDD</div> <div class="h3 pt-3 pr-3">GDD</div>
</b-input-group-prepend> </b-input-group-prepend>
@ -81,15 +97,15 @@
style="font-size: xx-large; padding-left:20px"> style="font-size: xx-large; padding-left:20px">
</b-form-input> </b-form-input>
</b-input-group> </b-input-group>
<b-col class="text-left pl-6"> <b-col class="text-left p-3 p-sm-1">
Nachricht für den Empfänger Nachricht für den Empfänger
</b-col> </b-col>
<b-input-group> <b-input-group>
<b-input-group-prepend class="p-3"> <b-input-group-prepend class="p-3 d-none d-md-block ">
<b-icon icon="chat-right-text" class="display-3"></b-icon> <b-icon icon="chat-right-text" class="display-3"></b-icon>
</b-input-group-prepend> </b-input-group-prepend>
<b-form-textarea v-model="form.memo" class="pl-3"></b-form-textarea> <b-form-textarea rows="3" v-model="form.memo" class="pl-3"></b-form-textarea>
</b-input-group> </b-input-group>
</div> </div>
@ -112,7 +128,7 @@
</template> </template>
<script> <script>
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader' import { QrcodeStream, QrcodeDropZone /*, QrcodeCapture*/ } from 'vue-qrcode-reader'
import { BIcon } from 'bootstrap-vue' import { BIcon } from 'bootstrap-vue'
export default { export default {
@ -120,7 +136,7 @@ export default {
components: { components: {
QrcodeStream, QrcodeStream,
QrcodeDropZone, QrcodeDropZone,
QrcodeCapture, // QrcodeCapture,
BIcon BIcon
}, },
data(){ data(){
@ -143,14 +159,12 @@ export default {
async onDecode (decodedString) { async onDecode (decodedString) {
console.log('onDecode JSON.parse(decodedString)',JSON.parse(decodedString) ) console.log('onDecode JSON.parse(decodedString)',JSON.parse(decodedString) )
const arr = JSON.parse(decodedString) const arr = JSON.parse(decodedString)
// console.log('arr',arr[0].email ) console.log('qr-email',arr[0].email )
this.modal.h4 = 'Scan erfolgreich' console.log('qr-amount',arr[0].amount )
this.modal.p = arr
this.form.email = arr[0].email this.form.email = arr[0].email
this.form.amount1 = arr[0].amount this.form.amount1 = arr[0].amount
// console.log('arr mail',arr.email)
// console.log('arr mail',arr.amount)
this.modals2 = true
}, },
async onDetect (promise) { async onDetect (promise) {
try { try {
@ -159,11 +173,9 @@ export default {
content, // decoded String content, // decoded String
location // QR code coordinates location // QR code coordinates
} = await promise } = await promise
console.log('onDetect promise',promise) // console.log('onDetect promise',promise)
//console.log('JSON.parse(decodedString)',JSON.parse(promise) ) //console.log('JSON.parse(decodedString)',JSON.parse(promise) )
const arr = JSON.parse(decodedString) const arr = JSON.parse(decodedString)
console.log('arr',arr)
} catch (error) { } catch (error) {
// ... // ...
} }

205
frontend/src/views/KontoOverview/GddSent.vue
View File

@ -1,205 +0,0 @@
<template>
<div>
<b-row>
<b-col xl="12" md="12">
<base-button block icon type="primary" size="lg" v-b-toggle.collapse-1>
<span class="btn-inner--text">{{ $t('site.overview.send_gradido') }} </span>
</base-button>
<b-collapse id="collapse-1" class="mt-2">
<b-alert variant="warning" show dismissible >
<strong>Achtung!</strong> Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
</b-alert>
<b-card >
<div v-if="scan">
<b-row>
<qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture>
</b-row>
<b-row>
<qrcode-stream @decode="onDecode" @detect="onDetect" ></qrcode-stream>
<b-alert show variant="secondary">
<span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
</b-alert>
<b-alert show variant="warning" >
<span class="alert-text" @click="scan=false"><strong>abrechen!</strong></span>
</b-alert>
</b-row>
</div>
<validation-observer v-slot="{handleSubmit}" ref="formValidator">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset" v-if="show">
<br>
<qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
<br>
<div>
<b-col class="text-left pl-6">
<b-badge variant="primary">Empfänger</b-badge>
</b-col>
<b-input-group
id="input-group-1"
label="Empfänger:"
label-for="input-1"
description="We'll never share your email with anyone else."
size="lg"
class="mb-3"
>
<b-input-group-prepend class="p-3">
<b-icon icon="envelope" class="display-3"></b-icon>
</b-input-group-prepend>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="E-Mail"
:rules="{required: true, email: true}"
required
style="font-size: xx-large; padding-left:20px"></b-form-input>
</b-input-group>
</div>
<br>
<div>
<b-col class="text-left pl-6">
<b-badge variant="primary">Betrag</b-badge>
</b-col>
<b-col v-if="($store.state.user.balance == form.amount)" class="text-right">
<b-badge variant="primary">maximale anzahl GDD zum versenden erreicht!</b-badge>
</b-col>
<b-input-group id="input-group-2" label="Betrag:" label-for="input-2"
size="lg"
class="mb-3">
<b-input-group-prepend>
<div class="h3 pt-3 pr-3">GDD</div>
</b-input-group-prepend>
<b-form-input
id="input-2"
v-model="form.amount"
type="number"
placeholder="0.01"
step="0.01"
min="0.01"
:max="$store.state.user.balance"
style="font-size: xx-large; padding-left:20px">
</b-form-input>
</b-input-group>
<b-col class="text-left pl-6">
<b-badge variant="primary">Nachricht für den Empfänger (optional)</b-badge>
</b-col>
<b-input-group>
<b-input-group-prepend class="p-3">
<b-icon icon="chat-right-text" class="display-3"></b-icon>
</b-input-group-prepend>
<b-form-textarea v-model="form.memo" class="pl-3"></b-form-textarea>
</b-input-group>
</div>
<br>
<b-row>
<b-col></b-col>
<b-col></b-col>
</b-row>
<b-button type="submit" variant="primary">{{$t('form.send_now')}}</b-button>
<b-button type="reset" variant="danger">{{$t('form.cancel')}}</b-button>
<br>
</b-form>
</validation-observer>
</b-card>
</b-collapse>
</b-col>
</b-row>
</div>
</template>
<script>
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
import { BIcon } from 'bootstrap-vue'
export default {
name: 'GddSent',
components: {
QrcodeStream,
QrcodeDropZone,
QrcodeCapture,
BIcon
},
data(){
return {
scan: false,
show: true,
form: {
img: '',
email: '',
amount: '',
memo:''
},
sent: false,
}
},
methods: {
sendbutton(){
this.sent = true
},
async onDecode (decodedString) {
console.log('onDecode JSON.parse(decodedString)',JSON.parse(decodedString) )
const arr = JSON.parse(decodedString)
// console.log('arr',arr[0].email )
this.modal.h4 = 'Scan erfolgreich'
this.modal.p = arr
this.form.email = arr[0].email
this.form.amount1 = arr[0].amount
// console.log('arr mail',arr.email)
// console.log('arr mail',arr.amount)
this.modals2 = true
},
async onDetect (promise) {
try {
const {
imageData, // raw image data of image/frame
content, // decoded String
location // QR code coordinates
} = await promise
console.log('onDetect promise',promise)
//console.log('JSON.parse(decodedString)',JSON.parse(promise) )
const arr = JSON.parse(decodedString)
console.log('arr',arr)
} catch (error) {
// ...
}
},
async onSubmit() {
//event.preventDefault()
//console.log("onSubmit", this.form)
this.$store.state.ajaxCreateData.session_id = this.$cookies.get('gdd_session_id')
this.$store.state.ajaxCreateData.email = this.form.email
this.$store.state.ajaxCreateData.amount = this.form.amount
this.$store.state.ajaxCreateData.memo = this.form.memo
this.$store.state.ajaxCreateData.target_date = Date.now()
this.$store.dispatch('ajaxCreate')
},
onReset(event) {
event.preventDefault()
this.form.email = ''
this.form.amount = ''
this.show = false
this.$nextTick(() => {
this.show = true
})
}
},
computed: {
state() {
return this.name.length >= 4
},
invalidFeedback() {
if (this.name.length > 0) {
return 'Geben Sie mindestens 4 Zeichen ein.'
}
return 'Bitte geben Sie eine GDD Adresse ein.'
}
}
};
</script>