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

Merge pull request #77 from gradido/eslint-rules

Browse Source 
feat: Tougher eslint rules
This commit is contained in:
Ulf Gebhardt 2021-03-24 21:28:17 +01:00 committed by GitHub
commit edcdc84b2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
119 changed files with 7897 additions and 5688 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/.eslintignore Normal file
View File

@ -0,0 +1,3 @@
node_modules
**/*.min.js
dist

31
frontend/.eslintrc.js
View File

@ -1,15 +1,30 @@
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
node: true browser: true,
}, node: true,
extends: ['plugin:vue/essential'], jest: true
rules: {
// TODO no console!
'no-console': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}, },
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint'
},
extends: [
'plugin:vue/essential',
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: [
'vue',
'prettier',
'jest'
],
// add your custom rules here
rules: {
'no-console': ['error'],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'prettier/prettier': ['error', {
htmlWhitespaceSensitivity: 'ignore'
}],
} }
}; }

8
frontend/.prettierrc.js Normal file
View File

@ -0,0 +1,8 @@
module.exports = {
semi: false,
printWidth: 100,
singleQuote: true,
trailingComma: "all",
tabWidth: 2,
bracketSpacing: true
};

18
frontend/babel.config.js
View File

@ -1,14 +1,12 @@
module.exports = { module.exports = {
"presets": [ presets: ['@vue/app'],
"@vue/app" plugins: [
],
"plugins": [
[ [
"component", 'component',
{ {
"libraryName": "element-ui", libraryName: 'element-ui',
"styleLibraryName": "theme-chalk" styleLibraryName: 'theme-chalk',
} },
] ],
] ],
} }

10
frontend/intelij.webpack.js
View File

@ -1,12 +1,12 @@
// This configuration file is not used anywhere in the code, it's a hack to handle InteliJ relative path imports // This configuration file is not used anywhere in the code, it's a hack to handle InteliJ relative path imports
// Keep in sync with actual webpack aliases // Keep in sync with actual webpack aliases
const path = require('path'); const path = require('path')
module.exports = { module.exports = {
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, 'src') '@': path.resolve(__dirname, 'src'),
} },
} },
}; }

57
frontend/jest.config.js
View File

@ -1,34 +1,25 @@
module.exports = { module.exports = {
verbose: true, verbose: true,
collectCoverageFrom: [ collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'],
"**/*.{js,vue}", moduleFileExtensions: [
"!**/node_modules/**", 'js',
"!**/?(*.)+(spec|test).js?(x)" //'jsx',
], 'json',
moduleFileExtensions: [ 'vue',
'js', ],
//'jsx', coverageReporters: ['lcov'],
'json', moduleNameMapper: {
'vue', '^@/(.*)$': '<rootDir>/src/$1',
], },
coverageReporters: [ transform: {
"lcov" '^.+\\.vue$': 'vue-jest',
], // '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
moduleNameMapper: { '^.+\\.(js|jsx)?$': 'babel-jest',
'^@/(.*)$': '<rootDir>/src/$1' },
}, //setupFiles: [
transform: { // "<rootDir>/test/registerContext.js"
'^.+\\.vue$': 'vue-jest', //],
// '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', testMatch: ['**/?(*.)+(spec|test).js?(x)'],
"^.+\\.(js|jsx)?$": "babel-jest" // snapshotSerializers: ['jest-serializer-vue'],
}, transformIgnorePatterns: ['<rootDir>/node_modules/'],
//setupFiles: [ }
// "<rootDir>/test/registerContext.js"
//],
testMatch: [
"**/?(*.)+(spec|test).js?(x)"
],
// snapshotSerializers: ['jest-serializer-vue'],
transformIgnorePatterns: ['<rootDir>/node_modules/']
};

14
frontend/package.json
View File

@ -6,7 +6,7 @@
"start": "node server.js", "start": "node server.js",
"serve": "vue-cli-service serve --open", "serve": "vue-cli-service serve --open",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint", "lint": "eslint --ext .js,.vue .",
"dev": "yarn run serve", "dev": "yarn run serve",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'", "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
"test": "jest" "test": "jest"
@ -27,7 +27,16 @@
"element-ui": "2.4.11", "element-ui": "2.4.11",
"es6-promise": "^4.1.1", "es6-promise": "^4.1.1",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-plugin-vue": "^7.5.0", "eslint-config-prettier": "^8.1.0",
"eslint-config-standard": "^16.0.2",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.3.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^7.8.0",
"express": "^4.17.1", "express": "^4.17.1",
"flatpickr": "^4.5.7", "flatpickr": "^4.5.7",
"fuse.js": "^3.2.0", "fuse.js": "^3.2.0",
@ -36,6 +45,7 @@
"nouislider": "^12.1.0", "nouislider": "^12.1.0",
"particles-bg-vue": "1.2.3", "particles-bg-vue": "1.2.3",
"perfect-scrollbar": "^1.3.0", "perfect-scrollbar": "^1.3.0",
"prettier": "^2.2.1",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"quill": "^1.3.6", "quill": "^1.3.6",
"sweetalert2": "^9.5.4", "sweetalert2": "^9.5.4",

14
frontend/server.js
View File

@ -1,7 +1,7 @@
var express = require('express'); var express = require('express')
var serveStatic = require('serve-static'); var serveStatic = require('serve-static')
var app = express(); var app = express()
app.use(serveStatic(__dirname + "/dist")); app.use(serveStatic(__dirname + '/dist'))
var port = process.env.PORT || 5000; var port = process.env.PORT || 5000
app.listen(port); app.listen(port)
// console.log('http://localhost:5000 server started.'); // console.log('http://localhost:5000 server started.');

193
frontend/src/App.vue
View File

@ -1,93 +1,122 @@
<template> <template>
<div id="app" class="font-sans text-gray-800"> <div id="app" class="font-sans text-gray-800">
<header > <header>
<b-col class="text-center"> <b-col class="text-center">
<b-dropdown size="sm" split variant="secondary" :text="$t('language') + ' - '+$i18n.locale" class="m-md-2"> <b-dropdown
<b-dropdown-divider></b-dropdown-divider> size="sm"
<b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item> split
<b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item> variant="secondary"
</b-dropdown> :text="$t('language') + ' - ' + $i18n.locale"
</b-col> class="m-md-2"
>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
<b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
</b-dropdown>
</b-col>
</header> </header>
<div class=""> <div class="">
<particles-bg type="custom" :config="config" :bg="true" /> <particles-bg type="custom" :config="config" :bg="true" />
<router-view /> <router-view />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ParticlesBg } from "particles-bg-vue"; import { ParticlesBg } from 'particles-bg-vue'
import icon from "./icon.js" import icon from './icon.js'
import { localeChanged } from 'vee-validate' import { localeChanged } from 'vee-validate'
export default { export default {
name: 'app', name: 'app',
components: { components: {
ParticlesBg ParticlesBg,
}, },
created () { created() {
console.log( "xx", $cookies.get("gdd_lang")) //console.log('xx', $cookies.get('gdd_lang'))
console.log('%cWillkommen bei Gradido %cgreen text', 'font-weight:bold', 'color: green') //console.log('%cWillkommen bei Gradido %cgreen text', 'font-weight:bold', 'color: green')
if ( $cookies.isKey("gdd_session_id") == true) { if ($cookies.isKey('gdd_session_id') == true) {
console.log('%cHey %c'+$cookies.get("gdd_u")+'', 'font-weight:bold', 'color: orange') //console.log('%cHey %c' + $cookies.get('gdd_u') + '', 'font-weight:bold', 'color: orange')
this.$store.commit('session_id', $cookies.get("gdd_session_id")) this.$store.commit('session_id', $cookies.get('gdd_session_id'))
this.$store.commit('email', $cookies.get("gdd_u")) this.$store.commit('email', $cookies.get('gdd_u'))
this.$store.commit('language', $cookies.get("gdd_lang")) this.$store.commit('language', $cookies.get('gdd_lang'))
this.$i18n.locale = $cookies.get("gdd_lang") this.$i18n.locale = $cookies.get('gdd_lang')
this.$router.push("overview") this.$router.push('overview')
}else { } else {
console.log("app.vue to Logout") //console.log('app.vue to Logout')
this.$store.dispatch('logout') this.$store.dispatch('logout')
} }
}, },
data() { data() {
return { return {
config: { config: {
num: [1, 7], num: [1, 7],
rps: 15, rps: 15,
radius: [5, 50], radius: [5, 50],
life: [6.5, 15], life: [6.5, 15],
v: [1, 1], v: [1, 1],
tha: [-40, 40], tha: [-40, 40],
body: icon, body: icon,
alpha: [0.6, 0], alpha: [0.6, 0],
scale: [0.1, 0.4], scale: [0.1, 0.4],
position: "all", position: 'all',
cross: "dead", cross: 'dead',
random: 2, random: 2,
}, },
}; }
}, },
methods: { methods: {
setLocale(locale) { setLocale(locale) {
this.$i18n.locale = locale this.$i18n.locale = locale
this.$store.commit('language', this.$i18n.locale) this.$store.commit('language', this.$i18n.locale)
localeChanged(locale) localeChanged(locale)
} },
}, },
} }
</script> </script>
<style> <style>
.btn-primary pim {
.btn-primary pim{ background-color: #5a7b02;
background-color: #5A7B02; border-color: #5e72e4;
border-color: #5e72e4; }
} a,
a, .copyright{ .copyright {
color: #5A7B02; color: #5a7b02;
} }
gradido-global-color-text{color: #3D443B } gradido-global-color-text {
gradido-global-color-accent{color: #047006 } color: #3d443b;
gradido-global-color-6e0a9c9e{color: #000 } }
gradido-global-color-2d0fb154{color: #047006 } gradido-global-color-accent {
gradido-global-color-16efe88c{color: #7EBC55 } color: #047006;
gradido-global-color-1939326{color: #F6FFF6 } }
gradido-global-color-9d79fc1{color: #047006 } gradido-global-color-6e0a9c9e {
gradido-global-color-6347f4d{color: #5A7B02 } color: #000;
gradido-global-color-4fbc19a{color: #014034 } }
gradido-global-color-d341874{color: #B6D939 } gradido-global-color-2d0fb154 {
gradido-global-color-619d338{color: #8EBFB1 } color: #047006;
gradido-global-color-44819a9{color: #026873 } }
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> </style>

38
frontend/src/apis/communityAPI.js
View File

@ -1,33 +1,33 @@
import axios from 'axios'; import axios from 'axios'
import CONFIG from '../config' import CONFIG from '../config'
const apiGet = async (url) => { const apiGet = async (url) => {
try { try {
const result = await axios.get(url); const result = await axios.get(url)
if(result.status !== 200){ if (result.status !== 200) {
throw new Error('HTTP Status Error '+result.status) throw new Error('HTTP Status Error ' + result.status)
} }
if(result.data.state !== 'success'){ if (result.data.state !== 'success') {
throw new Error(result.data.msg) throw new Error(result.data.msg)
} }
return { success: true, result } return { success: true, result }
} catch(error){ } catch (error) {
return { success: false, result: error} return { success: false, result: error }
} }
} }
const apiPost = async (url, payload) => { const apiPost = async (url, payload) => {
try { try {
const result = await axios.post(url, payload); const result = await axios.post(url, payload)
if(result.status !== 200){ if (result.status !== 200) {
throw new Error('HTTP Status Error '+result.status) throw new Error('HTTP Status Error ' + result.status)
} }
if(result.data.state !== 'success'){ if (result.data.state !== 'success') {
throw new Error(result.data.msg) throw new Error(result.data.msg)
} }
return { success: true, result } return { success: true, result }
} catch(error){ } catch (error) {
return { success: false, result: error} return { success: false, result: error }
} }
} }
@ -43,22 +43,22 @@ const communityAPI = {
session_id, session_id,
email, email,
amount, amount,
target_date, target_date,
memo, memo,
auto_sign: true auto_sign: true,
} }
return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload) return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload)
},*/ },*/
send: async (session_id, email, amount, memo ) => { send: async (session_id, email, amount, memo) => {
const payload = { const payload = {
session_id, session_id,
email, email,
amount, amount,
memo, memo,
auto_sign: true auto_sign: true,
} }
return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_SEND_COINS + 'ajaxCreate/', payload) return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_SEND_COINS + 'ajaxCreate/', payload)
} },
} }
export default communityAPI export default communityAPI

24
frontend/src/apis/loginAPI.js
View File

@ -1,4 +1,4 @@
import axios from 'axios'; import axios from 'axios'
import CONFIG from '../config' import CONFIG from '../config'
// control email-text sended with email verification code // control email-text sended with email verification code
@ -9,16 +9,16 @@ const EMAIL_TYPE = {
const apiPost = async (url, payload) => { const apiPost = async (url, payload) => {
try { try {
const result = await axios.post(url, payload); const result = await axios.post(url, payload)
if(result.status !== 200){ if (result.status !== 200) {
throw new Error('HTTP Status Error '+result.status) throw new Error('HTTP Status Error ' + result.status)
} }
if(result.data.state !== 'success'){ if (result.data.state !== 'success') {
throw new Error(result.data.msg) throw new Error(result.data.msg)
} }
return { success: true, result } return { success: true, result }
} catch(error){ } catch (error) {
return { success: false, result: error} return { success: false, result: error }
} }
} }
@ -31,20 +31,20 @@ const loginAPI = {
return apiPost(CONFIG.LOGIN_API_URL + 'unsecureLogin', payload) return apiPost(CONFIG.LOGIN_API_URL + 'unsecureLogin', payload)
}, },
logout: async (session_id) => { logout: async (session_id) => {
const payload= { session_id } const payload = { session_id }
return apiPost(CONFIG.LOGIN_API_URL + 'logout', payload) return apiPost(CONFIG.LOGIN_API_URL + 'logout', payload)
}, },
create : async (email, first_name, last_name, password) => { create: async (email, first_name, last_name, password) => {
const payload = { const payload = {
email, email,
first_name, first_name,
last_name, last_name,
password, password,
emailType: EMAIL_TYPE.DEFAULT, emailType: EMAIL_TYPE.DEFAULT,
login_after_register: true login_after_register: true,
} }
return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload) return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload)
}, },
} }
export default loginAPI export default loginAPI

79
frontend/src/components/Badge.vue
View File

@ -1,50 +1,45 @@
<template> <template>
<b-badge <b-badge :variant="type" :pill="rounded" :size="size" :class="{ 'badge-circle': circle }">
:variant="type"
:pill="rounded"
:size="size"
:class="{'badge-circle': circle }">
<slot> <slot>
<i v-if="icon" :class="icon"></i> <i v-if="icon" :class="icon"></i>
</slot> </slot>
</b-badge> </b-badge>
</template> </template>
<script> <script>
export default { export default {
name: "badge", name: 'badge',
props: { props: {
tag: { tag: {
type: String, type: String,
default: "span", default: 'span',
description: "Html tag to use for the badge." description: 'Html tag to use for the badge.',
}, },
rounded: { rounded: {
type: Boolean, type: Boolean,
default: false, default: false,
description: "Whether badge is of pill type" description: 'Whether badge is of pill type',
}, },
circle: { circle: {
type: Boolean, type: Boolean,
default: false, default: false,
description: "Whether badge is circle" description: 'Whether badge is circle',
}, },
icon: { icon: {
type: String, type: String,
default: "", default: '',
description: "Icon name. Will be overwritten by slot if slot is used" description: 'Icon name. Will be overwritten by slot if slot is used',
}, },
type: { type: {
type: String, type: String,
default: "default", default: 'default',
description: "Badge type (primary|info|danger|default|warning|success)" description: 'Badge type (primary|info|danger|default|warning|success)',
}, },
size: { size: {
type: String, type: String,
description: 'Badge size (md, lg)', description: 'Badge size (md, lg)',
default: '' default: '',
} },
} },
}; }
</script> </script>
<style> <style></style>
</style>

84
frontend/src/components/BaseAlert.vue
View File

@ -8,7 +8,6 @@
> >
<slot v-if="!dismissible"></slot> <slot v-if="!dismissible"></slot>
<template v-else> <template v-else>
<template v-if="icon || $slots.icon"> <template v-if="icon || $slots.icon">
<slot name="icon"> <slot name="icon">
<span class="alert-icon" data-notify="icon"> <span class="alert-icon" data-notify="icon">
@ -17,14 +16,16 @@
</slot> </slot>
</template> </template>
<span class="alert-text"> <slot></slot> </span> <span class="alert-text"><slot></slot></span>
<slot name="dismiss-icon"> <slot name="dismiss-icon">
<button type="button" <button
class="close" type="button"
data-dismiss="alert" class="close"
aria-label="Close" data-dismiss="alert"
@click="dismissAlert"> aria-label="Close"
@click="dismissAlert"
>
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</slot> </slot>
@ -33,44 +34,43 @@
</fade-transition> </fade-transition>
</template> </template>
<script> <script>
import { FadeTransition } from 'vue2-transitions'; import { FadeTransition } from 'vue2-transitions'
export default { export default {
name: 'base-alert', name: 'base-alert',
components: { components: {
FadeTransition FadeTransition,
},
created() {
//console.log('base-alert gesetzt in =>', this.$route.path)
},
props: {
type: {
type: String,
default: 'default',
description: 'Alert type',
}, },
created() { dismissible: {
console.log("base-alert gesetzt in =>", this.$route.path ) type: Boolean,
default: false,
description: 'Whether alert is dismissible (closeable)',
}, },
props: { icon: {
type: { type: String,
type: String, default: '',
default: 'default', description: 'Alert icon to display',
description: 'Alert type'
},
dismissible: {
type: Boolean,
default: false,
description: 'Whether alert is dismissible (closeable)'
},
icon: {
type: String,
default: '',
description: 'Alert icon to display'
}
}, },
data() { },
return { data() {
visible: true return {
}; visible: true,
},
methods: {
dismissAlert() {
console.log("sdddddddddddddddddddddddd")
this.visible = false;
this.$store.state.loginfail = false;
}
} }
}; },
methods: {
dismissAlert() {
this.visible = false
this.$store.state.loginfail = false
},
},
}
</script> </script>

36
frontend/src/components/BaseButton.vue
View File

@ -12,7 +12,7 @@
{ 'btn-wd': wide }, { 'btn-wd': wide },
{ 'btn-icon btn-fab': icon }, { 'btn-icon btn-fab': icon },
{ 'btn-link': link }, { 'btn-link': link },
{ disabled: disabled } { disabled: disabled },
]" ]"
> >
<slot name="loading"> <slot name="loading">
@ -34,42 +34,42 @@ export default {
type: { type: {
type: String, type: String,
default: 'default', default: 'default',
description: 'Button type (primary|secondary|danger etc)' description: 'Button type (primary|secondary|danger etc)',
}, },
nativeType: { nativeType: {
type: String, type: String,
default: 'button', default: 'button',
description: 'Button native type (e.g button, input etc)' description: 'Button native type (e.g button, input etc)',
}, },
size: { size: {
type: String, type: String,
default: '', default: '',
description: 'Button size (sm|lg)' description: 'Button size (sm|lg)',
}, },
outline: { outline: {
type: Boolean, type: Boolean,
description: 'Whether button is outlined (only border has color)' description: 'Whether button is outlined (only border has color)',
}, },
link: { link: {
type: Boolean, type: Boolean,
description: 'Whether button is a link (no borders or background)' description: 'Whether button is a link (no borders or background)',
} },
}, },
methods: { methods: {
handleClick(evt) { handleClick(evt) {
this.$emit('click', evt); this.$emit('click', evt)
} },
} },
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.base-button { .base-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
i { i {
padding: 0 3px; padding: 0 3px;
}
} }
}
</style> </style>

49
frontend/src/components/BaseDropdown.vue
View File

@ -9,22 +9,19 @@
<component <component
:is="titleTag" :is="titleTag"
class="btn-rotate" class="btn-rotate"
:class="[{'dropdown-toggle': hasToggle}, titleClasses]" :class="[{ 'dropdown-toggle': hasToggle }, titleClasses]"
:aria-expanded="isOpen" :aria-expanded="isOpen"
data-toggle="dropdown" data-toggle="dropdown"
> >
<slot name="title" :is-open="isOpen"> <slot name="title" :is-open="isOpen">
<i :class="icon"></i> {{ title }} <i :class="icon"></i>
{{ title }}
</slot> </slot>
</component> </component>
</slot> </slot>
<ul <ul
class="dropdown-menu" class="dropdown-menu"
:class="[ :class="[{ show: isOpen }, { 'dropdown-menu-right': menuOnRight }, menuClasses]"
{ show: isOpen },
{ 'dropdown-menu-right': menuOnRight },
menuClasses
]"
> >
<slot></slot> <slot></slot>
</ul> </ul>
@ -37,60 +34,60 @@ export default {
tag: { tag: {
type: String, type: String,
default: 'div', default: 'div',
description: 'Dropdown html tag (e.g div, ul etc)' description: 'Dropdown html tag (e.g div, ul etc)',
}, },
titleTag: { titleTag: {
type: String, type: String,
default: 'button', default: 'button',
description: 'Dropdown title (toggle) html tag' description: 'Dropdown title (toggle) html tag',
}, },
title: { title: {
type: String, type: String,
description: 'Dropdown title' description: 'Dropdown title',
}, },
direction: { direction: {
type: String, type: String,
default: 'down', // up | down default: 'down', // up | down
description: 'Dropdown menu direction (up|down)' description: 'Dropdown menu direction (up|down)',
}, },
icon: { icon: {
type: String, type: String,
description: 'Dropdown icon' description: 'Dropdown icon',
}, },
titleClasses: { titleClasses: {
type: [String, Object, Array], type: [String, Object, Array],
description: 'Title css classes' description: 'Title css classes',
}, },
menuClasses: { menuClasses: {
type: [String, Object], type: [String, Object],
description: 'Menu css classes' description: 'Menu css classes',
}, },
menuOnRight: { menuOnRight: {
type: Boolean, type: Boolean,
description: 'Whether menu should appear on the right' description: 'Whether menu should appear on the right',
}, },
hasToggle: { hasToggle: {
type: Boolean, type: Boolean,
description: 'Whether dropdown has arrow icon shown', description: 'Whether dropdown has arrow icon shown',
default: true default: true,
} },
}, },
data() { data() {
return { return {
isOpen: false isOpen: false,
}; }
}, },
methods: { methods: {
toggleDropDown() { toggleDropDown() {
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen
this.$emit('change', this.isOpen); this.$emit('change', this.isOpen)
}, },
closeDropDown() { closeDropDown() {
this.isOpen = false; this.isOpen = false
this.$emit('change', false); this.$emit('change', false)
} },
} },
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dropdown { .dropdown {

29
frontend/src/components/BaseHeader.vue
View File

@ -1,23 +1,22 @@
<template> <template>
<div class="header" :class="{[`bg-${type}`]: type}"> <div class="header" :class="{ [`bg-${type}`]: type }">
<b-container fluid> <b-container fluid>
<div class="header-body"> <div class="header-body">
<slot></slot> <slot></slot>
</div> </div>
</b-container> </b-container>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'base-header', name: 'base-header',
props: { props: {
type: { type: {
type: String, type: String,
default: 'success', default: 'success',
description: 'Header background type' description: 'Header background type',
} },
} },
} }
</script> </script>
<style> <style></style>
</style>

43
frontend/src/components/BasePagination.vue
View File

@ -1,14 +1,27 @@
<template> <template>
<div> <div>
<b-pagination first-number last-number :per-page="perPage" :size="size" :value="value" @change="(val) => $emit('change', val)" :align="align" :total-rows="total"> <b-pagination
first-number
last-number
:per-page="perPage"
:size="size"
:value="value"
@change="(val) => $emit('change', val)"
:align="align"
:total-rows="total"
>
<template v-slot:prev-text> <template v-slot:prev-text>
<a class="page-link" aria-label="Previous"> <a class="page-link" aria-label="Previous">
<span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span> <span aria-hidden="true">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</span>
</a> </a>
</template> </template>
<template v-slot:next-text> <template v-slot:next-text>
<a class="page-link" aria-label="Next"> <a class="page-link" aria-label="Next">
<span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span> <span aria-hidden="true">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</a> </a>
</template> </template>
</b-pagination> </b-pagination>
@ -16,41 +29,39 @@
</template> </template>
<script> <script>
export default { export default {
name: "base-pagination", name: 'base-pagination',
props: { props: {
pageCount: { pageCount: {
type: Number, type: Number,
default: 0, default: 0,
description: description: 'Pagination page count. This should be specified in combination with perPage',
"Pagination page count. This should be specified in combination with perPage"
}, },
perPage: { perPage: {
type: Number, type: Number,
default: 10, default: 10,
description: description: 'Pagination per page. Should be specified with total or pageCount',
"Pagination per page. Should be specified with total or pageCount"
}, },
total: { total: {
type: Number, type: Number,
default: 0, default: 0,
description: description:
"Can be specified instead of pageCount. The page count in this case will be total/perPage" 'Can be specified instead of pageCount. The page count in this case will be total/perPage',
}, },
value: { value: {
type: Number, type: Number,
default: 1, default: 1,
description: "Pagination value" description: 'Pagination value',
}, },
size: { size: {
type: String, type: String,
default: "", default: '',
description: "Pagination size" description: 'Pagination size',
}, },
align: { align: {
type: String, type: String,
default: "", default: '',
description: "Pagination alignment (e.g center|start|end)" description: 'Pagination alignment (e.g center|start|end)',
} },
}, },
}; }
</script> </script>

125
frontend/src/components/BaseProgress.vue
View File

@ -3,82 +3,77 @@
<div :class="`progress-${type}`" v-if="showLabel"> <div :class="`progress-${type}`" v-if="showLabel">
<div class="progress-label"> <div class="progress-label">
<slot name="label"> <slot name="label">
<span>{{label}}</span> <span>{{ label }}</span>
</slot> </slot>
</div> </div>
<div class="progress-percentage"> <div class="progress-percentage">
<slot> <slot>
<span>{{value}}%</span> <span>{{ value }}%</span>
</slot> </slot>
</div> </div>
</div> </div>
<b-progress <b-progress :size="size" :class="[progressClasses]" :style="`height: ${height}px`">
:size="size"
:class="[progressClasses]"
:style="`height: ${height}px`">
<b-progress-bar :class="computedClasses" :value="value"></b-progress-bar> <b-progress-bar :class="computedClasses" :value="value"></b-progress-bar>
</b-progress> </b-progress>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "base-progress", name: 'base-progress',
props: { props: {
striped: { striped: {
type: Boolean, type: Boolean,
description: "Whether progress is striped" description: 'Whether progress is striped',
},
animated: {
type: Boolean,
description:
"Whether progress is animated (works only with `striped` prop together)"
},
label: {
type: String,
description: "Progress label (shown on the left above progress)"
},
height: {
type: Number,
default: 3,
description: "Progress line height"
},
type: {
type: String,
default: "default",
description: "Progress type (e.g danger, primary etc)"
},
showLabel: {
type: Boolean,
default: false
},
progressClasses: {
type: [Array, String],
default: '',
description: 'Progress css classes'
},
size: {
type: String,
default: ''
},
value: {
type: Number,
default: 0,
validator: value => {
return value >= 0 && value <= 100;
},
description: "Progress value"
}
}, },
computed: { animated: {
computedClasses() { type: Boolean,
return [ description: 'Whether progress is animated (works only with `striped` prop together)',
{ "progress-bar-striped": this.striped }, },
{ "progress-bar-animated": this.animated }, label: {
{ [`bg-${this.type}`]: this.type } type: String,
]; description: 'Progress label (shown on the left above progress)',
} },
} height: {
}; type: Number,
default: 3,
description: 'Progress line height',
},
type: {
type: String,
default: 'default',
description: 'Progress type (e.g danger, primary etc)',
},
showLabel: {
type: Boolean,
default: false,
},
progressClasses: {
type: [Array, String],
default: '',
description: 'Progress css classes',
},
size: {
type: String,
default: '',
},
value: {
type: Number,
default: 0,
validator: (value) => {
return value >= 0 && value <= 100
},
description: 'Progress value',
},
},
computed: {
computedClasses() {
return [
{ 'progress-bar-striped': this.striped },
{ 'progress-bar-animated': this.animated },
{ [`bg-${this.type}`]: this.type },
]
},
},
}
</script> </script>
<style> <style></style>
</style>

62
frontend/src/components/BaseSlider.vue
View File

@ -2,56 +2,55 @@
<div class="slider" :disabled="disabled"></div> <div class="slider" :disabled="disabled"></div>
</template> </template>
<script> <script>
import noUiSlider from 'nouislider'; import noUiSlider from 'nouislider'
export default { export default {
name: 'base-slider', name: 'base-slider',
props: { props: {
value: { value: {
type: [String, Array, Number], type: [String, Array, Number],
description: 'slider value' description: 'slider value',
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false,
description: 'whether the slider is disabled' description: 'whether the slider is disabled',
}, },
start: { start: {
type: [Number, Array], type: [Number, Array],
default: 0, default: 0,
description: description:
'[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)' '[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)',
}, },
connect: { connect: {
type: [Boolean, Array], type: [Boolean, Array],
default: () => [true, false], default: () => [true, false],
description: description:
'[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)' '[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)',
}, },
range: { range: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
min: 0, min: 0,
max: 100 max: 100,
}; }
}, },
description: description:
'[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)' '[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)',
}, },
options: { options: {
type: Object, type: Object,
default: () => { default: () => {
return {}; return {}
}, },
description: description: '[noUi Slider options](https://refreshless.com/nouislider/slider-options/)',
'[noUi Slider options](https://refreshless.com/nouislider/slider-options/)' },
}
}, },
data() { data() {
return { return {
slider: null slider: null,
}; }
}, },
methods: { methods: {
createSlider() { createSlider() {
@ -59,38 +58,35 @@ export default {
start: this.value || this.start, start: this.value || this.start,
connect: Array.isArray(this.value) ? true : this.connect, connect: Array.isArray(this.value) ? true : this.connect,
range: this.range, range: this.range,
...this.options ...this.options,
}); })
const slider = this.$el.noUiSlider; const slider = this.$el.noUiSlider
slider.on('slide', () => { slider.on('slide', () => {
let value = slider.get(); let value = slider.get()
if (value !== this.value) { if (value !== this.value) {
this.$emit('input', value); this.$emit('input', value)
} }
}); })
} },
}, },
mounted() { mounted() {
this.createSlider(); this.createSlider()
}, },
watch: { watch: {
value(newValue, oldValue) { value(newValue, oldValue) {
const slider = this.$el.noUiSlider; const slider = this.$el.noUiSlider
const sliderValue = slider.get(); const sliderValue = slider.get()
if (newValue !== oldValue && sliderValue !== newValue) { if (newValue !== oldValue && sliderValue !== newValue) {
if (Array.isArray(sliderValue) && Array.isArray(newValue)) { if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
if ( if (oldValue.length === newValue.length && oldValue.every((v, i) => v === newValue[i])) {
oldValue.length === newValue.length && slider.set(newValue)
oldValue.every((v, i) => v === newValue[i])
) {
slider.set(newValue);
} }
} else { } else {
slider.set(newValue); slider.set(newValue)
} }
} }
} },
} },
}; }
</script> </script>
<style></style> <style></style>

31
frontend/src/components/BaseTable.vue
View File

@ -10,10 +10,7 @@
<tbody :class="tbodyClasses"> <tbody :class="tbodyClasses">
<tr v-for="(item, index) in data" :key="index"> <tr v-for="(item, index) in data" :key="index">
<slot :row="item" :index="index"> <slot :row="item" :index="index">
<td <td v-for="(column, index) in columns" :key="index">
v-for="(column, index) in columns"
:key="index"
>
{{ itemValue(item, column) }} {{ itemValue(item, column) }}
</td> </td>
</slot> </slot>
@ -28,42 +25,42 @@ export default {
columns: { columns: {
type: Array, type: Array,
default: () => [], default: () => [],
description: 'Table columns' description: 'Table columns',
}, },
data: { data: {
type: Array, type: Array,
default: () => [], default: () => [],
description: 'Table data' description: 'Table data',
}, },
type: { type: {
type: String, // striped | hover type: String, // striped | hover
default: '', default: '',
description: 'Whether table is striped or hover type' description: 'Whether table is striped or hover type',
}, },
theadClasses: { theadClasses: {
type: String, type: String,
default: '', default: '',
description: '<thead> css classes' description: '<thead> css classes',
}, },
tbodyClasses: { tbodyClasses: {
type: String, type: String,
default: '', default: '',
description: '<tbody> css classes' description: '<tbody> css classes',
} },
}, },
computed: { computed: {
tableClass() { tableClass() {
return this.type && `table-${this.type}`; return this.type && `table-${this.type}`
} },
}, },
methods: { methods: {
hasValue(item, column) { hasValue(item, column) {
return item[column.toLowerCase()] !== 'undefined'; return item[column.toLowerCase()] !== 'undefined'
}, },
itemValue(item, column) { itemValue(item, column) {
return item[column.toLowerCase()]; return item[column.toLowerCase()]
} },
} },
}; }
</script> </script>
<style></style> <style></style>

13
frontend/src/components/Breadcrumb/Breadcrumb.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<b-breadcrumb <b-breadcrumb :class="[{ [`bg-${type}`]: type }, listClasses]">
:class="[{[`bg-${type}`]: type}, listClasses]">
<slot></slot> <slot></slot>
</b-breadcrumb> </b-breadcrumb>
</nav> </nav>
@ -13,14 +12,14 @@ export default {
type: { type: {
type: String, type: String,
default: '', default: '',
description: 'Breadcrumb background type' description: 'Breadcrumb background type',
}, },
listClasses: { listClasses: {
type: [String, Object], type: [String, Object],
default: '', default: '',
description: 'Breadcrumb list classes' description: 'Breadcrumb list classes',
} },
} },
}; }
</script> </script>
<style></style> <style></style>

8
frontend/src/components/Breadcrumb/BreadcrumbItem.vue
View File

@ -10,9 +10,9 @@ export default {
active: { active: {
type: Boolean, type: Boolean,
default: false, default: false,
description: 'Whether breadcrumb item is active' description: 'Whether breadcrumb item is active',
} },
} },
}; }
</script> </script>
<style></style> <style></style>

47
frontend/src/components/Breadcrumb/RouteBreadcrumb.vue
View File

@ -1,43 +1,40 @@
<template> <template>
<bread-crumb list-classes="breadcrumb-links breadcrumb-dark"> <bread-crumb list-classes="breadcrumb-links breadcrumb-dark">
<BreadCrumbItem> <bread-crumb-item>
<router-link to="/overview"> <router-link to="/overview">
<i class="fas fa-home"></i> <i class="fas fa-home"></i>
</router-link> </router-link>
</BreadCrumbItem> </bread-crumb-item>
<BreadCrumbItem <bread-crumb-item
v-for="(route, index) in $route.matched.slice()" v-for="(route, index) in $route.matched.slice()"
:key="route.name" :key="route.name"
:active="index === $route.matched.length - 1" :active="index === $route.matched.length - 1"
style="display:inline-block" style="display: inline-block"
> >
<router-link <router-link :to="{ name: route.name }" v-if="index < $route.matched.length - 1">
:to="{ name: route.name }"
v-if="index < $route.matched.length - 1"
>
{{ route.name }} {{ route.name }}
</router-link> </router-link>
<span v-else>{{ route.name }}</span> <span v-else>{{ route.name }}</span>
</BreadCrumbItem> </bread-crumb-item>
</bread-crumb> </bread-crumb>
</template> </template>
<script> <script>
import BreadCrumb from './Breadcrumb'; import BreadCrumb from './Breadcrumb'
import BreadCrumbItem from './BreadcrumbItem'; import BreadCrumbItem from './BreadcrumbItem'
export default { export default {
name: 'route-breadcrumb', name: 'route-breadcrumb',
components: { components: {
BreadCrumb, BreadCrumb,
BreadCrumbItem BreadCrumbItem,
},
methods: {
getBreadName(route) {
return route.name
}, },
methods: { },
getBreadName(route) { }
return route.name;
}
}
};
</script> </script>
<style scoped></style> <style scoped></style>

53
frontend/src/components/ButtonCheckbox.vue
View File

@ -1,39 +1,38 @@
<template> <template>
<div class="btn-group-toggle" data-toggle="buttons"> <div class="btn-group-toggle" data-toggle="buttons">
<label class="btn" :class="[{ active: value }, buttonClasses]"> <label class="btn" :class="[{ active: value }, buttonClasses]">
<input v-model="model" type="checkbox" checked="" autocomplete="off"> <input v-model="model" type="checkbox" checked="" autocomplete="off" />
<slot></slot> <slot></slot>
</label> </label>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'button-checkbox', name: 'button-checkbox',
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
description: 'Checked value' description: 'Checked value',
},
buttonClasses: {
type: [String, Object],
description: 'Inner button css classes'
}
}, },
buttonClasses: {
type: [String, Object],
description: 'Inner button css classes',
},
},
model: {
prop: 'value',
event: 'change',
},
computed: {
model: { model: {
prop: 'value', get() {
event: 'change' return this.value
},
set(val) {
this.$emit('change', val)
},
}, },
computed: { },
model: { }
get() {
return this.value
},
set(val) {
this.$emit('change', val)
}
}
}
}
</script> </script>
<style> <style></style>
</style>

82
frontend/src/components/ButtonRadioGroup.vue
View File

@ -1,47 +1,55 @@
<template> <template>
<div class="btn-group-toggle" data-toggle="buttons"> <div class="btn-group-toggle" data-toggle="buttons">
<label v-for="(option, index) in options" <label
:key="index" v-for="(option, index) in options"
class="btn" :key="index"
:class="[{ active: value === option.value }, buttonClasses]"> class="btn"
<input :value="option.value" v-model="model" type="radio" id="option1" autocomplete="off" checked=""> :class="[{ active: value === option.value }, buttonClasses]"
{{option.label}} >
<input
:value="option.value"
v-model="model"
type="radio"
id="option1"
autocomplete="off"
checked=""
/>
{{ option.label }}
</label> </label>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'button-radio-group', name: 'button-radio-group',
props: { props: {
options: { options: {
type: Array, type: Array,
description: 'Radio options. Should be an array of objects {value: "", label: ""}', description: 'Radio options. Should be an array of objects {value: "", label: ""}',
default: () => [] default: () => [],
},
value: {
type: String,
description: 'Radio value'
},
buttonClasses: {
type: [String, Object],
description: 'Inner button css classes'
}
}, },
value: {
type: String,
description: 'Radio value',
},
buttonClasses: {
type: [String, Object],
description: 'Inner button css classes',
},
},
model: {
prop: 'value',
event: 'change',
},
computed: {
model: { model: {
prop: 'value', get() {
event: 'change' return this.value
},
set(val) {
this.$emit('change', val)
},
}, },
computed: { },
model: { }
get() {
return this.value
},
set(val) {
this.$emit('change', val)
}
}
}
}
</script> </script>
<style> <style></style>
</style>

108
frontend/src/components/Cards/Card.vue
View File

@ -1,18 +1,17 @@
<template> <template>
<b-card <b-card
no-body no-body
:class="[ :class="[
{'card-lift--hover': hover}, { 'card-lift--hover': hover },
{'shadow': shadow}, { shadow: shadow },
{[`shadow-${shadowSize}`]: shadowSize}, { [`shadow-${shadowSize}`]: shadowSize },
{[`bg-gradient-${gradient}`]: gradient}, { [`bg-gradient-${gradient}`]: gradient },
{[`bg-${type}`]: type} { [`bg-${type}`]: type },
]"> ]"
>
<slot name="image"></slot> <slot name="image"></slot>
<b-card-header :class="headerClasses" v-if="$slots.header"> <b-card-header :class="headerClasses" v-if="$slots.header">
<slot name="header"> <slot name="header"></slot>
</slot>
</b-card-header> </b-card-header>
<b-card-body :class="bodyClasses" v-if="!noBody"> <b-card-body :class="bodyClasses" v-if="!noBody">
<slot></slot> <slot></slot>
@ -26,48 +25,47 @@
</b-card> </b-card>
</template> </template>
<script> <script>
export default { export default {
name: "card", name: 'card',
props: { props: {
type: { type: {
type: String, type: String,
description: "Card type" description: 'Card type',
}, },
gradient: { gradient: {
type: String, type: String,
description: "Card background gradient type (warning,danger etc)" description: 'Card background gradient type (warning,danger etc)',
}, },
hover: { hover: {
type: Boolean, type: Boolean,
description: "Whether card should move on hover" description: 'Whether card should move on hover',
}, },
shadow: { shadow: {
type: Boolean, type: Boolean,
description: "Whether card has shadow" description: 'Whether card has shadow',
}, },
shadowSize: { shadowSize: {
type: String, type: String,
description: "Card shadow size" description: 'Card shadow size',
}, },
noBody: { noBody: {
type: Boolean, type: Boolean,
default: false, default: false,
description: "Whether card should have wrapper body class" description: 'Whether card should have wrapper body class',
}, },
bodyClasses: { bodyClasses: {
type: [String, Object, Array], type: [String, Object, Array],
description: "Card body css classes" description: 'Card body css classes',
}, },
headerClasses: { headerClasses: {
type: [String, Object, Array], type: [String, Object, Array],
description: "Card header css classes" description: 'Card header css classes',
}, },
footerClasses: { footerClasses: {
type: [String, Object, Array], type: [String, Object, Array],
description: "Card footer css classes" description: 'Card footer css classes',
} },
} },
}; }
</script> </script>
<style> <style></style>
</style>

57
frontend/src/components/Cards/StatsCard.vue
View File

@ -1,57 +1,58 @@
<template> <template>
<card class="card-stats" :show-footer-line="true"> <card class="card-stats" :show-footer-line="true">
<b-row> <b-row>
<b-col> <b-col>
<slot> <slot>
<h5 class="card-title text-uppercase text-muted mb-0" v-if="title">{{title}}</h5> <h5 class="card-title text-uppercase text-muted mb-0" v-if="title">
<span class="h2 font-weight-bold mb-0" v-if="subTitle">{{subTitle}}</span> {{ title }}
</h5>
<span class="h2 font-weight-bold mb-0" v-if="subTitle">
{{ subTitle }}
</span>
</slot> </slot>
</b-col> </b-col>
<b-col cols="auto" v-if="$slots.icon || icon"> <b-col cols="auto" v-if="$slots.icon || icon">
<slot name="icon"> <slot name="icon">
<div class="icon icon-shape text-white rounded-circle shadow" <div
:class="[`bg-${type}`, iconClasses]"> class="icon icon-shape text-white rounded-circle shadow"
:class="[`bg-${type}`, iconClasses]"
>
<i :class="icon"></i> <i :class="icon"></i>
</div> </div>
</slot> </slot>
</b-col> </b-col>
<b-col cols="auto" v-if="$slots.img || img"> <b-col cols="auto" v-if="$slots.img || img">
<slot name="img"> <slot name="img">
<img :src="img" width="80" /> <img :src="img" width="80" />
</slot> </slot>
</b-col> </b-col>
</b-row> </b-row>
<p class="mt-3 mb-0 text-sm"> <p class="mt-3 mb-0 text-sm">
<slot name="footer"> <slot name="footer"></slot>
</slot>
</p> </p>
</card> </card>
</template> </template>
<script> <script>
import Card from './Card.vue'; import Card from './Card.vue'
export default { export default {
name: 'stats-card', name: 'stats-card',
components: { components: {
Card Card,
},
props: {
type: {
type: String,
default: 'primary',
}, },
props: { icon: String,
type: { img: String,
type: String, title: String,
default: 'primary' subTitle: String,
}, iconClasses: [String, Array],
icon: String, },
img: String, }
title: String,
subTitle: String,
iconClasses: [String, Array]
}
};
</script> </script>
<style></style> <style></style>

22
frontend/src/components/Charts/BarChart.js
View File

@ -1,5 +1,5 @@
import { Bar, mixins } from 'vue-chartjs'; import { Bar, mixins } from 'vue-chartjs'
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin"; import globalOptionsMixin from '@/components/Charts/globalOptionsMixin'
export default { export default {
name: 'bar-chart', name: 'bar-chart',
@ -8,23 +8,23 @@ export default {
props: { props: {
extraOptions: { extraOptions: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
} },
}, },
data() { data() {
return { return {
ctx: null ctx: null,
}; }
}, },
mounted() { mounted() {
this.$watch( this.$watch(
'chartData', 'chartData',
(newVal, oldVal) => { (newVal, oldVal) => {
if (!oldVal) { if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions); this.renderChart(this.chartData, this.extraOptions)
} }
}, },
{ immediate: true } { immediate: true },
); )
} },
}; }

22
frontend/src/components/Charts/LineChart.js
View File

@ -1,5 +1,5 @@
import { Line, mixins } from 'vue-chartjs'; import { Line, mixins } from 'vue-chartjs'
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin"; import globalOptionsMixin from '@/components/Charts/globalOptionsMixin'
export default { export default {
name: 'line-chart', name: 'line-chart',
extends: Line, extends: Line,
@ -7,23 +7,23 @@ export default {
props: { props: {
extraOptions: { extraOptions: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
} },
}, },
data() { data() {
return { return {
ctx: null ctx: null,
}; }
}, },
mounted() { mounted() {
this.$watch( this.$watch(
'chartData', 'chartData',
(newVal, oldVal) => { (newVal, oldVal) => {
if (!oldVal) { if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions); this.renderChart(this.chartData, this.extraOptions)
} }
}, },
{ immediate: true } { immediate: true },
); )
} },
}; }

159
frontend/src/components/Charts/config.js
View File

@ -1,10 +1,10 @@
import { parseOptions } from "@/components/Charts/optionHelpers"; import { parseOptions } from '@/components/Charts/optionHelpers'
import Chart from 'chart.js' import Chart from 'chart.js'
export const Charts = { export const Charts = {
mode: 'light',//(themeMode) ? themeMode : 'light'; mode: 'light', //(themeMode) ? themeMode : 'light';
fonts: { fonts: {
base: 'Open Sans' base: 'Open Sans',
}, },
colors: { colors: {
gray: { gray: {
@ -16,114 +16,115 @@ export const Charts = {
600: '#8898aa', 600: '#8898aa',
700: '#525f7f', 700: '#525f7f',
800: '#32325d', 800: '#32325d',
900: '#212529' 900: '#212529',
}, },
theme: { theme: {
'default': '#172b4d', default: '#172b4d',
'primary': '#5e72e4', primary: '#5e72e4',
'secondary': '#f4f5f7', secondary: '#f4f5f7',
'info': '#11cdef', info: '#11cdef',
'success': '#2dce89', success: '#2dce89',
'danger': '#f5365c', danger: '#f5365c',
'warning': '#fb6340' warning: '#fb6340',
}, },
black: '#12263F', black: '#12263F',
white: '#FFFFFF', white: '#FFFFFF',
transparent: 'transparent', transparent: 'transparent',
} },
}; }
function chartOptions() { function chartOptions() {
let { colors, mode, fonts } = Charts; let { colors, mode, fonts } = Charts
// Options // Options
let options = { let options = {
defaults: { defaults: {
global: { global: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
defaultColor: (mode === 'dark') ? colors.gray[700] : colors.gray[600], defaultColor: mode === 'dark' ? colors.gray[700] : colors.gray[600],
defaultFontColor: (mode === 'dark') ? colors.gray[700] : colors.gray[600], defaultFontColor: mode === 'dark' ? colors.gray[700] : colors.gray[600],
defaultFontFamily: fonts.base, defaultFontFamily: fonts.base,
defaultFontSize: 13, defaultFontSize: 13,
layout: { layout: {
padding: 0 padding: 0,
}, },
legend: { legend: {
display: false, display: false,
position: 'bottom', position: 'bottom',
labels: { labels: {
usePointStyle: true, usePointStyle: true,
padding: 16 padding: 16,
} },
}, },
elements: { elements: {
point: { point: {
radius: 0, radius: 0,
backgroundColor: colors.theme['primary'] backgroundColor: colors.theme['primary'],
}, },
line: { line: {
tension: .4, tension: 0.4,
borderWidth: 4, borderWidth: 4,
borderColor: colors.theme['primary'], borderColor: colors.theme['primary'],
backgroundColor: colors.transparent, backgroundColor: colors.transparent,
borderCapStyle: 'rounded' borderCapStyle: 'rounded',
}, },
rectangle: { rectangle: {
backgroundColor: colors.theme['warning'] backgroundColor: colors.theme['warning'],
}, },
arc: { arc: {
backgroundColor: colors.theme['primary'], backgroundColor: colors.theme['primary'],
borderColor: (mode == 'dark') ? colors.gray[800] : colors.white, borderColor: mode == 'dark' ? colors.gray[800] : colors.white,
borderWidth: 4 borderWidth: 4,
} },
}, },
tooltips: { tooltips: {
enabled: true, enabled: true,
mode: 'index', mode: 'index',
intersect: false, intersect: false,
} },
}, },
pie: { pie: {
tooltips: { tooltips: {
mode: 'point' mode: 'point',
} },
}, },
doughnut: { doughnut: {
tooltips: { tooltips: {
mode: 'point' mode: 'point',
}, },
cutoutPercentage: 83, cutoutPercentage: 83,
legendCallback: function (chart) { legendCallback: function (chart) {
let data = chart.data; let data = chart.data
let content = ''; let content = ''
data.labels.forEach(function (label, index) { data.labels.forEach(function (label, index) {
let bgColor = data.datasets[0].backgroundColor[index]; let bgColor = data.datasets[0].backgroundColor[index]
content += '<span class="chart-legend-item">'; content += '<span class="chart-legend-item">'
content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>'; content +=
content += label; '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>'
content += '</span>'; content += label
}); content += '</span>'
})
return content; return content
} },
} },
} },
}; }
// yAxes // yAxes
Chart.scaleService.updateScaleDefaults('linear', { Chart.scaleService.updateScaleDefaults('linear', {
gridLines: { gridLines: {
borderDash: [2], borderDash: [2],
borderDashOffset: [2], borderDashOffset: [2],
color: (mode === 'dark') ? colors.gray[900] : colors.gray[200], color: mode === 'dark' ? colors.gray[900] : colors.gray[200],
drawBorder: false, drawBorder: false,
drawTicks: true, drawTicks: true,
zeroLineWidth: 1, zeroLineWidth: 1,
zeroLineColor: (mode === 'dark') ? colors.gray[900] : colors.gray[200], zeroLineColor: mode === 'dark' ? colors.gray[900] : colors.gray[200],
zeroLineBorderDash: [2], zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2] zeroLineBorderDashOffset: [2],
}, },
ticks: { ticks: {
beginAtZero: true, beginAtZero: true,
@ -132,9 +133,9 @@ function chartOptions() {
if (!(value % 10)) { if (!(value % 10)) {
return value return value
} }
} },
} },
}); })
// xAxes // xAxes
Chart.scaleService.updateScaleDefaults('category', { Chart.scaleService.updateScaleDefaults('category', {
@ -146,13 +147,13 @@ function chartOptions() {
zeroLineWidth: 1, zeroLineWidth: 1,
}, },
ticks: { ticks: {
padding: 20 padding: 20,
}, },
maxBarThickness: 10 maxBarThickness: 10,
}); })
return options; return options
}; }
let initialized = false let initialized = false
@ -160,27 +161,29 @@ export function initGlobalOptions() {
if (initialized) { if (initialized) {
return return
} }
parseOptions(Chart, chartOptions()); parseOptions(Chart, chartOptions())
initialized = true initialized = true
} }
export const basicOptions = { export const basicOptions = {
maintainAspectRatio: false, maintainAspectRatio: false,
legend: { legend: {
display: false display: false,
}, },
responsive: true responsive: true,
}; }
export let blueChartOptions = { export let blueChartOptions = {
scales: { scales: {
yAxes: [{ yAxes: [
gridLines: { {
color: Charts.colors.gray[700], gridLines: {
zeroLineColor: Charts.colors.gray[700] color: Charts.colors.gray[700],
} zeroLineColor: Charts.colors.gray[700],
}] },
} },
}; ],
},
}
export let lineChartOptionsBlue = { export let lineChartOptionsBlue = {
...basicOptions, ...basicOptions,
@ -192,7 +195,7 @@ export let lineChartOptionsBlue = {
xPadding: 12, xPadding: 12,
mode: 'nearest', mode: 'nearest',
intersect: 0, intersect: 0,
position: 'nearest' position: 'nearest',
}, },
responsive: true, responsive: true,
scales: { scales: {
@ -202,15 +205,15 @@ export let lineChartOptionsBlue = {
gridLines: { gridLines: {
drawBorder: false, drawBorder: false,
color: 'rgba(29,140,248,0.0)', color: 'rgba(29,140,248,0.0)',
zeroLineColor: 'transparent' zeroLineColor: 'transparent',
}, },
ticks: { ticks: {
suggestedMin: 60, suggestedMin: 60,
suggestedMax: 125, suggestedMax: 125,
padding: 20, padding: 20,
fontColor: '#9e9e9e' fontColor: '#9e9e9e',
} },
} },
], ],
xAxes: [ xAxes: [
@ -219,13 +222,13 @@ export let lineChartOptionsBlue = {
gridLines: { gridLines: {
drawBorder: false, drawBorder: false,
color: 'rgba(29,140,248,0.1)', color: 'rgba(29,140,248,0.1)',
zeroLineColor: 'transparent' zeroLineColor: 'transparent',
}, },
ticks: { ticks: {
padding: 20, padding: 20,
fontColor: '#9e9e9e' fontColor: '#9e9e9e',
} },
} },
] ],
} },
}; }

6
frontend/src/components/Charts/globalOptionsMixin.js
View File

@ -1,7 +1,7 @@
import { initGlobalOptions } from "@/components/Charts/config"; import { initGlobalOptions } from '@/components/Charts/config'
import './roundedCornersExtension' import './roundedCornersExtension'
export default { export default {
mounted() { mounted() {
initGlobalOptions(); initGlobalOptions()
} },
} }

4
frontend/src/components/Charts/optionHelpers.js
View File

@ -2,9 +2,9 @@
export function parseOptions(parent, options) { export function parseOptions(parent, options) {
for (let item in options) { for (let item in options) {
if (typeof options[item] !== 'object') { if (typeof options[item] !== 'object') {
parent[item] = options[item]; parent[item] = options[item]
} else { } else {
parseOptions(parent[item], options[item]); parseOptions(parent[item], options[item])
} }
} }
} }

132
frontend/src/components/Charts/roundedCornersExtension.js
View File

@ -3,64 +3,63 @@
// Code from: https://codepen.io/jedtrow/full/ygRYgo // Code from: https://codepen.io/jedtrow/full/ygRYgo
// //
import Chart from 'chart.js' import Chart from 'chart.js'
Chart.elements.Rectangle.prototype.draw = function() { Chart.elements.Rectangle.prototype.draw = function () {
let ctx = this._chart.ctx
let ctx = this._chart.ctx; let vm = this._view
let vm = this._view; let left, right, top, bottom, signX, signY, borderSkipped, radius
let left, right, top, bottom, signX, signY, borderSkipped, radius; let borderWidth = vm.borderWidth
let borderWidth = vm.borderWidth;
// Set Radius Here // Set Radius Here
// If radius is large enough to cause drawing errors a max radius is imposed // If radius is large enough to cause drawing errors a max radius is imposed
let cornerRadius = 6; let cornerRadius = 6
if (!vm.horizontal) { if (!vm.horizontal) {
// bar // bar
left = vm.x - vm.width / 2; left = vm.x - vm.width / 2
right = vm.x + vm.width / 2; right = vm.x + vm.width / 2
top = vm.y; top = vm.y
bottom = vm.base; bottom = vm.base
signX = 1; signX = 1
signY = bottom > top ? 1 : -1; signY = bottom > top ? 1 : -1
borderSkipped = vm.borderSkipped || 'bottom'; borderSkipped = vm.borderSkipped || 'bottom'
} else { } else {
// horizontal bar // horizontal bar
left = vm.base; left = vm.base
right = vm.x; right = vm.x
top = vm.y - vm.height / 2; top = vm.y - vm.height / 2
bottom = vm.y + vm.height / 2; bottom = vm.y + vm.height / 2
signX = right > left ? 1 : -1; signX = right > left ? 1 : -1
signY = 1; signY = 1
borderSkipped = vm.borderSkipped || 'left'; borderSkipped = vm.borderSkipped || 'left'
} }
// Canvas doesn't allow us to stroke inside the width so we can // Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line // adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) { if (borderWidth) {
// borderWidth shold be less than bar width and bar height. // borderWidth shold be less than bar width and bar height.
let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom)); let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
borderWidth = borderWidth > barSize ? barSize : borderWidth; borderWidth = borderWidth > barSize ? barSize : borderWidth
let halfStroke = borderWidth / 2; let halfStroke = borderWidth / 2
// Adjust borderWidth when bar top position is near vm.base(zero). // Adjust borderWidth when bar top position is near vm.base(zero).
let borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0); let borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0)
let borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0); let borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0)
let borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0); let borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0)
let borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0); let borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0)
// not become a vertical line? // not become a vertical line?
if (borderLeft !== borderRight) { if (borderLeft !== borderRight) {
top = borderTop; top = borderTop
bottom = borderBottom; bottom = borderBottom
} }
// not become a horizontal line? // not become a horizontal line?
if (borderTop !== borderBottom) { if (borderTop !== borderBottom) {
left = borderLeft; left = borderLeft
right = borderRight; right = borderRight
} }
} }
ctx.beginPath(); ctx.beginPath()
ctx.fillStyle = vm.backgroundColor; ctx.fillStyle = vm.backgroundColor
ctx.strokeStyle = vm.borderColor; ctx.strokeStyle = vm.borderColor
ctx.lineWidth = borderWidth; ctx.lineWidth = borderWidth
// Corner points, from bottom-left to bottom-right clockwise // Corner points, from bottom-left to bottom-right clockwise
// | 1 2 | // | 1 2 |
@ -69,62 +68,61 @@ Chart.elements.Rectangle.prototype.draw = function() {
[left, bottom], [left, bottom],
[left, top], [left, top],
[right, top], [right, top],
[right, bottom] [right, bottom],
]; ]
// Find first (starting) corner with fallback to 'bottom' // Find first (starting) corner with fallback to 'bottom'
let borders = ['bottom', 'left', 'top', 'right']; let borders = ['bottom', 'left', 'top', 'right']
let startCorner = borders.indexOf(borderSkipped, 0); let startCorner = borders.indexOf(borderSkipped, 0)
if (startCorner === -1) { if (startCorner === -1) {
startCorner = 0; startCorner = 0
} }
function cornerAt(index) { function cornerAt(index) {
return corners[(startCorner + index) % 4]; return corners[(startCorner + index) % 4]
} }
// Draw rectangle from 'startCorner' // Draw rectangle from 'startCorner'
let corner = cornerAt(0); let corner = cornerAt(0)
ctx.moveTo(corner[0], corner[1]); ctx.moveTo(corner[0], corner[1])
for (let i = 1; i < 4; i++) { for (let i = 1; i < 4; i++) {
corner = cornerAt(i); corner = cornerAt(i)
let nextCornerId = i + 1; let nextCornerId = i + 1
if (nextCornerId == 4) { if (nextCornerId == 4) {
nextCornerId = 0 nextCornerId = 0
} }
let nextCorner = cornerAt(nextCornerId); let nextCorner = cornerAt(nextCornerId)
let width = corners[2][0] - corners[1][0]; let width = corners[2][0] - corners[1][0]
let height = corners[0][1] - corners[1][1]; let height = corners[0][1] - corners[1][1]
let x = corners[1][0]; let x = corners[1][0]
let y = corners[1][1]; let y = corners[1][1]
let radius = cornerRadius; let radius = cornerRadius
// Fix radius being too large // Fix radius being too large
if (radius > height / 2) { if (radius > height / 2) {
radius = height / 2; radius = height / 2
} }
if (radius > width / 2) { if (radius > width / 2) {
radius = width / 2; radius = width / 2
} }
ctx.moveTo(x + radius, y); ctx.moveTo(x + radius, y)
ctx.lineTo(x + width - radius, y); ctx.lineTo(x + width - radius, y)
ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
ctx.lineTo(x + width, y + height - radius); ctx.lineTo(x + width, y + height - radius)
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
ctx.lineTo(x + radius, y + height); ctx.lineTo(x + radius, y + height)
ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
ctx.lineTo(x, y + radius); ctx.lineTo(x, y + radius)
ctx.quadraticCurveTo(x, y, x + radius, y); ctx.quadraticCurveTo(x, y, x + radius, y)
} }
ctx.fill(); ctx.fill()
if (borderWidth) { if (borderWidth) {
ctx.stroke(); ctx.stroke()
} }
}; }

6
frontend/src/components/CloseButton.spec.js
View File

@ -5,10 +5,9 @@ import CloseButton from './CloseButton'
const localVue = global.localVue const localVue = global.localVue
describe('CloseButton', () => { describe('CloseButton', () => {
let wrapper let wrapper
let propsData = { let propsData = {
target: "Target", target: 'Target',
expanded: false, expanded: false,
} }
@ -17,7 +16,6 @@ describe('CloseButton', () => {
} }
describe('mount', () => { describe('mount', () => {
beforeEach(() => { beforeEach(() => {
wrapper = Wrapper() wrapper = Wrapper()
}) })
@ -26,7 +24,5 @@ describe('CloseButton', () => {
wrapper.find('.navbar-toggler').trigger('click') wrapper.find('.navbar-toggler').trigger('click')
expect(wrapper.emitted('click')).toBeTruthy() expect(wrapper.emitted('click')).toBeTruthy()
}) })
}) })
}) })

17
frontend/src/components/CloseButton.vue
View File

@ -9,7 +9,8 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-label="Toggle navigation" aria-label="Toggle navigation"
> >
<span></span> <span></span> <span></span>
<span></span>
</button> </button>
</template> </template>
<script> <script>
@ -18,18 +19,18 @@ export default {
props: { props: {
target: { target: {
type: [String, Number], type: [String, Number],
description: 'Close button target element' description: 'Close button target element',
}, },
expanded: { expanded: {
type: Boolean, type: Boolean,
description: 'Whether button is expanded (aria-expanded attribute)' description: 'Whether button is expanded (aria-expanded attribute)',
} },
}, },
methods: { methods: {
handleClick(evt) { handleClick(evt) {
this.$emit('click', evt); this.$emit('click', evt)
} },
} },
}; }
</script> </script>
<style></style> <style></style>

55
frontend/src/components/Collapse/Collapse.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div <div id="accordion" role="tablist" aria-multiselectable="true" class="accordion">
id="accordion"
role="tablist"
aria-multiselectable="true"
class="accordion"
>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -16,18 +11,18 @@ export default {
animationDuration: { animationDuration: {
type: Number, type: Number,
default: 250, default: 250,
description: 'Collapse animation duration' description: 'Collapse animation duration',
}, },
multipleActive: { multipleActive: {
type: Boolean, type: Boolean,
default: true, default: true,
description: 'Whether you can have multiple collapse items opened at the same time' description: 'Whether you can have multiple collapse items opened at the same time',
}, },
activeIndex: { activeIndex: {
type: Number, type: Number,
default: -1, default: -1,
description: 'Active collapse item index' description: 'Active collapse item index',
} },
}, },
provide() { provide() {
return { return {
@ -35,50 +30,50 @@ export default {
multipleActive: this.multipleActive, multipleActive: this.multipleActive,
addItem: this.addItem, addItem: this.addItem,
removeItem: this.removeItem, removeItem: this.removeItem,
deactivateAll: this.deactivateAll deactivateAll: this.deactivateAll,
}; }
}, },
data() { data() {
return { return {
items: [] items: [],
}; }
}, },
methods: { methods: {
addItem(item) { addItem(item) {
const index = this.$slots.default.indexOf(item.$vnode); const index = this.$slots.default.indexOf(item.$vnode)
if (index !== -1) { if (index !== -1) {
this.items.splice(index, 0, item); this.items.splice(index, 0, item)
} }
}, },
removeItem(item) { removeItem(item) {
const items = this.items; const items = this.items
const index = items.indexOf(item); const index = items.indexOf(item)
if (index > -1) { if (index > -1) {
items.splice(index, 1); items.splice(index, 1)
} }
}, },
deactivateAll() { deactivateAll() {
this.items.forEach(item => { this.items.forEach((item) => {
item.active = false; item.active = false
}); })
}, },
activateItem() { activateItem() {
if (this.activeIndex !== -1) { if (this.activeIndex !== -1) {
this.items[this.activeIndex].active = true; this.items[this.activeIndex].active = true
} }
} },
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.activateItem(); this.activateItem()
}); })
}, },
watch: { watch: {
activeIndex() { activeIndex() {
this.activateItem(); this.activateItem()
} },
} },
}; }
</script> </script>
<style scoped></style> <style scoped></style>

49
frontend/src/components/Collapse/CollapseItem.vue
View File

@ -8,7 +8,7 @@
@click.prevent="activate" @click.prevent="activate"
:aria-controls="`content-${itemId}`" :aria-controls="`content-${itemId}`"
> >
<slot name="title"> {{ title }} </slot> <slot name="title">{{ title }}</slot>
<i class="tim-icons icon-minimal-down"></i> <i class="tim-icons icon-minimal-down"></i>
</a> </a>
</b-card-header> </b-card-header>
@ -26,67 +26,66 @@
</b-card> </b-card>
</template> </template>
<script> <script>
import { CollapseTransition } from 'vue2-transitions'; import { CollapseTransition } from 'vue2-transitions'
export default { export default {
name: 'collapse-item', name: 'collapse-item',
components: { components: {
CollapseTransition CollapseTransition,
}, },
props: { props: {
title: { title: {
type: String, type: String,
default: '', default: '',
description: 'Collapse item title' description: 'Collapse item title',
}, },
id: String id: String,
}, },
inject: { inject: {
animationDuration: { animationDuration: {
default: 250 default: 250,
}, },
multipleActive: { multipleActive: {
default: false default: false,
}, },
addItem: { addItem: {
default: () => {} default: () => {},
}, },
removeItem: { removeItem: {
default: () => {} default: () => {},
}, },
deactivateAll: { deactivateAll: {
default: () => {} default: () => {},
} },
}, },
computed: { computed: {
itemId() { itemId() {
return this.id || this.title; return this.id || this.title
} },
}, },
data() { data() {
return { return {
active: false active: false,
}; }
}, },
methods: { methods: {
activate() { activate() {
let wasActive = this.active; let wasActive = this.active
if (!this.multipleActive) { if (!this.multipleActive) {
this.deactivateAll(); this.deactivateAll()
} }
this.active = !wasActive; this.active = !wasActive
console.log(this.active) },
}
}, },
mounted() { mounted() {
this.addItem(this); this.addItem(this)
}, },
destroyed() { destroyed() {
if (this.$el && this.$el.parentNode) { if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el); this.$el.parentNode.removeChild(this.$el)
} }
this.removeItem(this); this.removeItem(this)
} },
}; }
</script> </script>
<style></style> <style></style>

126
frontend/src/components/Inputs/BaseCheckbox.vue
View File

@ -1,14 +1,16 @@
<template> <template>
<div class="custom-control custom-checkbox" <div
:class="[ class="custom-control custom-checkbox"
{disabled: disabled}, :class="[{ disabled: disabled }, { [`custom-checkbox-${type}`]: type }, inlineClass]"
{[`custom-checkbox-${type}`]: type},inlineClass]"> >
<input :id="cbId" <input
class="custom-control-input" :id="cbId"
:class="inputClasses" class="custom-control-input"
type="checkbox" :class="inputClasses"
:disabled="disabled" type="checkbox"
v-model="model"/> :disabled="disabled"
v-model="model"
/>
<label :for="cbId" class="custom-control-label"> <label :for="cbId" class="custom-control-label">
<slot> <slot>
<span v-if="inline">&nbsp;</span> <span v-if="inline">&nbsp;</span>
@ -17,62 +19,60 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "base-checkbox", name: 'base-checkbox',
model: { model: {
prop: "checked" prop: 'checked',
},
props: {
checked: {
type: [Array, Boolean],
description: 'Whether checkbox is checked',
}, },
props: { disabled: {
checked: { type: Boolean,
type: [Array, Boolean], description: 'Whether checkbox is disabled',
description: "Whether checkbox is checked"
},
disabled: {
type: Boolean,
description: "Whether checkbox is disabled"
},
inline: {
type: Boolean,
description: "Whether checkbox is inline"
},
inputClasses: {
type: [String, Object, Array],
description: "Checkbox input classes"
},
type: {
type: String,
description: 'Checkbox type (e.g info, danger etc)'
}
}, },
data() { inline: {
return { type: Boolean,
cbId: "", description: 'Whether checkbox is inline',
touched: false
};
}, },
computed: { inputClasses: {
model: { type: [String, Object, Array],
get() { description: 'Checkbox input classes',
return this.checked;
},
set(check) {
if (!this.touched) {
this.touched = true;
}
this.$emit("input", check);
}
},
inlineClass() {
if (this.inline) {
return `form-check-inline`;
}
return ''
}
}, },
created() { type: {
this.cbId = Math.random() type: String,
.toString(16) description: 'Checkbox type (e.g info, danger etc)',
.slice(2); },
},
data() {
return {
cbId: '',
touched: false,
} }
}; },
computed: {
model: {
get() {
return this.checked
},
set(check) {
if (!this.touched) {
this.touched = true
}
this.$emit('input', check)
},
},
inlineClass() {
if (this.inline) {
return `form-check-inline`
}
return ''
},
},
created() {
this.cbId = Math.random().toString(16).slice(2)
},
}
</script> </script>

281
frontend/src/components/Inputs/BaseInput.vue
View File

@ -1,24 +1,31 @@
<template> <template>
<validation-provider :rules="rules" :name="name" v-bind="$attrs" v-slot="{errors, valid, invalid, validated}"> <validation-provider
:rules="rules"
:name="name"
v-bind="$attrs"
v-slot="{ errors, valid, invalid, validated }"
>
<b-form-group> <b-form-group>
<slot name="label"> <slot name="label">
<label v-if="label" :class="labelClasses"> <label v-if="label" :class="labelClasses">
{{label}} {{ label }}
</label> </label>
</slot> </slot>
<div :class="[ <div
{'input-group': hasIcon}, :class="[
{'focused': focused}, { 'input-group': hasIcon },
{'input-group-alternative': alternative}, { focused: focused },
{'has-label': label || $slots.label}, { 'input-group-alternative': alternative },
inputGroupClasses { 'has-label': label || $slots.label },
]"> inputGroupClasses,
]"
>
<div v-if="prependIcon || $slots.prepend" class="input-group-prepend"> <div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
<span class="input-group-text"> <span class="input-group-text">
<slot name="prepend"> <slot name="prepend">
<i :class="prependIcon"></i> <i :class="prependIcon"></i>
</slot> </slot>
</span> </span>
</div> </div>
<slot v-bind="slotData"> <slot v-bind="slotData">
<input <input
@ -29,24 +36,29 @@
:valid="valid" :valid="valid"
:required="required" :required="required"
class="form-control" class="form-control"
:class="[{'is-valid': valid && validated && successMessage}, {'is-invalid': invalid && validated}, inputClasses]"> :class="[
{ 'is-valid': valid && validated && successMessage },
{ 'is-invalid': invalid && validated },
inputClasses,
]"
/>
</slot> </slot>
<div v-if="appendIcon || $slots.append" class="input-group-append"> <div v-if="appendIcon || $slots.append" class="input-group-append">
<span class="input-group-text"> <span class="input-group-text">
<slot name="append"> <slot name="append">
<i :class="appendIcon"></i> <i :class="appendIcon"></i>
</slot> </slot>
</span> </span>
</div> </div>
<slot name="infoBlock"></slot> <slot name="infoBlock"></slot>
</div> </div>
<slot name="success"> <slot name="success">
<div class="valid-feedback" v-if="valid && validated && successMessage"> <div class="valid-feedback" v-if="valid && validated && successMessage">
{{successMessage}} {{ successMessage }}
</div> </div>
</slot> </slot>
<slot name="error"> <slot name="error">
<div v-if="errors[0]" class="invalid-feedback" style="display: block;"> <div v-if="errors[0]" class="invalid-feedback" style="display: block">
{{ errors[0] }} {{ errors[0] }}
</div> </div>
</slot> </slot>
@ -54,123 +66,122 @@
</validation-provider> </validation-provider>
</template> </template>
<script> <script>
export default { export default {
inheritAttrs: false, inheritAttrs: false,
name: "base-input", name: 'base-input',
props: { props: {
required: { required: {
type: Boolean, type: Boolean,
description: "Whether input is required (adds an asterix *)" description: 'Whether input is required (adds an asterix *)',
},
group: {
type: Boolean,
description: "Whether input is an input group (manual override in special cases)"
},
alternative: {
type: Boolean,
description: "Whether input is of alternative layout"
},
label: {
type: String,
description: "Input label (text before input)"
},
error: {
type: String,
description: "Input error (below input)"
},
successMessage: {
type: String,
description: "Input success message",
default: ''
},
labelClasses: {
type: String,
description: "Input label css classes",
default: "form-control-label"
},
inputClasses: {
type: String,
description: "Input css classes"
},
inputGroupClasses: {
type: String,
description: "Input group css classes"
},
value: {
type: [String, Number],
description: "Input value"
},
type: {
type: String,
description: "Input type",
default: "text"
},
appendIcon: {
type: String,
description: "Append icon (right)"
},
prependIcon: {
type: String,
description: "Prepend icon (left)"
},
rules: {
type: [String, Array, Object],
description: 'Vee validate validation rules',
default: ''
},
name: {
type: String,
description: 'Input name (used for validation)',
default: ''
}
}, },
data() { group: {
return { type: Boolean,
focused: false description: 'Whether input is an input group (manual override in special cases)',
};
}, },
computed: { alternative: {
listeners() { type: Boolean,
return { description: 'Whether input is of alternative layout',
...this.$listeners,
input: this.updateValue,
focus: this.onFocus,
blur: this.onBlur
};
},
slotData() {
return {
focused: this.focused,
error: this.error,
...this.listeners
};
},
hasIcon() {
const { append, prepend } = this.$slots;
return (
append !== undefined ||
prepend !== undefined ||
this.appendIcon !== undefined ||
this.prependIcon !== undefined ||
this.group
);
}
}, },
methods: { label: {
updateValue(evt) { type: String,
let value = evt.target.value; description: 'Input label (text before input)',
this.$emit("input", value); },
}, error: {
onFocus(evt) { type: String,
this.focused = true; description: 'Input error (below input)',
this.$emit("focus", evt); },
}, successMessage: {
onBlur(evt) { type: String,
this.focused = false; description: 'Input success message',
this.$emit("blur", evt); default: '',
} },
labelClasses: {
type: String,
description: 'Input label css classes',
default: 'form-control-label',
},
inputClasses: {
type: String,
description: 'Input css classes',
},
inputGroupClasses: {
type: String,
description: 'Input group css classes',
},
value: {
type: [String, Number],
description: 'Input value',
},
type: {
type: String,
description: 'Input type',
default: 'text',
},
appendIcon: {
type: String,
description: 'Append icon (right)',
},
prependIcon: {
type: String,
description: 'Prepend icon (left)',
},
rules: {
type: [String, Array, Object],
description: 'Vee validate validation rules',
default: '',
},
name: {
type: String,
description: 'Input name (used for validation)',
default: '',
},
},
data() {
return {
focused: false,
} }
}; },
computed: {
listeners() {
return {
...this.$listeners,
input: this.updateValue,
focus: this.onFocus,
blur: this.onBlur,
}
},
slotData() {
return {
focused: this.focused,
error: this.error,
...this.listeners,
}
},
hasIcon() {
const { append, prepend } = this.$slots
return (
append !== undefined ||
prepend !== undefined ||
this.appendIcon !== undefined ||
this.prependIcon !== undefined ||
this.group
)
},
},
methods: {
updateValue(evt) {
let value = evt.target.value
this.$emit('input', value)
},
onFocus(evt) {
this.focused = true
this.$emit('focus', evt)
},
onBlur(evt) {
this.focused = false
this.$emit('blur', evt)
},
},
}
</script> </script>
<style> <style></style>
</style>

88
frontend/src/components/Inputs/BaseRadio.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div <div class="custom-control custom-radio" :class="[inlineClass, { disabled: disabled }]">
class="custom-control custom-radio"
:class="[inlineClass, { disabled: disabled }]">
<input <input
:id="cbId" :id="cbId"
class="custom-control-input" class="custom-control-input"
@ -18,51 +16,49 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'base-radio', name: 'base-radio',
props: { props: {
name: { name: {
type: [String, Number], type: [String, Number],
description: 'Radio label' description: 'Radio label',
},
disabled: {
type: Boolean,
description: 'Whether radio is disabled'
},
value: {
type: [String, Boolean],
description: 'Radio value'
},
inline: {
type: Boolean,
description: 'Whether radio is inline'
}
}, },
data() { disabled: {
return { type: Boolean,
cbId: '' description: 'Whether radio is disabled',
};
}, },
computed: { value: {
model: { type: [String, Boolean],
get() { description: 'Radio value',
return this.value;
},
set(value) {
this.$emit('input', value);
}
},
inlineClass() {
if (this.inline) {
return `form-check-inline`;
}
return '';
}
}, },
created() { inline: {
this.cbId = Math.random() type: Boolean,
.toString(16) description: 'Whether radio is inline',
.slice(2); },
},
data() {
return {
cbId: '',
} }
}; },
computed: {
model: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
},
},
inlineClass() {
if (this.inline) {
return `form-check-inline`
}
return ''
},
},
created() {
this.cbId = Math.random().toString(16).slice(2)
},
}
</script> </script>

8
frontend/src/components/LoadingPanel.vue
View File

@ -2,11 +2,11 @@
<b-row v-loading="true" id="loading"></b-row> <b-row v-loading="true" id="loading"></b-row>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue'
import { Loading } from 'element-ui'; import { Loading } from 'element-ui'
Vue.use(Loading.directive); Vue.use(Loading.directive)
export default {}; export default {}
</script> </script>
<style> <style>
#loading { #loading {

210
frontend/src/components/Modal-OLD.vue
View File

@ -1,125 +1,127 @@
<template> <template>
<SlideYUpTransition :duration="animationDuration"> <slide-y-up-transition :duration="animationDuration">
<b-modal class="modal fade" <b-modal
ref="app-modal" class="modal fade"
:size="size" ref="app-modal"
:hide-header="!$slots.header" :size="size"
:modal-class="[{'modal-mini': type === 'mini'}, ...modalClasses]" :hide-header="!$slots.header"
@mousedown.self="closeModal" :modal-class="[{ 'modal-mini': type === 'mini' }, ...modalClasses]"
tabindex="-1" @mousedown.self="closeModal"
role="dialog" tabindex="-1"
centered role="dialog"
@close="closeModal" centered
@hide="closeModal" @close="closeModal"
:header-class="headerClasses" @hide="closeModal"
:footer-class="footerClasses" :header-class="headerClasses"
:content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]" :footer-class="footerClasses"
:body-class="bodyClasses" :content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]"
:aria-hidden="!show"> :body-class="bodyClasses"
:aria-hidden="!show"
>
<template v-slot:modal-header> <template v-slot:modal-header>
<slot name="header"></slot> <slot name="header"></slot>
<slot name="close-button"> <slot name="close-button">
<button type="button" <button
class="close" type="button"
v-if="showClose" class="close"
@click="closeModal" v-if="showClose"
data-dismiss="modal" @click="closeModal"
aria-label="Close"> data-dismiss="modal"
<span :aria-hidden="!show">×</span> aria-label="Close"
</button> >
</slot> <span :aria-hidden="!show">×</span>
</button>
</slot>
</template> </template>
<slot /> <slot />
<template v-slot:modal-footer> <template v-slot:modal-footer>
<slot name="footer"></slot> <slot name="footer"></slot>
</template> </template>
</b-modal> </b-modal>
</SlideYUpTransition> </slide-y-up-transition>
</template> </template>
<script> <script>
import { SlideYUpTransition } from "vue2-transitions"; import { SlideYUpTransition } from 'vue2-transitions'
export default { export default {
name: "modal", name: 'modal',
components: { components: {
SlideYUpTransition SlideYUpTransition,
},
props: {
show: Boolean,
showClose: {
type: Boolean,
default: true,
}, },
props: { type: {
show: Boolean, type: String,
showClose: { default: '',
type: Boolean, validator(value) {
default: true let acceptedValues = ['', 'notice', 'mini']
return acceptedValues.indexOf(value) !== -1
}, },
type: { description: 'Modal type (notice|mini|"") ',
type: String, },
default: "", modalClasses: {
validator(value) { type: [Object, String],
let acceptedValues = ["", "notice", "mini"]; description: 'Modal dialog css classes',
return acceptedValues.indexOf(value) !== -1; },
}, size: {
description: 'Modal type (notice|mini|"") ' type: String,
description: 'Modal size',
validator(value) {
let acceptedValues = ['', 'sm', 'lg']
return acceptedValues.indexOf(value) !== -1
}, },
modalClasses: { },
type: [Object, String], modalContentClasses: {
description: "Modal dialog css classes" type: [Object, String],
}, description: 'Modal dialog content css classes',
size: { },
type: String, gradient: {
description: 'Modal size', type: String,
validator(value) { description: 'Modal gradient type (danger, primary etc)',
let acceptedValues = ["", "sm", "lg"]; },
return acceptedValues.indexOf(value) !== -1; headerClasses: {
}, type: [Object, String],
}, description: 'Modal Header css classes',
modalContentClasses: { },
type: [Object, String], bodyClasses: {
description: "Modal dialog content css classes" type: [Object, String],
}, description: 'Modal Body css classes',
gradient: { },
type: String, footerClasses: {
description: "Modal gradient type (danger, primary etc)" type: [Object, String],
}, description: 'Modal Footer css classes',
headerClasses: { },
type: [Object, String], animationDuration: {
description: "Modal Header css classes" type: Number,
}, default: 500,
bodyClasses: { description: 'Modal transition duration',
type: [Object, String], },
description: "Modal Body css classes" },
}, methods: {
footerClasses: { closeModal() {
type: [Object, String], this.$emit('update:show', false)
description: "Modal Footer css classes" this.$emit('close')
}, },
animationDuration: { },
type: Number, watch: {
default: 500, show(val) {
description: "Modal transition duration" if (val) {
this.$refs['app-modal'].show()
} else {
this.$refs['app-modal'].hide()
} }
}, },
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> </script>
<style> <style>
.modal-backdrop { .modal-backdrop {
background-color: rgba(0, 0, 0, 0.6) !important; background-color: rgba(0, 0, 0, 0.6) !important;
} }
</style> </style>

145
frontend/src/components/Modal.vue
View File

@ -1,85 +1,80 @@
<template> <template>
<!--Notice modal--> <!--Notice modal-->
<modal :show.sync="$store.state.modals" <modal
modal-classes="modal-danger" :show.sync="$store.state.modals"
modal-content-classes="bg-gradient-danger"> modal-classes="modal-danger"
<h6 slot="header" class="modal-title">Your attention is required</h6> modal-content-classes="bg-gradient-danger"
>
<h6 slot="header" class="modal-title">Your attention is required</h6>
<div class="py-3 text-center"> <div class="py-3 text-center">
<form ref="form" @submit.stop.prevent="handleSubmit">
<form ref="form" @submit.stop.prevent="handleSubmit"> <b-form-group
<b-form-group label="Name"
label="Name" label-for="name-input"
label-for="name-input" invalid-feedback="Name is required"
invalid-feedback="Name is required" :state="nameState"
:state="nameState" >
> <b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input>
<b-form-input </b-form-group>
id="name-input" </form>
v-model="name" </div>
:state="nameState"
required
></b-form-input>
</b-form-group>
</form>
</div>
<template slot="footer"> <template slot="footer">
<base-button type="white">Ok</base-button> <base-button type="white">Ok</base-button>
<base-button type="link" class="ml-auto" @click="$store.state.modals = false">abbrechen</base-button> <base-button type="link" class="ml-auto" @click="$store.state.modals = false">
</template> abbrechen
</modal> </base-button>
</template>
</modal>
</template> </template>
<script> <script>
export default {
name: 'modal',
data() {
return {
name: '',
nameState: null,
submittedNames: [],
}
},
/*Modal*/
checkFormValidity() {
const valid = this.$refs.form.checkValidity()
this.nameState = valid
return valid
},
resetModal() {
this.name = ''
this.nameState = null
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
this.handleSubmit()
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return
}
// Push the name to submitted names
this.submittedNames.push(this.name)
this.$store.state.modals = false
this.$store.commit('loginAsAdmin')
this.$router.push('/AdminOverview')
export default { // Hide the modal manually
name: 'modal', this.$nextTick(() => {
data() { this.$bvModal.hide('modal-prevent-closing')
return { })
name: '', },
nameState: null, }
submittedNames: []
}
},
/*Modal*/
checkFormValidity() {
const valid = this.$refs.form.checkValidity()
this.nameState = valid
return valid
},
resetModal() {
this.name = ''
this.nameState = null
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
this.handleSubmit()
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return
}
// Push the name to submitted names
this.submittedNames.push(this.name)
this.$store.state.modals = false
this.$store.commit('loginAsAdmin')
this.$router.push('/AdminOverview')
// Hide the modal manually
this.$nextTick(() => {
this.$bvModal.hide('modal-prevent-closing')
})
}
};
</script> </script>
<style> <style>
.modal-backdrop { .modal-backdrop {
background-color: rgba(0, 0, 0, 0.6) !important; background-color: rgba(0, 0, 0, 0.6) !important;
} }
</style> </style>

55
frontend/src/components/Navbar/BaseNav.vue
View File

@ -18,10 +18,7 @@
</button> </button>
</slot> </slot>
<b-navbar-toggle <b-navbar-toggle target="nav-text-collapse" @click.stop="toggleMenu"></b-navbar-toggle>
target="nav-text-collapse"
@click.stop="toggleMenu">
</b-navbar-toggle>
<b-collapse <b-collapse
is-nav is-nav
@ -29,7 +26,8 @@
class="navbar-custom-collapse collapse" class="navbar-custom-collapse collapse"
:class="menuClasses" :class="menuClasses"
:visible="show" :visible="show"
v-click-outside="closeMenu"> v-click-outside="closeMenu"
>
<slot :close-menu="closeMenu"></slot> <slot :close-menu="closeMenu"></slot>
</b-collapse> </b-collapse>
</div> </div>
@ -43,29 +41,28 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
description: description:
'Whether navbar menu is shown (valid for viewports < specified by `expand` prop)' 'Whether navbar menu is shown (valid for viewports < specified by `expand` prop)',
}, },
transparent: { transparent: {
type: Boolean, type: Boolean,
default: false, default: false,
description: 'Whether navbar is transparent' description: 'Whether navbar is transparent',
}, },
expand: { expand: {
type: String, type: String,
default: 'lg', default: 'lg',
description: 'Breakpoint where nav should expand' description: 'Breakpoint where nav should expand',
}, },
menuClasses: { menuClasses: {
type: [String, Object, Array], type: [String, Object, Array],
default: '', default: '',
description: description: 'Navbar menu (items) classes. Can be used to align menu items to the right/left',
'Navbar menu (items) classes. Can be used to align menu items to the right/left'
}, },
containerClasses: { containerClasses: {
type: [String, Object, Array], type: [String, Object, Array],
default: 'container', default: 'container',
description: description:
'Container classes. Can be used to control container classes (contains both navbar brand and menu items)' 'Container classes. Can be used to control container classes (contains both navbar brand and menu items)',
}, },
type: { type: {
type: String, type: String,
@ -81,43 +78,43 @@ export default {
'primary', 'primary',
'light', 'light',
'info', 'info',
'vue' 'vue',
].includes(value); ].includes(value)
}, },
description: 'Navbar color type' description: 'Navbar color type',
} },
}, },
model: { model: {
prop: 'show', prop: 'show',
event: 'change' event: 'change',
}, },
computed: { computed: {
classes() { classes() {
let color = `bg-${this.type}`; let color = `bg-${this.type}`
let classes = [ let classes = [
{ 'navbar-transparent': this.transparent }, { 'navbar-transparent': this.transparent },
{ [`navbar-expand-${this.expand}`]: this.expand } { [`navbar-expand-${this.expand}`]: this.expand },
]; ]
if (this.position) { if (this.position) {
classes.push(`navbar-${this.position}`); classes.push(`navbar-${this.position}`)
} }
if (!this.transparent) { if (!this.transparent) {
classes.push(color); classes.push(color)
} }
return classes; return classes
}, },
hasMenu() { hasMenu() {
return this.$slots.default; return this.$slots.default
} },
}, },
methods: { methods: {
toggleMenu() { toggleMenu() {
this.$emit('change', !this.show); this.$emit('change', !this.show)
}, },
closeMenu() { closeMenu() {
this.$emit('change', false); this.$emit('change', false)
} },
} },
}; }
</script> </script>
<style></style> <style></style>

4
frontend/src/components/Navbar/NavbarToggleButton.vue
View File

@ -15,7 +15,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'navbar-toggle-button' name: 'navbar-toggle-button',
}; }
</script> </script>
<style></style> <style></style>

12
frontend/src/components/NavbarToggleButton.vue
View File

@ -10,7 +10,7 @@
> >
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
<slot> <slot>
<span></span> <span></span>
</slot> </slot>
</button> </button>
</template> </template>
@ -19,14 +19,14 @@ export default {
props: { props: {
target: { target: {
type: [String, Number], type: [String, Number],
description: 'Button target element' description: 'Button target element',
}, },
toggled: { toggled: {
type: Boolean, type: Boolean,
default: false, default: false,
description: 'Whether button is toggled' description: 'Whether button is toggled',
} },
} },
}; }
</script> </script>
<style></style> <style></style>

323
frontend/src/components/NotificationPlugin/Notification.vue
View File

@ -3,207 +3,192 @@
@click="tryClose" @click="tryClose"
data-notify="container" data-notify="container"
class="alert alert-notify alert-dismissible" class="alert alert-notify alert-dismissible"
:class="[ :class="[{ 'alert-with-icon': icon }, verticalAlign, horizontalAlign, alertType]"
{ 'alert-with-icon': icon },
verticalAlign,
horizontalAlign,
alertType
]"
role="alert" role="alert"
:style="customPosition" :style="customPosition"
data-notify-position="top-center" data-notify-position="top-center"
> >
<template v-if="icon || $slots.icon"> <template v-if="icon || $slots.icon">
<slot name="icon"> <slot name="icon">
<span class="alert-icon" data-notify="icon"> <span class="alert-icon" data-notify="icon">
<i :class="icon"></i> <i :class="icon"></i>
</span> </span>
</slot> </slot>
</template> </template>
<span class="alert-text"> <span class="alert-text">
<span v-if="title" class="title"> <span v-if="title" class="title">
<b>{{ title }}<br/></b> <b>
{{ title }}
<br />
</b>
</span> </span>
<span v-if="message" v-html="message"></span> <span v-if="message" v-html="message"></span>
<content-render <content-render v-if="!message && component" :component="component"></content-render>
v-if="!message && component"
:component="component"
></content-render>
</span> </span>
<slot name="dismiss-icon"> <slot name="dismiss-icon">
<button type="button" <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click="close">
class="close"
data-dismiss="alert"
aria-label="Close"
@click="close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</slot> </slot>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'notification', name: 'notification',
components: { components: {
contentRender: { contentRender: {
props: ['component'], props: ['component'],
render: function (createElement) { render: function (createElement) {
return createElement(this.component) return createElement(this.component)
} },
}
}, },
props: { },
message: String, props: {
title: { message: String,
type: String, title: {
description: 'Notification title' type: String,
}, description: 'Notification title',
icon: {
type: String,
description: 'Notification icon'
},
verticalAlign: {
type: String,
default: 'top',
validator: value => {
let acceptedValues = ['top', 'bottom'];
return acceptedValues.indexOf(value) !== -1;
},
description: 'Vertical alignment of notification (top|bottom)'
},
horizontalAlign: {
type: String,
default: 'right',
validator: value => {
let acceptedValues = ['left', 'center', 'right'];
return acceptedValues.indexOf(value) !== -1;
},
description: 'Horizontal alignment of notification (left|center|right)'
},
type: {
type: String,
default: 'info',
validator: value => {
let acceptedValues = [
'default',
'info',
'primary',
'danger',
'warning',
'success'
];
return acceptedValues.indexOf(value) !== -1;
},
description: 'Notification type of notification (default|info|primary|danger|warning|success)'
},
timeout: {
type: Number,
default: 5000,
validator: value => {
return value >= 0;
},
description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)'
},
timestamp: {
type: Date,
default: () => new Date(),
description: 'Notification timestamp (used internally to handle notification removal correctly)'
},
component: {
type: [Object, Function],
description: 'Custom content component. Cane be a `.vue` component or render function'
},
showClose: {
type: Boolean,
default: true,
description: 'Whether to show close button'
},
closeOnClick: {
type: Boolean,
default: true,
description: 'Whether to close notification when clicking it\' body'
},
clickHandler: {
type: Function,
description: 'Custom notification click handler'
}
}, },
data() { icon: {
return { type: String,
elmHeight: 0 description: 'Notification icon',
};
}, },
computed: { verticalAlign: {
hasIcon() { type: String,
return this.icon && this.icon.length > 0; default: 'top',
validator: (value) => {
let acceptedValues = ['top', 'bottom']
return acceptedValues.indexOf(value) !== -1
}, },
alertType() { description: 'Vertical alignment of notification (top|bottom)',
return `alert-${this.type}`;
},
customPosition() {
let initialMargin = 20;
let alertHeight = this.elmHeight + 10;
let sameAlertsCount = this.$notifications.state.filter(alert => {
return (
alert.horizontalAlign === this.horizontalAlign &&
alert.verticalAlign === this.verticalAlign &&
alert.timestamp <= this.timestamp
);
}).length;
if (this.$notifications.settings.overlap) {
sameAlertsCount = 1;
}
let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
let styles = {};
if (this.verticalAlign === 'top') {
styles.top = `${pixels}px`;
} else {
styles.bottom = `${pixels}px`;
}
return styles;
}
}, },
methods: { horizontalAlign: {
close() { type: String,
this.$emit('close', this.timestamp); default: 'right',
validator: (value) => {
let acceptedValues = ['left', 'center', 'right']
return acceptedValues.indexOf(value) !== -1
}, },
tryClose(evt) { description: 'Horizontal alignment of notification (left|center|right)',
if (this.clickHandler) {
this.clickHandler(evt, this);
}
if (this.closeOnClick) {
this.close();
}
}
}, },
mounted() { type: {
this.elmHeight = this.$el.clientHeight; type: String,
if (this.timeout) { default: 'info',
setTimeout(this.close, this.timeout); validator: (value) => {
} let acceptedValues = ['default', 'info', 'primary', 'danger', 'warning', 'success']
return acceptedValues.indexOf(value) !== -1
},
description:
'Notification type of notification (default|info|primary|danger|warning|success)',
},
timeout: {
type: Number,
default: 5000,
validator: (value) => {
return value >= 0
},
description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)',
},
timestamp: {
type: Date,
default: () => new Date(),
description:
'Notification timestamp (used internally to handle notification removal correctly)',
},
component: {
type: [Object, Function],
description: 'Custom content component. Cane be a `.vue` component or render function',
},
showClose: {
type: Boolean,
default: true,
description: 'Whether to show close button',
},
closeOnClick: {
type: Boolean,
default: true,
description: "Whether to close notification when clicking it' body",
},
clickHandler: {
type: Function,
description: 'Custom notification click handler',
},
},
data() {
return {
elmHeight: 0,
} }
}; },
computed: {
hasIcon() {
return this.icon && this.icon.length > 0
},
alertType() {
return `alert-${this.type}`
},
customPosition() {
let initialMargin = 20
let alertHeight = this.elmHeight + 10
let sameAlertsCount = this.$notifications.state.filter((alert) => {
return (
alert.horizontalAlign === this.horizontalAlign &&
alert.verticalAlign === this.verticalAlign &&
alert.timestamp <= this.timestamp
)
}).length
if (this.$notifications.settings.overlap) {
sameAlertsCount = 1
}
let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin
let styles = {}
if (this.verticalAlign === 'top') {
styles.top = `${pixels}px`
} else {
styles.bottom = `${pixels}px`
}
return styles
},
},
methods: {
close() {
this.$emit('close', this.timestamp)
},
tryClose(evt) {
if (this.clickHandler) {
this.clickHandler(evt, this)
}
if (this.closeOnClick) {
this.close()
}
},
},
mounted() {
this.elmHeight = this.$el.clientHeight
if (this.timeout) {
setTimeout(this.close, this.timeout)
}
},
}
</script> </script>
<style lang="scss"> <style lang="scss">
.notifications .alert { .notifications .alert {
position: fixed; position: fixed;
z-index: 10000; z-index: 10000;
&[data-notify='container'] { &[data-notify='container'] {
max-width: 500px; max-width: 500px;
}
&.center {
margin: 0 auto;
}
&.left {
left: 20px;
}
&.right {
right: 20px;
}
} }
&.center {
margin: 0 auto;
}
&.left {
left: 20px;
}
&.right {
right: 20px;
}
}
</style> </style>

73
frontend/src/components/NotificationPlugin/Notifications.vue
View File

@ -1,55 +1,52 @@
<template> <template>
<div class="notifications"> <div class="notifications">
<slide-y-up-transition :duration="transitionDuration" <slide-y-up-transition :duration="transitionDuration" group mode="out-in">
group
mode="out-in">
<notification <notification
v-for="notification in notifications" v-for="notification in notifications"
v-bind="notification" v-bind="notification"
:clickHandler="notification.onClick" :clickHandler="notification.onClick"
:key="notification.timestamp.getTime()" :key="notification.timestamp.getTime()"
@close="removeNotification" @close="removeNotification"
> ></notification>
</notification>
</slide-y-up-transition> </slide-y-up-transition>
</div> </div>
</template> </template>
<script> <script>
import Notification from './Notification.vue'; import Notification from './Notification.vue'
import { SlideYUpTransition } from 'vue2-transitions'; import { SlideYUpTransition } from 'vue2-transitions'
export default { export default {
components: { components: {
SlideYUpTransition, SlideYUpTransition,
Notification Notification,
},
props: {
transitionDuration: {
type: Number,
default: 200,
}, },
props: { overlap: {
transitionDuration: { type: Boolean,
type: Number, default: false,
default: 200
},
overlap: {
type: Boolean,
default: false
}
}, },
data() { },
return { data() {
notifications: this.$notifications.state return {
}; notifications: this.$notifications.state,
},
methods: {
removeNotification(timestamp) {
this.$notifications.removeNotification(timestamp);
}
},
created() {
this.$notifications.settings.overlap = this.overlap;
},
watch: {
overlap: function (newVal) {
this.$notifications.settings.overlap = newVal;
}
} }
}; },
methods: {
removeNotification(timestamp) {
this.$notifications.removeNotification(timestamp)
},
},
created() {
this.$notifications.settings.overlap = this.overlap
},
watch: {
overlap: function (newVal) {
this.$notifications.settings.overlap = newVal
},
},
}
</script> </script>

58
frontend/src/components/NotificationPlugin/index.js
View File

@ -1,4 +1,4 @@
import Notifications from './Notifications.vue'; import Notifications from './Notifications.vue'
const NotificationStore = { const NotificationStore = {
state: [], // here the notifications will be added state: [], // here the notifications will be added
@ -9,58 +9,58 @@ const NotificationStore = {
type: 'info', type: 'info',
timeout: 5000, timeout: 5000,
closeOnClick: true, closeOnClick: true,
showClose: true showClose: true,
}, },
setOptions(options) { setOptions(options) {
this.settings = Object.assign(this.settings, options); this.settings = Object.assign(this.settings, options)
}, },
removeNotification(timestamp) { removeNotification(timestamp) {
const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp); const indexToDelete = this.state.findIndex((n) => n.timestamp === timestamp)
if (indexToDelete !== -1) { if (indexToDelete !== -1) {
this.state.splice(indexToDelete, 1); this.state.splice(indexToDelete, 1)
} }
}, },
addNotification(notification) { addNotification(notification) {
if (typeof notification === 'string' || notification instanceof String) { if (typeof notification === 'string' || notification instanceof String) {
notification = { message: notification }; notification = { message: notification }
} }
notification.timestamp = new Date(); notification.timestamp = new Date()
notification.timestamp.setMilliseconds( notification.timestamp.setMilliseconds(
notification.timestamp.getMilliseconds() + this.state.length notification.timestamp.getMilliseconds() + this.state.length,
); )
notification = Object.assign({}, this.settings, notification); notification = Object.assign({}, this.settings, notification)
this.state.push(notification); this.state.push(notification)
}, },
notify(notification) { notify(notification) {
if (Array.isArray(notification)) { if (Array.isArray(notification)) {
notification.forEach(notificationInstance => { notification.forEach((notificationInstance) => {
this.addNotification(notificationInstance); this.addNotification(notificationInstance)
}); })
} else { } else {
this.addNotification(notification); this.addNotification(notification)
} }
} },
}; }
const NotificationsPlugin = { const NotificationsPlugin = {
install(Vue, options) { install(Vue, options) {
let app = new Vue({ let app = new Vue({
data: { data: {
notificationStore: NotificationStore notificationStore: NotificationStore,
}, },
methods: { methods: {
notify(notification) { notify(notification) {
this.notificationStore.notify(notification); this.notificationStore.notify(notification)
} },
} },
}); })
Vue.prototype.$notify = app.notify; Vue.prototype.$notify = app.notify
Vue.prototype.$notifications = app.notificationStore; Vue.prototype.$notifications = app.notificationStore
Vue.component('Notifications', Notifications); Vue.component('Notifications', Notifications)
if (options) { if (options) {
NotificationStore.setOptions(options); NotificationStore.setOptions(options)
} }
} },
}; }
export default NotificationsPlugin; export default NotificationsPlugin

142
frontend/src/components/SearchUser.vue
View File

@ -1,12 +1,8 @@
<template> <template>
<vue-bootstrap-typeahead <vue-bootstrap-typeahead v-model="query" :data="users" @change="getUser" />
v-model="query"
:data="users"
@change="getUser"
/>
</template> </template>
<script> <script>
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead' import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'
// Global registration // Global registration
//Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead) //Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)
@ -15,71 +11,71 @@
// Local registration // Local registration
export default { export default {
name: "SearchUser", name: 'SearchUser',
components: { components: {
VueBootstrapTypeahead VueBootstrapTypeahead,
}, },
data() { data() {
return { return {
user: "", user: '',
users: [ users: [
"Bob", 'Bob',
"Alice", 'Alice',
"Bernd", 'Bernd',
"Dario", 'Dario',
"Alex", 'Alex',
"Pauls", 'Pauls',
"Ulf", 'Ulf',
"Delaware", 'Delaware',
"Florida", 'Florida',
"Georgia", 'Georgia',
"Hawaii", 'Hawaii',
"Idaho", 'Idaho',
"Illnois", 'Illnois',
"Indiana", 'Indiana',
"Iowa", 'Iowa',
"Kansas", 'Kansas',
"Kentucky", 'Kentucky',
"Louisiana", 'Louisiana',
"Maine", 'Maine',
"Maryland", 'Maryland',
"Massachusetts", 'Massachusetts',
"Michigan", 'Michigan',
"Minnesota", 'Minnesota',
"Mississippi", 'Mississippi',
"Missouri", 'Missouri',
"Montana", 'Montana',
"Nebraska", 'Nebraska',
"Nevada", 'Nevada',
"New Hampshire", 'New Hampshire',
"New Jersey", 'New Jersey',
"New Mexico", 'New Mexico',
"New York", 'New York',
"North Carolina", 'North Carolina',
"North Dakota", 'North Dakota',
"Ohio", 'Ohio',
"Oklahoma", 'Oklahoma',
"Oregon", 'Oregon',
"Pennsylvania", 'Pennsylvania',
"Rhode Island", 'Rhode Island',
"South Carolina", 'South Carolina',
"South Dakota", 'South Dakota',
"Tennessee", 'Tennessee',
"Texas", 'Texas',
"Utah", 'Utah',
"Vermont", 'Vermont',
"Virginia", 'Virginia',
"Washington", 'Washington',
"West Virginia", 'West Virginia',
"Wisconsin", 'Wisconsin',
"Wyoming" 'Wyoming',
] ],
};
},
methods: {
getUser() {
alert(this.data.user)
}
} }
}; },
</script> methods: {
getUser() {
alert(this.data.user)
},
},
}
</script>

233
frontend/src/components/SidebarPlugin/SideBar.vue
View File

@ -1,130 +1,133 @@
<template> <template>
<nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-transparent" id="sidenav-main"> <nav
<div class="container-fluid"> class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-transparent"
id="sidenav-main"
<!--Toggler--> >
<navbar-toggle-button @click.native="showSidebar"> <div class="container-fluid">
<!--Toggler-->
</navbar-toggle-button> <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
<div class="navbar-brand"> <div class="navbar-brand">
<img :src="logo" class="navbar-brand-img" alt="..."> <img :src="logo" class="navbar-brand-img" alt="..." />
</div> </div>
<b-row class="text-center"><b-col>{{$n($store.state.user.balance)}} GDD</b-col></b-row> <b-row class="text-center">
<slot name="mobile-right"> <b-col>{{ $n($store.state.user.balance) }} GDD</b-col>
<ul class="nav align-items-center d-md-none"> </b-row>
<slot name="mobile-right">
<base-dropdown class="nav-item" menu-on-right tag="li" title-tag="a"> <ul class="nav align-items-center d-md-none">
<a slot="title-container" class="nav-link" href="#" role="button"> <base-dropdown class="nav-item" menu-on-right tag="li" title-tag="a">
<div class="media align-items-center"> <a slot="title-container" class="nav-link" href="#" role="button">
<span class="avatar avatar-sm"> <div class="media align-items-center">
<vue-qrcode :value="$store.state.email" type="image/png" ></vue-qrcode> <span class="avatar avatar-sm">
</span> <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
</div> </span>
</a> </div>
xx </a>
<router-link to="/overview" class="dropdown-item text-lg text-muted"> xx
<i class="ni ni-single-02"></i> <router-link to="/overview" class="dropdown-item text-lg text-muted">
<span>{{ $t('site.overview.account_overview')}}</span> <i class="ni ni-single-02"></i>
</router-link> <span>{{ $t('site.overview.account_overview') }}</span>
<router-link to="/profile" class="dropdown-item text-lg text-muted"> </router-link>
<i class="ni ni-single-02"></i> <router-link to="/profile" class="dropdown-item text-lg text-muted">
<span>{{ $t('site.navbar.my-profil')}}</span> <i class="ni ni-single-02"></i>
</router-link> <span>{{ $t('site.navbar.my-profil') }}</span>
<router-link to="/profileedit" class="dropdown-item text-lg text-muted"> </router-link>
<i class="ni ni-settings-gear-65"></i> <router-link to="/profileedit" class="dropdown-item text-lg text-muted">
<span>{{ $t('site.navbar.settings') }}</span> <i class="ni ni-settings-gear-65"></i>
</router-link> <span>{{ $t('site.navbar.settings') }}</span>
<router-link to="/transactions" class="dropdown-item text-lg text-muted"> </router-link>
<i class="ni ni-calendar-grid-58"></i> <router-link to="/transactions" class="dropdown-item text-lg text-muted">
<span>Transactions</span> <i class="ni ni-calendar-grid-58"></i>
</router-link> <span>Transactions</span>
<!-- </router-link>
<!--
<router-link to="/activity" class="dropdown-item text-lg text-muted"> <router-link to="/activity" class="dropdown-item text-lg text-muted">
<i class="ni ni-calendar-grid-58"></i> <i class="ni ni-calendar-grid-58"></i>
<span>{{ $t('site.navbar.activity') }}</span> <span>{{ $t('site.navbar.activity') }}</span>
</router-link> </router-link>
--> -->
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<div @click="logout" class="dropdown-item text-lg text-muted" > <div @click="logout" class="dropdown-item text-lg text-muted">
<i class="ni ni-support-16"></i> <i class="ni ni-support-16"></i>
{{ $t('logout') }} {{ $t('logout') }}
</div> </div>
</base-dropdown> </base-dropdown>
</ul> </ul>
</slot> </slot>
<slot></slot> <slot></slot>
<div v-show="$sidebar.showSidebar" class="navbar-collapse collapse show" id="sidenav-collapse-main"> <div
v-show="$sidebar.showSidebar"
<div class="navbar-collapse-header d-md-none"> class="navbar-collapse collapse show"
<div class="row"> id="sidenav-collapse-main"
<div class="col-6 collapse-brand"> >
<router-link to="/overview"> <div class="navbar-collapse-header d-md-none">
<img :src="logo"> <div class="row">
</router-link> <div class="col-6 collapse-brand">
</div> <router-link to="/overview">
<div class="col-6 collapse-close"> <img :src="logo" />
<navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button> </router-link>
</div> </div>
</div> <div class="col-6 collapse-close">
</div> <navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button>
<ul class="navbar-nav">
<slot name="links">
</slot>
</ul>
<hr class="my-3">
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a class="nav-link text-lg" href="#!" @click="logout">
{{ $t('logout') }}
</a>
</li>
</ul>
</div> </div>
</div> </div>
</nav> </div>
<ul class="navbar-nav">
<slot name="links"></slot>
</ul>
<hr class="my-3" />
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a class="nav-link text-lg" href="#!" @click="logout">
{{ $t('logout') }}
</a>
</li>
</ul>
</div>
</div>
</nav>
</template> </template>
<script> <script>
import NavbarToggleButton from '@/components/NavbarToggleButton' import NavbarToggleButton from '@/components/NavbarToggleButton'
import VueQrcode from 'vue-qrcode' import VueQrcode from 'vue-qrcode'
export default { export default {
name: 'sidebar', name: 'sidebar',
components: { components: {
NavbarToggleButton, NavbarToggleButton,
VueQrcode VueQrcode,
},
props: {
logo: {
type: String,
default: 'img/brand/green.png',
description: 'Gradido Sidebar app logo',
}, },
props: { autoClose: {
logo: { type: Boolean,
type: String, default: true,
default: 'img/brand/green.png', description: 'Whether sidebar should autoclose on mobile when clicking an item',
description: 'Gradido Sidebar app logo'
},
autoClose: {
type: Boolean,
default: true,
description: 'Whether sidebar should autoclose on mobile when clicking an item'
}
}, },
provide() { },
return { provide() {
autoClose: this.autoClose return {
}; autoClose: this.autoClose,
},
methods: {
closeSidebar() {
this.$sidebar.displaySidebar(false)
},
showSidebar() {
this.$sidebar.displaySidebar(true)
},
logout(){
this.$store.dispatch('logout')
}
},
beforeDestroy() {
if (this.$sidebar.showSidebar) {
this.$sidebar.showSidebar = false;
}
} }
}; },
methods: {
closeSidebar() {
this.$sidebar.displaySidebar(false)
},
showSidebar() {
this.$sidebar.displaySidebar(true)
},
logout() {
this.$store.dispatch('logout')
},
},
beforeDestroy() {
if (this.$sidebar.showSidebar) {
this.$sidebar.showSidebar = false
}
},
}
</script> </script>

109
frontend/src/components/SidebarPlugin/SidebarItem.vue
View File

@ -15,31 +15,28 @@
> >
<template v-if="addLink"> <template v-if="addLink">
<span class="nav-link-text"> <span class="nav-link-text">
{{ link.name }} <b class="caret"></b> {{ link.name }}
<b class="caret"></b>
</span> </span>
</template> </template>
<template v-else> <template v-else>
<i :class="link.icon"></i> <i :class="link.icon"></i>
<span class="nav-link-text">{{ link.name }} <b class="caret"></b></span> <span class="nav-link-text">
{{ link.name }}
<b class="caret"></b>
</span>
</template> </template>
</a> </a>
<collapse-transition> <collapse-transition>
<div <div v-if="$slots.default || this.isMenu" v-show="!collapsed" class="collapse show">
v-if="$slots.default || this.isMenu"
v-show="!collapsed"
class="collapse show"
>
<ul class="nav nav-sm flex-column"> <ul class="nav nav-sm flex-column">
<slot></slot> <slot></slot>
</ul> </ul>
</div> </div>
</collapse-transition> </collapse-transition>
<slot <slot name="title" v-if="children.length === 0 && !$slots.default && link.path">
name="title"
v-if="children.length === 0 && !$slots.default && link.path"
>
<component <component
:to="link.path" :to="link.path"
@click.native="linkClick" @click.native="linkClick"
@ -61,19 +58,19 @@
</b-nav-item> </b-nav-item>
</template> </template>
<script> <script>
import { CollapseTransition } from 'vue2-transitions'; import { CollapseTransition } from 'vue2-transitions'
export default { export default {
name: 'sidebar-item', name: 'sidebar-item',
components: { components: {
CollapseTransition CollapseTransition,
}, },
props: { props: {
menu: { menu: {
type: Boolean, type: Boolean,
default: false, default: false,
description: description:
"Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior." "Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior.",
}, },
link: { link: {
type: Object, type: Object,
@ -81,115 +78,109 @@ export default {
return { return {
name: '', name: '',
path: '', path: '',
children: [] children: [],
}; }
}, },
description: description:
'Sidebar link. Can contain name, path, icon and other attributes. See examples for more info' 'Sidebar link. Can contain name, path, icon and other attributes. See examples for more info',
} },
}, },
provide() { provide() {
return { return {
addLink: this.addChild, addLink: this.addChild,
removeLink: this.removeChild removeLink: this.removeChild,
}; }
}, },
inject: { inject: {
addLink: { default: null }, addLink: { default: null },
removeLink: { default: null }, removeLink: { default: null },
autoClose: { autoClose: {
default: true default: true,
} },
}, },
data() { data() {
return { return {
children: [], children: [],
collapsed: true collapsed: true,
}; }
}, },
computed: { computed: {
baseComponent() { baseComponent() {
return this.isMenu || this.link.isRoute ? 'li' : 'router-link'; return this.isMenu || this.link.isRoute ? 'li' : 'router-link'
}, },
linkPrefix() { linkPrefix() {
if (this.link.name) { if (this.link.name) {
let words = this.link.name.split(' '); let words = this.link.name.split(' ')
return words.map(word => word.substring(0, 1)).join(''); return words.map((word) => word.substring(0, 1)).join('')
} }
return '' return ''
}, },
isMenu() { isMenu() {
return this.children.length > 0 || this.menu === true; return this.children.length > 0 || this.menu === true
}, },
isActive() { isActive() {
if (this.$route && this.$route.path) { if (this.$route && this.$route.path) {
let matchingRoute = this.children.find(c => let matchingRoute = this.children.find((c) => this.$route.path.startsWith(c.link.path))
this.$route.path.startsWith(c.link.path)
);
if (matchingRoute !== undefined) { if (matchingRoute !== undefined) {
return true; return true
} }
} }
return false; return false
} },
}, },
methods: { methods: {
addChild(item) { addChild(item) {
const index = this.$slots.default.indexOf(item.$vnode); const index = this.$slots.default.indexOf(item.$vnode)
this.children.splice(index, 0, item); this.children.splice(index, 0, item)
}, },
removeChild(item) { removeChild(item) {
const tabs = this.children; const tabs = this.children
const index = tabs.indexOf(item); const index = tabs.indexOf(item)
tabs.splice(index, 1); tabs.splice(index, 1)
}, },
elementType(link, isParent = true) { elementType(link, isParent = true) {
if (link.isRoute === false) { if (link.isRoute === false) {
return isParent ? 'li' : 'a'; return isParent ? 'li' : 'a'
} else { } else {
return 'router-link'; return 'router-link'
} }
}, },
linkAbbreviation(name) { linkAbbreviation(name) {
const matches = name.match(/\b(\w)/g); const matches = name.match(/\b(\w)/g)
return matches.join(''); return matches.join('')
}, },
linkClick() { linkClick() {
if ( if (this.autoClose && this.$sidebar && this.$sidebar.showSidebar === true) {
this.autoClose && this.$sidebar.displaySidebar(false)
this.$sidebar &&
this.$sidebar.showSidebar === true
) {
this.$sidebar.displaySidebar(false);
} }
}, },
collapseMenu() { collapseMenu() {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed
}, },
collapseSubMenu(link) { collapseSubMenu(link) {
link.collapsed = !link.collapsed; link.collapsed = !link.collapsed
} },
}, },
mounted() { mounted() {
if (this.addLink) { if (this.addLink) {
this.addLink(this); this.addLink(this)
} }
if (this.link.collapsed !== undefined) { if (this.link.collapsed !== undefined) {
this.collapsed = this.link.collapsed; this.collapsed = this.link.collapsed
} }
if (this.isActive && this.isMenu) { if (this.isActive && this.isMenu) {
this.collapsed = false; this.collapsed = false
} }
}, },
destroyed() { destroyed() {
if (this.$el && this.$el.parentNode) { if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el); this.$el.parentNode.removeChild(this.$el)
} }
if (this.removeLink) { if (this.removeLink) {
this.removeLink(this); this.removeLink(this)
} }
} },
}; }
</script> </script>
<style> <style>
.sidebar-menu-item { .sidebar-menu-item {

42
frontend/src/components/SidebarPlugin/index.js
View File

@ -1,43 +1,43 @@
import Sidebar from './SideBar.vue'; import Sidebar from './SideBar.vue'
import SidebarItem from './SidebarItem.vue'; import SidebarItem from './SidebarItem.vue'
const SidebarStore = { const SidebarStore = {
showSidebar: false, showSidebar: false,
sidebarLinks: [], sidebarLinks: [],
isMinimized: false, isMinimized: false,
displaySidebar(value) { displaySidebar(value) {
this.showSidebar = value; this.showSidebar = value
}, },
toggleMinimize() { toggleMinimize() {
document.body.classList.toggle('sidebar-mini'); document.body.classList.toggle('sidebar-mini')
// we simulate the window Resize so the charts will get updated in realtime. // we simulate the window Resize so the charts will get updated in realtime.
const simulateWindowResize = setInterval(() => { const simulateWindowResize = setInterval(() => {
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'))
}, 180); }, 180)
// we stop the simulation of Window Resize after the animations are completed // we stop the simulation of Window Resize after the animations are completed
setTimeout(() => { setTimeout(() => {
clearInterval(simulateWindowResize); clearInterval(simulateWindowResize)
}, 1000); }, 1000)
this.isMinimized = !this.isMinimized; this.isMinimized = !this.isMinimized
} },
}; }
const SidebarPlugin = { const SidebarPlugin = {
install(Vue, options) { install(Vue, options) {
if (options && options.sidebarLinks) { if (options && options.sidebarLinks) {
SidebarStore.sidebarLinks = options.sidebarLinks; SidebarStore.sidebarLinks = options.sidebarLinks
} }
let app = new Vue({ let app = new Vue({
data: { data: {
sidebarStore: SidebarStore sidebarStore: SidebarStore,
} },
}); })
Vue.prototype.$sidebar = app.sidebarStore; Vue.prototype.$sidebar = app.sidebarStore
Vue.component('side-bar', Sidebar); Vue.component('side-bar', Sidebar)
Vue.component('sidebar-item', SidebarItem); Vue.component('sidebar-item', SidebarItem)
} },
}; }
export default SidebarPlugin; export default SidebarPlugin

14
frontend/src/components/Tabs/Tab.vue
View File

@ -16,18 +16,18 @@ export default {
inject: ['addTab', 'removeTab'], inject: ['addTab', 'removeTab'],
data() { data() {
return { return {
active: false active: false,
}; }
}, },
mounted() { mounted() {
this.addTab(this); this.addTab(this)
}, },
destroyed() { destroyed() {
if (this.$el && this.$el.parentNode) { if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el); this.$el.parentNode.removeChild(this.$el)
} }
this.removeTab(this); this.removeTab(this)
} },
}; }
</script> </script>
<style></style> <style></style>

90
frontend/src/components/Tabs/Tabs.vue
View File

@ -4,7 +4,7 @@
:class="[ :class="[
{ 'col-md-4': vertical && !tabNavWrapperClasses }, { 'col-md-4': vertical && !tabNavWrapperClasses },
{ 'col-12': centered && !tabNavWrapperClasses }, { 'col-12': centered && !tabNavWrapperClasses },
tabNavWrapperClasses tabNavWrapperClasses,
]" ]"
> >
<b-nav <b-nav
@ -14,7 +14,7 @@
`nav-pills-${type}`, `nav-pills-${type}`,
{ 'flex-column': vertical }, { 'flex-column': vertical },
{ 'justify-content-center': centered }, { 'justify-content-center': centered },
tabNavClasses tabNavClasses,
]" ]"
> >
<b-nav-item <b-nav-item
@ -28,7 +28,7 @@
@click.prevent="activateTab(tab)" @click.prevent="activateTab(tab)"
:aria-expanded="tab.active" :aria-expanded="tab.active"
> >
<tab-item-content :tab="tab"> </tab-item-content> <tab-item-content :tab="tab"></tab-item-content>
</b-nav-item> </b-nav-item>
</b-nav> </b-nav>
</div> </div>
@ -37,7 +37,7 @@
:class="[ :class="[
{ 'tab-space': !vertical }, { 'tab-space': !vertical },
{ 'col-md-8': vertical && !tabContentClasses }, { 'col-md-8': vertical && !tabContentClasses },
tabContentClasses tabContentClasses,
]" ]"
> >
<slot></slot> <slot></slot>
@ -52,110 +52,104 @@ export default {
TabItemContent: { TabItemContent: {
props: ['tab'], props: ['tab'],
render(h) { render(h) {
return h('div', [this.tab.$slots.title || this.tab.title]); return h('div', [this.tab.$slots.title || this.tab.title])
} },
} },
}, },
provide() { provide() {
return { return {
addTab: this.addTab, addTab: this.addTab,
removeTab: this.removeTab removeTab: this.removeTab,
}; }
}, },
props: { props: {
type: { type: {
type: String, type: String,
default: 'primary', default: 'primary',
validator: value => { validator: (value) => {
let acceptedValues = [ let acceptedValues = ['primary', 'info', 'success', 'warning', 'danger']
'primary', return acceptedValues.indexOf(value) !== -1
'info', },
'success',
'warning',
'danger'
];
return acceptedValues.indexOf(value) !== -1;
}
}, },
activeTab: { activeTab: {
type: String, type: String,
default: '', default: '',
description: 'Active tab name' description: 'Active tab name',
}, },
tabNavWrapperClasses: { tabNavWrapperClasses: {
type: [String, Object], type: [String, Object],
default: '', default: '',
description: 'ul wrapper css classes' description: 'ul wrapper css classes',
}, },
tabNavClasses: { tabNavClasses: {
type: [String, Object], type: [String, Object],
default: '', default: '',
description: 'ul css classes' description: 'ul css classes',
}, },
tabContentClasses: { tabContentClasses: {
type: [String, Object], type: [String, Object],
default: '', default: '',
description: 'tab content css classes' description: 'tab content css classes',
}, },
vertical: Boolean, vertical: Boolean,
centered: Boolean, centered: Boolean,
value: String value: String,
}, },
data() { data() {
return { return {
tabs: [] tabs: [],
}; }
}, },
methods: { methods: {
findAndActivateTab(title) { findAndActivateTab(title) {
let tabToActivate = this.tabs.find(t => t.title === title); let tabToActivate = this.tabs.find((t) => t.title === title)
if (tabToActivate) { if (tabToActivate) {
this.activateTab(tabToActivate); this.activateTab(tabToActivate)
} }
}, },
activateTab(tab) { activateTab(tab) {
if (this.handleClick) { if (this.handleClick) {
this.handleClick(tab); this.handleClick(tab)
} }
this.deactivateTabs(); this.deactivateTabs()
tab.active = true; tab.active = true
}, },
deactivateTabs() { deactivateTabs() {
this.tabs.forEach(tab => { this.tabs.forEach((tab) => {
tab.active = false; tab.active = false
}); })
}, },
addTab(tab) { addTab(tab) {
const index = this.$slots.default.indexOf(tab.$vnode); const index = this.$slots.default.indexOf(tab.$vnode)
if (!this.activeTab && index === 0) { if (!this.activeTab && index === 0) {
tab.active = true; tab.active = true
} }
if (this.activeTab === tab.name) { if (this.activeTab === tab.name) {
tab.active = true; tab.active = true
} }
this.tabs.splice(index, 0, tab); this.tabs.splice(index, 0, tab)
}, },
removeTab(tab) { removeTab(tab) {
const tabs = this.tabs; const tabs = this.tabs
const index = tabs.indexOf(tab); const index = tabs.indexOf(tab)
if (index > -1) { if (index > -1) {
tabs.splice(index, 1); tabs.splice(index, 1)
} }
} },
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.value) { if (this.value) {
this.findAndActivateTab(this.value); this.findAndActivateTab(this.value)
} }
}); })
}, },
watch: { watch: {
value(newVal) { value(newVal) {
this.findAndActivateTab(newVal); this.findAndActivateTab(newVal)
} },
} },
}; }
</script> </script>
<style scoped></style> <style scoped></style>

48
frontend/src/components/index.js
View File

@ -1,30 +1,30 @@
import BaseCheckbox from './Inputs/BaseCheckbox.vue'; import BaseCheckbox from './Inputs/BaseCheckbox.vue'
import BaseAlert from './BaseAlert.vue'; import BaseAlert from './BaseAlert.vue'
import BaseRadio from './Inputs/BaseRadio.vue'; import BaseRadio from './Inputs/BaseRadio.vue'
import BaseInput from './Inputs/BaseInput.vue'; import BaseInput from './Inputs/BaseInput.vue'
import Badge from './Badge'; import Badge from './Badge'
import BaseProgress from './BaseProgress.vue'; import BaseProgress from './BaseProgress.vue'
import BaseButton from './BaseButton.vue'; import BaseButton from './BaseButton.vue'
import BaseDropdown from './BaseDropdown.vue'; import BaseDropdown from './BaseDropdown.vue'
import BaseTable from './BaseTable.vue'; import BaseTable from './BaseTable.vue'
import Card from './Cards/Card.vue'; import Card from './Cards/Card.vue'
import StatsCard from './Cards/StatsCard.vue'; import StatsCard from './Cards/StatsCard.vue'
import BaseNav from './Navbar/BaseNav'; import BaseNav from './Navbar/BaseNav'
import NavbarToggleButton from './Navbar/NavbarToggleButton'; import NavbarToggleButton from './Navbar/NavbarToggleButton'
import TabPane from './Tabs/Tab.vue'; import TabPane from './Tabs/Tab.vue'
import Tabs from './Tabs/Tabs.vue'; import Tabs from './Tabs/Tabs.vue'
import Collapse from './Collapse/Collapse.vue'; import Collapse from './Collapse/Collapse.vue'
import CollapseItem from './Collapse/CollapseItem.vue'; import CollapseItem from './Collapse/CollapseItem.vue'
import Modal from './Modal.vue'; import Modal from './Modal.vue'
import BaseSlider from './BaseSlider.vue'; import BaseSlider from './BaseSlider.vue'
import LoadingPanel from './LoadingPanel.vue'; import LoadingPanel from './LoadingPanel.vue'
import BasePagination from './BasePagination.vue'; import BasePagination from './BasePagination.vue'
import SidebarPlugin from './SidebarPlugin'; import SidebarPlugin from './SidebarPlugin'
export { export {
BaseCheckbox, BaseCheckbox,
@ -48,5 +48,5 @@ export {
BaseButton, BaseButton,
Collapse, Collapse,
CollapseItem, CollapseItem,
LoadingPanel LoadingPanel,
}; }

6
frontend/src/config/index.js
View File

@ -11,10 +11,12 @@ const environment = {
const server = { const server = {
LOGIN_API_URL: process.env.LOGIN_API_URL || 'http://localhost/login_api/', LOGIN_API_URL: process.env.LOGIN_API_URL || 'http://localhost/login_api/',
COMMUNITY_API_STATE_BALANCE_URL: process.env.COMMUNITY_API_STATE_BALANCE_URL || 'http://localhost/state-balances/', COMMUNITY_API_STATE_BALANCE_URL:
process.env.COMMUNITY_API_STATE_BALANCE_URL || 'http://localhost/state-balances/',
// Schöpfung // Schöpfung
// COMMUNITY_API_TRANSACTION_CREATION_URL: process.env.COMMUNITY_API_TRANSACTION_CREATION_URL || 'http://localhost/transaction-creations/', // COMMUNITY_API_TRANSACTION_CREATION_URL: process.env.COMMUNITY_API_TRANSACTION_CREATION_URL || 'http://localhost/transaction-creations/',
COMMUNITY_API_TRANSACTION_SEND_COINS: process.env.COMMUNITY_API_TRANSACTION_SEND_COINS || 'http://localhost/transaction-send-coins/', COMMUNITY_API_TRANSACTION_SEND_COINS:
process.env.COMMUNITY_API_TRANSACTION_SEND_COINS || 'http://localhost/transaction-send-coins/',
} }
const CONFIG = { const CONFIG = {

18
frontend/src/directives/click-ouside.js
View File

@ -1,15 +1,15 @@
export default { export default {
bind: function(el, binding, vnode) { bind: function (el, binding, vnode) {
el.clickOutsideEvent = function(event) { el.clickOutsideEvent = function (event) {
// here I check that click was outside the el and his childrens // here I check that click was outside the el and his childrens
if (!(el == event.target || el.contains(event.target))) { if (!(el == event.target || el.contains(event.target))) {
// and if it did, call method provided in attribute value // and if it did, call method provided in attribute value
vnode.context[binding.expression](event); vnode.context[binding.expression](event)
} }
}; }
document.body.addEventListener('click', el.clickOutsideEvent); document.body.addEventListener('click', el.clickOutsideEvent)
}, },
unbind: function(el) { unbind: function (el) {
document.body.removeEventListener('click', el.clickOutsideEvent); document.body.removeEventListener('click', el.clickOutsideEvent)
} },
}; }

28
frontend/src/i18n.js
View File

@ -6,24 +6,24 @@ import de from 'vee-validate/dist/locale/de'
Vue.use(VueI18n) Vue.use(VueI18n)
function loadLocaleMessages () { function loadLocaleMessages() {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {} const messages = {}
locales.keys().forEach(key => { locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i) const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) { if (matched && matched.length > 1) {
const locale = matched[1] const locale = matched[1]
messages[locale] = locales(key) messages[locale] = locales(key)
if(locale === 'de') { if (locale === 'de') {
messages[locale] = { messages[locale] = {
validations: de, validations: de,
...messages[locale] ...messages[locale],
} }
} }
if(locale === 'en') { if (locale === 'en') {
messages[locale] = { messages[locale] = {
validations: en, validations: en,
...messages[locale] ...messages[locale],
} }
} }
} }
@ -35,22 +35,22 @@ const numberFormats = {
'en-US': { 'en-US': {
currency: { currency: {
style: 'currency', style: 'currency',
currency: "GDD", currency: 'GDD',
abbreviate: true abbreviate: true,
} },
}, },
'de-DE': { 'de-DE': {
currency: { currency: {
style: 'currency', style: 'currency',
currency: "GDD", currency: 'GDD',
abbreviate: true abbreviate: true,
} },
} },
} }
export default new VueI18n({ export default new VueI18n({
locale: 'en', locale: 'en',
fallbackLocale: 'en', fallbackLocale: 'en',
messages: loadLocaleMessages(), messages: loadLocaleMessages(),
numberFormats numberFormats,
}) })

2
frontend/src/icon.js
View File

File diff suppressed because one or more lines are too long

25
frontend/src/main.js
View File

@ -1,21 +1,20 @@
import Vue from 'vue'; import Vue from 'vue'
import DashboardPlugin from './plugins/dashboard-plugin'; import DashboardPlugin from './plugins/dashboard-plugin'
import App from './App.vue'; import App from './App.vue'
import i18n from './i18n.js'; import i18n from './i18n.js'
import VeeValidate from './vee-validate.js' import VeeValidate from './vee-validate.js'
import VueCookies from 'vue-cookies'; import VueCookies from 'vue-cookies'
// store // store
import {store} from './store/store'; import { store } from './store/store'
// router setup // router setup
import router from './routes/router'; import router from './routes/router'
// plugin setup // plugin setup
Vue.use(DashboardPlugin); Vue.use(DashboardPlugin)
Vue.config.productionTip = false; Vue.config.productionTip = false
Vue.use(VueCookies); Vue.use(VueCookies)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
@ -23,5 +22,5 @@ new Vue({
router, router,
store, store,
i18n, i18n,
render: h => h(App) render: (h) => h(App),
}); })

80
frontend/src/plugins/dashboard-plugin.js
View File

@ -1,71 +1,67 @@
// Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE) // Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE)
import '@/polyfills'; import '@/polyfills'
// Notifications plugin. Used on Notifications page // Notifications plugin. Used on Notifications page
import Notifications from '@/components/NotificationPlugin'; import Notifications from '@/components/NotificationPlugin'
// Validation plugin used to validate forms // Validation plugin used to validate forms
import { configure } from 'vee-validate'; import { configure } from 'vee-validate'
// A plugin file where you could register global components used across the app // A plugin file where you could register global components used across the app
import GlobalComponents from './globalComponents'; import GlobalComponents from './globalComponents'
// A plugin file where you could register global directives // A plugin file where you could register global directives
import GlobalDirectives from './globalDirectives'; import GlobalDirectives from './globalDirectives'
// Sidebar on the right. Used as a local plugin in DashboardLayout.vue // Sidebar on the right. Used as a local plugin in DashboardLayout.vue
import SideBar from '@/components/SidebarPlugin'; import SideBar from '@/components/SidebarPlugin'
// element ui language configuration // element ui language configuration
import lang from 'element-ui/lib/locale/lang/en'; import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'; import locale from 'element-ui/lib/locale'
locale.use(lang); locale.use(lang)
// vue-bootstrap // vue-bootstrap
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// asset imports // asset imports
import '@/assets/scss/argon.scss'; import '@/assets/scss/argon.scss'
import '@/assets/vendor/nucleo/css/nucleo.css'; import '@/assets/vendor/nucleo/css/nucleo.css'
import { extend } from 'vee-validate'; import { extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'; import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/en.json'; import { messages } from 'vee-validate/dist/locale/en.json'
import VueQrcodeReader from "vue-qrcode-reader"; import VueQrcodeReader from 'vue-qrcode-reader'
import VueQrcode from "vue-qrcode"; import VueQrcode from 'vue-qrcode'
import VueFlatPickr from 'vue-flatpickr-component'; import VueFlatPickr from 'vue-flatpickr-component'
import VueGoodTablePlugin from 'vue-good-table'; import VueGoodTablePlugin from 'vue-good-table'
// import the styles // import the styles
import 'vue-good-table/dist/vue-good-table.css'; import 'vue-good-table/dist/vue-good-table.css'
import VueMoment from 'vue-moment'; import VueMoment from 'vue-moment'
Object.keys(rules).forEach((rule) => {
Object.keys(rules).forEach(rule => {
extend(rule, { extend(rule, {
...rules[rule], // copies rule configuration ...rules[rule], // copies rule configuration
message: messages[rule] // assign message message: messages[rule], // assign message
}); })
}); })
export default { export default {
install(Vue) { install(Vue) {
Vue.use(GlobalComponents); Vue.use(GlobalComponents)
Vue.use(GlobalDirectives); Vue.use(GlobalDirectives)
Vue.use(SideBar); Vue.use(SideBar)
Vue.use(Notifications); Vue.use(Notifications)
Vue.use(BootstrapVue); Vue.use(BootstrapVue)
Vue.use(IconsPlugin); Vue.use(IconsPlugin)
Vue.use(VueGoodTablePlugin); Vue.use(VueGoodTablePlugin)
Vue.use(VueMoment); Vue.use(VueMoment)
Vue.use(VueQrcodeReader); Vue.use(VueQrcodeReader)
Vue.use(VueQrcode); Vue.use(VueQrcode)
Vue.use(VueFlatPickr); Vue.use(VueFlatPickr)
configure({ configure({
classes: { classes: {
valid: 'is-valid', valid: 'is-valid',
invalid: 'is-invalid', invalid: 'is-invalid',
dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag! dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
} },
}) })
} },
}; }

72
frontend/src/plugins/globalComponents.js
View File

@ -1,45 +1,45 @@
import BaseInput from '@/components/Inputs/BaseInput.vue'; import BaseInput from '@/components/Inputs/BaseInput.vue'
import BaseDropdown from '@/components/BaseDropdown.vue'; import BaseDropdown from '@/components/BaseDropdown.vue'
import Card from '@/components/Cards/Card.vue'; import Card from '@/components/Cards/Card.vue'
import Modal from '@/components/Modal.vue'; import Modal from '@/components/Modal.vue'
import StatsCard from '@/components/Cards/StatsCard.vue'; import StatsCard from '@/components/Cards/StatsCard.vue'
import BaseButton from '@/components/BaseButton.vue'; import BaseButton from '@/components/BaseButton.vue'
import Badge from '@/components/Badge.vue'; import Badge from '@/components/Badge.vue'
import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'; import BaseCheckbox from '@/components/Inputs/BaseCheckbox.vue'
import BaseRadio from "@/components/Inputs/BaseRadio"; import BaseRadio from '@/components/Inputs/BaseRadio'
import BaseProgress from "@/components/BaseProgress"; import BaseProgress from '@/components/BaseProgress'
import BasePagination from "@/components/BasePagination"; import BasePagination from '@/components/BasePagination'
import BaseAlert from "@/components/BaseAlert"; import BaseAlert from '@/components/BaseAlert'
import BaseNav from "@/components/Navbar/BaseNav"; import BaseNav from '@/components/Navbar/BaseNav'
import BaseHeader from '@/components/BaseHeader'; import BaseHeader from '@/components/BaseHeader'
import { ValidationProvider, ValidationObserver } from 'vee-validate'; import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { Input, Tooltip, Popover } from 'element-ui'; import { Input, Tooltip, Popover } from 'element-ui'
/** /**
* You can register global components here and use them as a plugin in your main Vue instance * You can register global components here and use them as a plugin in your main Vue instance
*/ */
const GlobalComponents = { const GlobalComponents = {
install(Vue) { install(Vue) {
Vue.component(Badge.name, Badge); Vue.component(Badge.name, Badge)
Vue.component(BaseAlert.name, BaseAlert); Vue.component(BaseAlert.name, BaseAlert)
Vue.component(BaseButton.name, BaseButton); Vue.component(BaseButton.name, BaseButton)
Vue.component(BaseCheckbox.name, BaseCheckbox); Vue.component(BaseCheckbox.name, BaseCheckbox)
Vue.component(BaseHeader.name, BaseHeader); Vue.component(BaseHeader.name, BaseHeader)
Vue.component(BaseInput.name, BaseInput); Vue.component(BaseInput.name, BaseInput)
Vue.component(BaseDropdown.name, BaseDropdown); Vue.component(BaseDropdown.name, BaseDropdown)
Vue.component(BaseNav.name, BaseNav); Vue.component(BaseNav.name, BaseNav)
Vue.component(BasePagination.name, BasePagination); Vue.component(BasePagination.name, BasePagination)
Vue.component(BaseProgress.name, BaseProgress); Vue.component(BaseProgress.name, BaseProgress)
Vue.component(BaseRadio.name, BaseRadio); Vue.component(BaseRadio.name, BaseRadio)
Vue.component(Card.name, Card); Vue.component(Card.name, Card)
Vue.component(Modal.name, Modal); Vue.component(Modal.name, Modal)
Vue.component(StatsCard.name, StatsCard); Vue.component(StatsCard.name, StatsCard)
Vue.component(Input.name, Input); Vue.component(Input.name, Input)
Vue.component('validation-provider', ValidationProvider) Vue.component('validation-provider', ValidationProvider)
Vue.component('validation-observer', ValidationObserver) Vue.component('validation-observer', ValidationObserver)
Vue.use(Tooltip); Vue.use(Tooltip)
Vue.use(Popover); Vue.use(Popover)
} },
}; }
export default GlobalComponents; export default GlobalComponents

10
frontend/src/plugins/globalDirectives.js
View File

@ -1,4 +1,4 @@
import clickOutside from '@/directives/click-ouside.js'; import clickOutside from '@/directives/click-ouside.js'
/** /**
* You can register global directives here and use them as a plugin in your main Vue instance * You can register global directives here and use them as a plugin in your main Vue instance
@ -6,8 +6,8 @@ import clickOutside from '@/directives/click-ouside.js';
const GlobalDirectives = { const GlobalDirectives = {
install(Vue) { install(Vue) {
Vue.directive('click-outside', clickOutside); Vue.directive('click-outside', clickOutside)
} },
}; }
export default GlobalDirectives; export default GlobalDirectives

25
frontend/src/routes/router.js
View File

@ -8,24 +8,23 @@ Vue.use(VueRouter)
const router = new VueRouter({ const router = new VueRouter({
routes, // short for routes: routes routes, // short for routes: routes
linkActiveClass: 'active', linkActiveClass: 'active',
scrollBehavior: (to, from ,savedPosition) => { scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) { if (savedPosition) {
return savedPosition; return savedPosition
} }
if (to.hash) { if (to.hash) {
return { selector: to.hash } return { selector: to.hash }
} }
return { x: 0, y: 0 } return { x: 0, y: 0 }
} },
});
router.beforeEach((to, from, next) => {
let language = to.params.lang
if (!language) {
language = 'de'
}
next()
}) })
export default router router.beforeEach((to, from, next) => {
let language = to.params.lang
if (!language) {
language = 'de'
}
next()
})
export default router

55
frontend/src/routes/routes.js
View File

@ -4,7 +4,6 @@ import AuthLayout from '@/views/Layout/AuthLayout.vue'
// import NotFound from '@/views/NotFoundPage.vue' // import NotFound from '@/views/NotFoundPage.vue'
const routes = [ const routes = [
{ {
path: '/', path: '/',
@ -13,26 +12,26 @@ const routes = [
children: [ children: [
{ {
path: '/login', path: '/login',
component: () => import('../views/Pages/Login.vue') component: () => import('../views/Pages/Login.vue'),
}, },
{ {
path: '/thx', path: '/thx',
component: () => import('../views/Pages/thx.vue') component: () => import('../views/Pages/thx.vue'),
}, },
{ {
path: '/register', path: '/register',
component: () => import('../views/Pages/Register.vue') component: () => import('../views/Pages/Register.vue'),
}, },
{ {
path: '/password', path: '/password',
component: () => import('../views/Pages/Password.vue') component: () => import('../views/Pages/Password.vue'),
}, },
{ {
path: '/explorer', path: '/explorer',
name: 'Explorer', name: 'Explorer',
component: () => import('../views/Pages/Explorer.vue'), component: () => import('../views/Pages/Explorer.vue'),
} },
] ],
}, },
{ {
path: '/', path: '/',
@ -43,26 +42,26 @@ const routes = [
path: '/overview', path: '/overview',
component: () => import('../views/KontoOverview.vue'), component: () => import('../views/KontoOverview.vue'),
meta: { meta: {
requiresAuth: true requiresAuth: true,
} },
}, },
{ {
path: '/profile', path: '/profile',
component: () => import('../views/Pages/UserProfileCard.vue') component: () => import('../views/Pages/UserProfileCard.vue'),
}, },
{ {
path: '/profileedit', path: '/profileedit',
component: () => import('../views/Pages/UserProfileEdit.vue') component: () => import('../views/Pages/UserProfileEdit.vue'),
}, },
{ {
path: '/activity', path: '/activity',
component: () => import('../views/Pages/UserProfileActivity.vue') component: () => import('../views/Pages/UserProfileActivity.vue'),
}, },
{ {
path: '/transactions', path: '/transactions',
component: () => import('../views/Pages/UserProfileTransactionList.vue') component: () => import('../views/Pages/UserProfileTransactionList.vue'),
} },
] ],
}, },
, ,
{ {
@ -75,11 +74,11 @@ const routes = [
name: 'Adminübersicht', name: 'Adminübersicht',
component: () => import('../views/AdminOverview.vue'), component: () => import('../views/AdminOverview.vue'),
meta: { meta: {
requiresAuth: true requiresAuth: true,
} },
} },
] ],
} },
]; ]
export default routes; export default routes

30
frontend/src/routes/starterRouter.js
View File

@ -1,9 +1,9 @@
import Vue from 'vue'; import Vue from 'vue'
import Router from 'vue-router'; import Router from 'vue-router'
import DashboardLayout from '../views/Starter/SampleLayout.vue'; import DashboardLayout from '../views/Starter/SampleLayout.vue'
import Starter from '../views/Starter/SamplePage.vue'; import Starter from '../views/Starter/SamplePage.vue'
Vue.use(Router); Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
@ -16,18 +16,18 @@ export default new Router({
{ {
path: 'dashboard', path: 'dashboard',
name: 'dashboard', name: 'dashboard',
components: { default: Starter } components: { default: Starter },
} },
] ],
} },
], ],
scrollBehavior: (to, from ,savedPosition) => { scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) { if (savedPosition) {
return savedPosition; return savedPosition
} }
if (to.hash) { if (to.hash) {
return { selector: to.hash }; return { selector: to.hash }
} }
return { x: 0, y: 0 }; return { x: 0, y: 0 }
} },
}); })

132
frontend/src/store/store.js
View File

@ -13,28 +13,28 @@ export const store = new Vuex.Store({
sizeDE: 'normal', sizeDE: 'normal',
sizeGB: 'big', sizeGB: 'big',
loginfail: false, loginfail: false,
user : { user: {
name:"", name: '',
balance: 0, balance: 0,
balance_gdt: 0 balance_gdt: 0,
}, },
ajaxCreateData: { ajaxCreateData: {
session_id : '', session_id: '',
email: "", email: '',
amount: 0, amount: 0,
target_date:"2021-02-19T13:25:36+00:00", target_date: '2021-02-19T13:25:36+00:00',
memo:"", memo: '',
auto_sign: true auto_sign: true,
}, },
transactions: [], transactions: [],
modals: false, modals: false,
optionAxios: { optionAxios: {
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': 'true' 'Access-Control-Allow-Credentials': 'true',
} },
} },
}, },
getters: { getters: {
//isLoggedIn: (state /*, getters */) => { //isLoggedIn: (state /*, getters */) => {
@ -44,17 +44,16 @@ export const store = new Vuex.Store({
// Syncronous mutation of the state // Syncronous mutation of the state
mutations: { mutations: {
language: (state, language) => { language: (state, language) => {
console.log('mutation: language', language) //console.log('mutation: language', language)
state.language = language state.language = language
$cookies.set('gdd_lang', language); $cookies.set('gdd_lang', language)
if (state.language == "de") { if (state.language == 'de') {
state.sizeDE = 'big' state.sizeDE = 'big'
state.sizeGB = 'normal' state.sizeGB = 'normal'
} else { } else {
state.sizeDE = 'normal' state.sizeDE = 'normal'
state.sizeGB = 'big' state.sizeGB = 'big'
} }
}, },
loginfail: (state, loginfail) => { loginfail: (state, loginfail) => {
//console.log('mutation: email') //console.log('mutation: email')
@ -64,103 +63,108 @@ export const store = new Vuex.Store({
//console.log('mutation: email') //console.log('mutation: email')
state.email = email state.email = email
}, },
session_id: (state,session_id) => { session_id: (state, session_id) => {
//console.log('mutation: session_id') //console.log('mutation: session_id')
state.session_id = session_id state.session_id = session_id
}, },
user_balance: (state,balance) => { user_balance: (state, balance) => {
console.log('mutation: user_balance') //console.log('mutation: user_balance')
state.user.balance = (balance/10000) state.user.balance = balance / 10000
}, },
user_balance_gdt: (state,balance) => { user_balance_gdt: (state, balance) => {
//console.log('mutation: user_balance_gdt') //console.log('mutation: user_balance_gdt')
state.user.balance_gdt = (balance/10000) state.user.balance_gdt = balance / 10000
}, },
transactions: (state,transactions) => { transactions: (state, transactions) => {
//console.log('mutation: transactions') //console.log('mutation: transactions')
state.transactions = transactions state.transactions = transactions
} },
}, },
// Asyncronous actions - used for api calls // Asyncronous actions - used for api calls
actions: { actions: {
login: async ({ dispatch, commit }, data) => { login: async ({ dispatch, commit }, data) => {
const result = await loginAPI.login(data.email,data.password) const result = await loginAPI.login(data.email, data.password)
if( result.success){ if (result.success) {
commit('session_id', result.result.data.session_id) commit('session_id', result.result.data.session_id)
commit('email', data.email) commit('email', data.email)
$cookies.set('gdd_session_id', result.result.data.session_id); $cookies.set('gdd_session_id', result.result.data.session_id)
$cookies.set('gdd_u', data.email); $cookies.set('gdd_u', data.email)
router.push('/overview') router.push('/overview')
} else { } else {
// Register failed, we perform a logout // Register failed, we perform a logout
//alert('>>>>> FAIl LOGIN') //alert('>>>>> FAIl LOGIN')
commit('loginfail', true) commit('loginfail', true)
//dispatch('logout') //dispatch('logout')
} }
}, },
passwordReset: async (data) => { passwordReset: async (data) => {
console.log("<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>", data.email) //console.log('<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>', data.email)
}, },
schoepfen: async (data) => { schoepfen: async (data) => {
// http://localhost/transaction-creations/ajaxCreate // http://localhost/transaction-creations/ajaxCreate
}, },
createUser: async ({ commit, dispatch }, data) => { createUser: async ({ commit, dispatch }, data) => {
// console.log('action: createUser') // console.log('action: createUser')
const result = await loginAPI.create(data.email,data.first_name,data.last_name,data.password) const result = await loginAPI.create(
if( result.success ){ data.email,
data.first_name,
data.last_name,
data.password,
)
if (result.success) {
commit('session_id', result.result.data.session_id) commit('session_id', result.result.data.session_id)
commit('email', data.email) commit('email', data.email)
$cookies.set('gdd_session_id', result.result.data.session_id); $cookies.set('gdd_session_id', result.result.data.session_id)
$cookies.set('gdd_u', data.email); $cookies.set('gdd_u', data.email)
router.push('/overview') router.push('/overview')
} else { } else {
// Register failed, we perform a logout // Register failed, we perform a logout
// console.log('action createUser to logout start') // console.log('action createUser to logout start')
dispatch('logout') dispatch('logout')
} }
}, },
logout: async ({ commit , state }) => { logout: async ({ commit, state }) => {
console.log('action: logout') //console.log('action: logout')
// Are we actually logged in? // Are we actually logged in?
if(state.session_id){ if (state.session_id) {
const result = await loginAPI.logout(state.session_id) const result = await loginAPI.logout(state.session_id)
// The result can be error, but thats ok with us // The result can be error, but thats ok with us
} }
commit('session_id', null) commit('session_id', null)
commit('email', null) commit('email', null)
$cookies.remove('gdd_session_id'); $cookies.remove('gdd_session_id')
$cookies.remove('gdd_u'); $cookies.remove('gdd_u')
$cookies.remove('gdd_lang'); $cookies.remove('gdd_lang')
router.push('/Login') router.push('/Login')
}, },
ajaxCreate: async ({ dispatch, state }) => { ajaxCreate: async ({ dispatch, state }) => {
console.log('action: ajaxCreate') //console.log('action: ajaxCreate')
state.ajaxCreateData.amount = (state.ajaxCreateData.amount)*10000 state.ajaxCreateData.amount = state.ajaxCreateData.amount * 10000
const result = await communityAPI.send(state.session_id, state.ajaxCreateData.email, state.ajaxCreateData.amount, state.ajaxCreateData.memo) const result = await communityAPI.create($cookies.get('gdd_session_id', email, amount, memo))
console.log(result) //console.log(result)
}, },
ajaxListTransactions: async ({commit, dispatch, state}) => { ajaxListTransactions: async ({ commit, dispatch, state }) => {
// console.log('action: ajaxListTransactions', state.session_id) // console.log('action: ajaxListTransactions', state.session_id)
// const result = await communityAPI.transactions(state.session_id) // const result = await communityAPI.transactions(state.session_id)
}, },
accountBalance: async ({ commit, dispatch, state }) => { accountBalance: async ({ commit, dispatch, state }) => {
console.log('action: accountBalance') //console.log('action: accountBalance')
// console.log('action: dispatch', dispatch) // console.log('action: dispatch', dispatch)
// console.log('action: state.session_id', state.session_id) // console.log('action: state.session_id', state.session_id)
// console.log(" action: $cookies.get('gdd_session_id') ", $cookies.get("gdd_session_id") ) // console.log(" action: $cookies.get('gdd_session_id') ", $cookies.get("gdd_session_id") )
// commit('session_id', $cookies.get("gdd_session_id")) // commit('session_id', $cookies.get("gdd_session_id"))
// commit('email', $cookies.get("gdd_u")) // commit('email', $cookies.get("gdd_u"))
const result = await communityAPI.balance($cookies.get("gdd_session_id")) const result = await communityAPI.balance($cookies.get('gdd_session_id'))
console.log("accountBalance result", result) //console.log('accountBalance result', result)
console.log("aresult.result.data.balance", result.result.data.balance) //console.log('aresult.result.data.balance', result.result.data.balance)
if(result.success) { if (result.success) {
commit('user_balance', result.result.data.balance) commit('user_balance', result.result.data.balance)
} else { } else {
console.log('action accountBalance to logout start') //console.log('action accountBalance to logout start')
dispatch('logout') dispatch('logout')
} }
} },
} },
}) })

8
frontend/src/util/throttle.js
View File

@ -4,12 +4,12 @@
* @param [timeout] the throttle interval * @param [timeout] the throttle interval
*/ */
export function throttle(handlerFunc, timeout = 66) { export function throttle(handlerFunc, timeout = 66) {
let resizeTimeout; let resizeTimeout
if (!resizeTimeout) { if (!resizeTimeout) {
resizeTimeout = setTimeout(() => { resizeTimeout = setTimeout(() => {
resizeTimeout = null; resizeTimeout = null
handlerFunc(); handlerFunc()
// The actualResizeHandler will execute at a rate of 15fps // The actualResizeHandler will execute at a rate of 15fps
}, timeout); }, timeout)
} }
} }

12
frontend/src/vee-validate.js
View File

@ -1,27 +1,25 @@
import { configure, extend } from 'vee-validate' import { configure, extend } from 'vee-validate'
import { required, email, min } from "vee-validate/dist/rules" import { required, email, min } from 'vee-validate/dist/rules'
import i18n from './i18n' import i18n from './i18n'
configure({ configure({
defaultMessage: (field, values) => { defaultMessage: (field, values) => {
values._field_ = i18n.t(`fields.${field}`) values._field_ = i18n.t(`fields.${field}`)
return i18n.t(`validations.messages.${values._rule_}`, values) return i18n.t(`validations.messages.${values._rule_}`, values)
} },
}) })
extend('email', { extend('email', {
...email, ...email,
message: (_, values) => i18n.t('validations.messages.email', values) message: (_, values) => i18n.t('validations.messages.email', values),
}) })
extend('required', { extend('required', {
...required, ...required,
message: (_, values) => i18n.t('validations.messages.required', values) message: (_, values) => i18n.t('validations.messages.required', values),
}) })
extend('min', { extend('min', {
...min, ...min,
message: (_, values) => i18n.t('validations.messages.min', values) message: (_, values) => i18n.t('validations.messages.min', values),
}) })

545
frontend/src/views/AdminOverview.vue
View File

@ -3,60 +3,72 @@
<base-header class="pb-6 pb-8 pt-5 pt-md-8"> <base-header class="pb-6 pb-8 pt-5 pt-md-8">
<b-row> <b-row>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card :title="$t('admin.site.overview.creation')" <stats-card
type="gradient-red" :title="$t('admin.site.overview.creation')"
sub-title="350,897" type="gradient-red"
icon="ni ni-active-40" sub-title="350,897"
class="mb-4"> icon="ni ni-active-40"
class="mb-4"
<template slot="footer" > >
<template slot="footer">
<span class="text-success mr-2">3.48%</span> <span class="text-success mr-2">3.48%</span>
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span> <span class="text-nowrap">
{{ $t('site.overview.since_last_month') }}
</span>
</template> </template>
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card :title="$t('admin.site.overview.transience')" <stats-card
type="gradient-orange" :title="$t('admin.site.overview.transience')"
sub-title="2,356" type="gradient-orange"
icon="ni ni-chart-pie-35" sub-title="2,356"
class="mb-4"> icon="ni ni-chart-pie-35"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">12.18%</span> <span class="text-success mr-2">12.18%</span>
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span> <span class="text-nowrap">
{{ $t('site.overview.since_last_month') }}
</span>
</template> </template>
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card :title="$t('admin.site.overview.exchanged')" <stats-card
type="gradient-green" :title="$t('admin.site.overview.exchanged')"
sub-title="924" type="gradient-green"
icon="ni ni-money-coins" sub-title="924"
class="mb-4"> icon="ni ni-money-coins"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-danger mr-2">5.72%</span> <span class="text-danger mr-2">5.72%</span>
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span> <span class="text-nowrap">
{{ $t('site.overview.since_last_month') }}
</span>
</template> </template>
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card :title="$t('admin.site.overview.members')" <stats-card
type="gradient-info" :title="$t('admin.site.overview.members')"
sub-title="49,65%" type="gradient-info"
icon="ni ni-chart-bar-32" sub-title="49,65%"
class="mb-4"> icon="ni ni-chart-bar-32"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">54.8%</span> <span class="text-success mr-2">54.8%</span>
<span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span> <span class="text-nowrap">
{{ $t('site.overview.since_last_month') }}
</span>
</template> </template>
</stats-card> </stats-card>
</b-col> </b-col>
</b-row> </b-row>
</base-header> </base-header>
<!--Charts--> <!--Charts-->
<b-container fluid class="mt--7"> <b-container fluid class="mt--7">
<b-row> <b-row>
@ -70,12 +82,13 @@
<b-col> <b-col>
<b-nav class="nav-pills justify-content-end"> <b-nav class="nav-pills justify-content-end">
<b-nav-item <b-nav-item
class="mr-2 mr-md-0" class="mr-2 mr-md-0"
:active="bigLineChart.activeIndex === 0" :active="bigLineChart.activeIndex === 0"
link-classes="py-2 px-1" link-classes="py-2 px-1"
@click.prevent="initBigChart(0)"> @click.prevent="initBigChart(0)"
<span class="d-none d-md-block">geschöpft</span> >
<span class="d-md-none">M</span> <span class="d-none d-md-block">geschöpft</span>
<span class="d-md-none">M</span>
</b-nav-item> </b-nav-item>
<b-nav-item <b-nav-item
link-classes="py-2 px-1" link-classes="py-2 px-1"
@ -85,7 +98,7 @@
<span class="d-none d-md-block">geteilt</span> <span class="d-none d-md-block">geteilt</span>
<span class="d-md-none">W</span> <span class="d-md-none">W</span>
</b-nav-item> </b-nav-item>
<b-nav-item <b-nav-item
link-classes="py-2 px-1" link-classes="py-2 px-1"
:active="bigLineChart.activeIndex === 2" :active="bigLineChart.activeIndex === 2"
@click.prevent="initBigChart(2)" @click.prevent="initBigChart(2)"
@ -93,7 +106,7 @@
<span class="d-none d-md-block">vergangen</span> <span class="d-none d-md-block">vergangen</span>
<span class="d-md-none">W</span> <span class="d-md-none">W</span>
</b-nav-item> </b-nav-item>
<b-nav-item <b-nav-item
link-classes="py-2 px-1" link-classes="py-2 px-1"
:active="bigLineChart.activeIndex === 3" :active="bigLineChart.activeIndex === 3"
@click.prevent="initBigChart(3)" @click.prevent="initBigChart(3)"
@ -109,8 +122,7 @@
ref="bigChart" ref="bigChart"
:chart-data="bigLineChart.chartData" :chart-data="bigLineChart.chartData"
:extra-options="bigLineChart.extraOptions" :extra-options="bigLineChart.extraOptions"
> ></line-chart>
</line-chart>
</card> </card>
</b-col> </b-col>
@ -123,261 +135,264 @@
</b-col> </b-col>
</b-row> </b-row>
<bar-chart <bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
:height="350"
ref="barChart"
:chart-data="redBarChart.chartData"
>
</bar-chart>
</card> </card>
</b-col> </b-col>
</b-row> </b-row>
<!-- End charts--> <!-- End charts-->
<br />
<br />
<br />
<!--Tables User Search && New User-->
<br>
<br>
<br>
<!--Tables User Search && New User-->
<admin-user-search /> <admin-user-search />
<br> <br />
<br> <br />
<br> <br />
<admin-user-creation/>
<admin-user-creation />
<br> <br />
<b-card-header>
<hr>
<h3>Admin Participation List</h3>
<small>/public/json-example/admin_card_statistic.json</small>
<p>
{{cardstatistic}}
</p>
</b-card-header> <b-card-header>
<b-card-header> <hr />
<hr> <h3>Admin Participation List</h3>
<h3>Admin Charts Statistic</h3> <small>/public/json-example/admin_card_statistic.json</small>
<small>/public/json-example/admin_charts_statistic.json</small> <p>
<p> {{ cardstatistic }}
{{chartsstatistic}} </p>
</p> </b-card-header>
<b-card-header>
<hr />
<h3>Admin Charts Statistic</h3>
<small>/public/json-example/admin_charts_statistic.json</small>
<p>
{{ chartsstatistic }}
</p>
</b-card-header>
<b-card-header>
<hr />
<h3>Admin Community Statistic</h3>
<small>/public/json-example/admin_community_statistic.json</small>
<p>
{{ communitystatistic }}
</p>
</b-card-header>
<b-card-header>
<hr />
<h3>Admin User List</h3>
<small>/public/json-example/admin_userlist.json</small>
<p>
{{ userlist }}
</p>
</b-card-header>
<b-card-header>
<hr />
<h3>Admin Transaction List</h3>
<small>/public/json-example/admin_transaction_list.json</small>
<p>
{{ transactionlist }}
</p>
</b-card-header> <hr />
<b-card-header> </b-card-header>
<hr> <b-card-header>
<h3>Admin Community Statistic</h3> <h3>Admin Transience List</h3>
<small>/public/json-example/admin_community_statistic.json</small> <small>/public/json-example/admin_transience_list.json</small>
<p> <p>
{{communitystatistic}} {{ transiencelist }}
</p> </p>
</b-card-header> </b-card-header>
<b-card-header>
<hr>
<h3>Admin User List</h3>
<small>/public/json-example/admin_userlist.json</small>
<p>
{{userlist}}
</p>
</b-card-header>
<b-card-header>
<hr>
<h3>Admin Transaction List</h3>
<small>/public/json-example/admin_transaction_list.json</small>
<p>
{{transactionlist}}
</p>
<hr>
</b-card-header>
<b-card-header>
<h3>Admin Transience List</h3>
<small>/public/json-example/admin_transience_list.json</small>
<p>
{{transiencelist}}
</p>
</b-card-header>
<!--End tables--> <!--End tables-->
</b-container> </b-container>
</div> </div>
</template> </template>
<script> <script>
// Charts // Charts
import * as chartConfigs from '@/components/Charts/config'; import * as chartConfigs from '@/components/Charts/config'
import LineChart from '@/components/Charts/LineChart'; import LineChart from '@/components/Charts/LineChart'
import BarChart from '@/components/Charts/BarChart'; import BarChart from '@/components/Charts/BarChart'
// Components // Components
import BaseProgress from '@/components/BaseProgress'; import BaseProgress from '@/components/BaseProgress'
import StatsCard from '@/components/Cards/StatsCard'; import StatsCard from '@/components/Cards/StatsCard'
import SearchUser from '@/components/SearchUser'; import SearchUser from '@/components/SearchUser'
// Tables // Tables
import PageVisitsTable from './Dashboard/PageVisitsTable'; import PageVisitsTable from './Dashboard/PageVisitsTable'
import AdminUserSearch from './AdminOverview/AdminUserSearch'; import AdminUserSearch from './AdminOverview/AdminUserSearch'
import AdminUserCreation from './AdminOverview/AdminUserCreation'; import AdminUserCreation from './AdminOverview/AdminUserCreation'
import axios from 'axios'; import axios from 'axios'
export default {
export default { components: {
components: { LineChart,
LineChart, BarChart,
BarChart, //BaseProgress,
//BaseProgress, StatsCard,
StatsCard, //PageVisitsTable,
//PageVisitsTable, AdminUserSearch,
AdminUserSearch, AdminUserCreation,
AdminUserCreation, //SearchUser
//SearchUser },
}, data() {
data() { return {
return { statisticdata: [],
statisticdata: [], cardstatistic: [],
cardstatistic:[], chartsstatistic: [],
chartsstatistic: [], communitystatistic: [],
communitystatistic: [], userlist: [],
userlist: [], transactionlist: [],
transactionlist: [], transiencelist: [],
transiencelist: [], filter: '',
filter: '', items: [
items: [ { id: 1, first_name: 'Mikkel', last_name: 'Hansen', age: 54 },
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 }, { id: 2, first_name: 'Kasper', last_name: 'Hvidt', age: 42 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 }, { id: 3, first_name: 'Lasse', last_name: 'Boesen', age: 39 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 }, { id: 4, first_name: 'Kasper', last_name: 'Hansen', age: 62 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 }, { id: 5, first_name: 'Mads', last_name: 'Mikkelsen', age: 31 },
{ 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],
], ],
bigLineChart: { activeIndex: 0,
allData: [ chartData: {
[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: {
TransienceList() {
axios.get("/json-example/admin_transience_list.json").then((d) => {
//console.log(d);
this.transiencelist = d.data;
}, (error) => {
console.log(error);
});
},
TransactionList() {
axios.get("/json-example/admin_transaction_list.json").then((d) => {
//console.log(d);
this.transactionlist = d.data;
}, (error) => {
console.log(error);
});
},
UserList() {
axios.get("/json-example/admin_userlist.json").then((d) => {
//console.log(d);
this.userlist = d.data;
}, (error) => {
console.log(error);
});
},
CommunityStatistic() {
axios.get("/json-example/admin_community_statistic.json").then((d) => {
//console.log(d);
this.communitystatistic = d.data;
}, (error) => {
console.log(error);
});
},
ChartsStatistic() {
axios.get("/json-example/admin_charts_statistic.json").then((d) => {
//console.log(d);
this.chartsstatistic = d.data;
}, (error) => {
console.log(error);
});
},
CardStatistic() {
axios.get("/json-example/admin_card_statistic.json").then((d) => {
//console.log(d);
this.cardstatistic = d.data;
}, (error) => {
console.log(error);
});
},
StatisticDatas() {
axios.get("/json-example/admin_statisticdatas.json").then((d) => {
//console.log(d);
this.userdata = d.data;
}, (error) => {
console.log(error);
});
},
initBigChart(index) {
let chartData = {
datasets: [ datasets: [
{ {
label: 'Performance', label: 'Performance',
data: this.bigLineChart.allData[index] data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
} },
], ],
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
}; },
this.bigLineChart.chartData = chartData; extraOptions: chartConfigs.blueChartOptions,
this.bigLineChart.activeIndex = index; },
} redBarChart: {
}, chartData: {
mounted() { labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
this.initBigChart(0); datasets: [
this.TransienceList(); {
this.TransactionList(); label: 'Sales',
this.UserList(); data: [25, 20, 30, 22, 17, 29],
this.CommunityStatistic(); },
this.ChartsStatistic(); ],
this.CardStatistic(); },
extraOptions: chartConfigs.blueChartOptions,
},
} }
},
} methods: {
TransienceList() {
axios.get('/json-example/admin_transience_list.json').then(
(d) => {
//console.log(d);
this.transiencelist = d.data
},
(error) => {
//console.log(error)
},
)
},
TransactionList() {
axios.get('/json-example/admin_transaction_list.json').then(
(d) => {
//console.log(d);
this.transactionlist = d.data
},
(error) => {
//console.log(error)
},
)
},
UserList() {
axios.get('/json-example/admin_userlist.json').then(
(d) => {
//console.log(d);
this.userlist = d.data
},
(error) => {
//console.log(error)
},
)
},
CommunityStatistic() {
axios.get('/json-example/admin_community_statistic.json').then(
(d) => {
//console.log(d);
this.communitystatistic = d.data
},
(error) => {
//console.log(error)
},
)
},
ChartsStatistic() {
axios.get('/json-example/admin_charts_statistic.json').then(
(d) => {
//console.log(d);
this.chartsstatistic = d.data
},
(error) => {
//console.log(error)
},
)
},
CardStatistic() {
axios.get('/json-example/admin_card_statistic.json').then(
(d) => {
//console.log(d);
this.cardstatistic = d.data
},
(error) => {
//console.log(error)
},
)
},
StatisticDatas() {
axios.get('/json-example/admin_statisticdatas.json').then(
(d) => {
//console.log(d);
this.userdata = d.data
},
(error) => {
//console.log(error)
},
)
},
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)
this.TransienceList()
this.TransactionList()
this.UserList()
this.CommunityStatistic()
this.ChartsStatistic()
this.CardStatistic()
},
}
</script> </script>
<style> <style>
.el-table .cell{ .el-table .cell {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }

437
frontend/src/views/AdminOverview/AdminUserCreation.vue
View File

@ -1,87 +1,75 @@
<template> <template>
<div> <div>
<b-card-header>Gradido Schüpfung</b-card-header> <b-card-header>Gradido Schüpfung</b-card-header>
<!--Tables--> <!--Tables-->
<b-row class="mt-5"> <b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0">
<b-col xl="8" class="mb-5 mb-xl-0"> <vue-good-table
<vue-good-table :columns="columns"
:columns="columns" :rows="rows"
:rows="rows" max-height="370px"
max-height="370px" :fixed-header="true"
:fixed-header="true" :line-numbers="false"
:line-numbers="false" styleClass="vgt-table"
styleClass="vgt-table" theme="nocturnal"
theme="nocturnal" @on-row-click="onRowClick"
@on-row-click="onRowClick" @on-search="onSearch"
@on-search="onSearch" :search-options="{
:search-options="{ enabled: true,
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-->
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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'admin-user-creation', name: 'admin-user-creation',
data(){ data() {
return { return {
creation:{ creation: {
createdAt:"", createdAt: '',
group:"", group: '',
id:"", id: '',
name:"", name: '',
originalIndex:"", originalIndex: '',
text:"", text: '',
vgt_id:"", vgt_id: '',
}, },
columns: [ columns: [
{ {
@ -107,74 +95,253 @@ export default {
}, },
], ],
rows: [ 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: 1,
{ id:3, createdAt: '2021-01-30', name:"Susan", group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, createdAt: '2021-01-25',
{ id:4, createdAt: '2020-01-11', name:"Chris", group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, name: 'Sellora',
{ id:5, createdAt: '2020-12-21', name:"Dan", group: "gruppe11", text: "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, group: 'gruppe1',
{ id:6, createdAt: '2020-12-31', name:"zBohn", group: "gruppe71", text: "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, text: 'aASDASdhhda 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: 2,
{ id:10, createdAt: '2021-01-20', name:"kSusan", group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, createdAt: '2021-01-31',
{ id:11, createdAt: '2021-01-25', name:"qSellora", group: "gruppe12", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, name: 'Jane',
{ id:12, createdAt: '2021-01-31', name:"fJane", group: "gruppe15", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, group: 'gruppe14',
{ id:13, createdAt: '2021-01-38', name:"aSusan", group: "gruppe1", text: "asssss IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, text: 'WQadCXhhda 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: 3,
{ id:17, createdAt: '2020-12-31', name:"aEsau", group: "gruppe15", text: "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, createdAt: '2021-01-30',
{ id:18, createdAt: '2021-01-25', name:"gSellora", group: "gruppe1", text: "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, name: 'Susan',
{ id:19, createdAt: '2021-01-31', name:"sJane", group: "gruppe14", text: "as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, group: 'gruppe31',
{ id:20, createdAt: '2021-01-30', name:"oSusan", group: "gruppe31", text: "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, text: '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: 4,
{ id:24, createdAt: '2020-01-15', name:"sChris", group: "gruppe12", text: "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, createdAt: '2020-01-11',
{ id:25, createdAt: '2020-12-14', name:"dDan", group: "gruppe11", text: "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, name: 'Chris',
{ id:26, createdAt: '2020-12-13', name:"fBohn", group: "gruppe71", text: "Ta adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, group: 'gruppe12',
{ id:27, createdAt: '2020-12-12', name:"gTellohn", group: "gruppe31", text: "55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" }, text: 'TZadhhCYXCda 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" }, 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: { methods: {
onRowClick(params) { onRowClick(params) {
/*
console.log("onRowClick", params.row.createdAt) console.log('onRowClick', params.row.createdAt)
console.log("onRowClick", params.row.group) console.log('onRowClick', params.row.group)
console.log("onRowClick", params.row.id) console.log('onRowClick', params.row.id)
console.log("onRowClick", params.row.name) console.log('onRowClick', params.row.name)
console.log("onRowClick", params.row.originalIndex) console.log('onRowClick', params.row.originalIndex)
console.log("onRowClick", params.row.text) console.log('onRowClick', params.row.text)
console.log("onRowClick", params.row.vgt_id) console.log('onRowClick', params.row.vgt_id)
*/
this.creation.createdAt = params.row.createdAt this.creation.createdAt = params.row.createdAt
this.creation.group = params.row.group this.creation.group = params.row.group
this.creation.id = params.row.id this.creation.id = params.row.id
this.creation.name = params.row.name this.creation.name = params.row.name
this.creation.originalIndex = params.row.originalIndex this.creation.originalIndex = params.row.originalIndex
this.creation.text = params.row.text this.creation.text = params.row.text
this.creation.vgt_id = params.row.vgt_id this.creation.vgt_id = params.row.vgt_id
// params.row - row object // params.row - row object
// params.pageIndex - index of this row on the current page. // params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument // params.selected - if selection is enabled this argument
// indicates selected or not // indicates selected or not
// params.event - click event // params.event - click event
}, },
onSearch(params) { onSearch(params) {
console.log("onSearch", params) //console.log('onSearch', params)
// params.searchTerm - term being searched for // params.searchTerm - term being searched for
// params.rowCount - number of rows that match search // params.rowCount - number of rows that match search
}, },
mySearchFn(params){ mySearchFn(params) {
//console.log("mySearchFn", params) //console.log("mySearchFn", params)
} },
} },
}; }
</script> </script>

348
frontend/src/views/AdminOverview/AdminUserSearch.vue
View File

@ -1,134 +1,145 @@
<template> <template>
<div> <div>
<b-card-header>User</b-card-header> <b-card-header>User</b-card-header>
<!--Tables--> <!--Tables-->
<b-row class="mt-5"> <b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0"> <b-col xl="8" class="mb-5 mb-xl-0">
<vue-good-table <vue-good-table
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
max-height="470px" max-height="470px"
:fixed-header="true" :fixed-header="true"
:line-numbers="false" :line-numbers="false"
styleClass="vgt-table striped condensed" styleClass="vgt-table striped condensed"
theme="nocturnal" theme="nocturnal"
@on-row-click="onRowClick" @on-row-click="onRowClick"
@on-search="onSearch" @on-search="onSearch"
:search-options="{ :search-options="{
enabled: true, enabled: true,
skipDiacritics: true, skipDiacritics: true,
searchFn: mySearchFn, searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle' placeholder: 'durchsuche die tabelle',
}"
}" :pagination-options="{
:pagination-options="{ enabled: true,
enabled: true, mode: 'pages',
mode: 'pages' }"
}" > >
<div slot="table-actions"> <div slot="table-actions">Mitglieder suchen .</div>
Mitglieder suchen . </vue-good-table>
</div> </b-col>
<b-col xl="4" class="mb-5 mb-xl-0">
</vue-good-table> <!-- card neues mitglied -->
</b-col> <b-card v-if="showNewUser" body-class="p-0" header-class="border-0">
<b-col xl="4" class="mb-5 mb-xl-0"> <template v-slot:header>
<!-- card neues mitglied --> <b-row align-v="center">
<b-card v-if="showNewUser" body-class="p-0" header-class="border-0"> <b-col>
<template v-slot:header> <h3 class="mb-0">Neues Mitglied anlegen</h3>
<b-row align-v="center"> </b-col>
<b-col> <b-col class="text-right">
<h3 class="mb-0">Neues Mitglied anlegen</h3> <a href="#!" class="btn btn-sm btn-primary">speichern</a>
</b-col> </b-col>
<b-col class="text-right"> </b-row>
<a href="#!" class="btn btn-sm btn-primary">speichern</a> </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-col>
</b-row> </b-row>
</template> <b-row class="">
<b-card-body> <label for="example-email-input" class="col-md-3 col-form-label form-control-label">
<form> Email
<b-row class=""> </label>
<label class="col-md-3 col-form-label form-control-label">Name</label> <b-col md="10">
<b-col md="10"> <base-input
<base-input placeholder="Jon Snow"></base-input> type="email"
</b-col> placeholder="gradido@example.com"
</b-row> id="example-email-input0"
<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-col>
</b-row> </b-row>
</template> <b-row class="">
<b-card-body> <label class="col-md-3 col-form-label form-control-label">Gruppe</label>
<img style="width: 147px" src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg" /> <b-col md="10">
<base-input placeholder="Gruppe"></base-input>
</b-col>
</b-row>
</form>
</b-card-body>
</b-card>
<!-- card mitglied bearbeiten -->
<form> <b-card v-else body-class="p-0" header-class="border-0">
<b-row class=""> <template v-slot:header>
<label class="col-md-3 col-form-label form-control-label">Name</label> <b-row align-v="center">
<b-col md="10"> <b-col>
<base-input placeholder="name"></base-input> <h3 class="mb-0">Mitglied Daten</h3>
</b-col> </b-col>
</b-row> <b-col class="text-right">
<b-row class=""> <a href="#!" @click="showNewUser = true" class="btn btn-sm btn-warning">
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">Email</label> schliesen
<b-col md="10"> </a>
<base-input type="email" autocomplete="username email" placeholder="agradido@example.com" id="example-email-input1"/> </b-col>
</b-col> </b-row>
</b-row> </template>
<b-row class=""> <b-card-body>
<label class="col-md-3 col-form-label form-control-label">Gruppe</label> <img
<b-col md="10"> style="width: 147px"
<base-input placeholder="Gruppe"></base-input> src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg"
</b-col> />
</b-row>
</form>
</b-card-body> <form>
</b-card> <b-row class="">
<label class="col-md-3 col-form-label form-control-label">Name</label>
</b-col> <b-col md="10">
</b-row> <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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'admin-user-search', name: 'admin-user-search',
data(){ data() {
return { return {
showNewUser: true, showNewUser: true,
formSetUser: { formSetUser: {
name:"", name: '',
email:"", email: '',
group:"" group: '',
}, },
formGetUser: { formGetUser: {
name:"", name: '',
email:"", email: '',
group:"" group: '',
}, },
columns: [ columns: [
{ {
@ -154,50 +165,97 @@ export default {
}, },
], ],
rows: [ 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: 1,
{ id:3, name:"Susan", email: "temail@tutanota.com", createdAt: '2011-10-30', group: "gruppe4" }, name: 'John',
{ id:4, name:"Chris", email: "temail@tutanota.com", createdAt: '2011-10-11', group: "gruppe3" }, email: 'temail@tutanota.com',
{ id:5, name:"Dan", email: "temail@tutanota.com", createdAt: '2011-10-21', group: "gruppe1" }, createdAt: '1976-10-25',
{ id:6, name:"Bohn", email: "temail@tutanota.com", createdAt: '2011-10-31', group: "gruppe2" }, group: 'gruppe1',
{ 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" }, {
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: { methods: {
onRowClick(params) { onRowClick(params) {
console.log(params.row) //console.log(params.row)
this.showNewUser = false this.showNewUser = false
// params.row - row object // params.row - row object
// params.pageIndex - index of this row on the current page. // params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument // params.selected - if selection is enabled this argument
// indicates selected or not // indicates selected or not
// params.event - click event // params.event - click event
}, },
onSearch(params) { onSearch(params) {
console.log(params) //console.log(params)
// params.searchTerm - term being searched for // params.searchTerm - term being searched for
// params.rowCount - number of rows that match search // params.rowCount - number of rows that match search
}, },
mySearchFn(params){ mySearchFn(params) {
//console.log(params) //console.log(params)
}, },
validateEmail(value){ validateEmail(value) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
{ this.msg['email'] = ''
this.msg['email'] = ''; } else {
} else{ this.msg['email'] = 'Invalid Email Address'
this.msg['email'] = 'Invalid Email Address'; }
}
}, },
}, },
watch: { watch: {
mail(value){ mail(value) {
// binding this to the data value in the email input // binding this to the data value in the email input
this.email = value; this.email = value
this.validateEmail(value); this.validateEmail(value)
}, },
} },
}; }
</script> </script>

19
frontend/src/views/AdminOverview/default.vue
View File

@ -1,19 +1,14 @@
<template> <template>
<div> <div>default</div>
default
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'default', name: 'default',
data(){ data() {
return { return {}
};
}, },
methods: { methods: {},
}, watch: {},
watch: { }
} </script>
};
</script>

208
frontend/src/views/Dashboard.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<base-header class="pb-6 pb-8 pt-5 pt-md-8"> <base-header class="pb-6 pb-8 pt-5 pt-md-8">
<!-- Card stats --> <!-- Card stats -->
<b-row> <b-row>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Total traffic" <stats-card
type="gradient-red" title="Total traffic"
sub-title="350,897" type="gradient-red"
icon="ni ni-active-40" sub-title="350,897"
class="mb-4"> icon="ni ni-active-40"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">3.48%</span> <span class="text-success mr-2">3.48%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
@ -18,12 +18,13 @@
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Total traffic" <stats-card
type="gradient-orange" title="Total traffic"
sub-title="2,356" type="gradient-orange"
icon="ni ni-chart-pie-35" sub-title="2,356"
class="mb-4"> icon="ni ni-chart-pie-35"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">12.18%</span> <span class="text-success mr-2">12.18%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
@ -31,26 +32,27 @@
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Sales" <stats-card
type="gradient-green" title="Sales"
sub-title="924" type="gradient-green"
icon="ni ni-money-coins" sub-title="924"
class="mb-4"> icon="ni ni-money-coins"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-danger mr-2">5.72%</span> <span class="text-danger mr-2">5.72%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
</template> </template>
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Performance" <stats-card
type="gradient-info" title="Performance"
sub-title="49,65%" type="gradient-info"
icon="ni ni-chart-bar-32" sub-title="49,65%"
class="mb-4"> icon="ni ni-chart-bar-32"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">54.8%</span> <span class="text-success mr-2">54.8%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
@ -73,12 +75,13 @@
<b-col> <b-col>
<b-nav class="nav-pills justify-content-end"> <b-nav class="nav-pills justify-content-end">
<b-nav-item <b-nav-item
class="mr-2 mr-md-0" class="mr-2 mr-md-0"
:active="bigLineChart.activeIndex === 0" :active="bigLineChart.activeIndex === 0"
link-classes="py-2 px-3" link-classes="py-2 px-3"
@click.prevent="initBigChart(0)"> @click.prevent="initBigChart(0)"
<span class="d-none d-md-block">Month</span> >
<span class="d-md-none">M</span> <span class="d-none d-md-block">Month</span>
<span class="d-md-none">M</span>
</b-nav-item> </b-nav-item>
<b-nav-item <b-nav-item
link-classes="py-2 px-3" link-classes="py-2 px-3"
@ -96,8 +99,7 @@
ref="bigChart" ref="bigChart"
:chart-data="bigLineChart.chartData" :chart-data="bigLineChart.chartData"
:extra-options="bigLineChart.extraOptions" :extra-options="bigLineChart.extraOptions"
> ></line-chart>
</line-chart>
</card> </card>
</b-col> </b-col>
@ -110,12 +112,7 @@
</b-col> </b-col>
</b-row> </b-row>
<bar-chart <bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
:height="350"
ref="barChart"
:chart-data="redBarChart.chartData"
>
</bar-chart>
</card> </card>
</b-col> </b-col>
</b-row> </b-row>
@ -132,85 +129,86 @@
</b-row> </b-row>
<!--End tables--> <!--End tables-->
</b-container> </b-container>
</div> </div>
</template> </template>
<script> <script>
// Charts // Charts
import * as chartConfigs from '@/components/Charts/config'; import * as chartConfigs from '@/components/Charts/config'
import LineChart from '@/components/Charts/LineChart'; import LineChart from '@/components/Charts/LineChart'
import BarChart from '@/components/Charts/BarChart'; import BarChart from '@/components/Charts/BarChart'
// Components // Components
import BaseProgress from '@/components/BaseProgress'; import BaseProgress from '@/components/BaseProgress'
import StatsCard from '@/components/Cards/StatsCard'; import StatsCard from '@/components/Cards/StatsCard'
// Tables // Tables
import SocialTrafficTable from './Dashboard/SocialTrafficTable'; import SocialTrafficTable from './Dashboard/SocialTrafficTable'
import PageVisitsTable from './Dashboard/PageVisitsTable'; import PageVisitsTable from './Dashboard/PageVisitsTable'
export default { export default {
components: { components: {
LineChart, LineChart,
BarChart, BarChart,
//BaseProgress, //BaseProgress,
StatsCard, StatsCard,
PageVisitsTable, PageVisitsTable,
SocialTrafficTable SocialTrafficTable,
}, },
data() { data() {
return { return {
bigLineChart: { bigLineChart: {
allData: [ allData: [
[0, 20, 10, 30, 15, 40, 20, 60, 60], [0, 20, 10, 30, 15, 40, 20, 60, 60],
[0, 20, 5, 25, 10, 30, 15, 40, 40] [0, 20, 5, 25, 10, 30, 15, 40, 40],
], ],
activeIndex: 0, activeIndex: 0,
chartData: { 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: [ datasets: [
{ {
label: 'Performance', label: 'Performance',
data: this.bigLineChart.allData[index] data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
} },
], ],
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
}; },
this.bigLineChart.chartData = chartData; extraOptions: chartConfigs.blueChartOptions,
this.bigLineChart.activeIndex = index; },
} redBarChart: {
}, chartData: {
mounted() { labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
this.initBigChart(0); 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> </script>
<style> <style>
.el-table .cell{ .el-table .cell {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }

175
frontend/src/views/Dashboard/GoodTable.vue
View File

@ -1,58 +1,49 @@
<template> <template>
<div> <div>
<!--Tables--> <!--Tables-->
<b-row class="mt-5"> <b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0"> <b-col xl="8" class="mb-5 mb-xl-0">
<vue-good-table <vue-good-table
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
max-height="370px" max-height="370px"
:fixed-header="true" :fixed-header="true"
:line-numbers="true" :line-numbers="true"
@on-row-click="onRowClick" @on-row-click="onRowClick"
@on-search="onSearch" @on-search="onSearch"
:search-options="{ :search-options="{
enabled: true, 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-->
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> </div>
</template> </template>
<script> <script>
import SocialTrafficTable from './SocialTrafficTable'; import SocialTrafficTable from './SocialTrafficTable'
export default { export default {
name: 'my-component', name: 'my-component',
components: { components: {
SocialTrafficTable SocialTrafficTable,
}, },
data(){ data() {
return { return {
columns: [ columns: [
{ {
@ -78,34 +69,82 @@ export default {
}, },
], ],
rows: [ 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: 1,
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 }, name: 'John',
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 }, age: 20,
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 }, createdAt: '1976-10-25',
{ id:6, name:"Bohn", age: 70, createdAt: '2011-10-31', score: 0.03343 }, 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 }, {
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: { methods: {
onRowClick(params) { onRowClick(params) {
console.log(params) //console.log(params)
// params.row - row object // params.row - row object
// params.pageIndex - index of this row on the current page. // params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument // params.selected - if selection is enabled this argument
// indicates selected or not // indicates selected or not
// params.event - click event // params.event - click event
}, },
onSearch(params) { onSearch(params) {
console.log(params) //console.log(params)
// params.searchTerm - term being searched for // params.searchTerm - term being searched for
// params.rowCount - number of rows that match search // params.rowCount - number of rows that match search
}, },
mySearchFn(params){ mySearchFn(params) {
console.log(params) //console.log(params)
} },
} },
}; }
</script> </script>

126
frontend/src/views/Dashboard/PageVisitsTable.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<b-card body-class="p-0" header-class="border-0"> <b-card body-class="p-0" header-class="border-0">
<template v-slot:header> <template v-slot:header>
<b-row align-v="center"> <b-row align-v="center">
@ -12,83 +11,70 @@
</b-row> </b-row>
</template> </template>
<el-table class="table-responsive table" <el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
:data="tableData" <el-table-column label="Page name" min-width="130px" prop="page">
header-row-class-name="thead-light"> <template v-slot="{ row }">
<el-table-column label="Page name" <div class="font-weight-600">{{ row.page }}</div>
min-width="130px"
prop="page">
<template v-slot="{row}">
<div class="font-weight-600">{{row.page}}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Visitors" <el-table-column label="Visitors" min-width="70px" prop="visitors"></el-table-column>
min-width="70px" <el-table-column label="Unique users" min-width="90px" prop="unique"></el-table-column>
prop="visitors">
</el-table-column>
<el-table-column label="Unique users"
min-width="90px"
prop="unique">
</el-table-column>
<el-table-column label="Bounce rate" <el-table-column label="Bounce rate" min-width="90px" prop="bounceRate">
min-width="90px" <template v-slot="{ row }">
prop="bounceRate"> {{ row.bounceRate }}
<template v-slot="{row}">
{{row.bounceRate}}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</b-card> </b-card>
</template> </template>
<script> <script>
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown} from 'element-ui' import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
export default { export default {
name: 'page-visits-table', name: 'page-visits-table',
components: { components: {
[Table.name]: Table, [Table.name]: Table,
[TableColumn.name]: TableColumn, [TableColumn.name]: TableColumn,
[Dropdown.name]: Dropdown, [Dropdown.name]: Dropdown,
[DropdownItem.name]: DropdownItem, [DropdownItem.name]: DropdownItem,
[DropdownMenu.name]: DropdownMenu, [DropdownMenu.name]: DropdownMenu,
}, },
data() { data() {
return { return {
tableData: [ tableData: [
{ {
page: '/argon/', page: '/argon/',
visitors: '4,569', visitors: '4,569',
unique: '340', unique: '340',
bounceRate: '46,53%' bounceRate: '46,53%',
}, },
{ {
page: '/argon/index.html', page: '/argon/index.html',
visitors: '3,985', visitors: '3,985',
unique: '319', unique: '319',
bounceRate: '46,53%' bounceRate: '46,53%',
}, },
{ {
page: '/argon/charts.html', page: '/argon/charts.html',
visitors: '3,513', visitors: '3,513',
unique: '294', unique: '294',
bounceRate: '36,49%' bounceRate: '36,49%',
}, },
{ {
page: '/argon/tables.html', page: '/argon/tables.html',
visitors: '2,050', visitors: '2,050',
unique: '147', unique: '147',
bounceRate: '50,87%' bounceRate: '50,87%',
}, },
{ {
page: '/argon/profile.html', page: '/argon/profile.html',
visitors: '1,795', visitors: '1,795',
unique: '190', unique: '190',
bounceRate: '46,53%' bounceRate: '46,53%',
} },
] ],
}
} }
} },
}
</script> </script>
<style> <style></style>
</style>

117
frontend/src/views/Dashboard/SocialTrafficTable.vue
View File

@ -11,24 +11,19 @@
</b-row> </b-row>
</template> </template>
<el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
<el-table
class="table-responsive table"
:data="tableData"
header-row-class-name="thead-light">
<el-table-column label="Referral" min-width="115px" prop="name"> <el-table-column label="Referral" min-width="115px" prop="name">
<template v-slot="{row}"> <template v-slot="{ row }">
<div class="font-weight-600">{{row.name}}</div> <div class="font-weight-600">{{ row.name }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Visitors" min-width="110px" prop="visitors"> <el-table-column label="Visitors" min-width="110px" prop="visitors"></el-table-column>
</el-table-column>
<el-table-column min-width="220px" prop="progress"> <el-table-column min-width="220px" prop="progress">
<template v-slot="{row}"> <template v-slot="{ row }">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<span class="mr-2">{{row.progress}}%</span> <span class="mr-2">{{ row.progress }}%</span>
<base-progress :type="row.progressType" :value="row.progress" /> <base-progress :type="row.progressType" :value="row.progress" />
</div> </div>
</template> </template>
@ -37,56 +32,54 @@
</b-card> </b-card>
</template> </template>
<script> <script>
import { BaseProgress } from '@/components'; import { BaseProgress } from '@/components'
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown} from 'element-ui' import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
export default { export default {
name: 'social-traffic-table', name: 'social-traffic-table',
components: { components: {
BaseProgress, BaseProgress,
[Table.name]: Table, [Table.name]: Table,
[TableColumn.name]: TableColumn, [TableColumn.name]: TableColumn,
[Dropdown.name]: Dropdown, [Dropdown.name]: Dropdown,
[DropdownItem.name]: DropdownItem, [DropdownItem.name]: DropdownItem,
[DropdownMenu.name]: DropdownMenu, [DropdownMenu.name]: DropdownMenu,
}, },
data() { data() {
return { return {
tableData: [ tableData: [
{ {
name: 'Facebook', name: 'Facebook',
visitors: '1,480', visitors: '1,480',
progress: 60, progress: 60,
progressType: 'gradient-danger', progressType: 'gradient-danger',
}, },
{ {
name: 'LinkedIn', name: 'LinkedIn',
visitors: '5,480', visitors: '5,480',
progress: 70, progress: 70,
progressType: 'gradient-success', progressType: 'gradient-success',
}, },
{ {
name: 'Google', name: 'Google',
visitors: '4,807', visitors: '4,807',
progress: 80, progress: 80,
progressType: 'gradient-primary', progressType: 'gradient-primary',
}, },
{ {
name: 'Instagram', name: 'Instagram',
visitors: '3,678', visitors: '3,678',
progress: 75, progress: 75,
progressType: 'gradient-info', progressType: 'gradient-info',
}, },
{ {
name: 'Twitter', name: 'Twitter',
visitors: '2,645', visitors: '2,645',
progress: 30, progress: 30,
progressType: 'gradient-warning', progressType: 'gradient-warning',
} },
] ],
}
} }
},
} }
</script> </script>
<style> <style></style>
</style>

213
frontend/src/views/GoogleMaps.vue
View File

@ -4,12 +4,13 @@
<!-- Card stats --> <!-- Card stats -->
<b-row> <b-row>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Total traffic" <stats-card
type="gradient-red" title="Total traffic"
sub-title="350,897" type="gradient-red"
icon="ni ni-active-40" sub-title="350,897"
class="mb-4"> icon="ni ni-active-40"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">3.48%</span> <span class="text-success mr-2">3.48%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
@ -17,12 +18,13 @@
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Total traffic" <stats-card
type="gradient-orange" title="Total traffic"
sub-title="2,356" type="gradient-orange"
icon="ni ni-chart-pie-35" sub-title="2,356"
class="mb-4"> icon="ni ni-chart-pie-35"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">12.18%</span> <span class="text-success mr-2">12.18%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
@ -30,26 +32,27 @@
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Sales" <stats-card
type="gradient-green" title="Sales"
sub-title="924" type="gradient-green"
icon="ni ni-money-coins" sub-title="924"
class="mb-4"> icon="ni ni-money-coins"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-danger mr-2">5.72%</span> <span class="text-danger mr-2">5.72%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
</template> </template>
</stats-card> </stats-card>
</b-col> </b-col>
<b-col xl="3" md="6"> <b-col xl="3" md="6">
<stats-card title="Performance" <stats-card
type="gradient-info" title="Performance"
sub-title="49,65%" type="gradient-info"
icon="ni ni-chart-bar-32" sub-title="49,65%"
class="mb-4"> icon="ni ni-chart-bar-32"
class="mb-4"
>
<template slot="footer"> <template slot="footer">
<span class="text-success mr-2">54.8%</span> <span class="text-success mr-2">54.8%</span>
<span class="text-nowrap">Since last month</span> <span class="text-nowrap">Since last month</span>
@ -63,8 +66,7 @@
<b-row> <b-row>
<b-col> <b-col>
<b-card no-body class="border-0"> <b-card no-body class="border-0">
<div id="map-custom" class="map-canvas" <div id="map-custom" class="map-canvas" style="height: 600px"></div>
style="height: 600px;"></div>
</b-card> </b-card>
</b-col> </b-col>
</b-row> </b-row>
@ -72,79 +74,96 @@
</div> </div>
</template> </template>
<script> <script>
import { API_KEY } from './Maps/API_KEY'; import { API_KEY } from './Maps/API_KEY'
import GoogleMapsLoader from 'google-maps'; import GoogleMapsLoader from 'google-maps'
GoogleMapsLoader.KEY = API_KEY; GoogleMapsLoader.KEY = API_KEY
export default { export default {
methods: { methods: {
initMap(google) { initMap(google) {
let map, lat = 40.748817, lng = -73.985428, color = "#5e72e4"; let map,
map = document.getElementById('map-custom'); lat = 40.748817,
lng = -73.985428,
color = '#5e72e4'
map = document.getElementById('map-custom')
let myLatlng = new google.maps.LatLng(lat, lng); let myLatlng = new google.maps.LatLng(lat, lng)
let mapOptions = { let mapOptions = {
zoom: 12, zoom: 12,
scrollwheel: false, scrollwheel: false,
center: myLatlng, center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ styles: [
"featureType": "administrative", {
"elementType": "labels.text.fill", featureType: 'administrative',
"stylers": [{ "color": "#444444" }] elementType: 'labels.text.fill',
}, { stylers: [{ color: '#444444' }],
"featureType": "landscape", },
"elementType": "all", {
"stylers": [{ "color": "#f2f2f2" }] featureType: 'landscape',
}, { elementType: 'all',
"featureType": "poi", stylers: [{ color: '#f2f2f2' }],
"elementType": "all", },
"stylers": [{ "visibility": "off" }] {
}, { featureType: 'poi',
"featureType": "road", elementType: 'all',
"elementType": "all", stylers: [{ visibility: 'off' }],
"stylers": [{ "saturation": -100 }, { "lightness": 45 }] },
}, { {
"featureType": "road.highway", featureType: 'road',
"elementType": "all", elementType: 'all',
"stylers": [{ "visibility": "simplified" }] stylers: [{ saturation: -100 }, { lightness: 45 }],
}, { },
"featureType": "road.arterial", {
"elementType": "labels.icon", featureType: 'road.highway',
"stylers": [{ "visibility": "off" }] elementType: 'all',
}, { stylers: [{ visibility: 'simplified' }],
"featureType": "transit", },
"elementType": "all", {
"stylers": [{ "visibility": "off" }] featureType: 'road.arterial',
}, { "featureType": "water", "elementType": "all", "stylers": [{ "color": color }, { "visibility": "on" }] }] elementType: 'labels.icon',
} stylers: [{ visibility: 'off' }],
},
map = new google.maps.Map(map, mapOptions); {
featureType: 'transit',
let marker = new google.maps.Marker({ elementType: 'all',
position: myLatlng, stylers: [{ visibility: 'off' }],
map: map, },
animation: google.maps.Animation.DROP, {
title: 'Hello World!' featureType: 'water',
}); elementType: 'all',
stylers: [{ color: color }, { visibility: 'on' }],
let contentString = '<div class="info-window-content"><h2>Argon Dashboard PRO</h2>' + },
'<p>A beautiful premium dashboard for Bootstrap 4.</p></div>'; ],
let infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
} }
map = new google.maps.Map(map, mapOptions)
let marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title: 'Hello World!',
})
let contentString =
'<div class="info-window-content"><h2>Argon Dashboard PRO</h2>' +
'<p>A beautiful premium dashboard for Bootstrap 4.</p></div>'
let infowindow = new google.maps.InfoWindow({
content: contentString,
})
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker)
})
}, },
mounted() { },
GoogleMapsLoader.load(google => { mounted() {
this.initMap(google); GoogleMapsLoader.load((google) => {
}); this.initMap(google)
} })
}; },
}
</script> </script>

1302
frontend/src/views/Icons.vue
View File

File diff suppressed because it is too large Load Diff

73
frontend/src/views/KontoOverview.vue
View File

@ -1,56 +1,53 @@
<template> <template>
<div> <div>
<base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header> <base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
<b-container fluid class="mt--7"> <b-container fluid class="mt--7">
<gdd-status /> <gdd-status />
<br> <br />
<gdd-send /> <gdd-send />
<hr> <hr />
<gdd-table /> <gdd-table />
<!-- <hr> <!-- <hr>
<div> <div>
<gdd-add-work-2 /> <gdd-add-work-2 />
</div> </div>
<br> --> <br> -->
<!-- <!--
<div> <div>
<gdd-add-work /> <gdd-add-work />
</div> </div>
<br> <br>
--> -->
<!-- <div> <!-- <div>
<gdd-work-table /> <gdd-work-table />
</div> --> </div> -->
</b-container>
</b-container>
</div> </div>
</template> </template>
<script> <script>
import GddStatus from './KontoOverview/GddStatus.vue'; import GddStatus from './KontoOverview/GddStatus.vue'
import GddSend from './KontoOverview/GddSend.vue'; import GddSend from './KontoOverview/GddSend.vue'
import GddTable from './KontoOverview/GddTable.vue'; import GddTable from './KontoOverview/GddTable.vue'
// import GddAddWork2 from './KontoOverview/GddAddWork2.vue'; // import GddAddWork2 from './KontoOverview/GddAddWork2.vue';
// import GddWorkTable from './KontoOverview/GddWorkTable.vue'; // import GddWorkTable from './KontoOverview/GddWorkTable.vue';
export default { export default {
name: "Overview", name: 'Overview',
components: { components: {
GddStatus, GddStatus,
GddSend, GddSend,
GddTable, GddTable,
//GddAddWork2, //GddAddWork2,
//GddWorkTable //GddWorkTable
}, },
created() { created() {
this.$store.dispatch('accountBalance', $cookies.get("gdd_session_id")) this.$store.dispatch('accountBalance', $cookies.get('gdd_session_id'))
} },
}; }
</script> </script>
<style> <style>
.active { background-color: rgba(192, 192, 192, 0.568);} .active {
background-color: rgba(192, 192, 192, 0.568);
}
</style> </style>

316
frontend/src/views/KontoOverview/GddAddWork.vue
View File

@ -1,154 +1,210 @@
<template> <template>
<div> <div>
<b-row> <b-row>
<b-col xl="12" md="12"> <b-col xl="12" md="12">
<base-button icon type="info" size="lg" v-b-toggle.collapse-2> <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--icon"><i class="ni ni-fat-add"></i></span>
<span class="btn-inner--text">{{ $t('site.overview.add_work') }} </span> <span class="btn-inner--text">
</base-button> {{ $t('site.overview.add_work') }}
<b-collapse id="collapse-2" class="mt-2"> </span>
<b-card> </base-button>
<div class="card-text"> <b-collapse id="collapse-2" class="mt-2">
<b-row> <b-card>
<b-col> <div class="card-text">
<h1>Neuer Beitrag</h1> <b-row>
<h3>{ Name der Community }</h3> <b-col>
</b-col> <h1>Neuer Beitrag</h1>
<b-col> <h3>{ Name der Community }</h3>
<h3>Bitte trage jede arbeit einzeln ein.</h3> </b-col>
</b-col> <b-col>
</b-row> <h3>Bitte trage jede arbeit einzeln ein.</h3>
<hr> </b-col>
<b-form @submit="onSubmit" @reset="onReset" v-if="show"> </b-row>
<hr />
<b-row class="form-group"> <b-form @submit="onSubmit" @reset="onReset" v-if="show">
<label for="example-datetime-local-input" class="col-md-2 col-form-label form-control-label form-control-lg">von</label> <b-row class="form-group">
<b-col md="10"> <label
<base-input type="datetime-local" value="2018-11-23T10:30:00" v-model="form.from" @change="dateDiff" /> for="example-datetime-local-input"
</b-col> class="col-md-2 col-form-label form-control-label form-control-lg"
</b-row> >
<b-row class="form-group"> von
<label for="example-datetime-local-input" class="col-md-2 col-form-label form-control-label form-control-lg">bis</label> </label>
<b-col md="10"> <b-col md="10">
<base-input type="datetime-local" value="2018-11-23T10:30:00" v-model="form.to" @change="dateDiff" /> <base-input
</b-col> type="datetime-local"
</b-row> value="2018-11-23T10:30:00"
<b-row class="form-group"> v-model="form.from"
<label for="example-datetime-local-input" class="col-md-2 col-form-label form-control-label form-control-lg">Stunden</label> @change="dateDiff"
<b-col md="10"> />
<base-input type="text" v-model="form.hours" disabled class="form-control-lg"/> </b-col>
</b-col> </b-row>
</b-row> <b-row class="form-group">
<b-row class="form-group"> <label
<label for="example-datetime-local-input" class="col-md-2 col-form-label form-control-label form-control-lg">GDD Shöpfen</label> for="example-datetime-local-input"
<b-col md="10"> class="col-md-2 col-form-label form-control-label form-control-lg"
<base-input type="text" :value="(form.hours * 20)" disabled class="form-control-lg"/> >
</b-col> bis
</label>
<b-col md="10">
<base-input
type="datetime-local"
value="2018-11-23T10:30:00"
v-model="form.to"
@change="dateDiff"
/>
</b-col>
</b-row>
<b-row class="form-group">
<label
for="example-datetime-local-input"
class="col-md-2 col-form-label form-control-label form-control-lg"
>
Stunden
</label>
<b-col md="10">
<base-input type="text" v-model="form.hours" disabled class="form-control-lg" />
</b-col>
</b-row>
<b-row class="form-group">
<label
for="example-datetime-local-input"
class="col-md-2 col-form-label form-control-label form-control-lg"
>
GDD Shöpfen
</label>
<b-col md="10">
<base-input
type="text"
:value="form.hours * 20"
disabled
class="form-control-lg"
/>
</b-col>
</b-row>
<b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label form-control-lg">
Ort
</label>
<b-col md="10">
<base-input
placeholder="Berlin"
v-model="form.location"
class="form-control-lg"
></base-input>
</b-col>
</b-row>
<b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label form-control-lg">
Kategorie
</label>
<b-col md="10">
<base-input>
<select class="form-control form-control-lg">
<option>Umwelt</option>
<option>Helfen</option>
<option>Verein</option>
</select>
</base-input>
</b-col>
</b-row>
</b-row> <base-input label="Beitrag">
<b-row class="form-group"> <textarea
<label class="col-md-2 col-form-label form-control-label form-control-lg">Ort</label> class="form-control form-control-lg"
<b-col md="10"> rows="3"
<base-input placeholder="Berlin" v-model="form.location" class="form-control-lg"></base-input> v-model="form.text"
</b-col> ></textarea>
</b-row> </base-input>
<b-row class="form-group"> <b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label form-control-lg">Kategorie</label> <label class="col-md-2 col-form-label form-control-label form-control-lg">
<b-col md="10"> Tätigkeit
<base-input > </label>
<select class="form-control form-control-lg"> <b-col md="8">
<option>Umwelt</option> <base-input
<option>Helfen</option> placeholder="Tätigkeit"
<option>Verein</option> v-model="form.location"
</select> class="form-control-lg"
</base-input> ></base-input>
</b-col> </b-col>
</b-row> <b-col md="2">
<base-input
placeholder="Stunden"
v-model="form.location"
<base-input label="Beitrag"> class="form-control-lg"
<textarea class="form-control form-control-lg" rows="3" v-model="form.text" ></textarea> ></base-input>
</base-input> </b-col>
<b-row class="form-group"> </b-row>
<label class="col-md-2 col-form-label form-control-label form-control-lg">Tätigkeit</label>
<b-col md="8"> <br />
<base-input placeholder="Tätigkeit" v-model="form.location" class="form-control-lg"></base-input>
</b-col> <br />
<b-col md="2"> <b-button type="submit" variant="success">
<base-input placeholder="Stunden" v-model="form.location" class="form-control-lg"></base-input> jetzt einreichen
</b-col> <small>{{ timestamp }}</small>
</b-row> </b-button>
<b-button type="reset" variant="danger">Cancel</b-button>
<br> <br />
</b-form>
<br> </div>
<b-button type="submit" variant="success">jetzt einreichen <small>{{timestamp}}</small></b-button> </b-card>
<b-button type="reset" variant="danger">Cancel</b-button> </b-collapse>
<br> </b-col>
</b-form> </b-row>
</div>
</b-card>
</b-collapse>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'GDDAddWork', name: 'GDDAddWork',
data(){ data() {
return { return {
show: true, show: true,
form: { form: {
from:'', from: '',
to: '', to: '',
hours: '', hours: '',
text: '', text: '',
gdd: 0.00, gdd: 0.0,
location: '', location: '',
text2: '', text2: '',
sendtime: '' sendtime: '',
}, },
timestamp: "" timestamp: '',
} }
}, },
created() { created() {
setInterval(this.getNow, 2000); setInterval(this.getNow, 2000)
}, },
methods: { methods: {
dateDiff() { dateDiff() {
this.form.hours = ((((this.$moment(this.form.to)) - (this.$moment(this.form.from)))/1000)/3600) this.form.hours = (this.$moment(this.form.to) - this.$moment(this.form.from)) / 1000 / 3600
}, },
getNow: function() { getNow: function () {
//const today = new Date() //const today = new Date()
//const date = today.getDate()+'.'+(today.getMonth()+1)+'.'+ today.getFullYear(); //const date = today.getDate()+'.'+(today.getMonth()+1)+'.'+ today.getFullYear();
//const time = today.getHours() + ":" + today.getMinutes(); //const time = today.getHours() + ":" + today.getMinutes();
//const dateTime = date +', '+ time; //const dateTime = date +', '+ time;
this.timestamp = new Date() this.timestamp = new Date()
}, },
onSubmit(event) { onSubmit(event) {
event.preventDefault() event.preventDefault()
console.log("onSUBMIT this.form.from >>>>", this.form.from) //console.log('onSUBMIT this.form.from >>>>', this.form.from)
console.log("onSUBMIT this.form.from >>>>", this.$moment(this.form.from)) //console.log('onSUBMIT this.form.from >>>>', this.$moment(this.form.from))
console.log("onSUBMIT this.form.to >>>>", this.form.to) //console.log('onSUBMIT this.form.to >>>>', this.form.to)
// console.log("onSUBMIT >>>>", this.getHours(this.form.from, this.form.to)) // console.log("onSUBMIT >>>>", this.getHours(this.form.from, this.form.to))
this.form.sendtime = new Date() this.form.sendtime = new Date()
alert(JSON.stringify(this.form)) alert(JSON.stringify(this.form))
},
}, onReset(event) {
onReset(event) { event.preventDefault()
event.preventDefault() // Reset our form values
// Reset our form values
// Trick to reset/clear native browser form validation state
// Trick to reset/clear native browser form validation state this.show = false
this.show = false this.$nextTick(() => {
this.$nextTick(() => { this.show = true
this.show = true })
}) },
} },
} }
}; </script>
</script>

348
frontend/src/views/KontoOverview/GddAddWork2.vue
View File

@ -1,240 +1,258 @@
<template> <template>
<div> <div>
<b-tabs content-class="mt-3" fill> <b-tabs content-class="mt-3" fill>
<b-tab :title="names.thisMonth" active> <b-tab :title="names.thisMonth" active>
<b-row> <b-row>
<b-col cols="3"> <b-col cols="3">
<base-input label="Arbeitstunden">
<base-input label="Arbeitstunden" > <b-form-input type="number" placeholder="23" />
<b-form-input type="number" placeholder="23" />
</base-input> </base-input>
<base-input label="Datum / Zeitraum" > <base-input label="Datum / Zeitraum">
<flat-pickr class="form-control" v-model="date" :config="config"></flat-pickr> <flat-pickr class="form-control" v-model="date" :config="config"></flat-pickr>
</base-input> </base-input>
</b-col> </b-col>
<b-col cols="9"> <b-col cols="9">
<base-input label="Arbeitsreport"> <base-input label="Arbeitsreport">
<textarea class="form-control" rows="5" @focus="textFocus"></textarea> <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
</base-input> </base-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col><button class="btn btn-info text-right" @click.prevent="newWorkForm">weiteren Report hinzufügen</button></b-col> <b-col>
<b-col> <button class="btn btn-info text-right" @click.prevent="newWorkForm">
weiteren Report hinzufügen
</button>
</b-col>
<b-col>
<div class="text-right"> <div class="text-right">
<button class="btn btn-info text-right" @click.prevent="submitForm2">save new Report</button> <button class="btn btn-info text-right" @click.prevent="submitForm2">
save new Report
</button>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
</b-tab> </b-tab>
<b-tab :title="names.lastMonth">
<b-row>
<b-tab :title="names.lastMonth"> <b-col cols="3">
<b-row> <base-input label="Arbeitstunden">
<b-col cols="3"> <b-form-input type="number" placeholder="23" />
<base-input label="Arbeitstunden" >
<b-form-input type="number" placeholder="23" />
</base-input> </base-input>
<base-input label="Datum / Zeitraum" > <base-input label="Datum / Zeitraum">
<flat-pickr class="form-control" v-model="date" :config="lastConfig"></flat-pickr> <flat-pickr class="form-control" v-model="date" :config="lastConfig"></flat-pickr>
</base-input> </base-input>
</b-col> </b-col>
<b-col cols="9"> <b-col cols="9">
<base-input label="Arbeitsreport"> <base-input label="Arbeitsreport">
<textarea class="form-control" rows="5" @focus="textFocus"></textarea> <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
</base-input> </base-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col><button class="btn btn-warning text-right" @click.prevent="newWorkForm">+ weiteren Report hinzufügen</button></b-col> <b-col>
<b-col> <button class="btn btn-warning text-right" @click.prevent="newWorkForm">
+ weiteren Report hinzufügen
</button>
</b-col>
<b-col>
<div class="text-right"> <div class="text-right">
<button class="btn btn-info text-right" @click.prevent="submitForm2">save new Report</button> <button class="btn btn-info text-right" @click.prevent="submitForm2">
save new Report
</button>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<hr> <hr />
<pre>Selected date is - {{date}}</pre> <pre>Selected date is - {{ date }}</pre>
<p>{{days.lastMonth}} Days in {{names.lastMonth}} </p> <p>{{ days.lastMonth }} Days in {{ names.lastMonth }}</p>
<p>Du hast diesen Monat
{{stundenSumme>0 ? 'schon ' : 'noch keine' }}
{{stundenSumme>0 ? ''+ stundenSumme : '' }}
Stunden eingetragen</p>
</b-tab>
<b-tab :title="names.beforLastMonth">
<b-row> <p>
<b-col cols="3"> Du hast diesen Monat
{{ stundenSumme > 0 ? 'schon ' : 'noch keine' }}
<base-input label="Arbeitstunden" > {{ stundenSumme > 0 ? '' + stundenSumme : '' }}
<b-form-input type="number" placeholder="23" /> Stunden eingetragen
</p>
</b-tab>
<b-tab :title="names.beforLastMonth">
<b-row>
<b-col cols="3">
<base-input label="Arbeitstunden">
<b-form-input type="number" placeholder="23" />
</base-input> </base-input>
<base-input label="Datum / Zeitraum" > <base-input label="Datum / Zeitraum">
<flat-pickr class="form-control" v-model="date" :config="beforLastConfig"></flat-pickr> <flat-pickr
class="form-control"
v-model="date"
:config="beforLastConfig"
></flat-pickr>
</base-input> </base-input>
</b-col> </b-col>
<b-col cols="9"> <b-col cols="9">
<base-input label="Arbeitsreport"> <base-input label="Arbeitsreport">
<textarea class="form-control" rows="5" @focus="textFocus"></textarea> <textarea class="form-control" rows="5" @focus="textFocus"></textarea>
</base-input> </base-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col><button class="btn btn-warning text-right" @click.prevent="newWorkForm">+ weiteren Report hinzufügen</button></b-col> <b-col>
<b-col> <button class="btn btn-warning text-right" @click.prevent="newWorkForm">
+ weiteren Report hinzufügen
</button>
</b-col>
<b-col>
<div class="text-right"> <div class="text-right">
<button class="btn btn-info text-right" @click.prevent="submitForm3">save new Report</button> <button class="btn btn-info text-right" @click.prevent="submitForm3">
save new Report
</button>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<hr> <hr />
<pre>Selected date is - {{date}}</pre> <pre>Selected date is - {{ date }}</pre>
<p>{{days.beforLastMonth}} Days in {{names.beforLastMonth}} </p> <p>{{ days.beforLastMonth }} Days in {{ names.beforLastMonth }}</p>
<p>Du hast noch keine Einträge </p> <p>Du hast noch keine Einträge</p>
</b-tab>
</b-tabs>
</b-tab>
</b-tabs>
</div> </div>
</template> </template>
<script> <script>
import flatPickr from "vue-flatpickr-component" import flatPickr from 'vue-flatpickr-component'
import "flatpickr/dist/flatpickr.css" import 'flatpickr/dist/flatpickr.css'
export default { export default {
name: 'GDDAddWork2', name: 'GDDAddWork2',
components: {flatPickr}, components: { flatPickr },
data(){ data() {
return { return {
date: null, date: null,
config: { config: {
altInput: false, altInput: false,
dateFormat: "d-m-Y", dateFormat: 'd-m-Y',
minDate: this.$moment().startOf('month').format("DD.MM.YYYY"), minDate: this.$moment().startOf('month').format('DD.MM.YYYY'),
maxDate: this.$moment().format("DD.MM.YYYY"), maxDate: this.$moment().format('DD.MM.YYYY'),
mode: 'range' mode: 'range',
},
lastConfig:{
altInput: false,
dateFormat: "d-m-Y",
minDate: this.$moment().month(this.$moment().month()-1).startOf('month').format("DD.MM.YYYY"),
maxDate: this.$moment().month(this.$moment().month()-1).endOf('month').format("DD.MM.YYYY"),
mode: 'range'
}, },
beforLastConfig:{ lastConfig: {
altInput: false, altInput: false,
dateFormat: "d-m-Y", dateFormat: 'd-m-Y',
minDate: this.$moment().month(this.$moment().month()-2).startOf('month').format("DD.MM.YYYY"), minDate: this.$moment()
maxDate: this.$moment().month(this.$moment().month()-2).endOf('month').format("DD.MM.YYYY"), .month(this.$moment().month() - 1)
mode: 'range' .startOf('month')
.format('DD.MM.YYYY'),
maxDate: this.$moment()
.month(this.$moment().month() - 1)
.endOf('month')
.format('DD.MM.YYYY'),
mode: 'range',
},
beforLastConfig: {
altInput: false,
dateFormat: 'd-m-Y',
minDate: this.$moment()
.month(this.$moment().month() - 2)
.startOf('month')
.format('DD.MM.YYYY'),
maxDate: this.$moment()
.month(this.$moment().month() - 2)
.endOf('month')
.format('DD.MM.YYYY'),
mode: 'range',
}, },
index: 0, index: 0,
form:[], form: [],
stundenSumme: 0, stundenSumme: 0,
messages: [], messages: [],
submitted:false, submitted: false,
days: { days: {
thisMonth: this.$moment().month(this.$moment().month()).daysInMonth(), thisMonth: this.$moment().month(this.$moment().month()).daysInMonth(),
lastMonth: this.$moment().month(this.$moment().month()-1).daysInMonth(), lastMonth: this.$moment()
beforLastMonth: this.$moment().month(this.$moment().month()-2).daysInMonth(), .month(this.$moment().month() - 1)
.daysInMonth(),
beforLastMonth: this.$moment()
.month(this.$moment().month() - 2)
.daysInMonth(),
}, },
names: { names: {
thisMonth: this.$moment().month(this.$moment().month()).format('MMMM'), thisMonth: this.$moment().month(this.$moment().month()).format('MMMM'),
lastMonth: this.$moment().month(this.$moment().month()-1).format('MMMM'), lastMonth: this.$moment()
beforLastMonth: this.$moment().month(this.$moment().month()-2).format('MMMM') .month(this.$moment().month() - 1)
} .format('MMMM'),
beforLastMonth: this.$moment()
.month(this.$moment().month() - 2)
.format('MMMM'),
},
} }
}, },
created() { created() {},
},
watch: { watch: {
$form: function(){ $form: function () {
stunden(this.form) stunden(this.form)
} },
}, },
methods: { methods: {
getTR(m,i){ getTR(m, i) {
console.log(m+"-"+i) //console.log(m + '-' + i)
}, },
stunden(hour, i, mon) { stunden(hour, i, mon) {
let n = 0 let n = 0
console.log("stunden(form)=>", hour) //console.log('stunden(form)=>', hour)
console.log("stunden(i)=>", i) //console.log('stunden(i)=>', i)
console.log("stunden(mon)=>", mon) //console.log('stunden(mon)=>', mon)
console.log("this.stundenSumme start=> ", this.stundenSumme)
this.stundenSumme = 0
console.log("arr.length => ", this.form.length)
for (n; n < this.form.length; n++){
console.log(">arr[n]=> ",this.form[n])
if (this.form[n] > 0) {
this.stundenSumme += parseInt(this.form[n]) ;
}
//console.log('this.stundenSumme start=> ', this.stundenSumme)
this.stundenSumme = 0
//console.log('arr.length => ', this.form.length)
for (n; n < this.form.length; n++) {
//console.log('>arr[n]=> ', this.form[n])
if (this.form[n] > 0) {
this.stundenSumme += parseInt(this.form[n])
} }
this.messages.push({ }
id: this.index, this.messages.push({
MonthsNumber: mon, id: this.index,
DaysNumber: i, MonthsNumber: mon,
HoursNumber: hour, DaysNumber: i,
DestinationText: '', HoursNumber: hour,
TextDecoded: '' DestinationText: '',
}); TextDecoded: '',
this.index++ })
console.log("this.stundenSumme ende=> ", this.stundenSumme) this.index++
}, //console.log('this.stundenSumme ende=> ', this.stundenSumme)
addNewMessage: function(){ },
this.messages.push({ addNewMessage: function () {
DaysNumber: '', this.messages.push({
TextDecoded: '' DaysNumber: '',
}); TextDecoded: '',
})
}, },
deleteNewMessage: function(event) { deleteNewMessage: function (event) {
console.log("deleteNewMessage:event) => ", event) //console.log('deleteNewMessage:event) => ', event)
//console.log("deleteNewMessage:this.events.splice(this.event) => ", this.events.splice(this.event)) //console.log("deleteNewMessage:this.events.splice(this.event) => ", this.events.splice(this.event))
this.form.splice(event, null); this.form.splice(event, null)
this.messages.splice(index, 1); this.messages.splice(index, 1)
this.index-- this.index--
}, },
submitForm: function(e) { submitForm: function (e) {
console.log(this.messages); //console.log(this.messages)
this.messages = [{ DaysNumber: '', TextDecoded: '' }]; this.messages = [{ DaysNumber: '', TextDecoded: '' }]
this.submitted = true; this.submitted = true
}, },
submitForm2() { submitForm2() {
console.log("submitForm2 TODO") //console.log('submitForm2 TODO')
}, },
submitForm3() { submitForm3() {
console.log("submitForm3 TODO") //console.log('submitForm3 TODO')
}, },
textFocus(){ textFocus() {
console.log("textFocus TODO") //console.log('textFocus TODO')
}, },
newWorkForm(){ newWorkForm() {
console.log("newWorkForm TODO") //console.log('newWorkForm TODO')
} },
} },
}; }
</script> </script>

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

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

33
frontend/src/views/KontoOverview/GddStatus.vue
View File

@ -1,27 +1,22 @@
<template> <template>
<div> <div>
<b-row> <b-row>
<b-col xl="6" md="6"> <b-col xl="6" md="6">
<stats-card type="gradient-red" <stats-card type="gradient-red" sub-title="balance_gdd" class="mb-4 h1">
sub-title="balance_gdd" {{ $n($store.state.user.balance) }} GDD
class="mb-4 h1"> </stats-card>
{{ $n($store.state.user.balance) }} GDD </b-col>
</stats-card> <b-col xl="6" md="6">
</b-col> <stats-card type="gradient-orange" sub-title="balance_gdt" class="mb-4 h1">
<b-col xl="6" md="6"> {{ $n($store.state.user.balance_gdt) }} GDT
<stats-card type="gradient-orange" </stats-card>
sub-title="balance_gdt" </b-col>
class="mb-4 h1"> </b-row>
{{ $n($store.state.user.balance_gdt) }} GDT
</stats-card>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'GddStatus' name: 'GddStatus',
}; }
</script> </script>

191
frontend/src/views/KontoOverview/GddTable.vue
View File

@ -1,93 +1,138 @@
<template> <template>
<div> <div>
<b-list-group>
<b-list-group > <b-list-group-item
<b-list-group-item v-for="item in filteredItems" :key="item.id" style="background-color:#ebebeba3 !important;"> v-for="item in filteredItems"
<div class="d-flex w-100 justify-content-between" @click="toogle(item)" > :key="item.id"
<b-icon v-if="item.type === 'send'" icon="box-arrow-left" class="m-1" font-scale="2" style="color:red"></b-icon> style="background-color: #ebebeba3 !important"
<b-icon v-else icon="box-arrow-right" class="m-1" font-scale="2" style="color:green" ></b-icon> >
<h1 class="mb-1">{{ $n((item.balance/10000)) }} <small>GDD</small></h1> <div class="d-flex w-100 justify-content-between" @click="toogle(item)">
<h2 class="text-muted">{{item.name}}</h2> <b-icon
<b-button v-b-toggle="'a'+item.transaction_id" variant="secondary"><b>i</b></b-button> v-if="item.type === 'send'"
</div> icon="box-arrow-left"
<b-collapse :id="'a'+item.transaction_id" class="mt-2"> class="m-1"
<b-card> font-scale="2"
<b-list-group> style="color: red"
<b-list-group-item> <b-badge class="mr-4" variant="primary" pill>name</b-badge>{{item.name}}</b-list-group-item> ></b-icon>
<b-list-group-item> <b-badge class="mr-4" variant="primary" pill>type</b-badge>{{item.type}}</b-list-group-item> <b-icon
<b-list-group-item> <b-badge class="mr-5" variant="primary" pill>id</b-badge>{{item.transaction_id}}</b-list-group-item> v-else
<b-list-group-item> <b-badge class="mr-4" variant="primary" pill>date</b-badge>{{item.date}}</b-list-group-item> icon="box-arrow-right"
<b-list-group-item> <b-badge class="mr-4" variant="primary" pill>gdd</b-badge>{{item.balance}}</b-list-group-item> class="m-1"
<b-list-group-item> <b-badge class="mr-4" variant="primary" pill>memo</b-badge>{{item.memo}}</b-list-group-item> font-scale="2"
</b-list-group> style="color: green"
<b-button v-b-toggle="'collapse-1-inner'+ item.transaction_id" variant="secondary">{{$t('transaction.more')}}</b-button> ></b-icon>
<b-collapse :id="'collapse-1-inner'+ item.transaction_id" class="mt-2"> <h1 class="mb-1">
<b-card>{{item}}</b-card> {{ $n(item.balance / 10000) }}
</b-collapse> <small>GDD</small>
</b-card> </h1>
<h2 class="text-muted">{{ item.name }}</h2>
<b-button v-b-toggle="'a' + item.transaction_id" variant="secondary">
<b>i</b>
</b-button>
</div>
<b-collapse :id="'a' + item.transaction_id" class="mt-2">
<b-card>
<b-list-group>
<b-list-group-item>
<b-badge class="mr-4" variant="primary" pill>name</b-badge>
{{ item.name }}
</b-list-group-item>
<b-list-group-item>
<b-badge class="mr-4" variant="primary" pill>type</b-badge>
{{ item.type }}
</b-list-group-item>
<b-list-group-item>
<b-badge class="mr-5" variant="primary" pill>id</b-badge>
{{ item.transaction_id }}
</b-list-group-item>
<b-list-group-item>
<b-badge class="mr-4" variant="primary" pill>date</b-badge>
{{ item.date }}
</b-list-group-item>
<b-list-group-item>
<b-badge class="mr-4" variant="primary" pill>gdd</b-badge>
{{ item.balance }}
</b-list-group-item>
<b-list-group-item>
<b-badge class="mr-4" variant="primary" pill>memo</b-badge>
{{ item.memo }}
</b-list-group-item>
</b-list-group>
<b-button v-b-toggle="'collapse-1-inner' + item.transaction_id" variant="secondary">
{{ $t('transaction.more') }}
</b-button>
<b-collapse :id="'collapse-1-inner' + item.transaction_id" class="mt-2">
<b-card>{{ item }}</b-card>
</b-collapse> </b-collapse>
</b-list-group-item> </b-card>
<b-list-group-item v-show="this.$route.path == '/overview'"> </b-collapse>
<b-alert v-if="count < 5" show variant="secondary" v-html="$t('transaction.show_part', {'count':count} )"></b-alert> </b-list-group-item>
<router-link else to="/transactions" v-html="$t('transaction.show_all', {'count':count})"> </router-link> <b-list-group-item v-show="this.$route.path == '/overview'">
</b-list-group-item> <b-alert
v-if="count < 5"
show
</b-list-group> variant="secondary"
v-html="$t('transaction.show_part', { count: count })"
></b-alert>
<router-link
else
to="/transactions"
v-html="$t('transaction.show_all', { count: count })"
></router-link>
</b-list-group-item>
</b-list-group>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios'
import communityAPI from '../../apis/communityAPI' import communityAPI from '../../apis/communityAPI'
export default { export default {
name: 'GddTable', name: 'GddTable',
data(){ data() {
return { return {
form: [], form: [],
fields: [ 'balance', 'date', 'memo', 'name', 'transaction_id', 'type','details'], fields: ['balance', 'date', 'memo', 'name', 'transaction_id', 'type', 'details'],
items: [], items: [],
count: 0 count: 0,
}; }
}, },
async created() { async created() {
const result = await communityAPI.transactions(this.$store.state.session_id) const result = await communityAPI.transactions(this.$store.state.session_id)
if( result.success ){ if (result.success) {
this.$store.state.user.balance_gdt = result.result.data.gdtSum this.$store.state.user.balance_gdt = result.result.data.gdtSum
this.items = result.result.data.transactions this.items = result.result.data.transactions
this.count = result.result.data.count this.count = result.result.data.count
} else { } else {
console.log('error',result) //console.log('error', result)
} }
}, },
computed: { computed: {
filteredItems(a) { filteredItems(a) {
// console.log("filteredItems date",a.items) // console.log("filteredItems date",a.items)
return a.items return a.items
},
} },
},
methods: { methods: {
rowClass(item, type) { rowClass(item, type) {
if (!item || type !== 'row') return if (!item || type !== 'row') return
if (item.type === 'receive') return 'table-success' if (item.type === 'receive') return 'table-success'
if (item.type === 'send') return 'table-warning' if (item.type === 'send') return 'table-warning'
if (item.type === 'creation') return 'table-primary' if (item.type === 'creation') return 'table-primary'
}, },
toogle(item) { toogle(item) {
const temp = '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>' const temp =
'<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
} },
} },
}; }
</script> </script>
<style> <style>
.el-table .cell{ .el-table .cell {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
</style> </style>

94
frontend/src/views/KontoOverview/GddWorkTable.vue
View File

@ -1,47 +1,77 @@
<template> <template>
<div> <div>
<b-list-group > <b-list-group>
<b-list-group-item v-for="item in items" :key="item.id"> <b-list-group-item v-for="item in items" :key="item.id">
<div class="d-flex w-100 justify-content-between" @click="toogle(item)" > <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
<b-icon v-else icon="check2-all" class="m-1" font-scale="2" style="color:green" ></b-icon> v-if="item.status == 'submitted'"
<h2 class="text-muted"><small>{{item.datel}}</small> - {{item.text}}</h2> icon="clock-history"
</div> class="m-1"
</b-list-group-item> font-scale="2"
</b-list-group> 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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'GddWorkTable', name: 'GddWorkTable',
data(){ data() {
return { return {
form: [], form: [],
items: [ 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: 1,
{ id: 3, text: 'Geneva Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ', datel: '15.04.2020 12:55', status: 'confirmed' }, text: 'Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ',
{ id: 4, text: 'Community Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ', datel: '10.03.2020 18:20', status: 'confirmed'} 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: { methods: {
rowClass(item, type) { rowClass(item, type) {
if (!item || type !== 'row') return if (!item || type !== 'row') return
if (item.status === 'received') return 'table-success' if (item.status === 'received') return 'table-success'
if (item.status === 'sent') return 'table-warning' if (item.status === 'sent') return 'table-warning'
if (item.status === 'earned') return 'table-primary' if (item.status === 'earned') return 'table-primary'
}, },
toogle(item) { toogle(item) {
const temp = '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>' const temp =
} '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
} },
}; },
}
</script> </script>
<style> <style>
.el-table .cell{ .el-table .cell {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
</style> </style>

19
frontend/src/views/KontoOverview/default.vue
View File

@ -1,19 +1,14 @@
<template> <template>
<div> <div>default</div>
default
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'default', name: 'default',
data(){ data() {
return { return {}
};
}, },
methods: { methods: {},
}, watch: {},
watch: { }
} </script>
};
</script>

176
frontend/src/views/Landing.vue
View File

@ -3,7 +3,7 @@
<!-- Header --> <!-- Header -->
<div class="header bg-gradient-info py-7 py-lg-8 pt-lg-9"> <div class="header bg-gradient-info py-7 py-lg-8 pt-lg-9">
<b-container> <b-container>
<div class="header-body text-center mb-7"> <div class="header-body text-center mb-7">
<p class="h1">GRADIDO</p> <p class="h1">GRADIDO</p>
<p class="h4">Wallet</p> <p class="h4">Wallet</p>
<!-- <b-row class="justify-content-center"> <!-- <b-row class="justify-content-center">
@ -17,84 +17,122 @@
<router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link> <router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link>
</b-col> </b-col>
</b-row> --> </b-row> -->
<hr> <hr />
<p class="lead"> <p class="lead">Anmelden</p>
Anmelden
</p>
<b-row class="justify-content-center"> <b-row class="justify-content-center">
<b-col xl="5" lg="6" md="6" class="px-5"> <b-col xl="5" lg="6" md="6" class="px-5">
<form @submit.prevent="login"> <form @submit.prevent="login">
<b-row class="form-group"> <b-row class="form-group">
<label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label> <label
for="example-email-input"
class="col-md-2 col-form-label form-control-label"
>
Email
</label>
<b-col md="10"> <b-col md="10">
<base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="lemail"/> <base-input
type="email"
autocomplete="username email"
placeholder="argon@example.com"
v-model="lemail"
/>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="form-group"> <b-row class="form-group">
<label for="example-password-input" <label
class="col-md-2 col-form-label form-control-label">Password</label> for="example-password-input"
class="col-md-2 col-form-label form-control-label"
>
Password
</label>
<b-col md="10"> <b-col md="10">
<base-input type="password" autocomplete="current-password" placeholder="password" v-model="lpwd"/> <base-input
type="password"
autocomplete="current-password"
placeholder="password"
v-model="lpwd"
/>
</b-col> </b-col>
</b-row> </b-row>
<b-button block type="submit" >Anmelden</b-button> <b-button block type="submit">Anmelden</b-button>
</form> </form>
</b-col> </b-col>
</b-row> </b-row>
<hr> <hr />
<p class="lead"> <p class="lead">neues Mitglied anlegen</p>
neues Mitglied anlegen
</p>
<b-row class="justify-content-center"> <b-row class="justify-content-center">
<b-col xl="5" lg="6" md="6" class="px-5"> <b-col xl="5" lg="6" md="6" class="px-5">
<form> <form>
<b-row class="form-group"> <b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label">Vorname</label> <label class="col-md-2 col-form-label form-control-label">Vorname</label>
<b-col md="10"> <b-col md="10">
<base-input placeholder="Jon " v-model="rfname"></base-input> <base-input placeholder="Jon " v-model="rfname"></base-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="form-group"> <b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label">Nachname</label> <label class="col-md-2 col-form-label form-control-label">Nachname</label>
<b-col md="10"> <b-col md="10">
<base-input placeholder=" Snow" v-model="rlname"></base-input> <base-input placeholder=" Snow" v-model="rlname"></base-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="form-group"> <b-row class="form-group">
<label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label> <label
<b-col md="10"> for="example-email-input"
<base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="remail"/> class="col-md-2 col-form-label form-control-label"
</b-col> >
</b-row> Email
</label>
<b-row class="form-group"> <b-col md="10">
<label for="example-password-input" <base-input
class="col-md-2 col-form-label form-control-label">Password</label> type="email"
<b-col md="10"> autocomplete="username email"
<base-input type="password" autocomplete="current-password" placeholder="password" v-model="rpwd"/> placeholder="argon@example.com"
</b-col> v-model="remail"
</b-row> />
</form> </b-col>
<b-button block type="submit" @click="createUser()">Anmelden</b-button> </b-row>
<b-row class="form-group">
<label
for="example-password-input"
class="col-md-2 col-form-label form-control-label"
>
Password
</label>
<b-col md="10">
<base-input
type="password"
autocomplete="current-password"
placeholder="password"
v-model="rpwd"
/>
</b-col>
</b-row>
</form>
<b-button block type="submit" @click="createUser()">Anmelden</b-button>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</b-container> </b-container>
<div class="separator separator-bottom separator-skew zindex-100"> <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"> <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> <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
</svg> </svg>
</div> </div>
</div> </div>
<!-- Page content --> <!-- Page content -->
</div> </div>
</template> </template>
<script> <script>
@ -102,31 +140,39 @@
export default { export default {
name: 'Landing', name: 'Landing',
data(){ data() {
return { return {
lemail: '', lemail: '',
lpwd: '', lpwd: '',
rfname: '', rfname: '',
rlname: '', rlname: '',
remail: '', remail: '',
rpwd: '' rpwd: '',
} }
}, },
methods: { methods: {
login() { login() {
//if (this.lemail !== '' || this.lpwd !== '') { // TODO this should be done via form validation //if (this.lemail !== '' || this.lpwd !== '') { // TODO this should be done via form validation
this.$store.dispatch('login', {email: this.lemail, password: this.lpwd}) this.$store.dispatch('login', {
email: this.lemail,
password: this.lpwd,
})
//} //}
}, },
createUser() { createUser() {
this.$store.dispatch('createUser', {email:this.remail, first_name:this.rfname, last_name:this.rlname, password:this.rpwd}) this.$store.dispatch('createUser', {
email: this.remail,
first_name: this.rfname,
last_name: this.rlname,
password: this.rpwd,
})
}, },
loginAsAdmin () { loginAsAdmin() {
console.log("app.vue admin login(): " + this.$store.state.is_admin) //console.log('app.vue admin login(): ' + this.$store.state.is_admin)
this.modals = false this.modals = false
this.$store.commit('loginAsAdmin') this.$store.commit('loginAsAdmin')
this.$router.push('/AdminOverview') this.$router.push('/AdminOverview')
} },
} },
}; }
</script> </script>

134
frontend/src/views/Layout/AdminLayout.vue
View File

@ -9,49 +9,46 @@
path: '/overview', path: '/overview',
icon: 'ni ni-tv-2 text-primary', icon: 'ni ni-tv-2 text-primary',
}" }"
> ></sidebar-item>
</sidebar-item>
<sidebar-item <sidebar-item
:link="{ :link="{
name: 'User Profile', name: 'User Profile',
path: '/profile', path: '/profile',
icon: 'ni ni-single-02 text-yellow' icon: 'ni ni-single-02 text-yellow',
}"> }"
</sidebar-item> ></sidebar-item>
<sidebar-item <sidebar-item
:link="{ :link="{
name: 'Login', name: 'Login',
path: '/login', path: '/login',
icon: 'ni ni-key-25 text-info' icon: 'ni ni-key-25 text-info',
}"> }"
</sidebar-item> ></sidebar-item>
<sidebar-item <sidebar-item
:link="{ :link="{
name: 'Register', name: 'Register',
path: '/register', path: '/register',
icon: 'ni ni-circle-08 text-pink' icon: 'ni ni-circle-08 text-pink',
}"> }"
</sidebar-item> ></sidebar-item>
</template> </template>
<template slot="links-after"> <template slot="links-after">
<hr class="my-3"> <hr class="my-3" />
<h6 class="navbar-heading p-0 text-muted">Community</h6> <h6 class="navbar-heading p-0 text-muted">Community</h6>
<b-nav class="navbar-nav mb-md-3"> <b-nav class="navbar-nav mb-md-3">
<b-nav-item <b-nav-item href="https://gradido.net/de/" target="_blank">
href="https://gradido.net/de/" target="_blank" <i class="ni ni-spaceship"></i>
> <b-nav-text class="p-0">GRADIDO.net</b-nav-text>
<i class="ni ni-spaceship"></i>
<b-nav-text class="p-0">GRADIDO.net</b-nav-text>
</b-nav-item> </b-nav-item>
<b-nav-item href="https://elopage.com/s/gradido/sign_in"> <b-nav-item href="https://elopage.com/s/gradido/sign_in">
<i class="ni ni-palette"></i> <i class="ni ni-palette"></i>
<b-nav-text class="p-0">Mitgliederbereich</b-nav-text> <b-nav-text class="p-0">Mitgliederbereich</b-nav-text>
</b-nav-item> </b-nav-item>
<b-nav-item href="https://gradido.net/de/memberships/"> <b-nav-item href="https://gradido.net/de/memberships/">
<i class="ni ni-ui-04"></i> <i class="ni ni-ui-04"></i>
<b-nav-text class="p-0">Mitgliedschaft</b-nav-text> <b-nav-text class="p-0">Mitgliedschaft</b-nav-text>
</b-nav-item> </b-nav-item>
</b-nav> </b-nav>
</template> </template>
@ -70,49 +67,48 @@
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable no-new */ /* eslint-disable no-new */
import PerfectScrollbar from 'perfect-scrollbar'; import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'; import 'perfect-scrollbar/css/perfect-scrollbar.css'
function hasElement(className) { function hasElement(className) {
return document.getElementsByClassName(className).length > 0; 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)
} }
}
function initScrollbar(className) { import DashboardNavbar from './DashboardNavbar.vue'
if (hasElement(className)) { import ContentFooter from './ContentFooter.vue'
new PerfectScrollbar(`.${className}`); import DashboardContent from './Content.vue'
} else { import { FadeTransition } from 'vue2-transitions'
// try to init it later in case this component is loaded async
setTimeout(() => {
initScrollbar(className);
}, 100);
}
}
import DashboardNavbar from './DashboardNavbar.vue'; export default {
import ContentFooter from './ContentFooter.vue'; components: {
import DashboardContent from './Content.vue'; DashboardNavbar,
import { FadeTransition } from 'vue2-transitions'; ContentFooter,
//DashboardContent,
export default { FadeTransition,
components: { },
DashboardNavbar, methods: {
ContentFooter, initScrollbar() {
//DashboardContent, let isWindows = navigator.platform.startsWith('Win')
FadeTransition if (isWindows) {
}, initScrollbar('sidenav')
methods: {
initScrollbar() {
let isWindows = navigator.platform.startsWith('Win');
if (isWindows) {
initScrollbar('sidenav');
}
} }
}, },
mounted() { },
this.initScrollbar() mounted() {
} this.initScrollbar()
}; },
}
</script> </script>
<style lang="scss"> <style lang="scss"></style>
</style>

243
frontend/src/views/Layout/AuthLayout.vue
View File

@ -9,54 +9,51 @@
> >
<div slot="brand" class="navbar-wrapper"> <div slot="brand" class="navbar-wrapper">
<b-navbar-brand to="/overview"> <b-navbar-brand to="/overview">
<img src="img/brand/white.png"> <img src="img/brand/white.png" />
</b-navbar-brand> </b-navbar-brand>
</div> </div>
<template> <template>
<div class="navbar-collapse-header"> <div class="navbar-collapse-header">
<b-row> <b-row>
<b-col cols="6" class="collapse-brand"> <b-col cols="6" class="collapse-brand">
<router-link to="/overview"> <router-link to="/overview">
<img src="img/brand/green.png"> <img src="img/brand/green.png" />
</router-link> </router-link>
</b-col> </b-col>
<b-col cols="6" class="collapse-close"> <b-col cols="6" class="collapse-close">
<button type="button" class="navbar-toggler" @click="showMenu = false"> <button type="button" class="navbar-toggler" @click="showMenu = false">
<span></span> <span></span>
<span></span> <span></span>
</button> </button>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</template>
</template>
</base-nav> </base-nav>
<div class="main-content"> <div class="main-content">
<zoom-center-transition <zoom-center-transition :duration="pageTransitionDuration" mode="out-in">
:duration="pageTransitionDuration"
mode="out-in"
>
<router-view></router-view> <router-view></router-view>
</zoom-center-transition> </zoom-center-transition>
</div> </div>
<footer class="py-5" id="footer-main"> <footer class="py-5" id="footer-main">
<b-container > <b-container>
<b-row align-v="center" class="justify-content-xl-between"> <b-row align-v="center" class="justify-content-xl-between">
<b-col xl="6"> <b-col xl="6">
<div class="copyright text-center text-xl-left text-muted"> <div class="copyright text-center text-xl-left text-muted">
© {{year}} <a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">Gradido-Akademie</a> © {{ year }}
<a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">
Gradido-Akademie
</a>
</div> </div>
</b-col> </b-col>
<b-col xl="6" class="col-xl-6"> <b-col xl="6" class="col-xl-6">
<b-nav class="nav-footer justify-content-center justify-content-lg-end"> <b-nav class="nav-footer justify-content-center justify-content-lg-end">
<b-nav-item ref="https://www.creative-tim.com" target="_blank"> <b-nav-item ref="https://www.creative-tim.com" target="_blank">Gradido</b-nav-item>
Gradido
</b-nav-item>
<b-nav-item href="https://www.creative-tim.com/presentation" target="_blank"> <b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
Impressum Impressum
</b-nav-item> </b-nav-item>
<b-nav-item href="http://blog.creative-tim.com" target="_blank"> <b-nav-item href="http://blog.creative-tim.com" target="_blank">
Datenschutzerklärung Datenschutzerklärung
@ -69,108 +66,108 @@
</div> </div>
</template> </template>
<script> <script>
import { BaseNav } from '@/components'; import { BaseNav } from '@/components'
import { ZoomCenterTransition } from 'vue2-transitions'; import { ZoomCenterTransition } from 'vue2-transitions'
export default { export default {
components: { components: {
BaseNav, BaseNav,
ZoomCenterTransition ZoomCenterTransition,
},
props: {
backgroundColor: {
type: String,
default: 'black',
}, },
props: { },
backgroundColor: { data() {
type: String, return {
default: 'black' showMenu: false,
} menuTransitionDuration: 250,
}, pageTransitionDuration: 200,
data() { year: new Date().getFullYear(),
return { pageClass: 'login-page',
showMenu: false,
menuTransitionDuration: 250,
pageTransitionDuration: 200,
year: new Date().getFullYear(),
pageClass: 'login-page'
};
},
computed: {
title() {
return `${this.$route.name} Page`;
}
},
methods: {
toggleNavbar() {
document.body.classList.toggle('nav-open');
this.showMenu = !this.showMenu;
},
closeMenu() {
document.body.classList.remove('nav-open');
this.showMenu = false;
},
setBackgroundColor() {
document.body.classList.add('bg-default');
},
removeBackgroundColor() {
document.body.classList.remove('bg-default');
},
updateBackground() {
if (!this.$route.meta.noBodyBackground) {
this.setBackgroundColor();
} else {
this.removeBackgroundColor()
}
}
},
beforeDestroy() {
this.removeBackgroundColor();
},
beforeRouteUpdate(to, from, next) {
// Close the mobile menu first then transition to next page
if (this.showMenu) {
this.closeMenu();
setTimeout(() => {
next();
}, this.menuTransitionDuration);
} else {
next();
}
},
watch: {
$route: {
immediate: true,
handler: function () {
this.updateBackground()
}
}
} }
}; },
computed: {
title() {
return `${this.$route.name} Page`
},
},
methods: {
toggleNavbar() {
document.body.classList.toggle('nav-open')
this.showMenu = !this.showMenu
},
closeMenu() {
document.body.classList.remove('nav-open')
this.showMenu = false
},
setBackgroundColor() {
document.body.classList.add('bg-default')
},
removeBackgroundColor() {
document.body.classList.remove('bg-default')
},
updateBackground() {
if (!this.$route.meta.noBodyBackground) {
this.setBackgroundColor()
} else {
this.removeBackgroundColor()
}
},
},
beforeDestroy() {
this.removeBackgroundColor()
},
beforeRouteUpdate(to, from, next) {
// Close the mobile menu first then transition to next page
if (this.showMenu) {
this.closeMenu()
setTimeout(() => {
next()
}, this.menuTransitionDuration)
} else {
next()
}
},
watch: {
$route: {
immediate: true,
handler: function () {
this.updateBackground()
},
},
},
}
</script> </script>
<style lang="scss"> <style lang="scss">
$scaleSize: 0.8; $scaleSize: 0.8;
@keyframes zoomIn8 { @keyframes zoomIn8 {
from { from {
opacity: 0; opacity: 0;
transform: scale3d($scaleSize, $scaleSize, $scaleSize); transform: scale3d($scaleSize, $scaleSize, $scaleSize);
}
100% {
opacity: 1;
}
} }
100% {
opacity: 1;
}
}
.main-content .zoomIn { .main-content .zoomIn {
animation-name: zoomIn8; animation-name: zoomIn8;
} }
@keyframes zoomOut8 { @keyframes zoomOut8 {
from { from {
opacity: 1; opacity: 1;
}
to {
opacity: 0;
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
}
} }
to {
opacity: 0;
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
}
}
.main-content .zoomOut { .main-content .zoomOut {
animation-name: zoomOut8; animation-name: zoomOut8;
} }
</style> </style>

14
frontend/src/views/Layout/AuthLayout_gdd.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="main-content"> <div class="main-content">
<template> <template>
<div class="main-content"> <div class="main-content">
<router-view></router-view> <router-view></router-view>
<content-footer v-if="!$route.meta.hideFooter"></content-footer> <content-footer v-if="!$route.meta.hideFooter"></content-footer>
</div> </div>
</template> </template>
@ -10,9 +10,9 @@
</template> </template>
<script> <script>
import ContentFooter from './ContentFooter.vue' import ContentFooter from './ContentFooter.vue'
export default { export default {
components: { components: {
ContentFooter ContentFooter,
}, },
} }
</script> </script>

12
frontend/src/views/Layout/Content.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="content"> <div class="content">
<FadeTransition :duration="200" mode="out-in"> <fade-transition :duration="200" mode="out-in">
<!-- your content here --> <!-- your content here -->
<router-view></router-view> <router-view></router-view>
</FadeTransition> </fade-transition>
</div> </div>
</template> </template>
<script> <script>
import { FadeTransition } from 'vue2-transitions'; import { FadeTransition } from 'vue2-transitions'
export default { export default {
components: { components: {
FadeTransition FadeTransition,
} },
}; }
</script> </script>
<style></style> <style></style>

23
frontend/src/views/Layout/ContentFooter.vue
View File

@ -3,19 +3,22 @@
<b-row align-v="center" class="justify-content-lg-between"> <b-row align-v="center" class="justify-content-lg-between">
<b-col> <b-col>
<div class="copyright text-center text-lg-center text-muted"> <div class="copyright text-center text-lg-center text-muted">
© {{year}} <a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">Gradido-Akademie</a> © {{ year }}
<a href="#!" to="/login" class="font-weight-bold ml-1">Gradido-Akademie</a>
</div> </div>
</b-col> </b-col>
</b-row>
<b-row align-v="center" class="justify-content-lg-between">
<b-col> <b-col>
<b-nav class="nav-footer justify-content-center"> <b-nav class="nav-footer justify-content-center">
<b-nav-item :href="`https://gradido.net/${$i18n.locale}`" target="_blank"> <b-nav-item :href="`https://gradido.net/${$i18n.locale}`" target="_blank">
Gradido Gradido
</b-nav-item> </b-nav-item>
<b-nav-item :href="`https://gradido.net/${$i18n.locale}/impressum/`" target="_blank"> <b-nav-item :href="`https://gradido.net/${$i18n.locale}/impressum/`" target="_blank">
{{$t('imprint')}} {{ $t('imprint') }}
</b-nav-item> </b-nav-item>
<b-nav-item :href="`https://gradido.net/${$i18n.locale}/datenschutz/`" target="_blank"> <b-nav-item :href="`https://gradido.net/${$i18n.locale}/datenschutz/`" target="_blank">
{{$t('privacy_policy')}} {{ $t('privacy_policy') }}
</b-nav-item> </b-nav-item>
<!--<b-nav-item href="#!" to="/explorer" > <!--<b-nav-item href="#!" to="/explorer" >
GDD-Explorer GDD-Explorer
@ -23,14 +26,6 @@
</b-nav> </b-nav>
</b-col> </b-col>
</b-row> </b-row>
<!--
<br>
<br>
<b-row >
<b-col class="nav-link text-center" @click.prevent="setLocale('en')">{{ $t('languages.en') }}</b-col>
<b-col class="nav-link text-center" @click.prevent="setLocale('de')">{{ $t('languages.de') }}</b-col>
</b-row>
-->
</footer> </footer>
</template> </template>
<script> <script>
@ -38,8 +33,8 @@ export default {
data() { data() {
return { return {
year: new Date().getFullYear(), year: new Date().getFullYear(),
}; }
} },
}; }
</script> </script>
<style></style> <style></style>

100
frontend/src/views/Layout/DashboardLayout.vue
View File

@ -2,29 +2,23 @@
<div class="wrapper"> <div class="wrapper">
<notifications></notifications> <notifications></notifications>
<side-bar> <side-bar>
<template slot="links" > <template slot="links">
<b-nav-item href="#!" to="/overview"> <b-nav-item href="#!" to="/overview">
<b-nav-text class="p-0 text-lg text-muted">{{ $t('sent') }}</b-nav-text>
<b-nav-text class="p-0 text-lg text-muted">{{ $t('sent')}}</b-nav-text>
</b-nav-item> </b-nav-item>
<b-nav-item href="#!" to="/transactions"> <b-nav-item href="#!" to="/transactions">
<b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions')}}</b-nav-text> <b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions') }}</b-nav-text>
</b-nav-item> </b-nav-item>
<b-nav-item href="#!" to="/profile"> <b-nav-item href="#!" to="/profile">
<b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
<b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil')}}</b-nav-text>
</b-nav-item> </b-nav-item>
<b-nav-item href="#!" to="/profileedit"> <b-nav-item href="#!" to="/profileedit">
<b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text> <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
</b-nav-item> </b-nav-item>
<b-nav-item href="#!" to="/activity"> <b-nav-item href="#!" to="/activity">
<b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text> <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
</b-nav-item> </b-nav-item>
</template> </template>
</side-bar> </side-bar>
<div class="main-content"> <div class="main-content">
@ -41,49 +35,47 @@
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable no-new */ import PerfectScrollbar from 'perfect-scrollbar'
import PerfectScrollbar from 'perfect-scrollbar'; import 'perfect-scrollbar/css/perfect-scrollbar.css'
import 'perfect-scrollbar/css/perfect-scrollbar.css';
function hasElement(className) { function hasElement(className) {
return document.getElementsByClassName(className).length > 0; return document.getElementsByClassName(className).length > 0
} }
function initScrollbar(className) { function initScrollbar(className) {
if (hasElement(className)) { if (hasElement(className)) {
new PerfectScrollbar(`.${className}`); new PerfectScrollbar(`.${className}`)
} else { } else {
// try to init it later in case this component is loaded async // try to init it later in case this component is loaded async
setTimeout(() => { setTimeout(() => {
initScrollbar(className); initScrollbar(className)
}, 100); }, 100)
} }
} }
import DashboardNavbar from './DashboardNavbar.vue'; import DashboardNavbar from './DashboardNavbar.vue'
import ContentFooter from './ContentFooter.vue'; import ContentFooter from './ContentFooter.vue'
// import DashboardContent from './Content.vue'; // import DashboardContent from './Content.vue';
import { FadeTransition } from 'vue2-transitions'; import { FadeTransition } from 'vue2-transitions'
export default { export default {
components: { components: {
DashboardNavbar, DashboardNavbar,
ContentFooter, ContentFooter,
// DashboardContent, // DashboardContent,
FadeTransition FadeTransition,
}, },
methods: { methods: {
initScrollbar() { initScrollbar() {
let isWindows = navigator.platform.startsWith('Win'); let isWindows = navigator.platform.startsWith('Win')
if (isWindows) { if (isWindows) {
initScrollbar('sidenav'); initScrollbar('sidenav')
} }
} },
}, },
mounted() { mounted() {
this.initScrollbar() this.initScrollbar()
} },
}; }
</script> </script>
<style lang="scss"> <style lang="scss"></style>
</style>

77
frontend/src/views/Layout/DashboardNavbar.vue
View File

@ -2,10 +2,14 @@
<base-nav <base-nav
container-classes="container-fluid" container-classes="container-fluid"
class="navbar-top navbar-expand" class="navbar-top navbar-expand"
:class="{'navbar-dark': type === 'default'}" :class="{ 'navbar-dark': type === 'default' }"
> >
<a href="#" aria-current="page" class="h4 mb-0 text-uppercase d-none d-lg-inline-block active router-link-active"> <a
{{$route.name}} href="#"
aria-current="page"
class="h4 mb-0 text-uppercase d-none d-lg-inline-block active router-link-active"
>
{{ $route.name }}
</a> </a>
<!-- Navbar links --> <!-- Navbar links -->
<b-navbar-nav class="align-items-center ml-md-auto"> <b-navbar-nav class="align-items-center ml-md-auto">
@ -17,37 +21,37 @@
</li> </li>
</b-navbar-nav> </b-navbar-nav>
<b-navbar-nav class="align-items-center ml-auto ml-md-0"> <b-navbar-nav class="align-items-center ml-auto ml-md-0">
<base-dropdown
<base-dropdown menu-on-right menu-on-right
class="nav-item" class="nav-item"
tag="li" tag="li"
title-tag="a" title-tag="a"
title-classes="nav-link pr-0"> title-classes="nav-link pr-0"
>
<a href="#" class="pr-1" @click.prevent slot="title-container"> <a href="#" class="pr-1" @click.prevent slot="title-container">
<b-media no-body class="align-items-center"> <b-media no-body class="align-items-center">
<span class="pb-2 text-lg font-weight-bold">{{ $store.state.email }}</span> <span class="pb-2 text-lg font-weight-bold">
{{ $store.state.email }}
</span>
<b-media-body class="ml-2 d-none d-lg-block"> <b-media-body class="ml-2 d-none d-lg-block">
<span class="avatar">
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
<span class="avatar "> </span>
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
</span>
</b-media-body> </b-media-body>
</b-media> </b-media>
</a> </a>
<template> <template>
<b-dropdown-header class="noti-title"> <b-dropdown-header class="noti-title">
<h6 class="text-overflow m-0"> {{ $t('welcome') }}</h6> <h6 class="text-overflow m-0">{{ $t('welcome') }}</h6>
</b-dropdown-header> </b-dropdown-header>
<b-dropdown-item href="#!" to="/overview"> <b-dropdown-item href="#!" to="/overview">
<i class="ni ni-single-02"></i> <i class="ni ni-single-02"></i>
<span>{{ $t('site.overview.account_overview')}}</span> <span>{{ $t('site.overview.account_overview') }}</span>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item href="#!" to="/profile"> <b-dropdown-item href="#!" to="/profile">
<i class="ni ni-single-02"></i> <i class="ni ni-single-02"></i>
<span>{{ $t('site.navbar.my-profil')}}</span> <span>{{ $t('site.navbar.my-profil') }}</span>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item href="#!" to="/profileedit"> <b-dropdown-item href="#!" to="/profileedit">
<i class="ni ni-settings-gear-65"></i> <i class="ni ni-settings-gear-65"></i>
@ -64,7 +68,6 @@
<i class="ni ni-user-run"></i> <i class="ni ni-user-run"></i>
<span>{{ $t('logout') }}</span> <span>{{ $t('logout') }}</span>
</b-dropdown-item> </b-dropdown-item>
</template> </template>
</base-dropdown> </base-dropdown>
</b-navbar-nav> </b-navbar-nav>
@ -77,45 +80,45 @@ import VueQrcode from 'vue-qrcode'
export default { export default {
components: { components: {
//CollapseTransition, //CollapseTransition,
BaseNav, BaseNav,
VueQrcode VueQrcode,
}, },
props: { props: {
type: { type: {
type: String, type: String,
default: 'default', // default|light default: 'default', // default|light
description: 'Look of the dashboard navbar. Default (Green) or light (gray)' description: 'Look of the dashboard navbar. Default (Green) or light (gray)',
} },
}, },
computed: { computed: {
routeName() { routeName() {
const { name } = this.$route; const { name } = this.$route
return this.capitalizeFirstLetter(name); return this.capitalizeFirstLetter(name)
} },
}, },
data() { data() {
return { return {
activeNotifications: false, activeNotifications: false,
showMenu: false, showMenu: false,
searchModalVisible: false, searchModalVisible: false,
searchQuery: '' searchQuery: '',
}; }
}, },
methods: { methods: {
capitalizeFirstLetter(string) { capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1); return string.charAt(0).toUpperCase() + string.slice(1)
}, },
toggleNotificationDropDown() { toggleNotificationDropDown() {
this.activeNotifications = !this.activeNotifications; this.activeNotifications = !this.activeNotifications
}, },
closeDropDown() { closeDropDown() {
this.activeNotifications = false; this.activeNotifications = false
}, },
logout(){ logout() {
//console.log("DashboardNavbar.vue user logout() : ") //console.log("DashboardNavbar.vue user logout() : ")
this.$store.dispatch('logout') this.$store.dispatch('logout')
} },
} },
}; }
</script> </script>

2
frontend/src/views/Maps/API_KEY.js
View File

@ -1 +1 @@
export const API_KEY = 'YOUR_API_KEY'; export const API_KEY = 'YOUR_API_KEY'

1615
frontend/src/views/NotFoundPage.vue
View File

File diff suppressed because it is too large Load Diff

18
frontend/src/views/Pages/Explorer.vue
View File

@ -3,25 +3,29 @@
<!-- Header --> <!-- Header -->
<div class="header bg-gradient-info py-7 py-lg-3 pt-lg-2"> <div class="header bg-gradient-info py-7 py-lg-3 pt-lg-2">
<b-container> <b-container>
<div class="header-body text-center mb-7"> <div class="header-body text-center mb-7">
<p class="h1">GDD</p> <p class="h1">GDD</p>
<p class="h4">Explorer</p> <p class="h4">Explorer</p>
</div> </div>
</b-container> </b-container>
<div class="separator separator-bottom separator-skew zindex-100"> <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"> <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> <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
</svg> </svg>
</div> </div>
</div> </div>
<!-- Page content --> <!-- Page content -->
<div> <div>
<b-card> <b-card>
<b-card-body> <b-card-body>This is some text within a card body.</b-card-body>
This is some text within a card body.
</b-card-body>
</b-card> </b-card>
</div> </div>
</div> </div>

143
frontend/src/views/Pages/Login.vue
View File

@ -2,12 +2,12 @@
<div> <div>
<!-- Header --> <!-- Header -->
<div class="header p-4"> <div class="header p-4">
<b-container> <b-container>
<div class="text-center mb-7"> <div class="text-center mb-7">
<b-row class="justify-content-center"> <b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-2"> <b-col xl="5" lg="6" md="8" class="px-2">
<h1>Gradido</h1> <h1>Gradido</h1>
<p class="text-lead">{{ $t('site.login.community')}}</p> <p class="text-lead">{{ $t('site.login.community') }}</p>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@ -17,67 +17,76 @@
<b-container class="mt--8 p-1"> <b-container class="mt--8 p-1">
<b-row class="justify-content-center"> <b-row class="justify-content-center">
<b-col lg="5" md="7"> <b-col lg="5" md="7">
<b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important;"> <b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important">
<b-card-body class="py-lg-4 px-sm-0 px-0 px-md-2 px-lg-4"> <b-card-body class="py-lg-4 px-sm-0 px-0 px-md-2 px-lg-4">
<div class="text-center text-muted mb-4"> <div class="text-center text-muted mb-4">
<small>{{ $t('login')}}</small> <small>{{ $t('login') }}</small>
</div> </div>
<validation-observer v-slot="{handleSubmit}" ref="formValidator"> <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" > <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input alternative <base-input
class="mb-3" alternative
name="Email" class="mb-3"
:rules="{required: true, email: true}" name="Email"
prepend-icon="ni ni-email-83" :rules="{ required: true, email: true }"
placeholder="Email" prepend-icon="ni ni-email-83"
v-model="model.email"> placeholder="Email"
</base-input> v-model="model.email"
></base-input>
<base-input alternative <base-input
class="mb-3" alternative
name="Password" class="mb-3"
:rules="{required: true, min: 6}" name="Password"
prepend-icon="ni ni-lock-circle-open" :rules="{ required: true, min: 6 }"
type="password" prepend-icon="ni ni-lock-circle-open"
:placeholder="$t('form.password')" type="password"
v-model="model.password"> :placeholder="$t('form.password')"
</base-input> v-model="model.password"
></base-input>
<b-alert v-show="$store.state.loginfail" show variant="warning">
<b-alert v-show="$store.state.loginfail" show variant="warning" > <span class="alert-text bv-example-row">
<b-row>
<span class="alert-text bv-example-row"> <b-col class="col-9 text-left">
<b-row> <strong>
<b-col class="col-9 text-left"> Leider konnten wir keinen Account finden mit diesen Daten!
<strong>Leider konnten wir keinen Account finden mit diesen Daten!</strong> </strong>
</b-col> </b-col>
<b-col class="text-right" > <b-col class="text-right">
<a href="#!" @click="closeAlert"> <a href="#!" @click="closeAlert">
<div> <div>
<b-icon-exclamation-triangle-fill
<b-icon-exclamation-triangle-fill class="h2 mb-0"></b-icon-exclamation-triangle-fill> class="h2 mb-0"
<b-icon-x class="h1 pl-2"></b-icon-x> ></b-icon-exclamation-triangle-fill>
</div> <b-icon-x class="h1 pl-2"></b-icon-x>
</a> </div>
</b-col> </a>
</b-row> </b-col>
</span> </b-row>
</span>
</b-alert> </b-alert>
<!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> --> <!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> -->
<div class="text-center"> <div class="text-center">
<base-button type="secondary" native-type="submit" class="my-4">{{ $t('site.login.signin')}}</base-button> <base-button type="secondary" native-type="submit" class="my-4">
{{ $t('site.login.signin') }}
</base-button>
</div> </div>
</b-form> </b-form>
</validation-observer> </validation-observer>
</b-card-body> </b-card-body>
</b-card> </b-card>
<b-row class="mt-3"> <b-row class="mt-3">
<b-col cols="6"> <b-col cols="6">
<router-link to="/password" >{{ $t('site.login.forgot_pwd')}}</router-link> <router-link to="/password">
{{ $t('site.login.forgot_pwd') }}
</router-link>
</b-col> </b-col>
<b-col cols="6" class="text-right"> <b-col cols="6" class="text-right">
<router-link to="/register">{{ $t('site.login.new_wallet')}}</router-link> <router-link to="/register">
{{ $t('site.login.new_wallet') }}
</router-link>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
@ -86,25 +95,27 @@
</div> </div>
</template> </template>
<script> <script>
export default {
export default { name: 'login',
name: "login", data() {
data() { return {
return { model: {
model: { email: '',
email: '', password: '',
password: '' // rememberMe: false
// rememberMe: false
}
};
},
methods: {
onSubmit() {
this.$store.dispatch('login', {"email": this.model.email, "password": this.model.password})
}, },
closeAlert(){
this.$store.state.loginfail = false
}
} }
} },
methods: {
onSubmit() {
this.$store.dispatch('login', {
email: this.model.email,
password: this.model.password,
})
},
closeAlert() {
this.$store.state.loginfail = false
},
},
}
</script> </script>

Some files were not shown because too many files have changed in this diff Show More