Merge pull request #85 from gradido/New-Fix-Up-Frontend-For-Presentation

New fix up frontend for presentation

frontend/src/store/store.js

@@ -13,6 +13,9 @@ export const store = new Vuex.Store({
     sizeDE: 'normal',
     sizeGB: 'big',
     loginfail: false,
+    row_form: true,
+    row_check: false,
+    row_thx: false,
     user: {
       name: '',
       balance: 0,
@@ -22,7 +25,7 @@ export const store = new Vuex.Store({
       session_id: '',
       email: '',
       amount: 0,
-      target_date: '2021-02-19T13:25:36+00:00',
+      target_date: '',
       memo: '',
       auto_sign: true,
     },
@@ -141,8 +144,17 @@ export const store = new Vuex.Store({
     },
     ajaxCreate: async ({ dispatch, state }) => {
       //console.log('action: ajaxCreate')
+
       state.ajaxCreateData.amount = state.ajaxCreateData.amount * 10000
-      const result = await communityAPI.create($cookies.get('gdd_session_id', email, amount, memo))
+
+      const result = await communityAPI.create(
+        state.session_id,
+        state.ajaxCreateData.email,
+        state.ajaxCreateData.amount,
+        state.ajaxCreateData.memo,
+      )
+
+      return result
       //console.log(result)
     },
     ajaxListTransactions: async ({ commit, dispatch, state }) => {
@@ -157,8 +169,8 @@ export const store = new Vuex.Store({
       // commit('session_id', $cookies.get("gdd_session_id"))
       // commit('email', $cookies.get("gdd_u"))
       const result = await communityAPI.balance($cookies.get('gdd_session_id'))
-      //console.log('accountBalance result', result)
+      //console.log("accountBalance result", result)
-      //console.log('aresult.result.data.balance', result.result.data.balance)
+      //console.log("aresult.result.data.balance", result.result.data.balance)
       if (result.success) {
         commit('user_balance', result.result.data.balance)
       } else {

frontend/src/views/KontoOverview/GddAddWork2.vue

@@ -1,34 +1,44 @@
 <template>
-  <div>
+  <div class="pt-4 pb-4">
-    <b-tabs content-class="mt-3" fill>
+    <b-tabs content-class="mt-3" class="display-4" fill>
       <b-tab :title="names.thisMonth" active>
         <b-row>
-          <b-col cols="3">
+          <b-col lg="3">
-            <base-input label="Arbeitstunden">
+            <base-input label="Stunden">
-              <b-form-input type="number" placeholder="23" />
+              <b-form-input
+                type="number"
+                size="lg"
+                placeholder="23"
+                style="font-size: xx-large; padding-left: 20px"
+              />
             </base-input>
             <base-input label="Datum / Zeitraum">
-              <flat-pickr class="form-control" v-model="date" :config="config"></flat-pickr>
+              <flat-pickr
+                class="form-control"
+                v-model="date"
+                :config="config"
+                style="font-size: xx-large; padding-left: 20px"
+              ></flat-pickr>
             </base-input>
           </b-col>
-          <b-col cols="9">
+          <b-col lg="9">
             <base-input label="Arbeitsreport">
-              <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
+              <textarea
+                class="form-control"
+                rows="5"
+                @focus="textFocus"
+                style="font-size: x-large; padding-left: 20px"
+              ></textarea>
             </base-input>
           </b-col>
         </b-row>
+
         <b-row>
-          <b-col>
+          <b-col md="6">
-            <button class="btn btn-info text-right" @click.prevent="newWorkForm">
+            <b-button @click.prevent="newWorkForm" variant="warning">+ weitere Stunden</b-button>
-              weiteren Report hinzufügen
-            </button>
           </b-col>
-          <b-col>
+          <b-col md="6" class="text-right">
-            <div class="text-right">
+            <b-button variant="success" @click.prevent="submitForm2">Einreichen, absenden</b-button>
-              <button class="btn btn-info text-right" @click.prevent="submitForm2">
-                save new Report
-              </button>
-            </div>
           </b-col>
         </b-row>
       </b-tab>
@@ -50,17 +60,13 @@
           </b-col>
         </b-row>
         <b-row>
-          <b-col>
+          <b-col md="12">
-            <button class="btn btn-warning text-right" @click.prevent="newWorkForm">
+            <b-button @click.prevent="newWorkForm" variant="warning">
               + weiteren Report hinzufügen
-            </button>
+            </b-button>
           </b-col>
-          <b-col>
+          <b-col md="12" class="text-right">
-            <div class="text-right">
+            <b-button variant="success">Einreichen, absenden</b-button>
-              <button class="btn btn-info text-right" @click.prevent="submitForm2">
-                save new Report
-              </button>
-            </div>
           </b-col>
         </b-row>
         <hr />

frontend/src/views/KontoOverview/GddSend.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-row>
+    <b-row v-show="$store.state.row_form">
       <b-col xl="12" md="12">
         <b-alert variant="warning" show dismissible>
           <strong>Achtung!</strong>
@@ -17,9 +17,7 @@
               <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">
+              <span class="alert-text" @click="scan = false"><strong>schließen!</strong></span>
-                <strong>schließen!</strong>
-              </span>
             </b-alert>
             <div v-if="scan">
               <!-- <b-row>                                          
@@ -142,11 +140,57 @@
         </b-card>
       </b-col>
     </b-row>
+    <b-row v-show="$store.state.row_check">
+      <b-col>
+        <div class="display-4 p-4">Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!</div>
+
+        <b-list-group>
+          <b-list-group-item active>Meine Zahlung</b-list-group-item>
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ $store.state.ajaxCreateData.email }}
+            <b-badge variant="primary" pill>Empfänger</b-badge>
+          </b-list-group-item>
+
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ $store.state.ajaxCreateData.amount }} GDD
+            <b-badge variant="primary" pill>Betrag</b-badge>
+          </b-list-group-item>
+
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ $store.state.ajaxCreateData.memo }}
+            <b-badge variant="primary" pill>Nachricht</b-badge>
+          </b-list-group-item>
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ $moment($store.state.ajaxCreateData.target_date).format('DD.MM.YYYY - HH:mm:ss') }}
+            <b-badge variant="primary" pill>Datum</b-badge>
+          </b-list-group-item>
+        </b-list-group>
+        <hr />
+        <b-row>
+          <b-col><b-button @click="onReset">abbrechen</b-button></b-col>
+          <b-col class="text-right">
+            <b-button variant="success" @click="sendTransaction">jetzt versenden</b-button>
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+    <b-row v-show="$store.state.row_thx">
+      <b-col>
+        <div class="display-1 p-4">
+          Danke
+          <hr />
+          Deine Zahlung wurde erfolgreich versendet.
+        </div>
+
+        <b-button variant="success" @click="onReset">schließen</b-button>
+        <hr />
+      </b-col>
+    </b-row>
   </div>
 </template>
 
 <script>
-import { QrcodeStream, QrcodeDropZone /*, QrcodeCapture*/ } from 'vue-qrcode-reader'
+import { QrcodeStream, QrcodeDropZone } from 'vue-qrcode-reader'
 import { BIcon } from 'bootstrap-vue'
 
 export default {
@@ -154,7 +198,6 @@ export default {
   components: {
     QrcodeStream,
     QrcodeDropZone,
-    // QrcodeCapture,
     BIcon,
   },
   data() {
@@ -167,57 +210,9 @@ export default {
         amount: '',
         memo: '',
       },
-      sent: false,
+      send: 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('qr-email', arr[0].email)
-      //console.log('qr-amount', arr[0].amount)
-
-      this.form.email = arr[0].email
-      this.form.amount1 = arr[0].amount
-    },
-    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)
-      } 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
@@ -229,6 +224,49 @@ export default {
       return 'Bitte geben Sie eine GDD Adresse ein.'
     },
   },
+  methods: {
+    async onDecode(decodedString) {
+      //console.log('onDecode JSON.parse(decodedString)', JSON.parse(decodedString))
+      const arr = JSON.parse(decodedString)
+      //console.log('qr-email', arr[0].email)
+      //console.log('qr-amount', arr[0].amount)
+
+      this.$store.state.row_form = false
+      this.$store.state.row_check = true
+      this.$store.state.row_thx = false
+    },
+    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.state.row_form = false
+      this.$store.state.row_check = true
+      this.$store.state.row_thx = false
+    },
+    sendTransaction() {
+      this.$store.dispatch('ajaxCreate')
+      this.$store.state.row_form = false
+      this.$store.state.row_check = false
+      this.$store.state.row_thx = true
+    },
+    onReset(event) {
+      event.preventDefault()
+      this.form.email = ''
+      this.form.amount = ''
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
+      })
+      this.$store.state.row_form = true
+      this.$store.state.row_check = false
+      this.$store.state.row_thx = false
+    },
+  },
 }
 </script>
 <style>

frontend/src/views/KontoOverview/GddStatus.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-row>
+    <b-row v-show="$store.state.row_form">
       <b-col xl="6" md="6">
         <stats-card type="gradient-red" sub-title="balance_gdd" class="mb-4 h1">
           {{ $n($store.state.user.balance) }} GDD

frontend/src/views/KontoOverview/GddTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-list-group>
+    <b-list-group v-show="$store.state.row_form">
       <b-list-group-item
         v-for="item in filteredItems"
         :key="item.id"
@@ -111,12 +111,20 @@ export default {
     }
   },
   computed: {
-    filteredItems(a) {
+    filteredItems() {
-      // console.log("filteredItems date",a.items)
+      return this.ojectToArray(this.items).reverse()
-      return a.items
     },
   },
   methods: {
+    ojectToArray(obj) {
+      let result = new Array(Object.keys(obj).length)
+      Object.entries(obj).forEach((entry) => {
+        const [key, value] = entry
+        result[key] = value
+      })
+      return result
+    },
+
     rowClass(item, type) {
       if (!item || type !== 'row') return
       if (item.type === 'receive') return 'table-success'

frontend/src/views/KontoOverview/GddWorkTable.vue

@@ -18,6 +18,11 @@
         </div>
       </b-list-group-item>
     </b-list-group>
+    <hr />
+    <b-icon icon="clock-history" class="m-1" font-scale="2" style="color: orange"></b-icon>
+    Wartet auf Bestätigung |
+    <b-icon icon="check2-all" class="m-1" font-scale="2" style="color: green"></b-icon>
+    bestätigt
   </div>
 </template>
 
@@ -30,25 +35,25 @@ export default {
       items: [
         {
           id: 1,
-          text: 'Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
+          text: 'Zwei Säcke Plastikmüll im Wald gesammelt',
           datel: '12.12.2020 14:04',
           status: 'submitted',
         },
         {
           id: 2,
-          text: 'Larsen Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
+          text: 'Frau Schmidt bei der Gartenarbeit geholfen.',
           datel: '22.06.2020 22:23',
           status: 'submitted',
         },
         {
           id: 3,
-          text: 'Geneva Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
+          text: 'Ein online Kurs für nachhaltiges Mülltrennen erstellt',
           datel: '15.04.2020 12:55',
           status: 'confirmed',
         },
         {
           id: 4,
-          text: 'Community Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
+          text: 'Gradido bei meinen Freunden vorgestellt',
           datel: '10.03.2020 18:20',
           status: 'confirmed',
         },

frontend/src/views/Pages/UserProfileActivity.vue

@@ -1,61 +1,49 @@
 <template>
   <div>
-    <div
+    <div class="header pb-7 pt-5"></div>
-      class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"
-      style="max-height: 200px"
-    ></div>
 
     <b-container fluid class="mt--6">
+      <div class="display-3 mb-3">Gemeinschaftsstunden Chart</div>
       <b-row>
         <b-col>
-          <div>
+          <div class="chart">
-            <gdd-add-work-2 />
+            <line-chart :height="350" :chart-data="bigLineChart.chartData"></line-chart>
           </div>
-          <br />
         </b-col>
       </b-row>
       <hr />
+      <div class="display-3 mt-6">Neue Gemeinschaftsstunden eintragen</div>
       <b-row>
-        <b-col xl="4" class="order-xl-2 mb-5">
+        <b-col>
-          community
+          <gdd-add-work-2 />
-          <gdd-work-table></gdd-work-table>
-        </b-col>
-        <b-col xl="8" class="order-xl-1">
-          transactions
-          <gdd-table></gdd-table>
         </b-col>
       </b-row>
+
+      <hr />
+      <div class="display-3 mb-3">Meine Gemeinschaftsstunden Liste</div>
       <b-row>
-        <b-col xl="6" S>
+        <b-col class="mb-5">
-          <div class="chart">
+          community
-            <line-chart :height="350" :chart-data="bigLineChart.chartData"></line-chart>
+          <gdd-work-table></gdd-work-table>
-          </div>
-        </b-col>
-        <b-col xl="6">
-          <div class="chart">
-            <line-chart :height="350" :chart-data="bigLineChart.chartData"></line-chart>
-          </div>
         </b-col>
       </b-row>
     </b-container>
   </div>
 </template>
 <script>
-import GddTable from '../../views/KontoOverview/GddTable.vue'
+//import GddTable from '../../views/KontoOverview/GddTable.vue'
 import GddWorkTable from '../../views/KontoOverview/GddWorkTable.vue'
 import GddAddWork2 from '../../views/KontoOverview/GddAddWork2.vue'
 
 import * as chartConfigs from '@/components/Charts/config'
 import LineChart from '@/components/Charts/LineChart'
-//import BarChart from '@/components/Charts/BarChart';
 
 export default {
   components: {
-    GddTable,
+    // GddTable,
     GddWorkTable,
     LineChart,
     GddAddWork2,
-    //BarChart
   },
   data() {
     return {
@@ -70,11 +58,11 @@ export default {
         chartData: {
           datasets: [
             {
-              label: 'Performance',
+              label: 'Gemeinschaftsstunden',
-              data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
+              data: [30, 20, 10, 30, 65, 40, 20, 60, 70],
             },
           ],
-          labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          labels: ['2020 Aug', 'Sep', 'Okt', 'Nov', 'Dez', 'Jan', 'Feb', 'Mär 2021'],
         },
         extraOptions: chartConfigs.blueChartOptions,
       },