mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
merge my local master in git clone master
This commit is contained in:
ogerly
parent
27b9ef1a24
commit
c8555af3ad
@ -1,13 +1,9 @@
|
||||
<!--
|
||||
IMPORTANT: Please use the following link to create a new issue:
|
||||
|
||||
https://www.creative-tim.com/new-issue/bootstrap-vue-argon-dashboard
|
||||
https://www.gradido.net/new-issue/bootstrap-vue-gradido-wallet
|
||||
|
||||
**If your issue was not created using the app above, it will be closed immediately.**
|
||||
-->
|
||||
|
||||
<!--
|
||||
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
|
||||
👉 https://www.creative-tim.com/bundles
|
||||
👉 https://www.creative-tim.com
|
||||
-->
|
||||
|
||||
|
||||
71
README.md
71
README.md
@ -1,31 +1,21 @@
|
||||
https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html
|
||||
https://github.com/gruhn/vue-qrcode-reader
|
||||
|
||||
https://bootstrap-vue.org/docs/components/image
|
||||
# Bootstrap Vue Gradido Wallet
|
||||
|
||||
|
||||
# [BootstrapVue Argon Dashboard](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/?ref=bvad-github-readme) [](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)
|
||||
|
||||
|
||||
|
||||
  [](https://github.com/creativetimofficial/bootstrap-vue-argon-dashboard/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/bootstrap-vue-argon-dashboard/issues?q=is%3Aissue+is%3Aclosed) [](https://gitter.im/creative-tim-general/Lobby) [](https://discord.gg/E4aHAQy)
|
||||
|
||||
|
||||
|
||||
|
||||
**Fully Coded Components**
|
||||
|
||||
BootstrapVue Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files.
|
||||
Bootstrap Vue Gradido Wallet - is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files.
|
||||
You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Dashboard is coming with pre-built examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.
|
||||
Every element has multiple states for colors, styles, hover, focus, that you can easily access and use.
|
||||
|
||||
**Complex Documentation**
|
||||
|
||||
Each element is well presented in a very complex documentation. You can read more about the idea behind this [dashboard here](https://www.creative-tim.com/learning-lab/bootstrap-vue/overview/argon-dashboard?ref=bvad-github-readme). You can check the [components here](https://www.creative-tim.com/learning-lab/bootstrap-vue/avatar/argon-dashboard?ref=bvad-github-readme) and the [foundation here](https://www.creative-tim.com/learning-lab/bootstrap-vue/colors/argon-dashboard?ref=bvad-github-readme).
|
||||
|
||||
|
||||
**Example Pages**
|
||||
|
||||
If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.
|
||||
|
||||
|
||||
|
||||
## Table of Contents
|
||||
@ -43,43 +33,25 @@ If you want to get inspiration or just show something directly to your clients,
|
||||
|
||||
## Versions
|
||||
|
||||
[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/bootstrap-vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-argon-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-react)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/angular-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-argon-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nodejs-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-nodejs)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/laravel_logo.png" width="60" height="60" style="background:white"/>](https://www.creative-tim.com/product/argon-dashboard-laravel)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/sketch-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/argon-dashboard/tree/sketch)
|
||||
|
||||
|
||||
|
||||
|Vue | HTML | React | Angular |
|
||||
| --- | --- | --- | --- |
|
||||
[](https://www.creative-tim.com/product/vue-argon-dashboard?ref=bvad-github-readme) | [](https://www.creative-tim.com/product/vue-argon-dashboard?ref=bvad-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-react?ref=bvad-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-angular?ref=bvad-github-readme)
|
||||
|
||||
| BootstrapVue | NodeJS | Laravel |
|
||||
| --- | --- | --- |
|
||||
| [](https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard?ref=bvad-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-nodejs?ref=bvad-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-laravel?ref=bvad-github-readme) |
|
||||
|
||||
## Demo
|
||||
|
||||
| Dashboard Page | Icons Page | User Profile Page | Tables Page | Login Page | Register Page |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/#/dashboard?ref=bvad-github-readme) | [](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/#/icons?ref=bvad-github-readme) | [](https://demos.creative-tim.com/bootsrap-vue-argon-dashboard/#/profile?ref=bvad-github-readme) | [](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/#/tables?ref=bvad-github-readme) | [](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/#/login?ref=bvad-github-readme) | [](https://demos.creative-tim.com/bootsrap-vue-argon-dashboard/#/register?ref=bvad-github-readme)
|
||||
|
||||
[View More](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/#/dashboard)
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
- [Download from Github](https://github.com/creativetimofficial/bootsrap-vue-argon-dashboard/archive/master.zip).
|
||||
- [Download from Creative Tim](https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard?ref=bvad-github-readme).
|
||||
- Clone the repo: `git clone https://github.com/creativetimofficial/bootstrap-vue-argon-dashboard.git`.
|
||||
|
||||
|
||||
## Documentation
|
||||
The documentation for the BootsrapVue Argon Dashboard is hosted at our [website](https://www.creative-tim.com/learning-lab/bootstrap-vue/colors/argon-dashboard).
|
||||
The documentation for the Bootstrap Vue Gradido Wallet is hosted at our [website]().
|
||||
|
||||
|
||||
## File Structure
|
||||
Within the download you'll find the following directories and files:
|
||||
|
||||
```
|
||||
|-- BootstrapVue Argon Dashboard
|
||||
|-- Bootstrap Vue Gradido Wallet
|
||||
|-- .gitignore
|
||||
|-- CHANGELOG.md
|
||||
|-- ISSUES_TEMPLATE.md
|
||||
@ -212,20 +184,11 @@ At present, we officially aim to support the last two versions of the following
|
||||
|
||||
|
||||
## Resources
|
||||
- Demo: <https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/#/dashboard?ref=bvad-github-readme>
|
||||
- Download Page: <https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard?ref=bvad-github-readme>
|
||||
- Documentation: <https://www.creative-tim.com/learning-lab/bootstrap-vue/colors/argon-dashboard?ref=bvad-github-readme>
|
||||
- License Agreement: <https://www.creative-tim.com/license?ref=bvad-github-readme>
|
||||
- Support: <https://www.creative-tim.com/contact-us?ref=bvad-github-readme>
|
||||
- Issues: [Github Issues Page](https://github.com/creativetimofficial/bootstrap-vue-argon-dashboard/issues?ref=bvad-github-readme)
|
||||
|
||||
## Reporting Issues
|
||||
|
||||
We use GitHub Issues as the official bug tracker for the BootstrapVue Argon Dashboard. Here are some advices for our users that want to report an issue:
|
||||
|
||||
1. Make sure that you are using the latest version of the BootstrapVue Argon Dashboard. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=bvad-github-readme).
|
||||
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
|
||||
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
|
||||
|
||||
|
||||
## Licensing
|
||||
|
||||
@ -233,25 +196,5 @@ We use GitHub Issues as the official bug tracker for the BootstrapVue Argon Dash
|
||||
|
||||
- Licensed under MIT (https://github.com/creativetimofficial/vue-argon-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
## Useful Links
|
||||
|
||||
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w?ref=creativetim)
|
||||
- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=bvad-github-readme) (earn money)
|
||||
- [Blog Creative Tim](http://blog.creative-tim.com/?ref=bvad-github-readme)
|
||||
- [Free Products](https://www.creative-tim.com/bootstrap-themes/free?ref=bvad-github-readme) from Creative Tim
|
||||
- [Premium Products](https://www.creative-tim.com/bootstrap-themes/premium?ref=bvad-github-readme) from Creative Tim
|
||||
- [React Products](https://www.creative-tim.com/bootstrap-themes/react-themes?ref=bvad-github-readme) from Creative Tim
|
||||
- [Angular Products](https://www.creative-tim.com/bootstrap-themes/angular-themes?ref=bvad-github-readme) from Creative Tim
|
||||
- [VueJS Products](https://www.creative-tim.com/bootstrap-themes/vuejs-themes?ref=bvad-github-readme) from Creative Tim
|
||||
- [More products](https://www.creative-tim.com/bootstrap-themes?ref=bvad-github-readme) from Creative Tim
|
||||
- Check our Bundles [here](https://www.creative-tim.com/bundles?ref=bvad-github-readme)
|
||||
|
||||
### Social Media
|
||||
|
||||
Twitter: <https://twitter.com/CreativeTim?ref=creativetim>
|
||||
|
||||
Facebook: <https://www.facebook.com/CreativeTim?ref=creativetim>
|
||||
|
||||
Dribbble: <https://dribbble.com/creativetim?ref=creativetim>
|
||||
|
||||
Instagram: <https://www.instagram.com/CreativeTimOfficial?ref=creativetim>
|
||||
|
||||
22
package.json
22
package.json
@ -1,14 +1,17 @@
|
||||
{
|
||||
"name": "bootstrap-vue-argon-dashboard",
|
||||
"name": "bootstrap-vue-gradido-wallet",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"serve": "vue-cli-service serve --open",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"dev": "npm run serve"
|
||||
"dev": "npm run serve",
|
||||
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"bootstrap": "4.3.1",
|
||||
"bootstrap-vue": "^2.5.0",
|
||||
"chart.js": "^2.9.3",
|
||||
@ -18,6 +21,9 @@
|
||||
"dropzone": "^5.5.1",
|
||||
"element-ui": "2.4.11",
|
||||
"es6-promise": "^4.1.1",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^7.5.0",
|
||||
"express": "^4.17.1",
|
||||
"flatpickr": "^4.5.7",
|
||||
"fuse.js": "^3.2.0",
|
||||
"google-maps": "^3.2.1",
|
||||
@ -27,12 +33,18 @@
|
||||
"sweetalert2": "^9.5.4",
|
||||
"vee-validate": "^3.2.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-bootstrap-typeahead": "^0.2.6",
|
||||
"vue-chartjs": "^3.5.0",
|
||||
"vue-cli-plugin-i18n": "^1.0.1",
|
||||
"vue-clickaway": "^2.2.2",
|
||||
"vue-clipboard2": "^0.3.0",
|
||||
"vue-flatpickr-component": "^8.1.2",
|
||||
"vue-good-table": "^2.21.3",
|
||||
"vue-i18n": "^8.22.4",
|
||||
"vue-qrcode-reader": "^2.3.16",
|
||||
"vue-router": "^3.0.6",
|
||||
"vue2-transitions": "^0.2.3"
|
||||
"vue2-transitions": "^0.2.3",
|
||||
"vuex": "^3.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.7.0",
|
||||
@ -54,6 +66,6 @@
|
||||
"last 2 versions",
|
||||
"not ie <= 10"
|
||||
],
|
||||
"author": "Creative Tim - https://www.creative-tim.com/",
|
||||
"description": "BootstrapVue Argon Dashboard"
|
||||
"author": "Bernd Hückstädt - https://www.gradido.net/",
|
||||
"description": "Gradido Wallet"
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 36 KiB |
@ -1,13 +1,13 @@
|
||||
<!--
|
||||
|
||||
=========================================================
|
||||
* BootstrapVue Argon Dashboard - v1.0.0
|
||||
* Gradido Wallet - v0.0.1
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard
|
||||
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
|
||||
* Product Page: https://www.gradido.net
|
||||
* Copyright 2020 Bernd Hückstädt - Gradido (https://www.gradido.net)
|
||||
|
||||
* Coded by www.creative-tim.com
|
||||
* Coded by www.gradido.net
|
||||
|
||||
=========================================================
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="<%= webpackConfig.output.publicPath %>favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>BootstrapVue Argon Dashboard by Creative Tim</title>
|
||||
<title>Gradido Wallet</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
|
||||
<!-- Fonts -->
|
||||
|
||||
7
server.js
Normal file
7
server.js
Normal file
@ -0,0 +1,7 @@
|
||||
var express = require('express');
|
||||
var serveStatic = require('serve-static');
|
||||
var app = express();
|
||||
app.use(serveStatic(__dirname + "/dist"));
|
||||
var port = process.env.PORT || 5000;
|
||||
app.listen(port);
|
||||
// console.log('http://localhost:5000 server started.');
|
||||
65
src/App.vue
65
src/App.vue
@ -1,8 +1,71 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
<div id="app" class="font-sans text-gray-800">
|
||||
<header class="border-t-4 border-blue-700 bg-white z-10 absolute w-full shadow-md">
|
||||
</header>
|
||||
<div class="bg-gray-100 min-h-screen pt-40 text-lg">
|
||||
<div style="text-align:center">
|
||||
|
||||
|
||||
<modal v-if="this.$store.state.modals"/>
|
||||
|
||||
|
||||
</div>
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '@/components/Modal'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
component: {
|
||||
Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
nameState: null,
|
||||
submittedNames: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if ( this.$store.state.is_auth == false && this.$store.state.is_admin == false) {
|
||||
this.$router.push("/Landing")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
console.log("app.vue user login() : " + this.$store.state.is_auth)
|
||||
this.$store.commit('login')
|
||||
//this.$router.push('/KontoOverview')
|
||||
},
|
||||
loginAsAdmin () {
|
||||
console.log("app.vue admin login(): " + this.$store.state.is_admin)
|
||||
this.$store.state.modals = true
|
||||
//this.$store.commit('loginAsAdmin')
|
||||
//this.$router.push('/AdminOverview')
|
||||
},
|
||||
logout(){
|
||||
this.$store.commit('logout')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
gradido-global-color-text{color: #3D443B }
|
||||
gradido-global-color-accent{color: #047006 }
|
||||
gradido-global-color-6e0a9c9e{color: #000 }
|
||||
gradido-global-color-2d0fb154{color: #047006 }
|
||||
gradido-global-color-16efe88c{color: #7EBC55 }
|
||||
gradido-global-color-1939326{color: #F6FFF6 }
|
||||
gradido-global-color-9d79fc1{color: #047006 }
|
||||
gradido-global-color-6347f4d{color: #5A7B02 }
|
||||
gradido-global-color-4fbc19a{color: #014034 }
|
||||
gradido-global-color-d341874{color: #B6D939 }
|
||||
gradido-global-color-619d338{color: #8EBFB1 }
|
||||
gradido-global-color-44819a9{color: #026873 }
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Vue Argon Dashboard - v1.0.0
|
||||
* Bootstrap Vue Gradido Wallet- v0.0.1
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard
|
||||
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
|
||||
* Product Page: https://www.gradido.net
|
||||
* Copyright 2020 Bernd Hückstädt - Gradido (https://www.gradido.net)
|
||||
|
||||
* Coded by Creative Tim
|
||||
* Coded by www.gradido.net
|
||||
|
||||
=========================================================
|
||||
|
||||
|
||||
125
src/components/Modal-OLD.vue
Normal file
125
src/components/Modal-OLD.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<SlideYUpTransition :duration="animationDuration">
|
||||
<b-modal class="modal fade"
|
||||
ref="app-modal"
|
||||
:size="size"
|
||||
:hide-header="!$slots.header"
|
||||
:modal-class="[{'modal-mini': type === 'mini'}, ...modalClasses]"
|
||||
@mousedown.self="closeModal"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
centered
|
||||
@close="closeModal"
|
||||
@hide="closeModal"
|
||||
:header-class="headerClasses"
|
||||
:footer-class="footerClasses"
|
||||
:content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]"
|
||||
:body-class="bodyClasses"
|
||||
:aria-hidden="!show">
|
||||
|
||||
<template v-slot:modal-header>
|
||||
<slot name="header"></slot>
|
||||
<slot name="close-button">
|
||||
<button type="button"
|
||||
class="close"
|
||||
v-if="showClose"
|
||||
@click="closeModal"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close">
|
||||
<span :aria-hidden="!show">×</span>
|
||||
</button>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<template v-slot:modal-footer>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
|
||||
</b-modal>
|
||||
</SlideYUpTransition>
|
||||
</template>
|
||||
<script>
|
||||
import { SlideYUpTransition } from "vue2-transitions";
|
||||
|
||||
export default {
|
||||
name: "modal",
|
||||
components: {
|
||||
SlideYUpTransition
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
validator(value) {
|
||||
let acceptedValues = ["", "notice", "mini"];
|
||||
return acceptedValues.indexOf(value) !== -1;
|
||||
},
|
||||
description: 'Modal type (notice|mini|"") '
|
||||
},
|
||||
modalClasses: {
|
||||
type: [Object, String],
|
||||
description: "Modal dialog css classes"
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
description: 'Modal size',
|
||||
validator(value) {
|
||||
let acceptedValues = ["", "sm", "lg"];
|
||||
return acceptedValues.indexOf(value) !== -1;
|
||||
},
|
||||
},
|
||||
modalContentClasses: {
|
||||
type: [Object, String],
|
||||
description: "Modal dialog content css classes"
|
||||
},
|
||||
gradient: {
|
||||
type: String,
|
||||
description: "Modal gradient type (danger, primary etc)"
|
||||
},
|
||||
headerClasses: {
|
||||
type: [Object, String],
|
||||
description: "Modal Header css classes"
|
||||
},
|
||||
bodyClasses: {
|
||||
type: [Object, String],
|
||||
description: "Modal Body css classes"
|
||||
},
|
||||
footerClasses: {
|
||||
type: [Object, String],
|
||||
description: "Modal Footer css classes"
|
||||
},
|
||||
animationDuration: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
description: "Modal transition duration"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.$emit("update:show", false);
|
||||
this.$emit("close");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(val) {
|
||||
if (val) {
|
||||
this.$refs['app-modal'].show();
|
||||
} else {
|
||||
this.$refs['app-modal'].hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
</style>
|
||||
85
src/components/SearchUser.vue
Normal file
85
src/components/SearchUser.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<vue-bootstrap-typeahead
|
||||
v-model="query"
|
||||
:data="users"
|
||||
@change="getUser"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'
|
||||
|
||||
// Global registration
|
||||
//Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)
|
||||
|
||||
// OR
|
||||
|
||||
// Local registration
|
||||
export default {
|
||||
name: "SearchUser",
|
||||
components: {
|
||||
VueBootstrapTypeahead
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: "",
|
||||
users: [
|
||||
"Bob",
|
||||
"Alice",
|
||||
"Bernd",
|
||||
"Dario",
|
||||
"Alex",
|
||||
"Pauls",
|
||||
"Ulf",
|
||||
"Delaware",
|
||||
"Florida",
|
||||
"Georgia",
|
||||
"Hawaii",
|
||||
"Idaho",
|
||||
"Illnois",
|
||||
"Indiana",
|
||||
"Iowa",
|
||||
"Kansas",
|
||||
"Kentucky",
|
||||
"Louisiana",
|
||||
"Maine",
|
||||
"Maryland",
|
||||
"Massachusetts",
|
||||
"Michigan",
|
||||
"Minnesota",
|
||||
"Mississippi",
|
||||
"Missouri",
|
||||
"Montana",
|
||||
"Nebraska",
|
||||
"Nevada",
|
||||
"New Hampshire",
|
||||
"New Jersey",
|
||||
"New Mexico",
|
||||
"New York",
|
||||
"North Carolina",
|
||||
"North Dakota",
|
||||
"Ohio",
|
||||
"Oklahoma",
|
||||
"Oregon",
|
||||
"Pennsylvania",
|
||||
"Rhode Island",
|
||||
"South Carolina",
|
||||
"South Dakota",
|
||||
"Tennessee",
|
||||
"Texas",
|
||||
"Utah",
|
||||
"Vermont",
|
||||
"Virginia",
|
||||
"Washington",
|
||||
"West Virginia",
|
||||
"Wisconsin",
|
||||
"Wyoming"
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
alert(this.data.user)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
126
src/components/SwitchLang.vue
Normal file
126
src/components/SwitchLang.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button
|
||||
href="#"
|
||||
class="flex items-center"
|
||||
@click="toggleVisibility"
|
||||
@keydown.space.exact.prevent="toggleVisibility"
|
||||
@keydown.esc.exact="hideDropdown"
|
||||
@keydown.shift.tab="hideDropdown"
|
||||
@keydown.up.exact.prevent="startArrowKeys"
|
||||
@keydown.down.exact.prevent="startArrowKeys"
|
||||
>
|
||||
<img :src="`/flag_${$i18n.locale}.svg`" alt="flag" class="w-8 h-8">
|
||||
<span class="ml-2">{{ $i18n.locale.toUpperCase() }}</span>
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></path></svg>
|
||||
</button>
|
||||
<transition name="dropdown-fade">
|
||||
<ul v-on-clickaway="hideDropdown" v-if="isVisible" ref="dropdown" class="absolute normal-case z-30 font-normal xs:left-0 lg:right-0 bg-white shadow overflow-hidden rounded w-48 border mt-2 py-1 lg:z-20">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="setLocale('en')"
|
||||
ref="account"
|
||||
class="flex items-center px-3 py-3 hover:bg-gray-200"
|
||||
@keydown.up.exact.prevent=""
|
||||
@keydown.tab.exact="focusNext(false)"
|
||||
@keydown.down.exact.prevent="focusNext(true)"
|
||||
@keydown.esc.exact="hideDropdown"
|
||||
>
|
||||
<img src="/flag_en.svg" alt="english flag" class="h-8 w-8">
|
||||
<span class="ml-2">English</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center px-3 py-3 hover:bg-gray-200"
|
||||
@keydown.tab.exact="focusNext(false)"
|
||||
@keydown.shift.tab="focusPrevious(false)"
|
||||
@keydown.up.exact.prevent="focusPrevious(true)"
|
||||
@keydown.down.exact.prevent="focusNext(true)"
|
||||
@keydown.esc.exact="hideDropdown"
|
||||
>
|
||||
<svg fill="currentColor" class="text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-11v2h1a3 3 0 0 1 0 6h-1v1a1 1 0 0 1-2 0v-1H8a1 1 0 0 1 0-2h3v-2h-1a3 3 0 0 1 0-6h1V6a1 1 0 0 1 2 0v1h3a1 1 0 0 1 0 2h-3zm-2 0h-1a1 1 0 1 0 0 2h1V9zm2 6h1a1 1 0 0 0 0-2h-1v2z"></path></svg>
|
||||
<span class="ml-2">Billing</span>
|
||||
</a>
|
||||
</li> -->
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="setLocale('de')"
|
||||
class="flex items-center px-3 py-3 hover:bg-gray-200"
|
||||
@keydown.shift.tab="focusPrevious(false)"
|
||||
@keydown.up.exact.prevent="focusPrevious(true)"
|
||||
@keydown.down.exact.prevent=""
|
||||
@keydown.tab.exact="hideDropdown"
|
||||
@keydown.esc.exact="hideDropdown"
|
||||
>
|
||||
<img src="/flag_de.svg" alt="english flag" class="h-8 w-8">
|
||||
<span class="ml-2">Deutsch</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixin as clickaway } from 'vue-clickaway'
|
||||
export default {
|
||||
mixins: [ clickaway ],
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
focusedIndex: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleVisibility() {
|
||||
this.isVisible = !this.isVisible
|
||||
},
|
||||
hideDropdown() {
|
||||
this.isVisible = false
|
||||
this.focusedIndex = 0
|
||||
},
|
||||
startArrowKeys() {
|
||||
if (this.isVisible) {
|
||||
// this.$refs.account.focus()
|
||||
this.$refs.dropdown.children[0].children[0].focus()
|
||||
}
|
||||
},
|
||||
focusPrevious(isArrowKey) {
|
||||
this.focusedIndex = this.focusedIndex - 1
|
||||
if (isArrowKey) {
|
||||
this.focusItem()
|
||||
}
|
||||
},
|
||||
focusNext(isArrowKey) {
|
||||
this.focusedIndex = this.focusedIndex + 1
|
||||
if (isArrowKey) {
|
||||
this.focusItem()
|
||||
}
|
||||
},
|
||||
focusItem() {
|
||||
this.$refs.dropdown.children[this.focusedIndex].children[0].focus()
|
||||
},
|
||||
setLocale(locale) {
|
||||
this.$i18n.locale = locale
|
||||
this.$router.push({
|
||||
params: { lang: locale }
|
||||
})
|
||||
this.hideDropdown()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown-fade-enter-active, .dropdown-fade-leave-active {
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
.dropdown-fade-enter, .dropdown-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
</style>
|
||||
23
src/i18n.js
Normal file
23
src/i18n.js
Normal file
@ -0,0 +1,23 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
function loadLocaleMessages () {
|
||||
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
|
||||
const messages = {}
|
||||
locales.keys().forEach(key => {
|
||||
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
|
||||
if (matched && matched.length > 1) {
|
||||
const locale = matched[1]
|
||||
messages[locale] = locales(key)
|
||||
}
|
||||
})
|
||||
return messages
|
||||
}
|
||||
|
||||
export default new VueI18n({
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
messages: loadLocaleMessages()
|
||||
})
|
||||
70
src/locales/de.json
Normal file
70
src/locales/de.json
Normal file
@ -0,0 +1,70 @@
|
||||
{
|
||||
"message": "hallo gradido !!",
|
||||
"site": {
|
||||
"welcome":"Willkommen!",
|
||||
"logout":"Logout",
|
||||
"login":"Login",
|
||||
"overview":{
|
||||
"account_overview":"Kontoübersicht",
|
||||
"current_balance":"Aktueller Kontostand",
|
||||
"gradido_received":"Erhaltene Gradido",
|
||||
"since_last_month": "seid letzten Monat",
|
||||
"send_gradido":"Gradido versenden",
|
||||
"table" : {
|
||||
"status":"Status",
|
||||
"amount":"Betrag",
|
||||
"name":"Name",
|
||||
"date":"Datum",
|
||||
"details":"Details",
|
||||
"view":"Anzeigen",
|
||||
"hide":"Ausblenden",
|
||||
"decay":"Vergänglichkeit",
|
||||
"sender":"Absender",
|
||||
"hide_details":"Details ausblenden"
|
||||
},
|
||||
"add_work":"neuer Gemeinschaftsbeitrag",
|
||||
"xx":"xx",
|
||||
"xxxx":"xxxx"
|
||||
},
|
||||
"navbar" : {
|
||||
"my-profil":"Mein Profil",
|
||||
"settings":"Einstellung",
|
||||
"activity":"Aktivität",
|
||||
"support":"Support",
|
||||
"logout":"Logout"
|
||||
},
|
||||
"sidebar" : {
|
||||
"community":"Gemeinschaft",
|
||||
"members_area":"Mitgliederbereich",
|
||||
"membership":"Mitgliedschaft",
|
||||
"language":"Sprachen"
|
||||
},
|
||||
"landing1" : {
|
||||
"explore": "Erkunden Sie Gradido",
|
||||
"text": "Gesundes Geld für eine gesunde Welt - Das Gradido-Modell kann weltweiten Wohlstand und Frieden schaffen",
|
||||
"link": "Seiten erkunden"
|
||||
},
|
||||
"404" : {
|
||||
"ooops" : "Ooops!",
|
||||
"text" : "Seite nicht gefunden. Aber keine Sorge, wir haben noch viele andere Seiten zum Erkunden",
|
||||
"back" : "zurück zur Übersicht!"
|
||||
}
|
||||
},
|
||||
"admin": {
|
||||
"site": {
|
||||
"overview": {
|
||||
"created": "created",
|
||||
"transience" : "Transience",
|
||||
"exchanged": "Exchanged",
|
||||
"members" : "Members"
|
||||
}
|
||||
}
|
||||
},
|
||||
"nav": {
|
||||
"features": "Neuigkeiten"
|
||||
},
|
||||
"about": {
|
||||
"title": "Über uns",
|
||||
"content": "Lorem ipsum deutsch dolor sit amet consectetur adipisicing elit. Aut dicta incidunt ea ut commodi quidem temporibus illo quia. Et itaque deleniti veniam tempore facere ipsum animi totam culpa minima vel voluptatem adipisci natus blanditiis similique sunt expedita, ex dicta doloremque repellat vitae temporibus. Quisquam quia, accusantium blanditiis architecto facilis saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad unde laborum ut suscipit iure aliquam sapiente doloribus exercitationem nam sint."
|
||||
}
|
||||
}
|
||||
70
src/locales/en.json
Normal file
70
src/locales/en.json
Normal file
@ -0,0 +1,70 @@
|
||||
{
|
||||
"message": "hello gradido !!",
|
||||
"site": {
|
||||
"welcome":"Welcome!",
|
||||
"logout":"Logout",
|
||||
"login":"Login",
|
||||
"overview":{
|
||||
"account_overview":"Account overview",
|
||||
"current_balance":"Current account balance",
|
||||
"gradido_received":"Gradido received",
|
||||
"since_last_month": "since last month",
|
||||
"send_gradido":"Send Gradido",
|
||||
"table" : {
|
||||
"status":"Status",
|
||||
"amount":"Amount",
|
||||
"name":"Name",
|
||||
"date":"Date",
|
||||
"details":"Details",
|
||||
"view":"View",
|
||||
"hide":"hide",
|
||||
"decay":"Decay",
|
||||
"sender":"Sender",
|
||||
"hide_details":"Hide details"
|
||||
},
|
||||
"add_work":"New Community Contribution",
|
||||
"xx":"xx",
|
||||
"xxxx":"xxxx"
|
||||
},
|
||||
"navbar" : {
|
||||
"my-profil":"My Profil",
|
||||
"settings":"Settings",
|
||||
"activity":"Activity",
|
||||
"support":"Support",
|
||||
"logout":"Logout"
|
||||
},
|
||||
"sidebar" : {
|
||||
"community":"Community",
|
||||
"members_area":"Members area",
|
||||
"membership":"Membership",
|
||||
"language":"Language"
|
||||
},
|
||||
"landing1" : {
|
||||
"explore":"Explore Gradido",
|
||||
"text":"If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages.",
|
||||
"link":"Explore pages"
|
||||
},
|
||||
"404" : {
|
||||
"ooops" : "Ooops!",
|
||||
"text" : "Page not found. Don't worry though, we have plenty of other pages to explore",
|
||||
"back" : "Back to dashboard!"
|
||||
}
|
||||
},
|
||||
"admin": {
|
||||
"site": {
|
||||
"overview": {
|
||||
"creation": "Creation",
|
||||
"transience" : "Transience",
|
||||
"exchanged": "Exchanged",
|
||||
"members" : "Members"
|
||||
}
|
||||
}
|
||||
},
|
||||
"nav": {
|
||||
"features": "Features"
|
||||
},
|
||||
"about": {
|
||||
"title": "About",
|
||||
"content": "Lorem ipsum english dolor sit amet consectetur adipisicing elit. Aut dicta incidunt ea ut commodi quidem temporibus illo quia. Et itaque deleniti veniam tempore facere ipsum animi totam culpa minima vel voluptatem adipisci natus blanditiis similique sunt expedita, ex dicta doloremque repellat vitae temporibus. Quisquam quia, accusantium blanditiis architecto facilis saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad unde laborum ut suscipit iure aliquam sapiente doloribus exercitationem nam sint."
|
||||
}
|
||||
}
|
||||
29
src/main.js
29
src/main.js
@ -1,31 +1,24 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* BootstrapVue Argon Dashboard - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard
|
||||
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
* Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import DashboardPlugin from './plugins/dashboard-plugin';
|
||||
import App from './App.vue';
|
||||
import i18n from './i18n.js';
|
||||
|
||||
// store
|
||||
import {store} from './store/store';
|
||||
|
||||
// router setup
|
||||
import router from './routes/router';
|
||||
|
||||
// plugin setup
|
||||
Vue.use(DashboardPlugin);
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App)
|
||||
});
|
||||
|
||||
@ -26,6 +26,14 @@ import { extend } from 'vee-validate';
|
||||
import * as rules from 'vee-validate/dist/rules';
|
||||
import { messages } from 'vee-validate/dist/locale/en.json';
|
||||
|
||||
import VueQrcodeReader from "vue-qrcode-reader";
|
||||
|
||||
|
||||
import VueGoodTablePlugin from 'vue-good-table';
|
||||
// import the styles
|
||||
import 'vue-good-table/dist/vue-good-table.css'
|
||||
|
||||
|
||||
Object.keys(rules).forEach(rule => {
|
||||
extend(rule, {
|
||||
...rules[rule], // copies rule configuration
|
||||
@ -40,6 +48,8 @@ export default {
|
||||
Vue.use(Notifications);
|
||||
Vue.use(BootstrapVue);
|
||||
Vue.use(IconsPlugin);
|
||||
Vue.use(VueGoodTablePlugin);
|
||||
Vue.use(VueQrcodeReader);
|
||||
configure({
|
||||
classes: {
|
||||
valid: 'is-valid',
|
||||
@ -49,3 +59,5 @@ export default {
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import routes from './routes';
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
import {store} from '../store/store';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(VueRouter)
|
||||
|
||||
// configure router
|
||||
const router = new VueRouter({
|
||||
@ -13,10 +14,32 @@ const router = new VueRouter({
|
||||
return savedPosition;
|
||||
}
|
||||
if (to.hash) {
|
||||
return { selector: to.hash };
|
||||
return { selector: to.hash }
|
||||
}
|
||||
return { x: 0, y: 0 };
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
let language = to.params.lang
|
||||
if (!language) {
|
||||
language = 'de'
|
||||
}
|
||||
|
||||
//console.log("----------------")
|
||||
console.log("to", to)
|
||||
console.log("store.state.is_auth", store.state.is_auth)
|
||||
// if (store.state.is_auth != true && to.path != "/login" ) {
|
||||
// next()
|
||||
// } else {
|
||||
// next("/login")
|
||||
// }
|
||||
//console.log(from)
|
||||
//console.log(next)
|
||||
|
||||
next()
|
||||
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@ -1,54 +1,41 @@
|
||||
import DashboardLayout from '@/views/Layout/DashboardLayout.vue';
|
||||
import AuthLayout from '@/views/Pages/AuthLayout.vue';
|
||||
import DashboardLayout from '@/views/Layout/DashboardLayout.vue'
|
||||
import AuthLayout from '@/views/Pages/AuthLayout.vue'
|
||||
|
||||
import NotFound from '@/views/NotFoundPage.vue'
|
||||
|
||||
import NotFound from '@/views/NotFoundPage.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: 'dashboard',
|
||||
redirect: 'landing',
|
||||
component: AuthLayout,
|
||||
children: [
|
||||
{
|
||||
path: '/Landing',
|
||||
name: 'Landing',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/Landing.vue')
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: 'KontoOverview',
|
||||
component: DashboardLayout,
|
||||
children: [
|
||||
{
|
||||
path: '/KontoOverview',
|
||||
name: 'Kontoübersicht',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/KontoOverview.vue')
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/Dashboard.vue')
|
||||
},
|
||||
{
|
||||
path: '/icons',
|
||||
name: 'icons',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/Icons.vue')
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/KontoOverview.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/UserProfile.vue')
|
||||
},
|
||||
{
|
||||
path: '/maps',
|
||||
name: 'maps',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/GoogleMaps.vue')
|
||||
},
|
||||
{
|
||||
path: '/tables',
|
||||
name: 'tables',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/RegularTables.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: 'login',
|
||||
component: AuthLayout,
|
||||
children: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
@ -59,6 +46,30 @@ const routes = [
|
||||
name: 'register',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Register.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
,
|
||||
{
|
||||
path: '/',
|
||||
redirect: 'AdminOverview',
|
||||
component: AuthLayout,
|
||||
children: [
|
||||
{
|
||||
path: '/AdminOverview',
|
||||
name: 'Adminübersicht',
|
||||
component: () => import(/* webpackChunkName: "demo" */ '../views/AdminOverview.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: 'login',
|
||||
component: AuthLayout,
|
||||
children: [
|
||||
|
||||
{ path: '*', component: NotFound }
|
||||
]
|
||||
}
|
||||
|
||||
46
src/store/store.js
Normal file
46
src/store/store.js
Normal file
@ -0,0 +1,46 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
Vue.use(Vuex)
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
state: {
|
||||
path: 'http://192.168.0.89/account/',
|
||||
is_auth: false,
|
||||
is_admin: false,
|
||||
active: false,
|
||||
modals: false,
|
||||
user : {
|
||||
name:"oger ly",
|
||||
email:"test@test.de"
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
login (state) {
|
||||
console.log("store login() user from " + state.is_auth)
|
||||
if (state.is_auth) {
|
||||
state.is_auth = false
|
||||
state.active = false
|
||||
} else {
|
||||
state.is_auth = true
|
||||
state.active = true
|
||||
}
|
||||
console.log("store login() user to " + state.is_auth)
|
||||
},
|
||||
loginAsAdmin (state) {
|
||||
console.log("store login admin from" + state.is_admin)
|
||||
if (state.is_admin) {
|
||||
state.is_admin = false
|
||||
state.active = false
|
||||
} else {
|
||||
state.is_admin = true
|
||||
state.active = true
|
||||
}
|
||||
console.log("store login admin to" + state.is_admin)
|
||||
},
|
||||
logout(state){
|
||||
state.is_auth = false
|
||||
state.is_admin = false
|
||||
state.active = false
|
||||
}
|
||||
}
|
||||
})
|
||||
254
src/views/AdminOverview.vue
Normal file
254
src/views/AdminOverview.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-gradient-success">
|
||||
<!-- Card stats -->
|
||||
<b-row>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card :title="$t('admin.site.overview.creation')"
|
||||
type="gradient-red"
|
||||
sub-title="350,897"
|
||||
icon="ni ni-active-40"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer" >
|
||||
<span class="text-success mr-2">3.48%</span>
|
||||
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card :title="$t('admin.site.overview.transience')"
|
||||
type="gradient-orange"
|
||||
sub-title="2,356"
|
||||
icon="ni ni-chart-pie-35"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">12.18%</span>
|
||||
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card :title="$t('admin.site.overview.exchanged')"
|
||||
type="gradient-green"
|
||||
sub-title="924"
|
||||
icon="ni ni-money-coins"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-danger mr-2">5.72%</span>
|
||||
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card :title="$t('admin.site.overview.members')"
|
||||
type="gradient-info"
|
||||
sub-title="49,65%"
|
||||
icon="ni ni-chart-bar-32"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">54.8%</span>
|
||||
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</base-header>
|
||||
|
||||
<!--Charts-->
|
||||
<b-container fluid class="mt--7">
|
||||
<b-row>
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<card type="default" header-classes="bg-transparent">
|
||||
<b-row align-v="center" slot="header">
|
||||
<b-col>
|
||||
<h6 class="text-light text-uppercase ls-1 mb-1">Charts</h6>
|
||||
<h5 class="h3 text-white mb-0">Geschöpft</h5>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-nav class="nav-pills justify-content-end">
|
||||
<b-nav-item
|
||||
class="mr-2 mr-md-0"
|
||||
:active="bigLineChart.activeIndex === 0"
|
||||
link-classes="py-2 px-1"
|
||||
@click.prevent="initBigChart(0)">
|
||||
<span class="d-none d-md-block">geschöpft</span>
|
||||
<span class="d-md-none">M</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-1"
|
||||
:active="bigLineChart.activeIndex === 1"
|
||||
@click.prevent="initBigChart(1)"
|
||||
>
|
||||
<span class="d-none d-md-block">geteilt</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-1"
|
||||
:active="bigLineChart.activeIndex === 2"
|
||||
@click.prevent="initBigChart(2)"
|
||||
>
|
||||
<span class="d-none d-md-block">vergangen</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-1"
|
||||
:active="bigLineChart.activeIndex === 3"
|
||||
@click.prevent="initBigChart(3)"
|
||||
>
|
||||
<span class="d-none d-md-block">mitglieder</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<line-chart
|
||||
:height="350"
|
||||
ref="bigChart"
|
||||
:chart-data="bigLineChart.chartData"
|
||||
:extra-options="bigLineChart.extraOptions"
|
||||
>
|
||||
</line-chart>
|
||||
</card>
|
||||
</b-col>
|
||||
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<card header-classes="bg-transparent">
|
||||
<b-row align-v="center" slot="header">
|
||||
<b-col>
|
||||
<h6 class="text-uppercase text-muted ls-1 mb-1">Community</h6>
|
||||
<h5 class="h3 mb-0">Neue Einträge</h5>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<bar-chart
|
||||
:height="350"
|
||||
ref="barChart"
|
||||
:chart-data="redBarChart.chartData"
|
||||
>
|
||||
</bar-chart>
|
||||
</card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- End charts-->
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!--Tables User Search && New User-->
|
||||
<admin-user-search />
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<admin-user-creation/>
|
||||
|
||||
<!--End tables-->
|
||||
</b-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Charts
|
||||
import * as chartConfigs from '@/components/Charts/config';
|
||||
import LineChart from '@/components/Charts/LineChart';
|
||||
import BarChart from '@/components/Charts/BarChart';
|
||||
|
||||
// Components
|
||||
import BaseProgress from '@/components/BaseProgress';
|
||||
import StatsCard from '@/components/Cards/StatsCard';
|
||||
import SearchUser from '@/components/SearchUser';
|
||||
|
||||
// Tables
|
||||
|
||||
import PageVisitsTable from './Dashboard/PageVisitsTable';
|
||||
import AdminUserSearch from './AdminOverview/AdminUserSearch';
|
||||
import AdminUserCreation from './AdminOverview/AdminUserCreation';
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart,
|
||||
BarChart,
|
||||
BaseProgress,
|
||||
StatsCard,
|
||||
PageVisitsTable,
|
||||
AdminUserSearch,
|
||||
AdminUserCreation,
|
||||
SearchUser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filter: '',
|
||||
items: [
|
||||
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
|
||||
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
|
||||
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
|
||||
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
|
||||
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
|
||||
],
|
||||
bigLineChart: {
|
||||
allData: [
|
||||
[0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
[0, 20, 5, 25, 10, 30, 35, 60, 40],
|
||||
[0, 2, 5, 7, 10, 30, 15, 9, 10],
|
||||
[0, 2, 5, 7, 10, 14, 29, 78, 120]
|
||||
],
|
||||
activeIndex: 0,
|
||||
chartData: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Performance',
|
||||
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
}
|
||||
],
|
||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions,
|
||||
},
|
||||
redBarChart: {
|
||||
chartData: {
|
||||
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [{
|
||||
label: 'Sales',
|
||||
data: [25, 20, 30, 22, 17, 29]
|
||||
}]
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initBigChart(index) {
|
||||
let chartData = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Performance',
|
||||
data: this.bigLineChart.allData[index]
|
||||
}
|
||||
],
|
||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
};
|
||||
this.bigLineChart.chartData = chartData;
|
||||
this.bigLineChart.activeIndex = index;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initBigChart(0);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-table .cell{
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
180
src/views/AdminOverview/AdminUserCreation.vue
Normal file
180
src/views/AdminOverview/AdminUserCreation.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<b-card-header>Gradido Schüpfung</b-card-header>
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<vue-good-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
max-height="370px"
|
||||
:fixed-header="true"
|
||||
:line-numbers="false"
|
||||
styleClass="vgt-table"
|
||||
theme="nocturnal"
|
||||
@on-row-click="onRowClick"
|
||||
@on-search="onSearch"
|
||||
:search-options="{
|
||||
enabled: true,
|
||||
|
||||
skipDiacritics: true,
|
||||
searchFn: mySearchFn,
|
||||
placeholder: 'durchsuche die tabelle'
|
||||
|
||||
}"
|
||||
:pagination-options="{
|
||||
enabled: true,
|
||||
mode: 'pages'
|
||||
}"
|
||||
>
|
||||
<div slot="table-actions">
|
||||
Einträge suchen .
|
||||
</div>
|
||||
|
||||
</vue-good-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
|
||||
<b-card body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0"></h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<b-card-body>
|
||||
<p>{{ creation.createdAt }} </p>
|
||||
<p>{{ creation.group }} </p>
|
||||
<p>{{ creation.id }} </p>
|
||||
<p>{{ creation.name }} </p>
|
||||
<p>{{ creation.originalIndex }} </p>
|
||||
<p>{{ creation.text }} </p>
|
||||
<p>{{ creation.vgt_id }} </p>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!--End tables-->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'admin-user-creation',
|
||||
data(){
|
||||
return {
|
||||
creation:{
|
||||
createdAt:"",
|
||||
group:"",
|
||||
id:"",
|
||||
name:"",
|
||||
originalIndex:"",
|
||||
text:"",
|
||||
vgt_id:"",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
label: 'Gruppe',
|
||||
field: 'group',
|
||||
type: 'group',
|
||||
},
|
||||
{
|
||||
label: 'eingereicht',
|
||||
field: 'createdAt',
|
||||
type: 'date',
|
||||
dateInputFormat: 'yyyy-MM-dd',
|
||||
dateOutputFormat: 'dd.MM.yyyy',
|
||||
},
|
||||
{
|
||||
label: 'Text',
|
||||
field: 'text',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{ id:1, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:2, createdAt: '2021-01-31', name:"Jane", group: "gruppe14", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:3, createdAt: '2021-01-30', name:"Susan", group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:4, createdAt: '2020-01-11', name:"Chris", group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:5, createdAt: '2020-12-21', name:"Dan", group: "gruppe11", text: "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:6, createdAt: '2020-12-31', name:"zBohn", group: "gruppe71", text: "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:7, createdAt: '2020-12-31', name:"xyTellohn", group: "gruppe31", text: "Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:8, createdAt: '2021-01-25', name:"uSellora", group: "gruppe1", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:9, createdAt: '2021-01-31', name:"yJane", group: "gruppe14", text: "55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:10, createdAt: '2021-01-20', name:"kSusan", group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:11, createdAt: '2021-01-25', name:"qSellora", group: "gruppe12", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:12, createdAt: '2021-01-31', name:"fJane", group: "gruppe15", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:13, createdAt: '2021-01-38', name:"aSusan", group: "gruppe1", text: "asssss IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:14, createdAt: '2020-01-11', name:"uChris", group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:15, createdAt: '2020-12-21', name:"tzDan", group: "gruppe11", text: "Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:16, createdAt: '2020-12-31', name:"fBohn", group: "gruppe71", text: "3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:17, createdAt: '2020-12-31', name:"aEsau", group: "gruppe15", text: "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:18, createdAt: '2021-01-25', name:"gSellora", group: "gruppe1", text: "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:19, createdAt: '2021-01-31', name:"sJane", group: "gruppe14", text: "as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:20, createdAt: '2021-01-30', name:"oSusan", group: "gruppe31", text: "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:21, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1", text: "3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:22, createdAt: '2021-01-13', name:"rtJane", group: "gruppe14", text: "q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:23, createdAt: '2021-01-16', name:"rSusan", group: "gruppe31", text: "Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:24, createdAt: '2020-01-15', name:"sChris", group: "gruppe12", text: "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:25, createdAt: '2020-12-14', name:"dDan", group: "gruppe11", text: "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:26, createdAt: '2020-12-13', name:"fBohn", group: "gruppe71", text: "Ta adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:27, createdAt: '2020-12-12', name:"gTellohn", group: "gruppe31", text: "55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:28, createdAt: '2021-01-12', name:"zSellora", group: "gruppe1", text: "e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:29, createdAt: '2021-01-12', name:"uJane", group: "gruppe14", text: "erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
{ id:30, createdAt: '2021-01-11', name:"iSusan", group: "gruppe31", text: "3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onRowClick(params) {
|
||||
|
||||
console.log("onRowClick", params.row.createdAt)
|
||||
console.log("onRowClick", params.row.group)
|
||||
console.log("onRowClick", params.row.id)
|
||||
console.log("onRowClick", params.row.name)
|
||||
console.log("onRowClick", params.row.originalIndex)
|
||||
console.log("onRowClick", params.row.text)
|
||||
console.log("onRowClick", params.row.vgt_id)
|
||||
|
||||
|
||||
this.creation.createdAt = params.row.createdAt
|
||||
this.creation.group = params.row.group
|
||||
this.creation.id = params.row.id
|
||||
this.creation.name = params.row.name
|
||||
this.creation.originalIndex = params.row.originalIndex
|
||||
this.creation.text = params.row.text
|
||||
this.creation.vgt_id = params.row.vgt_id
|
||||
|
||||
// params.row - row object
|
||||
// params.pageIndex - index of this row on the current page.
|
||||
// params.selected - if selection is enabled this argument
|
||||
// indicates selected or not
|
||||
// params.event - click event
|
||||
},
|
||||
onSearch(params) {
|
||||
console.log("onSearch", params)
|
||||
// params.searchTerm - term being searched for
|
||||
// params.rowCount - number of rows that match search
|
||||
},
|
||||
mySearchFn(params){
|
||||
//console.log("mySearchFn", params)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
200
src/views/AdminOverview/AdminUserSearch.vue
Normal file
200
src/views/AdminOverview/AdminUserSearch.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card-header>User</b-card-header>
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<vue-good-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
max-height="470px"
|
||||
:fixed-header="true"
|
||||
:line-numbers="false"
|
||||
styleClass="vgt-table striped condensed"
|
||||
theme="nocturnal"
|
||||
@on-row-click="onRowClick"
|
||||
@on-search="onSearch"
|
||||
:search-options="{
|
||||
enabled: true,
|
||||
skipDiacritics: true,
|
||||
searchFn: mySearchFn,
|
||||
placeholder: 'durchsuche die tabelle'
|
||||
|
||||
}"
|
||||
:pagination-options="{
|
||||
enabled: true,
|
||||
mode: 'pages'
|
||||
}" >
|
||||
<div slot="table-actions">
|
||||
Mitglieder suchen .
|
||||
</div>
|
||||
|
||||
</vue-good-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<!-- card neues mitglied -->
|
||||
<b-card v-if="showNewUser" body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0">Neues Mitglied anlegen</h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<b-card-body>
|
||||
<form>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Name</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="Jon Snow"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">Email</label>
|
||||
<b-col md="10">
|
||||
<base-input type="email" placeholder="gradido@example.com" id="example-email-input0" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Gruppe</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="Gruppe"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
|
||||
<!-- card mitglied bearbeiten -->
|
||||
<b-card v-else body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0">Mitglied Daten</h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" @click="showNewUser=true" class="btn btn-sm btn-warning">schliesen</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<b-card-body>
|
||||
<form>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Name</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="name"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">Email</label>
|
||||
<b-col md="10">
|
||||
<base-input type="email" autocomplete="username email" placeholder="agradido@example.com" id="example-email-input1"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Gruppe</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="Gruppe"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'admin-user-search',
|
||||
data(){
|
||||
return {
|
||||
showNewUser: true,
|
||||
formSetUser: {
|
||||
name:"",
|
||||
email:"",
|
||||
group:""
|
||||
},
|
||||
formGetUser: {
|
||||
name:"",
|
||||
email:"",
|
||||
group:""
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
label: 'E-Mail',
|
||||
field: 'email',
|
||||
type: 'email',
|
||||
},
|
||||
{
|
||||
label: 'Mitglied seid',
|
||||
field: 'createdAt',
|
||||
type: 'date',
|
||||
dateInputFormat: 'yyyy-MM-dd',
|
||||
dateOutputFormat: 'dd.MM.yyyy',
|
||||
},
|
||||
{
|
||||
label: 'Gruppe',
|
||||
field: 'group',
|
||||
type: 'group',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{ id:1, name:"John", email: "temail@tutanota.com", createdAt: '1976-10-25',group: "gruppe1" },
|
||||
{ id:2, name:"Jane", email: "temail@tutanota.com", createdAt: '2011-10-31', group: "gruppe2" },
|
||||
{ id:3, name:"Susan", email: "temail@tutanota.com", createdAt: '2011-10-30', group: "gruppe4" },
|
||||
{ id:4, name:"Chris", email: "temail@tutanota.com", createdAt: '2011-10-11', group: "gruppe3" },
|
||||
{ id:5, name:"Dan", email: "temail@tutanota.com", createdAt: '2011-10-21', group: "gruppe1" },
|
||||
{ id:6, name:"Bohn", email: "temail@tutanota.com", createdAt: '2011-10-31', group: "gruppe2" },
|
||||
{ id:7, name:"Tellohn", email: "temail@tutanota.com", createdAt: '2009-10-31', group: "gruppe2" },
|
||||
{ id:7, name:"Tellohn", email: "temail@tutanota.com", createdAt: '2009-10-31', group: "gruppe5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onRowClick(params) {
|
||||
console.log(params.row)
|
||||
this.showNewUser = false
|
||||
// params.row - row object
|
||||
// params.pageIndex - index of this row on the current page.
|
||||
// params.selected - if selection is enabled this argument
|
||||
// indicates selected or not
|
||||
// params.event - click event
|
||||
},
|
||||
onSearch(params) {
|
||||
console.log(params)
|
||||
// params.searchTerm - term being searched for
|
||||
// params.rowCount - number of rows that match search
|
||||
},
|
||||
mySearchFn(params){
|
||||
//console.log(params)
|
||||
},
|
||||
validateEmail(value){
|
||||
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
|
||||
{
|
||||
this.msg['email'] = '';
|
||||
} else{
|
||||
this.msg['email'] = 'Invalid Email Address';
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
mail(value){
|
||||
// binding this to the data value in the email input
|
||||
this.email = value;
|
||||
this.validateEmail(value);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
19
src/views/AdminOverview/default.vue
Normal file
19
src/views/AdminOverview/default.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
default
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'default',
|
||||
data(){
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
111
src/views/Dashboard/GoodTable.vue
Normal file
111
src/views/Dashboard/GoodTable.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<vue-good-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
max-height="370px"
|
||||
:fixed-header="true"
|
||||
:line-numbers="true"
|
||||
@on-row-click="onRowClick"
|
||||
@on-search="onSearch"
|
||||
:search-options="{
|
||||
enabled: true,
|
||||
|
||||
skipDiacritics: true,
|
||||
searchFn: mySearchFn,
|
||||
placeholder: 'durchsuche die tabelle',
|
||||
externalQuery: searchQuery,
|
||||
}"
|
||||
:pagination-options="{
|
||||
enabled: true,
|
||||
mode: 'pages'
|
||||
}"
|
||||
>
|
||||
<div slot="table-actions">
|
||||
Mitglieder suchen .
|
||||
</div>
|
||||
|
||||
</vue-good-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<social-traffic-table></social-traffic-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!--End tables-->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SocialTrafficTable from './SocialTrafficTable';
|
||||
|
||||
export default {
|
||||
name: 'my-component',
|
||||
components: {
|
||||
SocialTrafficTable
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
label: 'Alter',
|
||||
field: 'age',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
label: 'Mitglied seid',
|
||||
field: 'createdAt',
|
||||
type: 'date',
|
||||
dateInputFormat: 'yyyy-MM-dd',
|
||||
dateOutputFormat: 'dd.MM.yyyy',
|
||||
},
|
||||
{
|
||||
label: 'Prozent',
|
||||
field: 'score',
|
||||
type: 'percentage',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{ id:1, name:"John", age: 20, createdAt: '1976-10-25',score: 0.03343 },
|
||||
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
|
||||
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
|
||||
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
|
||||
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
|
||||
{ id:6, name:"Bohn", age: 70, createdAt: '2011-10-31', score: 0.03343 },
|
||||
{ id:7, name:"Tellohn", age: 56, createdAt: '2009-10-31', score: 0.13343 },
|
||||
{ id:7, name:"Tellohn", age: 56, createdAt: '2009-10-31', score: 0.03343 },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onRowClick(params) {
|
||||
console.log(params)
|
||||
// params.row - row object
|
||||
// params.pageIndex - index of this row on the current page.
|
||||
// params.selected - if selection is enabled this argument
|
||||
// indicates selected or not
|
||||
// params.event - click event
|
||||
},
|
||||
onSearch(params) {
|
||||
console.log(params)
|
||||
// params.searchTerm - term being searched for
|
||||
// params.rowCount - number of rows that match search
|
||||
},
|
||||
mySearchFn(params){
|
||||
console.log(params)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,299 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-gradient-success">
|
||||
<!-- Card stats -->
|
||||
<b-row>
|
||||
<b-col xl="6" md="6">
|
||||
<stats-card title="Aktueller Kontostand"
|
||||
type="gradient-red"
|
||||
sub-title="3500,897 GDD"
|
||||
img="img/icons/gradido/my_gradido.png"
|
||||
class="mb-4">
|
||||
<!-- Card stats GDD User Status -->
|
||||
<gdd-status />
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">+ 3.48%</span>
|
||||
<span class="text-nowrap">seid letzten Monat</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="6" md="6">
|
||||
<stats-card title="Erhaltene Gradido"
|
||||
type="gradient-orange"
|
||||
sub-title="2,356 GDD"
|
||||
img="img/icons/gradido/plus.png"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">+ 12.18%</span>
|
||||
<span class="text-nowrap">seid letzen Monat</span>
|
||||
</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>
|
||||
<span class="btn-inner--text">Gradido versenden</span>
|
||||
</base-button>
|
||||
<b-collapse id="collapse-1" class="mt-2">
|
||||
<b-card>
|
||||
<p class="card-text">
|
||||
<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-input-group-append>
|
||||
<b-button variant="outline-primary" @click="adressbook">Adressbuch</b-button>
|
||||
</b-input-group-append>
|
||||
|
||||
</b-input-group>
|
||||
</div>
|
||||
<!-- Card sent GDD-->
|
||||
<gdd-sent />
|
||||
<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>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- Card table -->
|
||||
<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" />
|
||||
<gdd-table />
|
||||
|
||||
|
||||
</template>
|
||||
<template #cell(details)="row">
|
||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||
{{ row.detailsShowing ? 'Ausblenden' : 'Anzeigen'}}
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>Betrag:</b></b-col>
|
||||
<b-col>{{ row.item.amount }} GDD</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="mb-2">
|
||||
<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>
|
||||
</b-card>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<!-- Card table -->
|
||||
<div>
|
||||
<gdd-add-work />
|
||||
|
||||
|
||||
<!--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>
|
||||
<br>
|
||||
<br>
|
||||
<!-- Card table -->
|
||||
<div>
|
||||
<gdd-work-table />
|
||||
|
||||
|
||||
<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>
|
||||
</base-header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
|
||||
import { BIcon } from 'bootstrap-vue'
|
||||
|
||||
import GddStatus from './KontoOverview/GddStatus.vue';
|
||||
import GddSent from './KontoOverview/GddSent.vue';
|
||||
import GddTable from './KontoOverview/GddTable.vue';
|
||||
import GddAddWork from './KontoOverview/GddAddWork.vue';
|
||||
import GddWorkTable from './KontoOverview/GddWorkTable.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QrcodeStream,
|
||||
QrcodeDropZone,
|
||||
QrcodeCapture
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scan: false,
|
||||
form: {
|
||||
img: '',
|
||||
email: '',
|
||||
amount1: '',
|
||||
amount2: ''
|
||||
},
|
||||
show: true,
|
||||
modal: false,
|
||||
modaldate: {
|
||||
classes:'',
|
||||
content_classes:'',
|
||||
title:'',
|
||||
icon:'',
|
||||
h4: '',
|
||||
p: '',
|
||||
footer_text: ''
|
||||
},
|
||||
fields: [ 'status', 'betrag', 'name', 'datum', 'details'],
|
||||
items: [
|
||||
{ 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) {
|
||||
// ...
|
||||
GddStatus,
|
||||
GddSent,
|
||||
GddTable,
|
||||
GddAddWork,
|
||||
GddWorkTable
|
||||
}
|
||||
},
|
||||
onSubmit(event) {
|
||||
event.preventDefault()
|
||||
alert(JSON.stringify(this.form))
|
||||
this.modal = true
|
||||
this.modal.h4 = 'TODO 1'
|
||||
},
|
||||
onReset(event) {
|
||||
event.preventDefault()
|
||||
// Reset our form values
|
||||
this.form.email = ''
|
||||
this.form.amount1 = ''
|
||||
this.form.amount2 = ''
|
||||
// Trick to reset/clear native browser form validation state
|
||||
this.show = false
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
rowClass(item, type) {
|
||||
if (!item || type !== 'row') return
|
||||
if (item.status === 'received') return 'table-success'
|
||||
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() {
|
||||
|
||||
},
|
||||
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>
|
||||
<style>
|
||||
.el-table .cell{
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
96
src/views/KontoOverview/GddAddWork.vue
Normal file
96
src/views/KontoOverview/GddAddWork.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-row>
|
||||
<b-col xl="12" md="12">
|
||||
<base-button icon type="info" size="lg" v-b-toggle.collapse-2>
|
||||
<span class="btn-inner--icon"><i class="ni ni-fat-add"></i></span>
|
||||
<span class="btn-inner--text">{{ $t('site.overview.add_work') }} </span>
|
||||
</base-button>
|
||||
<b-collapse id="collapse-2" class="mt-2">
|
||||
<b-card>
|
||||
<p class="card-text">
|
||||
<b-row>
|
||||
<b-col>
|
||||
11111111
|
||||
|
||||
</b-col>
|
||||
<b-col>
|
||||
2222222222
|
||||
</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-row class="form-group">
|
||||
<label for="example-datetime-local-input" class="col-md-2 col-form-label form-control-label">Datetime</label>
|
||||
<b-col md="10">
|
||||
<base-input type="datetime-local" value="2018-11-23T10:30:00" id="example-datetime-local-input"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
|
||||
<base-input label="Example textarea">
|
||||
<textarea class="form-control" id="exampleFormControlTextarea3" rows="3"></textarea>
|
||||
</base-input>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<b-button type="submit" variant="success">jetzt einreichen</b-button>
|
||||
<b-button type="reset" variant="danger">Cancel</b-button>
|
||||
<br>
|
||||
</b-form>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GDDAddWork',
|
||||
data(){
|
||||
return {
|
||||
show: true,
|
||||
form: {
|
||||
img: '',
|
||||
email: '',
|
||||
amount1: '',
|
||||
amount2: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
event.preventDefault()
|
||||
alert(JSON.stringify(this.form))
|
||||
this.modal = true
|
||||
this.modal.h4 = 'TODO 1'
|
||||
},
|
||||
onReset(event) {
|
||||
event.preventDefault()
|
||||
// Reset our form values
|
||||
this.form.email = ''
|
||||
this.form.amount1 = ''
|
||||
this.form.amount2 = ''
|
||||
// Trick to reset/clear native browser form validation state
|
||||
this.show = false
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
adressbook() {
|
||||
this.modal = true
|
||||
this.modaldata.h4 = 'Adressbuch'
|
||||
this.modaldata.p = 'TODO ADRESSBUCH LISTE'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
174
src/views/KontoOverview/GddSent.vue
Normal file
174
src/views/KontoOverview/GddSent.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-row>
|
||||
<b-col xl="12" md="12">
|
||||
<base-button icon type="primary" size="lg" v-b-toggle.collapse-1>
|
||||
<span class="btn-inner--icon"><i class="ni ni-curved-next"></i></span>
|
||||
<span class="btn-inner--text">{{ $t('site.overview.send_gradido') }} </span>
|
||||
</base-button>
|
||||
<b-collapse id="collapse-1" class="mt-2">
|
||||
<b-card>
|
||||
<p class="card-text">
|
||||
<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-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.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>
|
||||
</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: '',
|
||||
amount1: '',
|
||||
amount2: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
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.modal = true
|
||||
this.modal.h4 = 'TODO 1'
|
||||
},
|
||||
onReset(event) {
|
||||
event.preventDefault()
|
||||
// Reset our form values
|
||||
this.form.email = ''
|
||||
this.form.amount1 = ''
|
||||
this.form.amount2 = ''
|
||||
// Trick to reset/clear native browser form validation state
|
||||
this.show = false
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
adressbook() {
|
||||
this.modal = true
|
||||
this.modaldata.h4 = 'Adressbuch'
|
||||
this.modaldata.p = 'TODO ADRESSBUCH LISTE'
|
||||
}
|
||||
},
|
||||
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>
|
||||
38
src/views/KontoOverview/GddStatus.vue
Normal file
38
src/views/KontoOverview/GddStatus.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-row>
|
||||
<b-col xl="6" md="6">
|
||||
<stats-card :title="$t('site.overview.current_balance')"
|
||||
type="gradient-red"
|
||||
sub-title="3500,897 GDD"
|
||||
img="img/icons/gradido/my_gradido.png"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">+ 3.48%</span>
|
||||
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="6" md="6">
|
||||
<stats-card :title="$t('site.overview.gradido_received')"
|
||||
type="gradient-orange"
|
||||
sub-title="2,356 GDD"
|
||||
img="img/icons/gradido/plus.png"
|
||||
class="mb-4">
|
||||
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">+ 12.18%</span>
|
||||
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GddStatus',
|
||||
};
|
||||
</script>
|
||||
91
src/views/KontoOverview/GddTable.vue
Normal file
91
src/views/KontoOverview/GddTable.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--
|
||||
<b-table striped hover :items="items" :fields="fields" :tbody-tr-class="rowClass" responsive="true" >
|
||||
<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(details)="row">
|
||||
<b-button size="md" @click="row.toggleDetails" class="mr-2">
|
||||
{{ row.detailsShowing ? $t('site.overview.table.hide') : $t('site.overview.table.view') }}
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<-- Table details -- >
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.amount') }}:</b></b-col>
|
||||
<b-col>{{ row.item.amount }} GDD</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.decay') }}: </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>{{ $t('site.overview.table.sender') }}: </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">{{ $t('site.overview.table.hide_details') }}</b-button>
|
||||
</b-card>
|
||||
</template>
|
||||
</b-table>
|
||||
-->
|
||||
<hr>
|
||||
|
||||
<b-list-group >
|
||||
<b-list-group-item v-for="item in items" :key="item.id">
|
||||
<div class="d-flex w-100 justify-content-between" @click="toogle(item)" >
|
||||
<b-icon v-if="item.status === 'sent'" icon="box-arrow-left" class="m-1" font-scale="2" style="color:red"></b-icon>
|
||||
<b-icon v-else icon="box-arrow-right" class="m-1" font-scale="2" style="color:green" ></b-icon>
|
||||
<h1 class="mb-1">{{item.betrag}} <small>GDD</small></h1>
|
||||
<h2 class="text-muted"><small>{{item.datum}}</small> - {{item.name}}</h2>
|
||||
</div>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'GddTable',
|
||||
data(){
|
||||
return {
|
||||
form: [],
|
||||
fields: [ 'status', 'betrag', 'name', 'datum', 'details'],
|
||||
items: [
|
||||
{ id: 1, betrag: 1000, name: 'Dickerson', datum: '12.12.20', datel: '12.12.2020 14:04', status: 'received' },
|
||||
{ id: 2, betrag: 302, name: 'Larsen', datum: '22.06.20', datel: '22.06.2020 22:23', status: 'sent' },
|
||||
{ id: 3, betrag: 89, name: 'Geneva', datum: '15.04.20', datel: '15.04.2020 12:55', status: 'sent' },
|
||||
{ id: 4, betrag: 1000, name: 'Community', datum: '10.03.20', datel: '10.03.2020 18:20', status: 'received'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rowClass(item, type) {
|
||||
if (!item || type !== 'row') return
|
||||
if (item.status === 'received') return 'table-success'
|
||||
if (item.status === 'sent') return 'table-warning'
|
||||
if (item.status === 'earned') return 'table-primary'
|
||||
},
|
||||
toogle(item) {
|
||||
const temp = '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.el-table .cell{
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
75
src/views/KontoOverview/GddTableSentReceived.vue
Normal file
75
src/views/KontoOverview/GddTableSentReceived.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<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(details)="row">
|
||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||
{{ row.detailsShowing ? $t('site.overview.table.hide') : $t('site.overview.table.view') }}
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.amount') }}:</b></b-col>
|
||||
<b-col>{{ row.item.amount }} GDD</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.decay') }}: </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>{{ $t('site.overview.table.sender') }}: </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">{{ $t('site.overview.table.hide_details') }}</b-button>
|
||||
</b-card>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'GddTable',
|
||||
data(){
|
||||
return {
|
||||
form: [],
|
||||
fields: [ 'status', 'betrag', 'name', 'datum', 'details'],
|
||||
items: [
|
||||
{ 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: {
|
||||
rowClass(item, type) {
|
||||
if (!item || type !== 'row') return
|
||||
if (item.status === 'received') return 'table-success'
|
||||
if (item.status === 'sent') return 'table-warning'
|
||||
if (item.status === 'earned') return 'table-primary'
|
||||
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.el-table .cell{
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
52
src/views/KontoOverview/GddWorkTable.vue
Normal file
52
src/views/KontoOverview/GddWorkTable.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-list-group >
|
||||
<b-list-group-item v-for="item in items" :key="item.id">
|
||||
<div class="d-flex w-100 justify-content-between" @click="toogle(item)" >
|
||||
<b-icon v-if="item.status == 'submitted'" icon="clock-history" class="m-1" font-scale="2" style="color:orange"></b-icon>
|
||||
<b-icon v-else icon="check2-all" class="m-1" font-scale="2" style="color:green" ></b-icon>
|
||||
<h2 class="text-muted"><small>{{item.datel}}</small> - {{item.text}}</h2>
|
||||
</div>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'GddWorkTable',
|
||||
data(){
|
||||
return {
|
||||
form: [],
|
||||
items: [
|
||||
{ id: 1, text: 'Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ', datel: '12.12.2020 14:04', status: 'submitted' },
|
||||
{ id: 2, text: 'Larsen Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ', datel: '22.06.2020 22:23', status: 'submitted' },
|
||||
{ id: 3, text: 'Geneva Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ', datel: '15.04.2020 12:55', status: 'confirmed' },
|
||||
{ id: 4, text: 'Community Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ', datel: '10.03.2020 18:20', status: 'confirmed'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rowClass(item, type) {
|
||||
if (!item || type !== 'row') return
|
||||
if (item.status === 'received') return 'table-success'
|
||||
if (item.status === 'sent') return 'table-warning'
|
||||
if (item.status === 'earned') return 'table-primary'
|
||||
},
|
||||
toogle(item) {
|
||||
const temp = '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.el-table .cell{
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
19
src/views/KontoOverview/default.vue
Normal file
19
src/views/KontoOverview/default.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
default
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'default',
|
||||
data(){
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
63
src/views/Landing.vue
Normal file
63
src/views/Landing.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="header bg-gradient-info 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="6" class="px-5">
|
||||
<h1 class="text-light">Landing Gradido</h1>
|
||||
<br>
|
||||
<router-link to="/KontoOverview" class="font-weight-bold text-white mt-5"> LoginUser</router-link>
|
||||
<br><br>
|
||||
<router-link to="/AdminOverview" class="font-weight-bold text-white mt-5"> Login Admin</router-link>
|
||||
<br><br>
|
||||
<router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link>
|
||||
</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">
|
||||
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page content -->
|
||||
<section class="py-6">
|
||||
<b-container >
|
||||
<b-row align-v="center" class="row-grid">
|
||||
<b-col md="6">
|
||||
<b-img src="img/theme/landing-1.png" fluid />
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<div class="pr-md-5">
|
||||
<h1 class="text-light"> {{ $t('site.landing1.explore') }}</h1>
|
||||
<p class="text-light">{{ $t('site.landing1.text') }}</p>
|
||||
<router-link to="/user" class="font-weight-bold text-warning mt-5">{{ $t('site.landing1.link') }}</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Landing',
|
||||
methods: {
|
||||
login() {
|
||||
console.log("app.vue user login() : " + this.$store.state.is_auth)
|
||||
this.$store.commit('login')
|
||||
this.$router.push('/KontoOverview')
|
||||
|
||||
},
|
||||
loginAsAdmin () {
|
||||
console.log("app.vue admin login(): " + this.$store.state.is_admin)
|
||||
this.modals = false
|
||||
this.$store.commit('loginAsAdmin')
|
||||
this.$router.push('/AdminOverview')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
118
src/views/Layout/AdminLayout.vue
Normal file
118
src/views/Layout/AdminLayout.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<notifications></notifications>
|
||||
<side-bar>
|
||||
<template slot="links">
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Kontoübersicht',
|
||||
path: 'KontoOverview',
|
||||
icon: 'ni ni-tv-2 text-primary',
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'User Profile',
|
||||
path: '/profile',
|
||||
icon: 'ni ni-single-02 text-yellow'
|
||||
}">
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Login',
|
||||
path: '/login',
|
||||
icon: 'ni ni-key-25 text-info'
|
||||
}">
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Register',
|
||||
path: '/register',
|
||||
icon: 'ni ni-circle-08 text-pink'
|
||||
}">
|
||||
</sidebar-item>
|
||||
</template>
|
||||
|
||||
<template slot="links-after">
|
||||
<hr class="my-3">
|
||||
<h6 class="navbar-heading p-0 text-muted">Community</h6>
|
||||
|
||||
<b-nav class="navbar-nav mb-md-3">
|
||||
<b-nav-item
|
||||
href="https://gradido.net/de/" target="_blank"
|
||||
>
|
||||
<i class="ni ni-spaceship"></i>
|
||||
<b-nav-text class="p-0">GRADIDO.net</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://elopage.com/s/gradido/sign_in">
|
||||
<i class="ni ni-palette"></i>
|
||||
<b-nav-text class="p-0">Mitgliederbereich</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://gradido.net/de/memberships/">
|
||||
<i class="ni ni-ui-04"></i>
|
||||
<b-nav-text class="p-0">Mitgliedschaft</b-nav-text>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</template>
|
||||
</side-bar>
|
||||
<div class="main-content">
|
||||
<dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
|
||||
|
||||
<div @click="$sidebar.displaySidebar(false)">
|
||||
<fade-transition :duration="200" origin="center top" mode="out-in">
|
||||
<!-- your content here -->
|
||||
<router-view></router-view>
|
||||
</fade-transition>
|
||||
</div>
|
||||
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable no-new */
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import 'perfect-scrollbar/css/perfect-scrollbar.css';
|
||||
|
||||
function hasElement(className) {
|
||||
return document.getElementsByClassName(className).length > 0;
|
||||
}
|
||||
|
||||
function initScrollbar(className) {
|
||||
if (hasElement(className)) {
|
||||
new PerfectScrollbar(`.${className}`);
|
||||
} else {
|
||||
// try to init it later in case this component is loaded async
|
||||
setTimeout(() => {
|
||||
initScrollbar(className);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
import DashboardNavbar from './DashboardNavbar.vue';
|
||||
import ContentFooter from './ContentFooter.vue';
|
||||
import DashboardContent from './Content.vue';
|
||||
import { FadeTransition } from 'vue2-transitions';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardNavbar,
|
||||
ContentFooter,
|
||||
DashboardContent,
|
||||
FadeTransition
|
||||
},
|
||||
methods: {
|
||||
initScrollbar() {
|
||||
let isWindows = navigator.platform.startsWith('Win');
|
||||
if (isWindows) {
|
||||
initScrollbar('sidenav');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollbar()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@ -11,32 +11,6 @@
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Dashboard',
|
||||
path: '/dashboard',
|
||||
icon: 'ni ni-tv-2 text-primary',
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Icons',
|
||||
path: '/icons',
|
||||
icon: 'ni ni-planet text-blue'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Maps',
|
||||
path: '/maps',
|
||||
icon: 'ni ni-pin-3 text-orange'
|
||||
}">
|
||||
</sidebar-item>
|
||||
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'User Profile',
|
||||
@ -45,13 +19,7 @@
|
||||
}">
|
||||
</sidebar-item>
|
||||
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Tables',
|
||||
path: '/tables',
|
||||
icon: 'ni ni-bullet-list-67 text-red'
|
||||
}">
|
||||
</sidebar-item>
|
||||
|
||||
|
||||
<sidebar-item
|
||||
:link="{
|
||||
@ -71,22 +39,22 @@
|
||||
|
||||
<template slot="links-after">
|
||||
<hr class="my-3">
|
||||
<h6 class="navbar-heading p-0 text-muted">Documentation</h6>
|
||||
<h6 class="navbar-heading p-0 text-muted">Community</h6>
|
||||
|
||||
<b-nav class="navbar-nav mb-md-3">
|
||||
<b-nav-item
|
||||
href="https://www.creative-tim.com/learning-lab/bootstrap-vue/quick-start/argon-dashboard"
|
||||
href="https://gradido.net/de/" target="_blank"
|
||||
>
|
||||
<i class="ni ni-spaceship"></i>
|
||||
<b-nav-text class="p-0">Getting started</b-nav-text>
|
||||
<b-nav-text class="p-0">GRADIDO.net</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://www.creative-tim.com/learning-lab/bootstrap-vue/colors/argon-dashboard">
|
||||
<b-nav-item href="https://elopage.com/s/gradido/sign_in">
|
||||
<i class="ni ni-palette"></i>
|
||||
<b-nav-text class="p-0">Foundation</b-nav-text>
|
||||
<b-nav-text class="p-0">Mitgliederbereich</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://www.creative-tim.com/learning-lab/bootstrap-vue/avatar/argon-dashboard">
|
||||
<b-nav-item href="https://gradido.net/de/memberships/">
|
||||
<i class="ni ni-ui-04"></i>
|
||||
<b-nav-text class="p-0">Components</b-nav-text>
|
||||
<b-nav-text class="p-0">Mitgliedschaft</b-nav-text>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</template>
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
title-classes="nav-link pr-0">
|
||||
<a href="#" class="nav-link pr-0" @click.prevent slot="title-container">
|
||||
<b-media no-body class="align-items-center">
|
||||
|
||||
<span class="avatar avatar-sm rounded-circle">
|
||||
<img alt="Image placeholder" src="img/theme/team-4.jpg">
|
||||
</span>
|
||||
@ -48,28 +49,28 @@
|
||||
<template>
|
||||
|
||||
<b-dropdown-header class="noti-title">
|
||||
<h6 class="text-overflow m-0">Welcome!</h6>
|
||||
<h6 class="text-overflow m-0"> {{ $t('site.welcome') }}</h6>
|
||||
</b-dropdown-header>
|
||||
<b-dropdown-item href="#!">
|
||||
<i class="ni ni-single-02"></i>
|
||||
<span>My profile</span>
|
||||
<span>{{ $t('site.navbar.my-profil')}}</span>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item href="#!">
|
||||
<i class="ni ni-settings-gear-65"></i>
|
||||
<span>Settings</span>
|
||||
<span>{{ $t('site.navbar.settings') }}</span>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item href="#!">
|
||||
<i class="ni ni-calendar-grid-58"></i>
|
||||
<span>Activity</span>
|
||||
<span>{{ $t('site.navbar.activity') }}</span>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item href="#!">
|
||||
<i class="ni ni-support-16"></i>
|
||||
<span>Support</span>
|
||||
<span>{{ $t('site.navbar.support') }}</span>
|
||||
</b-dropdown-item>
|
||||
<div class="dropdown-divider"></div>
|
||||
<b-dropdown-item href="#!">
|
||||
<i class="ni ni-user-run"></i>
|
||||
<span>Logout</span>
|
||||
<span>{{ $t('site.logout') }}</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
</template>
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
<div class="header-body text-center mb-7">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col xl="5" lg="6" md="6" class="px-5">
|
||||
<h1 class="text-light">Ooops!</h1>
|
||||
<p class="text-lead text-white">Page not found. Don't worry though, we have plenty of other pages to explore</p>
|
||||
<h1 class="text-light">{{ $t('site.404.oops') }}</h1>
|
||||
<p class="text-lead text-white">{{ $t('site.404.text') }}</p>
|
||||
|
||||
<router-link to="/dashboard" class="font-weight-bold text-white mt-5">Back to dashboard</router-link>
|
||||
<router-link to="/dashboard" class="font-weight-bold text-white mt-5"> {{ $t('site.404.back') }}</router-link>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
@ -25,13 +25,13 @@
|
||||
<b-container >
|
||||
<b-row align-v="center" class="row-grid">
|
||||
<b-col md="6">
|
||||
<b-img src="img/theme/landing-2.png" fluid />
|
||||
<b-img src="img/theme/landing-1.png" fluid />
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<div class="pr-md-5">
|
||||
<h1 class="text-light">Explore pages</h1>
|
||||
<p class="text-light">If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages.</p>
|
||||
<router-link to="/user" class="font-weight-bold text-warning mt-5">Explore pages</router-link>
|
||||
<h1 class="text-light"> {{ $t('site.landing1.explore') }}</h1>
|
||||
<p class="text-light">{{ $t('site.landing1.text') }}</p>
|
||||
<router-link to="/user" class="font-weight-bold text-warning mt-5">{{ $t('site.landing1.link') }}</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
@ -29,24 +29,7 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
<b-navbar-nav class="align-items-lg-center ml-lg-auto">
|
||||
<b-nav-item to="/dashboard">
|
||||
<i class="ni ni-planet"></i>
|
||||
<span class="nav-link-inner--text">Dashboard</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/register">
|
||||
<i class="ni ni-circle-08"></i>
|
||||
<span class="nav-link-inner--text">Register</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/login">
|
||||
<i class="ni ni-key-25"></i>
|
||||
<span class="nav-link-inner--text">Login</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/profile">
|
||||
<i class="ni ni-single-02"></i>
|
||||
<span class="nav-link-inner--text">Profile</span>
|
||||
</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
|
||||
</template>
|
||||
</base-nav>
|
||||
|
||||
@ -64,19 +47,19 @@
|
||||
<b-row align-v="center" class="justify-content-xl-between">
|
||||
<b-col xl="6">
|
||||
<div class="copyright text-center text-xl-left text-muted">
|
||||
© {{year}} <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a>
|
||||
© {{year}} <a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">Gradido Wallet</a>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col xl="6" class="col-xl-6">
|
||||
<b-nav class="nav-footer justify-content-center justify-content-xl-end">
|
||||
<b-nav-item href="https://www.creative-tim.com" target="_blank" >
|
||||
Creative Tim
|
||||
<b-nav class="nav-footer justify-content-center justify-content-lg-end">
|
||||
<b-nav-item ref="https://www.creative-tim.com" target="_blank">
|
||||
Gradido
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
|
||||
About Us
|
||||
Impressum
|
||||
</b-nav-item>
|
||||
<b-nav-item href="http://blog.creative-tim.com" target="_blank">
|
||||
Blog
|
||||
Datenschutzerklärung
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://www.creative-tim.com/license" target="_blank">
|
||||
License
|
||||
|
||||
19
src/views/default.vue
Normal file
19
src/views/default.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
default
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'default',
|
||||
data(){
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -5,6 +5,14 @@ function resolveSrc(_path) {
|
||||
}
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
pluginOptions: {
|
||||
i18n: {
|
||||
locale: 'de',
|
||||
fallbackLocale: 'de',
|
||||
localeDir: 'locales',
|
||||
enableInSFC: false
|
||||
}
|
||||
},
|
||||
lintOnSave: true,
|
||||
configureWebpack: {
|
||||
// Set up all the aliases we use in our app.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user