From 42ec2f7704feb15c5ada4c284dbcee4b0024d8f7 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Wed, 24 Mar 2021 13:24:26 +0100
Subject: [PATCH] fix-qr-code-items

---
 frontend/src/views/KontoOverview/GddSend.vue |  78 ++++---
 frontend/src/views/KontoOverview/GddSent.vue | 205 -------------------
 2 files changed, 45 insertions(+), 238 deletions(-)
 delete mode 100644 frontend/src/views/KontoOverview/GddSent.vue

diff --git a/frontend/src/views/KontoOverview/GddSend.vue b/frontend/src/views/KontoOverview/GddSend.vue
index f716e72a9..6516e3718 100644
--- a/frontend/src/views/KontoOverview/GddSend.vue
+++ b/frontend/src/views/KontoOverview/GddSend.vue
@@ -6,31 +6,47 @@
                <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>                                          
+            <b-card class="p-0 p-md-3">   
+ 
+              <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>                     
-                </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>  
+                </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>
+                        </b-alert> 
+            
+
+           
+
               <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">
-                       Empfänger
-                            
+                     <b-col  class="text-left p-3 p-sm-1">
+                       Empfänger                            
                           </b-col>  
                                       
                     <b-input-group
@@ -41,7 +57,7 @@
                           size="lg"
                         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-input-group-prepend>
                       <b-form-input 
@@ -56,7 +72,7 @@
                   </div>
                   <br>                
                   <div>
-                    <b-col    class="text-left pl-6">
+                    <b-col    class="text-left p-3 p-sm-1">
                       Betrag
                             
                           </b-col> 
@@ -66,7 +82,7 @@
                     <b-input-group id="input-group-2" label="Betrag:" label-for="input-2"
                       size="lg"
                       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>
                            
                         </b-input-group-prepend>
@@ -81,15 +97,15 @@
                           style="font-size: xx-large; padding-left:20px">
                         </b-form-input>
                     </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
                           </b-col>         
                           
                     <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-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>
  
                   </div>
@@ -112,7 +128,7 @@
 </template>
 
 <script>
-import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
+import { QrcodeStream, QrcodeDropZone /*, QrcodeCapture*/ } from 'vue-qrcode-reader'
 import { BIcon } from 'bootstrap-vue'
 
 export default {
@@ -120,7 +136,7 @@ export default {
   components: {
         QrcodeStream,
         QrcodeDropZone,
-        QrcodeCapture,
+       // QrcodeCapture,
         BIcon
      },
   data(){
@@ -143,14 +159,12 @@ export default {
      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
+           console.log('qr-email',arr[0].email )
+           console.log('qr-amount',arr[0].amount )
+
            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 {
@@ -159,11 +173,9 @@ export default {
             content,      // decoded String
             location      // QR code coordinates
           } = await promise
-            console.log('onDetect promise',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) {
           // ...
         }
diff --git a/frontend/src/views/KontoOverview/GddSent.vue b/frontend/src/views/KontoOverview/GddSent.vue
deleted file mode 100644
index f6ceecb79..000000000
--- a/frontend/src/views/KontoOverview/GddSent.vue
+++ /dev/null
@@ -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>
\ No newline at end of file