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: qrcode gerüst

Browse Source
This commit is contained in:
ogerly 2021-01-13 14:49:05 +01:00
parent b3f29b1687
commit 27b9ef1a24
25 changed files with 208 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -8,6 +8,9 @@ yarn-error.log*
test/unit/coverage
package-lock.json
.env
.env.development.local
.env.production.local
# Editor directories and files
.idea

6
README.md
View File

@ -1,3 +1,9 @@
https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html
https://github.com/gruhn/vue-qrcode-reader
https://bootstrap-vue.org/docs/components/image
# [BootstrapVue Argon Dashboard](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/?ref=bvad-github-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=BootstrapVue%20Argon%20Dashboard%20is%20a%20Free%20Bootstrap%20and%Vue.js%20Dashboard%20made%20using%vue-cli%20%E2%9D%A4%EF%B8%8F%0Ahttps%3A//demos.creative-tim.com/bootstrap-vue-argon-dashboard%20%vue.js%20%23vue-cli%20%23argon%20%23argondesign%20%23angulardashboard%20%23argonvue%20%23vuedesign%20%23bootstrap%20%23design%20%23uikit%20%23freebie%20%20via%20%40CreativeTim)

1
package.json
View File

@ -30,6 +30,7 @@
"vue-chartjs": "^3.5.0",
"vue-clipboard2": "^0.3.0",
"vue-flatpickr-component": "^8.1.2",
"vue-qrcode-reader": "^2.3.16",
"vue-router": "^3.0.6",
"vue2-transitions": "^0.2.3"
},

BIN
public/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/img/brand/Gradido-Coin_300_120dpi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
public/img/brand/Gradido-Coin_300_120dpi_comic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
public/img/brand/Gradido-Coin_300_120dpi_cubeb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
public/img/brand/Gradido-Coin_300_120dpi_sw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
public/img/brand/Gradido-Coin_500_175dpi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

BIN
public/img/brand/cube.webm Normal file
View File

Binary file not shown.

BIN
public/img/brand/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/img/brand/green.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/img/brand/white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/img/icons/gradido/minus-low.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
public/img/icons/gradido/minus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
public/img/icons/gradido/my_gradido.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
public/img/icons/gradido/plus-low.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/img/icons/gradido/plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
public/img/icons/gradido/qr-make.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
public/img/icons/gradido/qr-scan-pure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/img/icons/gradido/qr-scan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

8
src/components/Cards/StatsCard.vue
View File

@ -17,6 +17,13 @@
</div>
</slot>
</b-col>
<b-col cols="auto" v-if="$slots.img || img">
<slot name="img">
<img :src="img" width="80" />
</slot>
</b-col>
</b-row>
<p class="mt-3 mb-0 text-sm">
@ -40,6 +47,7 @@
default: 'primary'
},
icon: String,
img: String,
title: String,
subTitle: String,
iconClasses: [String, Array]

256
src/views/KontoOverview.vue
View File

@ -7,7 +7,7 @@
<stats-card title="Aktueller Kontostand"
type="gradient-red"
sub-title="3500,897 GDD"
icon="ni ni-money-coins"
img="img/icons/gradido/my_gradido.png"
class="mb-4">
<template slot="footer">
@ -20,7 +20,7 @@
<stats-card title="Erhaltene Gradido"
type="gradient-orange"
sub-title="2,356 GDD"
icon="ni ni-cloud-download-95"
img="img/icons/gradido/plus.png"
class="mb-4">
<template slot="footer">
@ -29,6 +29,9 @@
</template>
</stats-card>
</b-col>
</b-row>
<!-- Card sent-->
<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--icon"><i class="ni ni-curved-next"></i></span>
@ -37,63 +40,87 @@
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<div>
<b-input-group
id="input-group-1"
label="Empfänger:"
label-for="input-1"
prepend="@"
description="We'll never share your email with anyone else.">
<b-row>
<b-col>
<qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture>
</b-col>
<b-col>
<span v-if="scan">
<qrcode-stream @decode="onDecode" @detect="onDetect" ></qrcode-stream>
<b-iconstack font-scale="5" @click="scan=false">
<b-icon stacked icon="upc-scan" variant="info" scale="0.75"></b-icon>
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
</b-iconstack>
</span>
<span v-else >
<img src="img/icons/gradido/qr-scan-pure.png" width="90" @click="scan=true"/>
scan jetzt
</span>
</b-col>
</b-row>
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<br>
<qrcode-drop-zone id="input-0" v-model="form.img" ></qrcode-drop-zone>
<br>
<div>
<b-input-group
id="input-group-1"
label="Empfänger:"
label-for="input-1"
description="We'll never share your email with anyone else.">
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="E-Mail"
required></b-form-input>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="E-Mail"
required></b-form-input>
<b-input-group-append>
<b-button variant="outline-primary">Adressbuch</b-button>
</b-input-group-append>
<b-input-group-append>
<b-button variant="outline-primary" @click="adressbook">Adressbuch</b-button>
</b-input-group-append>
</b-input-group>
</div>
<br>
<div>
<b-input-group id="input-group-2" label="Betrag:" label-for="input-2">
<b-form-input id="input-2"
v-model="form.amount"
type="number"
required
min="0.001" placeholder="0.000">
</b-form-input>
</b-input-group>
</div>
<br>
<b-button type="submit" variant="primary">jetzt versenden</b-button>
<b-button type="reset" variant="danger">Cancel</b-button>
<br>
</b-input-group>
</div>
<br>
<div>
<b-input-group id="input-group-2" label="Betrag:" label-for="input-2">
<b-form-input id="input-2"
v-model="form.amount1"
type="number"
required
min="0" placeholder="0">
</b-form-input>.<h1>GDD.</h1>
<b-form-input id="input-3"
v-model="form.amount2"
type="number"
min="00" placeholder="00">
</b-form-input>
</b-input-group>
</div>
<br>
<b-button type="submit" variant="primary">jetzt versenden</b-button>
<b-button type="reset" variant="danger">Cancel</b-button>
<br>
</b-form>
</p>
</p>
</b-card>
</b-collapse>
</b-col>
</b-row>
<!-- Card table -->
<div>
<b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
<template #cell(show_status)="row">
<div class="h2 mb-0">
<b-icon-node-minus v-if="row.item.status === 'sent' "></b-icon-node-minus>
<b-icon-plus v-if="row.item.status === 'received' && 'earned'"></b-icon-plus>
</div>
<b-table striped hover :items="items" :fields="fields" :tbody-tr-class="rowClass">
<template #cell(status)="row">
<img v-if="row.item.status === 'sent' " src="img/icons/gradido/minus.png" width="50" />
<img v-else src="img/icons/gradido/plus-low.png" width="50" />
</template>
<template #cell(show_details)="row">
<template #cell(details)="row">
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Ausblenden' : 'Anzeigen'}} der Details
{{ row.detailsShowing ? 'Ausblenden' : 'Anzeigen'}}
</b-button>
</template>
@ -105,8 +132,13 @@
</b-row>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Ist aktiv:</b></b-col>
<b-col>{{ row.item.isActive }}</b-col>
<b-col sm="3" class="text-sm-right"><b>Vergänglichkeit: </b></b-col>
<b-col>{{ row.item.isActive }}0.0032 GDD</b-col>
</b-row>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Absender: </b></b-col>
<b-col>{{ row.item.name }}</b-col>
<b-col>{{ row.item.date }}</b-col>
</b-row>
<b-button size="sm" @click="row.toggleDetails">Details ausblenden</b-button>
@ -114,62 +146,113 @@
</template>
</b-table>
</div>
<!--Notice modal-->
<modal :show.sync="modal"
modal-classes="modal-danger"
modal-content-classes="bg-gradient-danger">
<h6 slot="header" class="modal-title">Your attention is required</h6>
<div class="py-3 text-center">
<i class="ni ni-bell-55 ni-3x"></i>
<h4 class="heading mt-4">You should read this!</h4>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
<template slot="footer">
<base-button type="white">Ok, Got it</base-button>
<base-button type="link" class="text-white ml-auto" @click="modals.notice = false">Close</base-button>
</template>
</modal>
</base-header>
<!--Notice modal-->
<modal :show.sync="modals"
modal-classes="modal-danger"
modal-content-classes="bg-gradient-danger">
<h6 slot="header" class="modal-title">Your attention is required</h6>
<div class="py-3 text-center">
<i class="ni ni-bell-55 ni-3x"></i>
<h4 class="heading mt-4">You should read this!</h4>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
<template slot="footer">
<base-button type="white">Ok, Got it</base-button>
<base-button type="link" class="text-white ml-auto" @click="modals.notice = false">Close</base-button>
</template>
</modal>
</div>
</div>
</template>
<script>
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
import { BIcon } from 'bootstrap-vue'
export default {
components: {
QrcodeStream,
QrcodeDropZone,
QrcodeCapture
},
data() {
return {
form: {
scan: false,
form: {
img: '',
email: '',
amount: ''
amount1: '',
amount2: ''
},
show: true,
modals: false,
fields: [ 'show_status', 'amount', 'name', 'date', 'show_details'],
modal: false,
modaldate: {
classes:'',
content_classes:'',
title:'',
icon:'',
h4: '',
p: '',
footer_text: ''
},
fields: [ 'status', 'betrag', 'name', 'datum', 'details'],
items: [
{ amount: 1000, name: 'Dickerson', date: '12.12.2020 14:04', status: 'received' },
{ amount: 302, name: 'Larsen', date: '22.06.2020 22:23', status: 'sent' },
{ amount: 89, name: 'Geneva', date: '15.04.2020 12:55', status: 'sent' },
{ amount: 1000, name: 'Community', date: '10.03.2020 18:20', status: 'received'}
{ betrag: 1000, name: 'Dickerson', datum: '12.12.20', datel: '12.12.2020 14:04', status: 'received' },
{ betrag: 302, name: 'Larsen', datum: '22.06.20', datel: '22.06.2020 22:23', status: 'sent' },
{ betrag: 89, name: 'Geneva', datum: '15.04.20', datel: '15.04.2020 12:55', status: 'sent' },
{ betrag: 1000, name: 'Community', datum: '10.03.20', datel: '10.03.2020 18:20', status: 'received'}
]
};
},
methods: {
async onDecode (decodedString) {
console.log('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('promise',promise)
console.log('JSON.parse(decodedString)',JSON.parse(promise) )
const arr = JSON.parse(decodedString)
console.log('arr',arr)
} catch (error) {
// ...
}
},
onSubmit(event) {
event.preventDefault()
alert(JSON.stringify(this.form))
this.modals = true
this.modal = true
this.modal.h4 = 'TODO 1'
},
onReset(event) {
event.preventDefault()
// Reset our form values
this.form.email = ''
this.form.amount = ''
this.form.amount1 = ''
this.form.amount2 = ''
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
@ -182,6 +265,11 @@
if (item.status === 'sent') return 'table-warning'
if (item.status === 'earned') return 'table-primary'
},
adressbook() {
this.modal = true
this.modaldata.h4 = 'Adressbuch'
this.modaldata.p = 'TODO ADRESSBUCH LISTE'
}
},
mounted() {
@ -206,3 +294,7 @@
padding-right: 0px;
}
</style>

39
src/views/Pages/Login.vue
View File

@ -2,17 +2,7 @@
<div>
<!-- Header -->
<div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
<b-container>
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-5">
<h1 class="text-white">Welcome!</h1>
<p class="text-lead text-white">Use these awesome forms to login or create new account in your project for
free.</p>
</b-col>
</b-row>
</div>
</b-container>
<div class="separator separator-bottom separator-skew zindex-100">
<svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1"
xmlns="http://www.w3.org/2000/svg">
@ -25,24 +15,21 @@
<b-row class="justify-content-center">
<b-col lg="5" md="7">
<b-card no-body class="bg-secondary border-0 mb-0">
<b-card-header class="bg-transparent pb-5" >
<div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
<div class="btn-wrapper text-center">
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="img/icons/common/github.svg"></span>
<span class="btn-inner--text">Github</span>
</a>
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="img/icons/common/google.svg"></span>
<span class="btn-inner--text">Google</span>
</a>
</div>
<b-card-header class="pb-1" >
<video width="450" height="300" autoplay loop>
<source src="/img/brand/cube.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5">
<div class="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
<h2>Login Gradido Wallet</h2>
</div>
<validation-observer v-slot="{handleSubmit}" ref="formValidator">
<div class="text-center text-muted mb-4">
<h4>Login Server 1</h4>
</div>
<!--<validation-observer v-slot="{handleSubmit}" ref="formValidator">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input alternative
class="mb-3"
@ -68,7 +55,7 @@
<base-button type="primary" native-type="submit" class="my-4">Sign in</base-button>
</div>
</b-form>
</validation-observer>
</validation-observer> -->
</b-card-body>
</b-card>
<b-row class="mt-3">

16
src/views/Pages/Register.vue
View File

@ -6,9 +6,8 @@
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-5">
<h1 class="text-white">Create an account</h1>
<p class="text-lead text-white">Use these awesome forms to login or create new account in your project for
free.</p>
<h1 class="text-white">Erstelle eine Gradido Wallet</h1>
<p class="text-lead text-white">Werde teil der Community</p>
</b-col>
</b-row>
</div>
@ -28,16 +27,7 @@
<b-card no-body class="bg-secondary border-0">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-4"><small>Sign up with</small></div>
<div class="text-center">
<a href="#" class="btn btn-neutral btn-icon mr-4">
<span class="btn-inner--icon"><img src="img/icons/common/github.svg"></span>
<span class="btn-inner--text">Github</span>
</a>
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="img/icons/common/google.svg"></span>
<span class="btn-inner--text">Google</span>
</a>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5">
<div class="text-center text-muted mb-4">