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

setup eslint with tougher rules

Browse Source
This commit is contained in:
Moriz Wahl 2021-03-24 17:12:12 +01:00
parent 9edfcee1cc
commit 1f13507eac
115 changed files with 8149 additions and 5439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.eslintignore Normal file
View File

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

31
frontend/.eslintrc.js
View File

@ -1,15 +1,30 @@
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential'],
rules: {
// TODO no console!
'no-console': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
browser: true,
node: true,
jest: true
},
parserOptions: {
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'
}],
}
};
}

12
frontend/babel.config.js
View File

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

4
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
// Keep in sync with actual webpack aliases
const path = require('path');
const path = require("path");
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
"@": path.resolve(__dirname, "src")
}
}
};

61
frontend/jest.config.js
View File

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

13
frontend/package.json
View File

@ -6,7 +6,7 @@
"start": "node server.js",
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lint": "eslint --ext .js,.vue .",
"dev": "yarn run serve",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
"test": "jest"
@ -27,7 +27,16 @@
"element-ui": "2.4.11",
"es6-promise": "^4.1.1",
"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",
"flatpickr": "^4.5.7",
"fuse.js": "^3.2.0",

6
frontend/server.js
View File

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

163
frontend/src/App.vue
View File

@ -1,46 +1,64 @@
<template>
<div id="app" class="font-sans text-gray-800">
<header >
<div id="app" class="font-sans text-gray-800">
<header>
<b-col class="text-center">
<b-dropdown size="sm" split variant="secondary" :text="$t('language') + ' - '+$i18n.locale" 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>
<b-dropdown
size="sm"
split
variant="secondary"
:text="$t('language') + ' - ' + $i18n.locale"
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>
<div class="">
<particles-bg type="custom" :config="config" :bg="true" />
<router-view />
<div class="">
<particles-bg type="custom" :config="config" :bg="true" />
<router-view />
</div>
</div>
</div>
</template>
<script>
import { ParticlesBg } from "particles-bg-vue";
import icon from "./icon.js";
import icon from "./icon.js";
export default {
name: 'app',
name: "app",
components: {
ParticlesBg
},
created () {
console.log( "xx", $cookies.get("gdd_lang"))
console.log('%cWillkommen bei Gradido %cgreen text', 'font-weight:bold', 'color: green')
if ( $cookies.isKey("gdd_session_id") == true) {
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('email', $cookies.get("gdd_u"))
this.$store.commit('language', $cookies.get("gdd_lang"))
this.$i18n.locale = $cookies.get("gdd_lang")
this.$router.push("overview")
}else {
console.log("app.vue to Logout")
this.$store.dispatch('logout')
}
},
data() {
ParticlesBg
},
created() {
console.log("xx", $cookies.get("gdd_lang"));
console.log(
"%cWillkommen bei Gradido %cgreen text",
"font-weight:bold",
"color: green"
);
if ($cookies.isKey("gdd_session_id") == true) {
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("email", $cookies.get("gdd_u"));
this.$store.commit("language", $cookies.get("gdd_lang"));
this.$i18n.locale = $cookies.get("gdd_lang");
this.$router.push("overview");
} else {
console.log("app.vue to Logout");
this.$store.dispatch("logout");
}
},
data() {
return {
config: {
num: [1, 7],
@ -54,38 +72,61 @@ export default {
scale: [0.1, 0.4],
position: "all",
cross: "dead",
random: 2,
},
random: 2
}
};
},
methods: {
setLocale(locale) {
this.$i18n.locale = locale
this.$store.commit('language', this.$i18n.locale)
methods: {
setLocale(locale) {
this.$i18n.locale = locale;
this.$store.commit("language", this.$i18n.locale);
}
},
}
}
};
</script>
<style>
.btn-primary pim{
background-color: #5A7B02;
border-color: #5e72e4;
}
a, .copyright{
color: #5A7B02;
}
gradido-global-color-text{color: #3D443B }
gradido-global-color-accent{color: #047006 }
gradido-global-color-6e0a9c9e{color: #000 }
gradido-global-color-2d0fb154{color: #047006 }
gradido-global-color-16efe88c{color: #7EBC55 }
gradido-global-color-1939326{color: #F6FFF6 }
gradido-global-color-9d79fc1{color: #047006 }
gradido-global-color-6347f4d{color: #5A7B02 }
gradido-global-color-4fbc19a{color: #014034 }
gradido-global-color-d341874{color: #B6D939 }
gradido-global-color-619d338{color: #8EBFB1 }
gradido-global-color-44819a9{color: #026873 }
.btn-primary pim {
background-color: #5a7b02;
border-color: #5e72e4;
}
a,
.copyright {
color: #5a7b02;
}
gradido-global-color-text {
color: #3d443b;
}
gradido-global-color-accent {
color: #047006;
}
gradido-global-color-6e0a9c9e {
color: #000;
}
gradido-global-color-2d0fb154 {
color: #047006;
}
gradido-global-color-16efe88c {
color: #7ebc55;
}
gradido-global-color-1939326 {
color: #f6fff6;
}
gradido-global-color-9d79fc1 {
color: #047006;
}
gradido-global-color-6347f4d {
color: #5a7b02;
}
gradido-global-color-4fbc19a {
color: #014034;
}
gradido-global-color-d341874 {
color: #b6d939;
}
gradido-global-color-619d338 {
color: #8ebfb1;
}
gradido-global-color-44819a9 {
color: #026873;
}
</style>

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

@ -1,54 +1,63 @@
import axios from 'axios';
import CONFIG from '../config'
import axios from "axios";
import CONFIG from "../config";
const apiGet = async (url) => {
const apiGet = async url => {
try {
const result = await axios.get(url);
if(result.status !== 200){
throw new Error('HTTP Status Error '+result.status)
if (result.status !== 200) {
throw new Error("HTTP Status Error " + result.status);
}
if(result.data.state !== 'success'){
throw new Error(result.data.msg)
if (result.data.state !== "success") {
throw new Error(result.data.msg);
}
return { success: true, result }
} catch(error){
return { success: false, result: error}
return { success: true, result };
} catch (error) {
return { success: false, result: error };
}
}
};
const apiPost = async (url, payload) => {
try {
const result = await axios.post(url, payload);
if(result.status !== 200){
throw new Error('HTTP Status Error '+result.status)
if (result.status !== 200) {
throw new Error("HTTP Status Error " + result.status);
}
if(result.data.state !== 'success'){
throw new Error(result.data.msg)
if (result.data.state !== "success") {
throw new Error(result.data.msg);
}
return { success: true, result }
} catch(error){
return { success: false, result: error}
return { success: true, result };
} catch (error) {
return { success: false, result: error };
}
}
};
const communityAPI = {
balance: async (session_id) => {
return apiGet(CONFIG.COMMUNITY_API_STATE_BALANCE_URL + 'ajaxGetBalance/' + session_id)
balance: async session_id => {
return apiGet(
CONFIG.COMMUNITY_API_STATE_BALANCE_URL + "ajaxGetBalance/" + session_id
);
},
transactions: async (session_id) => {
return apiGet(CONFIG.COMMUNITY_API_STATE_BALANCE_URL + 'ajaxListTransactions/' + session_id)
transactions: async session_id => {
return apiGet(
CONFIG.COMMUNITY_API_STATE_BALANCE_URL +
"ajaxListTransactions/" +
session_id
);
},
create: async (session_id, email, amount, memo, target_date = new Date() ) => {
create: async (session_id, email, amount, memo, target_date = new Date()) => {
const payload = {
session_id,
email,
amount,
target_date,
target_date,
memo,
auto_sign: true
}
return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload)
};
return apiPost(
CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + "ajaxCreate/",
payload
);
}
}
};
export default communityAPI
export default communityAPI;

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

@ -1,40 +1,40 @@
import axios from 'axios';
import CONFIG from '../config'
import axios from "axios";
import CONFIG from "../config";
// control email-text sended with email verification code
const EMAIL_TYPE = {
DEFAULT: 2, // if user has registered directly
ADMIN: 5, // if user was registered by an admin
}
ADMIN: 5 // if user was registered by an admin
};
const apiPost = async (url, payload) => {
try {
const result = await axios.post(url, payload);
if(result.status !== 200){
throw new Error('HTTP Status Error '+result.status)
if (result.status !== 200) {
throw new Error("HTTP Status Error " + result.status);
}
if(result.data.state !== 'success'){
throw new Error(result.data.msg)
if (result.data.state !== "success") {
throw new Error(result.data.msg);
}
return { success: true, result }
} catch(error){
return { success: false, result: error}
return { success: true, result };
} catch (error) {
return { success: false, result: error };
}
}
};
const loginAPI = {
login: async (email, password) => {
const payload = {
email,
password,
}
return apiPost(CONFIG.LOGIN_API_URL + 'unsecureLogin', payload)
password
};
return apiPost(CONFIG.LOGIN_API_URL + "unsecureLogin", payload);
},
logout: async (session_id) => {
const payload= { session_id }
return apiPost(CONFIG.LOGIN_API_URL + 'logout', payload)
logout: async session_id => {
const payload = { session_id };
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 = {
email,
first_name,
@ -42,9 +42,9 @@ const loginAPI = {
password,
emailType: EMAIL_TYPE.DEFAULT,
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;

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

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

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

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

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

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

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

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

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

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

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

@ -1,14 +1,27 @@
<template>
<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>
<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>
</template>
<template v-slot:next-text>
<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>
</template>
</b-pagination>
@ -51,6 +64,6 @@ export default {
default: "",
description: "Pagination alignment (e.g center|start|end)"
}
},
}
};
</script>

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

@ -3,82 +3,82 @@
<div :class="`progress-${type}`" v-if="showLabel">
<div class="progress-label">
<slot name="label">
<span>{{label}}</span>
<span>{{ label }}</span>
</slot>
</div>
<div class="progress-percentage">
<slot>
<span>{{value}}%</span>
<span>{{ value }}%</span>
</slot>
</div>
</div>
<b-progress
:size="size"
:class="[progressClasses]"
:style="`height: ${height}px`">
:style="`height: ${height}px`"
>
<b-progress-bar :class="computedClasses" :value="value"></b-progress-bar>
</b-progress>
</div>
</template>
<script>
export default {
name: "base-progress",
props: {
striped: {
type: Boolean,
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"
}
export default {
name: "base-progress",
props: {
striped: {
type: Boolean,
description: "Whether progress is striped"
},
computed: {
computedClasses() {
return [
{ "progress-bar-striped": this.striped },
{ "progress-bar-animated": this.animated },
{ [`bg-${this.type}`]: this.type }
];
}
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: {
computedClasses() {
return [
{ "progress-bar-striped": this.striped },
{ "progress-bar-animated": this.animated },
{ [`bg-${this.type}`]: this.type }
];
}
}
};
</script>
<style>
</style>
<style></style>

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

@ -2,31 +2,31 @@
<div class="slider" :disabled="disabled"></div>
</template>
<script>
import noUiSlider from 'nouislider';
import noUiSlider from "nouislider";
export default {
name: 'base-slider',
name: "base-slider",
props: {
value: {
type: [String, Array, Number],
description: 'slider value'
description: "slider value"
},
disabled: {
type: Boolean,
default: false,
description: 'whether the slider is disabled'
description: "whether the slider is disabled"
},
start: {
type: [Number, Array],
default: 0,
description:
'[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)'
"[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)"
},
connect: {
type: [Boolean, Array],
default: () => [true, false],
description:
'[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)'
"[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)"
},
range: {
type: Object,
@ -37,7 +37,7 @@ export default {
};
},
description:
'[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)'
"[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)"
},
options: {
type: Object,
@ -45,7 +45,7 @@ export default {
return {};
},
description:
'[noUi Slider options](https://refreshless.com/nouislider/slider-options/)'
"[noUi Slider options](https://refreshless.com/nouislider/slider-options/)"
}
},
data() {
@ -62,10 +62,10 @@ export default {
...this.options
});
const slider = this.$el.noUiSlider;
slider.on('slide', () => {
slider.on("slide", () => {
let value = slider.get();
if (value !== this.value) {
this.$emit('input', value);
this.$emit("input", value);
}
});
}

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

@ -10,10 +10,7 @@
<tbody :class="tbodyClasses">
<tr v-for="(item, index) in data" :key="index">
<slot :row="item" :index="index">
<td
v-for="(column, index) in columns"
:key="index"
>
<td v-for="(column, index) in columns" :key="index">
{{ itemValue(item, column) }}
</td>
</slot>
@ -23,32 +20,32 @@
</template>
<script>
export default {
name: 'base-table',
name: "base-table",
props: {
columns: {
type: Array,
default: () => [],
description: 'Table columns'
description: "Table columns"
},
data: {
type: Array,
default: () => [],
description: 'Table data'
description: "Table data"
},
type: {
type: String, // striped | hover
default: '',
description: 'Whether table is striped or hover type'
default: "",
description: "Whether table is striped or hover type"
},
theadClasses: {
type: String,
default: '',
description: '<thead> css classes'
default: "",
description: "<thead> css classes"
},
tbodyClasses: {
type: String,
default: '',
description: '<tbody> css classes'
default: "",
description: "<tbody> css classes"
}
},
computed: {
@ -58,7 +55,7 @@ export default {
},
methods: {
hasValue(item, column) {
return item[column.toLowerCase()] !== 'undefined';
return item[column.toLowerCase()] !== "undefined";
},
itemValue(item, column) {
return item[column.toLowerCase()];

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

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

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

@ -5,12 +5,12 @@
</template>
<script>
export default {
name: 'breadcrumb-item',
name: "breadcrumb-item",
props: {
active: {
type: Boolean,
default: false,
description: 'Whether breadcrumb item is active'
description: "Whether breadcrumb item is active"
}
}
};

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

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

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

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

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

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

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

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

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

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

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

@ -1,8 +1,8 @@
import { Bar, mixins } from 'vue-chartjs';
import { Bar, mixins } from "vue-chartjs";
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
export default {
name: 'bar-chart',
name: "bar-chart",
extends: Bar,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
@ -18,7 +18,7 @@ export default {
},
mounted() {
this.$watch(
'chartData',
"chartData",
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);

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

@ -1,7 +1,7 @@
import { Line, mixins } from 'vue-chartjs';
import { Line, mixins } from "vue-chartjs";
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
export default {
name: 'line-chart',
name: "line-chart",
extends: Line,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
@ -17,7 +17,7 @@ export default {
},
mounted() {
this.$watch(
'chartData',
"chartData",
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);

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

@ -1,35 +1,35 @@
import { parseOptions } from "@/components/Charts/optionHelpers";
import Chart from 'chart.js'
import Chart from "chart.js";
export const Charts = {
mode: 'light',//(themeMode) ? themeMode : 'light';
mode: "light", //(themeMode) ? themeMode : 'light';
fonts: {
base: 'Open Sans'
base: "Open Sans"
},
colors: {
gray: {
100: '#f6f9fc',
200: '#e9ecef',
300: '#dee2e6',
400: '#ced4da',
500: '#adb5bd',
600: '#8898aa',
700: '#525f7f',
800: '#32325d',
900: '#212529'
100: "#f6f9fc",
200: "#e9ecef",
300: "#dee2e6",
400: "#ced4da",
500: "#adb5bd",
600: "#8898aa",
700: "#525f7f",
800: "#32325d",
900: "#212529"
},
theme: {
'default': '#172b4d',
'primary': '#5e72e4',
'secondary': '#f4f5f7',
'info': '#11cdef',
'success': '#2dce89',
'danger': '#f5365c',
'warning': '#fb6340'
default: "#172b4d",
primary: "#5e72e4",
secondary: "#f4f5f7",
info: "#11cdef",
success: "#2dce89",
danger: "#f5365c",
warning: "#fb6340"
},
black: '#12263F',
white: '#FFFFFF',
transparent: 'transparent',
black: "#12263F",
white: "#FFFFFF",
transparent: "transparent"
}
};
@ -41,8 +41,8 @@ function chartOptions() {
global: {
responsive: true,
maintainAspectRatio: false,
defaultColor: (mode === 'dark') ? colors.gray[700] : colors.gray[600],
defaultFontColor: (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],
defaultFontFamily: fonts.base,
defaultFontSize: 13,
layout: {
@ -50,7 +50,7 @@ function chartOptions() {
},
legend: {
display: false,
position: 'bottom',
position: "bottom",
labels: {
usePointStyle: true,
padding: 16
@ -59,51 +59,54 @@ function chartOptions() {
elements: {
point: {
radius: 0,
backgroundColor: colors.theme['primary']
backgroundColor: colors.theme["primary"]
},
line: {
tension: .4,
tension: 0.4,
borderWidth: 4,
borderColor: colors.theme['primary'],
borderColor: colors.theme["primary"],
backgroundColor: colors.transparent,
borderCapStyle: 'rounded'
borderCapStyle: "rounded"
},
rectangle: {
backgroundColor: colors.theme['warning']
backgroundColor: colors.theme["warning"]
},
arc: {
backgroundColor: colors.theme['primary'],
borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
backgroundColor: colors.theme["primary"],
borderColor: mode == "dark" ? colors.gray[800] : colors.white,
borderWidth: 4
}
},
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
mode: "index",
intersect: false
}
},
pie: {
tooltips: {
mode: 'point'
mode: "point"
}
},
doughnut: {
tooltips: {
mode: 'point'
mode: "point"
},
cutoutPercentage: 83,
legendCallback: function (chart) {
legendCallback: function(chart) {
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];
content += '<span class="chart-legend-item">';
content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
content +=
'<i class="chart-legend-indicator" style="background-color: ' +
bgColor +
'"></i>';
content += label;
content += '</span>';
content += "</span>";
});
return content;
@ -113,37 +116,37 @@ function chartOptions() {
};
// yAxes
Chart.scaleService.updateScaleDefaults('linear', {
Chart.scaleService.updateScaleDefaults("linear", {
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: (mode === 'dark') ? colors.gray[900] : colors.gray[200],
color: mode === "dark" ? colors.gray[900] : colors.gray[200],
drawBorder: false,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: (mode === 'dark') ? colors.gray[900] : colors.gray[200],
zeroLineColor: mode === "dark" ? colors.gray[900] : colors.gray[200],
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2]
},
ticks: {
beginAtZero: true,
padding: 10,
callback: function (value) {
callback: function(value) {
if (!(value % 10)) {
return value
return value;
}
}
}
});
// xAxes
Chart.scaleService.updateScaleDefaults('category', {
Chart.scaleService.updateScaleDefaults("category", {
gridLines: {
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
lineWidth: 1,
zeroLineWidth: 1,
zeroLineWidth: 1
},
ticks: {
padding: 20
@ -152,16 +155,16 @@ function chartOptions() {
});
return options;
};
}
let initialized = false
let initialized = false;
export function initGlobalOptions() {
if (initialized) {
return
return;
}
parseOptions(Chart, chartOptions());
initialized = true
initialized = true;
}
export const basicOptions = {
@ -173,26 +176,28 @@ export const basicOptions = {
};
export let blueChartOptions = {
scales: {
yAxes: [{
gridLines: {
color: Charts.colors.gray[700],
zeroLineColor: Charts.colors.gray[700]
yAxes: [
{
gridLines: {
color: Charts.colors.gray[700],
zeroLineColor: Charts.colors.gray[700]
}
}
}]
]
}
};
export let lineChartOptionsBlue = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
backgroundColor: "#f5f5f5",
titleFontColor: "#333",
bodyFontColor: "#666",
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
mode: "nearest",
intersect: 0,
position: 'nearest'
position: "nearest"
},
responsive: true,
scales: {
@ -201,14 +206,14 @@ export let lineChartOptionsBlue = {
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: 'transparent'
color: "rgba(29,140,248,0.0)",
zeroLineColor: "transparent"
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: '#9e9e9e'
fontColor: "#9e9e9e"
}
}
],
@ -218,12 +223,12 @@ export let lineChartOptionsBlue = {
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: 'transparent'
color: "rgba(29,140,248,0.1)",
zeroLineColor: "transparent"
},
ticks: {
padding: 20,
fontColor: '#9e9e9e'
fontColor: "#9e9e9e"
}
}
]

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

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

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

@ -1,7 +1,7 @@
// Parse global options
export function parseOptions(parent, options) {
for (let item in options) {
if (typeof options[item] !== 'object') {
if (typeof options[item] !== "object") {
parent[item] = options[item];
} else {
parseOptions(parent[item], options[item]);

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

@ -2,9 +2,8 @@
// Chart extension for making the bars rounded
// Code from: https://codepen.io/jedtrow/full/ygRYgo
//
import Chart from 'chart.js'
import Chart from "chart.js";
Chart.elements.Rectangle.prototype.draw = function() {
let ctx = this._chart.ctx;
let vm = this._view;
let left, right, top, bottom, signX, signY, borderSkipped, radius;
@ -21,7 +20,7 @@ Chart.elements.Rectangle.prototype.draw = function() {
bottom = vm.base;
signX = 1;
signY = bottom > top ? 1 : -1;
borderSkipped = vm.borderSkipped || 'bottom';
borderSkipped = vm.borderSkipped || "bottom";
} else {
// horizontal bar
left = vm.base;
@ -30,7 +29,7 @@ Chart.elements.Rectangle.prototype.draw = function() {
bottom = vm.y + vm.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
borderSkipped = vm.borderSkipped || "left";
}
// Canvas doesn't allow us to stroke inside the width so we can
@ -41,10 +40,12 @@ Chart.elements.Rectangle.prototype.draw = function() {
borderWidth = borderWidth > barSize ? barSize : borderWidth;
let halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
let borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
let borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
let borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
let borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
let borderLeft = left + (borderSkipped !== "left" ? halfStroke * signX : 0);
let borderRight =
right + (borderSkipped !== "right" ? -halfStroke * signX : 0);
let borderTop = top + (borderSkipped !== "top" ? halfStroke * signY : 0);
let borderBottom =
bottom + (borderSkipped !== "bottom" ? -halfStroke * signY : 0);
// not become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
@ -73,7 +74,7 @@ Chart.elements.Rectangle.prototype.draw = function() {
];
// 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);
if (startCorner === -1) {
startCorner = 0;
@ -91,7 +92,7 @@ Chart.elements.Rectangle.prototype.draw = function() {
corner = cornerAt(i);
let nextCornerId = i + 1;
if (nextCornerId == 4) {
nextCornerId = 0
nextCornerId = 0;
}
let nextCorner = cornerAt(nextCornerId);
@ -120,7 +121,6 @@ Chart.elements.Rectangle.prototype.draw = function() {
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
}
ctx.fill();

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

@ -1,32 +1,28 @@
import { mount } from '@vue/test-utils'
import { mount } from "@vue/test-utils";
import CloseButton from './CloseButton'
import CloseButton from "./CloseButton";
const localVue = global.localVue
const localVue = global.localVue;
describe('CloseButton', () => {
let wrapper
describe("CloseButton", () => {
let wrapper;
let propsData = {
target: "Target",
expanded: false,
}
expanded: false
};
const Wrapper = () => {
return mount(CloseButton, { localVue, propsData })
}
describe('mount', () => {
return mount(CloseButton, { localVue, propsData });
};
describe("mount", () => {
beforeEach(() => {
wrapper = Wrapper()
})
wrapper = Wrapper();
});
it('emmits click event', () => {
wrapper.find('.navbar-toggler').trigger('click')
expect(wrapper.emitted('click')).toBeTruthy()
})
})
})
it("emmits click event", () => {
wrapper.find(".navbar-toggler").trigger("click");
expect(wrapper.emitted("click")).toBeTruthy();
});
});
});

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

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

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

@ -11,22 +11,23 @@
<script>
export default {
name: 'collapse',
name: "collapse",
props: {
animationDuration: {
type: Number,
default: 250,
description: 'Collapse animation duration'
description: "Collapse animation duration"
},
multipleActive: {
type: Boolean,
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: {
type: Number,
default: -1,
description: 'Active collapse item index'
description: "Active collapse item index"
}
},
provide() {

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

@ -8,7 +8,7 @@
@click.prevent="activate"
:aria-controls="`content-${itemId}`"
>
<slot name="title"> {{ title }} </slot>
<slot name="title">{{ title }}</slot>
<i class="tim-icons icon-minimal-down"></i>
</a>
</b-card-header>
@ -26,18 +26,18 @@
</b-card>
</template>
<script>
import { CollapseTransition } from 'vue2-transitions';
import { CollapseTransition } from "vue2-transitions";
export default {
name: 'collapse-item',
name: "collapse-item",
components: {
CollapseTransition
},
props: {
title: {
type: String,
default: '',
description: 'Collapse item title'
default: "",
description: "Collapse item title"
},
id: String
},
@ -75,7 +75,7 @@ export default {
this.deactivateAll();
}
this.active = !wasActive;
console.log(this.active)
console.log(this.active);
}
},
mounted() {

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

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

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

@ -1,24 +1,31 @@
<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>
<slot name="label">
<label v-if="label" :class="labelClasses">
{{label}}
{{ label }}
</label>
</slot>
<div :class="[
{'input-group': hasIcon},
{'focused': focused},
{'input-group-alternative': alternative},
{'has-label': label || $slots.label},
inputGroupClasses
]">
<div
:class="[
{ 'input-group': hasIcon },
{ focused: focused },
{ 'input-group-alternative': alternative },
{ 'has-label': label || $slots.label },
inputGroupClasses
]"
>
<div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
<span class="input-group-text">
<slot name="prepend">
<i :class="prependIcon"></i>
</slot>
</span>
<span class="input-group-text">
<slot name="prepend">
<i :class="prependIcon"></i>
</slot>
</span>
</div>
<slot v-bind="slotData">
<input
@ -29,20 +36,25 @@
:valid="valid"
:required="required"
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>
<div v-if="appendIcon || $slots.append" class="input-group-append">
<span class="input-group-text">
<slot name="append">
<i :class="appendIcon"></i>
</slot>
<slot name="append">
<i :class="appendIcon"></i>
</slot>
</span>
</div>
<slot name="infoBlock"></slot>
</div>
<slot name="success">
<div class="valid-feedback" v-if="valid && validated && successMessage">
{{successMessage}}
{{ successMessage }}
</div>
</slot>
<slot name="error">
@ -54,123 +66,123 @@
</validation-provider>
</template>
<script>
export default {
inheritAttrs: false,
name: "base-input",
props: {
required: {
type: Boolean,
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: ''
}
export default {
inheritAttrs: false,
name: "base-input",
props: {
required: {
type: Boolean,
description: "Whether input is required (adds an asterix *)"
},
data() {
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() {
return {
focused: false
};
},
computed: {
listeners() {
return {
focused: false
...this.$listeners,
input: this.updateValue,
focus: this.onFocus,
blur: this.onBlur
};
},
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
);
}
slotData() {
return {
focused: this.focused,
error: this.error,
...this.listeners
};
},
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);
}
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>
<style>
</style>
<style></style>

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

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

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

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

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

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

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

@ -1,85 +1,89 @@
<template>
<!--Notice modal-->
<modal :show.sync="$store.state.modals"
modal-classes="modal-danger"
modal-content-classes="bg-gradient-danger">
<h6 slot="header" class="modal-title">Your attention is required</h6>
<!--Notice modal-->
<modal
:show.sync="$store.state.modals"
modal-classes="modal-danger"
modal-content-classes="bg-gradient-danger"
>
<h6 slot="header" class="modal-title">Your attention is required</h6>
<div class="py-3 text-center">
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Name"
label-for="name-input"
invalid-feedback="Name is required"
:state="nameState"
>
<b-form-input
id="name-input"
v-model="name"
:state="nameState"
required
></b-form-input>
</b-form-group>
</form>
</div>
<div class="py-3 text-center">
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Name"
label-for="name-input"
invalid-feedback="Name is required"
:state="nameState"
>
<b-form-input
id="name-input"
v-model="name"
:state="nameState"
required
></b-form-input>
</b-form-group>
</form>
</div>
<template slot="footer">
<base-button type="white">Ok</base-button>
<base-button type="link" class="ml-auto" @click="$store.state.modals = false">abbrechen</base-button>
</template>
</modal>
<template slot="footer">
<base-button type="white">Ok</base-button>
<base-button
type="link"
class="ml-auto"
@click="$store.state.modals = false"
>
abbrechen
</base-button>
</template>
</modal>
</template>
<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 {
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')
// Hide the modal manually
this.$nextTick(() => {
this.$bvModal.hide('modal-prevent-closing')
})
}
};
// Hide the modal manually
this.$nextTick(() => {
this.$bvModal.hide("modal-prevent-closing");
});
}
};
</script>
<style>
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.6) !important;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.6) !important;
}
</style>

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

@ -20,8 +20,8 @@
<b-navbar-toggle
target="nav-text-collapse"
@click.stop="toggleMenu">
</b-navbar-toggle>
@click.stop="toggleMenu"
></b-navbar-toggle>
<b-collapse
is-nav
@ -29,7 +29,8 @@
class="navbar-custom-collapse collapse"
:class="menuClasses"
:visible="show"
v-click-outside="closeMenu">
v-click-outside="closeMenu"
>
<slot :close-menu="closeMenu"></slot>
</b-collapse>
</div>
@ -37,65 +38,65 @@
</template>
<script>
export default {
name: 'base-nav',
name: "base-nav",
props: {
show: {
type: Boolean,
default: false,
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: {
type: Boolean,
default: false,
description: 'Whether navbar is transparent'
description: "Whether navbar is transparent"
},
expand: {
type: String,
default: 'lg',
description: 'Breakpoint where nav should expand'
default: "lg",
description: "Breakpoint where nav should expand"
},
menuClasses: {
type: [String, Object, Array],
default: '',
default: "",
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: {
type: [String, Object, Array],
default: 'container',
default: "container",
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: String,
default: '',
default: "",
validator(value) {
return [
'',
'dark',
'success',
'danger',
'warning',
'white',
'primary',
'light',
'info',
'vue'
"",
"dark",
"success",
"danger",
"warning",
"white",
"primary",
"light",
"info",
"vue"
].includes(value);
},
description: 'Navbar color type'
description: "Navbar color type"
}
},
model: {
prop: 'show',
event: 'change'
prop: "show",
event: "change"
},
computed: {
classes() {
let color = `bg-${this.type}`;
let classes = [
{ 'navbar-transparent': this.transparent },
{ "navbar-transparent": this.transparent },
{ [`navbar-expand-${this.expand}`]: this.expand }
];
if (this.position) {
@ -112,10 +113,10 @@ export default {
},
methods: {
toggleMenu() {
this.$emit('change', !this.show);
this.$emit("change", !this.show);
},
closeMenu() {
this.$emit('change', false);
this.$emit("change", false);
}
}
};

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

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

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

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

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

@ -15,16 +15,18 @@
>
<template v-if="icon || $slots.icon">
<slot name="icon">
<span class="alert-icon" data-notify="icon">
<i :class="icon"></i>
</span>
<span class="alert-icon" data-notify="icon">
<i :class="icon"></i>
</span>
</slot>
</template>
<span class="alert-text">
<span v-if="title" class="title">
<b>{{ title }}<br/></b>
<b>
{{ title }}
<br />
</b>
</span>
<span v-if="message" v-html="message"></span>
<content-render
@ -34,176 +36,182 @@
</span>
<slot name="dismiss-icon">
<button type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
@click="close">
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
@click="close"
>
<span aria-hidden="true">×</span>
</button>
</slot>
</div>
</template>
<script>
export default {
name: 'notification',
components: {
contentRender: {
props: ['component'],
render: function (createElement) {
return createElement(this.component)
}
}
},
props: {
message: String,
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() {
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);
export default {
name: "notification",
components: {
contentRender: {
props: ["component"],
render: function(createElement) {
return createElement(this.component);
}
}
};
</script>
<style lang="scss">
.notifications .alert {
position: fixed;
z-index: 10000;
&[data-notify='container'] {
max-width: 500px;
},
props: {
message: String,
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"
}
&.center {
margin: 0 auto;
},
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;
}
&.left {
left: 20px;
},
methods: {
close() {
this.$emit("close", this.timestamp);
},
tryClose(evt) {
if (this.clickHandler) {
this.clickHandler(evt, this);
}
if (this.closeOnClick) {
this.close();
}
}
&.right {
right: 20px;
},
mounted() {
this.elmHeight = this.$el.clientHeight;
if (this.timeout) {
setTimeout(this.close, this.timeout);
}
}
};
</script>
<style lang="scss">
.notifications .alert {
position: fixed;
z-index: 10000;
&[data-notify="container"] {
max-width: 500px;
}
&.center {
margin: 0 auto;
}
&.left {
left: 20px;
}
&.right {
right: 20px;
}
}
</style>

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

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

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

@ -1,12 +1,12 @@
import Notifications from './Notifications.vue';
import Notifications from "./Notifications.vue";
const NotificationStore = {
state: [], // here the notifications will be added
settings: {
overlap: false,
verticalAlign: 'top',
horizontalAlign: 'right',
type: 'info',
verticalAlign: "top",
horizontalAlign: "right",
type: "info",
timeout: 5000,
closeOnClick: true,
showClose: true
@ -21,7 +21,7 @@ const NotificationStore = {
}
},
addNotification(notification) {
if (typeof notification === 'string' || notification instanceof String) {
if (typeof notification === "string" || notification instanceof String) {
notification = { message: notification };
}
notification.timestamp = new Date();
@ -56,7 +56,7 @@ const NotificationsPlugin = {
});
Vue.prototype.$notify = app.notify;
Vue.prototype.$notifications = app.notificationStore;
Vue.component('Notifications', Notifications);
Vue.component("Notifications", Notifications);
if (options) {
NotificationStore.setOptions(options);
}

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

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

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

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

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

@ -15,12 +15,16 @@
>
<template v-if="addLink">
<span class="nav-link-text">
{{ link.name }} <b class="caret"></b>
{{ link.name }}
<b class="caret"></b>
</span>
</template>
<template v-else>
<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>
</a>
@ -61,10 +65,10 @@
</b-nav-item>
</template>
<script>
import { CollapseTransition } from 'vue2-transitions';
import { CollapseTransition } from "vue2-transitions";
export default {
name: 'sidebar-item',
name: "sidebar-item",
components: {
CollapseTransition
},
@ -79,13 +83,13 @@ export default {
type: Object,
default: () => {
return {
name: '',
path: '',
name: "",
path: "",
children: []
};
},
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() {
@ -109,14 +113,14 @@ export default {
},
computed: {
baseComponent() {
return this.isMenu || this.link.isRoute ? 'li' : 'router-link';
return this.isMenu || this.link.isRoute ? "li" : "router-link";
},
linkPrefix() {
if (this.link.name) {
let words = this.link.name.split(' ');
return words.map(word => word.substring(0, 1)).join('');
let words = this.link.name.split(" ");
return words.map(word => word.substring(0, 1)).join("");
}
return ''
return "";
},
isMenu() {
return this.children.length > 0 || this.menu === true;
@ -145,14 +149,14 @@ export default {
},
elementType(link, isParent = true) {
if (link.isRoute === false) {
return isParent ? 'li' : 'a';
return isParent ? "li" : "a";
} else {
return 'router-link';
return "router-link";
}
},
linkAbbreviation(name) {
const matches = name.match(/\b(\w)/g);
return matches.join('');
return matches.join("");
},
linkClick() {
if (

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

@ -1,5 +1,5 @@
import Sidebar from './SideBar.vue';
import SidebarItem from './SidebarItem.vue';
import Sidebar from "./SideBar.vue";
import SidebarItem from "./SidebarItem.vue";
const SidebarStore = {
showSidebar: false,
@ -9,10 +9,10 @@ const SidebarStore = {
this.showSidebar = value;
},
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.
const simulateWindowResize = setInterval(() => {
window.dispatchEvent(new Event('resize'));
window.dispatchEvent(new Event("resize"));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
@ -35,8 +35,8 @@ const SidebarPlugin = {
}
});
Vue.prototype.$sidebar = app.sidebarStore;
Vue.component('side-bar', Sidebar);
Vue.component('sidebar-item', SidebarItem);
Vue.component("side-bar", Sidebar);
Vue.component("sidebar-item", SidebarItem);
}
};

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

@ -11,9 +11,9 @@
</template>
<script>
export default {
name: 'tab-pane',
props: ['title', 'id'],
inject: ['addTab', 'removeTab'],
name: "tab-pane",
props: ["title", "id"],
inject: ["addTab", "removeTab"],
data() {
return {
active: false

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

@ -28,7 +28,7 @@
@click.prevent="activateTab(tab)"
: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>
</div>
@ -47,12 +47,12 @@
<script>
export default {
name: 'tabs',
name: "tabs",
components: {
TabItemContent: {
props: ['tab'],
props: ["tab"],
render(h) {
return h('div', [this.tab.$slots.title || this.tab.title]);
return h("div", [this.tab.$slots.title || this.tab.title]);
}
}
},
@ -65,37 +65,37 @@ export default {
props: {
type: {
type: String,
default: 'primary',
default: "primary",
validator: value => {
let acceptedValues = [
'primary',
'info',
'success',
'warning',
'danger'
"primary",
"info",
"success",
"warning",
"danger"
];
return acceptedValues.indexOf(value) !== -1;
}
},
activeTab: {
type: String,
default: '',
description: 'Active tab name'
default: "",
description: "Active tab name"
},
tabNavWrapperClasses: {
type: [String, Object],
default: '',
description: 'ul wrapper css classes'
default: "",
description: "ul wrapper css classes"
},
tabNavClasses: {
type: [String, Object],
default: '',
description: 'ul css classes'
default: "",
description: "ul css classes"
},
tabContentClasses: {
type: [String, Object],
default: '',
description: 'tab content css classes'
default: "",
description: "tab content css classes"
},
vertical: Boolean,
centered: Boolean,

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

@ -1,30 +1,30 @@
import BaseCheckbox from './Inputs/BaseCheckbox.vue';
import BaseAlert from './BaseAlert.vue';
import BaseRadio from './Inputs/BaseRadio.vue';
import BaseInput from './Inputs/BaseInput.vue';
import Badge from './Badge';
import BaseProgress from './BaseProgress.vue';
import BaseButton from './BaseButton.vue';
import BaseCheckbox from "./Inputs/BaseCheckbox.vue";
import BaseAlert from "./BaseAlert.vue";
import BaseRadio from "./Inputs/BaseRadio.vue";
import BaseInput from "./Inputs/BaseInput.vue";
import Badge from "./Badge";
import BaseProgress from "./BaseProgress.vue";
import BaseButton from "./BaseButton.vue";
import BaseDropdown from './BaseDropdown.vue';
import BaseTable from './BaseTable.vue';
import BaseDropdown from "./BaseDropdown.vue";
import BaseTable from "./BaseTable.vue";
import Card from './Cards/Card.vue';
import StatsCard from './Cards/StatsCard.vue';
import BaseNav from './Navbar/BaseNav';
import NavbarToggleButton from './Navbar/NavbarToggleButton';
import Card from "./Cards/Card.vue";
import StatsCard from "./Cards/StatsCard.vue";
import BaseNav from "./Navbar/BaseNav";
import NavbarToggleButton from "./Navbar/NavbarToggleButton";
import TabPane from './Tabs/Tab.vue';
import Tabs from './Tabs/Tabs.vue';
import Collapse from './Collapse/Collapse.vue';
import CollapseItem from './Collapse/CollapseItem.vue';
import Modal from './Modal.vue';
import BaseSlider from './BaseSlider.vue';
import LoadingPanel from './LoadingPanel.vue';
import TabPane from "./Tabs/Tab.vue";
import Tabs from "./Tabs/Tabs.vue";
import Collapse from "./Collapse/Collapse.vue";
import CollapseItem from "./Collapse/CollapseItem.vue";
import Modal from "./Modal.vue";
import BaseSlider from "./BaseSlider.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 {
BaseCheckbox,

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

@ -5,21 +5,27 @@
const environment = {
NODE_ENV: process.env.NODE_ENV,
DEBUG: process.env.NODE_ENV !== 'production' || false,
PRODUCTION: process.env.NODE_ENV === 'production' || false,
}
DEBUG: process.env.NODE_ENV !== "production" || false,
PRODUCTION: process.env.NODE_ENV === "production" || false
};
const server = {
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_TRANSACTION_CREATION_URL: process.env.COMMUNITY_API_TRANSACTION_CREATION_URL || 'http://localhost/transaction-creations/',
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_TRANSACTION_CREATION_URL:
process.env.COMMUNITY_API_TRANSACTION_CREATION_URL ||
"http://localhost/transaction-creations/",
// TODO is this the right API call? what does it do?
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 = {
...environment,
...server,
}
...server
};
export default CONFIG
export default CONFIG;

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

@ -7,9 +7,9 @@ export default {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent);
document.body.addEventListener("click", el.clickOutsideEvent);
},
unbind: function(el) {
document.body.removeEventListener('click', el.clickOutsideEvent);
document.body.removeEventListener("click", el.clickOutsideEvent);
}
};

47
frontend/src/i18n.js
View File

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

19
frontend/src/main.js
View File

@ -1,26 +1,25 @@
import Vue from 'vue';
import DashboardPlugin from './plugins/dashboard-plugin';
import App from './App.vue';
import i18n from './i18n.js';
import VueCookies from 'vue-cookies';
import Vue from "vue";
import DashboardPlugin from "./plugins/dashboard-plugin";
import App from "./App.vue";
import i18n from "./i18n.js";
import VueCookies from "vue-cookies";
// store
import {store} from './store/store';
import { store } from "./store/store";
// router setup
import router from './routes/router';
import router from "./routes/router";
// plugin setup
Vue.use(DashboardPlugin);
Vue.config.productionTip = false;
Vue.use(VueCookies);
/* eslint-disable no-new */
new Vue({
el: '#app',
el: "#app",
router,
store,
i18n,
render: h => h(App)
render: h => h(App)
});

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

@ -1,43 +1,41 @@
// 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
import Notifications from '@/components/NotificationPlugin';
import Notifications from "@/components/NotificationPlugin";
// 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
import GlobalComponents from './globalComponents';
import GlobalComponents from "./globalComponents";
// 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
import SideBar from '@/components/SidebarPlugin';
import SideBar from "@/components/SidebarPlugin";
// element ui language configuration
import lang from 'element-ui/lib/locale/lang/en';
import locale from 'element-ui/lib/locale';
import lang from "element-ui/lib/locale/lang/en";
import locale from "element-ui/lib/locale";
locale.use(lang);
// vue-bootstrap
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
// asset imports
import '@/assets/scss/argon.scss';
import '@/assets/vendor/nucleo/css/nucleo.css';
import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';
import { messages } from 'vee-validate/dist/locale/en.json';
import "@/assets/scss/argon.scss";
import "@/assets/vendor/nucleo/css/nucleo.css";
import { extend } from "vee-validate";
import * as rules from "vee-validate/dist/rules";
import { messages } from "vee-validate/dist/locale/en.json";
import VueQrcodeReader from "vue-qrcode-reader";
import 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 'vue-good-table/dist/vue-good-table.css';
import VueMoment from 'vue-moment';
import "vue-good-table/dist/vue-good-table.css";
import VueMoment from "vue-moment";
Object.keys(rules).forEach(rule => {
extend(rule, {
@ -60,12 +58,10 @@ export default {
Vue.use(VueFlatPickr);
configure({
classes: {
valid: 'is-valid',
invalid: 'is-invalid',
dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
valid: "is-valid",
invalid: "is-invalid",
dirty: ["is-dirty", "is-dirty"] // multiple classes per flag!
}
})
});
}
};

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

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

4
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
@ -6,7 +6,7 @@ import clickOutside from '@/directives/click-ouside.js';
const GlobalDirectives = {
install(Vue) {
Vue.directive('click-outside', clickOutside);
Vue.directive("click-outside", clickOutside);
}
};

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

@ -1,31 +1,30 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";
Vue.use(VueRouter)
Vue.use(VueRouter);
// configure router
const router = new VueRouter({
routes, // short for routes: routes
linkActiveClass: 'active',
scrollBehavior: (to, from ,savedPosition) => {
linkActiveClass: "active",
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
}
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()
})
let language = to.params.lang;
if (!language) {
language = "de";
}
next();
});
export default router
export default router;

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

@ -1,83 +1,82 @@
import DashboardLayout from '@/views/Layout/DashboardLayout.vue'
import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
import AuthLayout from '@/views/Layout/AuthLayout.vue'
import DashboardLayout from "@/views/Layout/DashboardLayout.vue";
import AuthLayoutGDD from "@/views/Layout/AuthLayout_gdd.vue";
import AuthLayout from "@/views/Layout/AuthLayout.vue";
// import NotFound from '@/views/NotFoundPage.vue'
const routes = [
{
path: '/',
redirect: 'login',
path: "/",
redirect: "login",
component: AuthLayoutGDD,
children: [
{
path: '/login',
component: () => import('../views/Pages/Login.vue')
path: "/login",
component: () => import("../views/Pages/Login.vue")
},
{
path: '/thx',
component: () => import('../views/Pages/thx.vue')
},
{
path: '/register',
component: () => import('../views/Pages/Register.vue')
},
{
path: '/password',
component: () => import('../views/Pages/Password.vue')
path: "/thx",
component: () => import("../views/Pages/thx.vue")
},
{
path: '/explorer',
name: 'Explorer',
component: () => import('../views/Pages/Explorer.vue'),
path: "/register",
component: () => import("../views/Pages/Register.vue")
},
{
path: "/password",
component: () => import("../views/Pages/Password.vue")
},
{
path: "/explorer",
name: "Explorer",
component: () => import("../views/Pages/Explorer.vue")
}
]
},
{
path: '/',
redirect: 'overview',
path: "/",
redirect: "overview",
component: DashboardLayout,
children: [
{
path: '/overview',
component: () => import('../views/KontoOverview.vue'),
path: "/overview",
component: () => import("../views/KontoOverview.vue"),
meta: {
requiresAuth: true
}
},
},
{
path: '/profile',
component: () => import('../views/Pages/UserProfileCard.vue')
},
path: "/profile",
component: () => import("../views/Pages/UserProfileCard.vue")
},
{
path: '/profileedit',
component: () => import('../views/Pages/UserProfileEdit.vue')
},
path: "/profileedit",
component: () => import("../views/Pages/UserProfileEdit.vue")
},
{
path: '/activity',
component: () => import('../views/Pages/UserProfileActivity.vue')
},
path: "/activity",
component: () => import("../views/Pages/UserProfileActivity.vue")
},
{
path: '/transactions',
component: () => import('../views/Pages/UserProfileTransactionList.vue')
path: "/transactions",
component: () => import("../views/Pages/UserProfileTransactionList.vue")
}
]
},
,
{
path: '/',
redirect: 'AdminOverview',
path: "/",
redirect: "AdminOverview",
component: AuthLayout,
children: [
{
path: '/AdminOverview',
name: 'Adminübersicht',
component: () => import('../views/AdminOverview.vue'),
path: "/AdminOverview",
name: "Adminübersicht",
component: () => import("../views/AdminOverview.vue"),
meta: {
requiresAuth: true
}
}
}
]
}
];

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

@ -1,27 +1,27 @@
import Vue from 'vue';
import Router from 'vue-router';
import DashboardLayout from '../views/Starter/SampleLayout.vue';
import Starter from '../views/Starter/SamplePage.vue';
import Vue from "vue";
import Router from "vue-router";
import DashboardLayout from "../views/Starter/SampleLayout.vue";
import Starter from "../views/Starter/SamplePage.vue";
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
redirect: '/dashboard',
path: "/",
name: "home",
redirect: "/dashboard",
component: DashboardLayout,
children: [
{
path: 'dashboard',
name: 'dashboard',
path: "dashboard",
name: "dashboard",
components: { default: Starter }
}
]
}
],
scrollBehavior: (to, from ,savedPosition) => {
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
}

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

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

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

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

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

@ -1,180 +1,377 @@
<template>
<div>
<b-card-header>Gradido Schüpfung</b-card-header>
<!--Tables-->
<b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0">
<vue-good-table
:columns="columns"
:rows="rows"
max-height="370px"
:fixed-header="true"
:line-numbers="false"
styleClass="vgt-table"
theme="nocturnal"
@on-row-click="onRowClick"
@on-search="onSearch"
:search-options="{
enabled: true,
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle'
}"
:pagination-options="{
enabled: true,
mode: 'pages'
}"
>
<div slot="table-actions">
Einträge suchen .
</div>
</vue-good-table>
</b-col>
<b-col xl="4" class="mb-5 mb-xl-0">
<b-card body-class="p-0" header-class="border-0">
<template v-slot:header>
<b-row align-v="center">
<b-col>
<h3 class="mb-0"></h3>
</b-col>
<b-col class="text-right">
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
</b-col>
</b-row>
</template>
<b-card-body>
<p>{{ creation.createdAt }} </p>
<p>{{ creation.group }} </p>
<p>{{ creation.id }} </p>
<p>{{ creation.name }} </p>
<p>{{ creation.originalIndex }} </p>
<p>{{ creation.text }} </p>
<p>{{ creation.vgt_id }} </p>
</b-card-body>
</b-card>
</b-col>
</b-row>
<!--End tables-->
<b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0">
<vue-good-table
:columns="columns"
:rows="rows"
max-height="370px"
:fixed-header="true"
:line-numbers="false"
styleClass="vgt-table"
theme="nocturnal"
@on-row-click="onRowClick"
@on-search="onSearch"
:search-options="{
enabled: true,
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle'
}"
:pagination-options="{
enabled: true,
mode: 'pages'
}"
>
<div slot="table-actions">
Einträge suchen .
</div>
</vue-good-table>
</b-col>
<b-col xl="4" class="mb-5 mb-xl-0">
<b-card body-class="p-0" header-class="border-0">
<template v-slot:header>
<b-row align-v="center">
<b-col>
<h3 class="mb-0"></h3>
</b-col>
<b-col class="text-right">
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
</b-col>
</b-row>
</template>
<b-card-body>
<p>{{ creation.createdAt }}</p>
<p>{{ creation.group }}</p>
<p>{{ creation.id }}</p>
<p>{{ creation.name }}</p>
<p>{{ creation.originalIndex }}</p>
<p>{{ creation.text }}</p>
<p>{{ creation.vgt_id }}</p>
</b-card-body>
</b-card>
</b-col>
</b-row>
<!--End tables-->
</div>
</template>
<script>
export default {
name: 'admin-user-creation',
data(){
name: "admin-user-creation",
data() {
return {
creation:{
createdAt:"",
group:"",
id:"",
name:"",
originalIndex:"",
text:"",
vgt_id:"",
creation: {
createdAt: "",
group: "",
id: "",
name: "",
originalIndex: "",
text: "",
vgt_id: ""
},
columns: [
{
label: 'Name',
field: 'name',
label: "Name",
field: "name"
},
{
label: 'Gruppe',
field: 'group',
type: 'group',
label: "Gruppe",
field: "group",
type: "group"
},
{
label: 'eingereicht',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'dd.MM.yyyy',
label: "eingereicht",
field: "createdAt",
type: "date",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "dd.MM.yyyy"
},
{
label: 'Text',
field: 'text',
type: 'text',
},
label: "Text",
field: "text",
type: "text"
}
],
rows: [
{ id:1, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:2, createdAt: '2021-01-31', name:"Jane", group: "gruppe14", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:3, createdAt: '2021-01-30', name:"Susan", group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:4, createdAt: '2020-01-11', name:"Chris", group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:5, createdAt: '2020-12-21', name:"Dan", group: "gruppe11", text: "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:6, createdAt: '2020-12-31', name:"zBohn", group: "gruppe71", text: "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:7, createdAt: '2020-12-31', name:"xyTellohn", group: "gruppe31", text: "Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:8, createdAt: '2021-01-25', name:"uSellora", group: "gruppe1", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:9, createdAt: '2021-01-31', name:"yJane", group: "gruppe14", text: "55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:10, createdAt: '2021-01-20', name:"kSusan", group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:11, createdAt: '2021-01-25', name:"qSellora", group: "gruppe12", text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:12, createdAt: '2021-01-31', name:"fJane", group: "gruppe15", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:13, createdAt: '2021-01-38', name:"aSusan", group: "gruppe1", text: "asssss IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:14, createdAt: '2020-01-11', name:"uChris", group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:15, createdAt: '2020-12-21', name:"tzDan", group: "gruppe11", text: "Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:16, createdAt: '2020-12-31', name:"fBohn", group: "gruppe71", text: "3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:17, createdAt: '2020-12-31', name:"aEsau", group: "gruppe15", text: "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:18, createdAt: '2021-01-25', name:"gSellora", group: "gruppe1", text: "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:19, createdAt: '2021-01-31', name:"sJane", group: "gruppe14", text: "as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:20, createdAt: '2021-01-30', name:"oSusan", group: "gruppe31", text: "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:21, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1", text: "3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:22, createdAt: '2021-01-13', name:"rtJane", group: "gruppe14", text: "q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:23, createdAt: '2021-01-16', name:"rSusan", group: "gruppe31", text: "Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:24, createdAt: '2020-01-15', name:"sChris", group: "gruppe12", text: "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:25, createdAt: '2020-12-14', name:"dDan", group: "gruppe11", text: "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:26, createdAt: '2020-12-13', name:"fBohn", group: "gruppe71", text: "Ta adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:27, createdAt: '2020-12-12', name:"gTellohn", group: "gruppe31", text: "55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:28, createdAt: '2021-01-12', name:"zSellora", group: "gruppe1", text: "e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:29, createdAt: '2021-01-12', name:"uJane", group: "gruppe14", text: "erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
{ id:30, createdAt: '2021-01-11', name:"iSusan", group: "gruppe31", text: "3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
],
{
id: 1,
createdAt: "2021-01-25",
name: "Sellora",
group: "gruppe1",
text:
"aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 2,
createdAt: "2021-01-31",
name: "Jane",
group: "gruppe14",
text:
"WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 3,
createdAt: "2021-01-30",
name: "Susan",
group: "gruppe31",
text:
"IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 4,
createdAt: "2020-01-11",
name: "Chris",
group: "gruppe12",
text:
"TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 5,
createdAt: "2020-12-21",
name: "Dan",
group: "gruppe11",
text:
"Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 6,
createdAt: "2020-12-31",
name: "zBohn",
group: "gruppe71",
text:
"Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 7,
createdAt: "2020-12-31",
name: "xyTellohn",
group: "gruppe31",
text:
"Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 8,
createdAt: "2021-01-25",
name: "uSellora",
group: "gruppe1",
text:
"aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 9,
createdAt: "2021-01-31",
name: "yJane",
group: "gruppe14",
text:
"55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 10,
createdAt: "2021-01-20",
name: "kSusan",
group: "gruppe31",
text:
"IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 11,
createdAt: "2021-01-25",
name: "qSellora",
group: "gruppe12",
text:
"aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 12,
createdAt: "2021-01-31",
name: "fJane",
group: "gruppe15",
text:
"WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 13,
createdAt: "2021-01-38",
name: "aSusan",
group: "gruppe1",
text:
"asssss IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 14,
createdAt: "2020-01-11",
name: "uChris",
group: "gruppe12",
text:
"TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 15,
createdAt: "2020-12-21",
name: "tzDan",
group: "gruppe11",
text:
"Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 16,
createdAt: "2020-12-31",
name: "fBohn",
group: "gruppe71",
text:
"3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 17,
createdAt: "2020-12-31",
name: "aEsau",
group: "gruppe15",
text:
"2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 18,
createdAt: "2021-01-25",
name: "gSellora",
group: "gruppe1",
text:
"5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 19,
createdAt: "2021-01-31",
name: "sJane",
group: "gruppe14",
text:
"as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 20,
createdAt: "2021-01-30",
name: "oSusan",
group: "gruppe31",
text:
"sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 21,
createdAt: "2021-01-25",
name: "Sellora",
group: "gruppe1",
text:
"3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 22,
createdAt: "2021-01-13",
name: "rtJane",
group: "gruppe14",
text:
"q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 23,
createdAt: "2021-01-16",
name: "rSusan",
group: "gruppe31",
text:
"Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 24,
createdAt: "2020-01-15",
name: "sChris",
group: "gruppe12",
text:
"43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 25,
createdAt: "2020-12-14",
name: "dDan",
group: "gruppe11",
text:
"aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 26,
createdAt: "2020-12-13",
name: "fBohn",
group: "gruppe71",
text:
"Ta adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 27,
createdAt: "2020-12-12",
name: "gTellohn",
group: "gruppe31",
text:
"55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 28,
createdAt: "2021-01-12",
name: "zSellora",
group: "gruppe1",
text:
"e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 29,
createdAt: "2021-01-12",
name: "uJane",
group: "gruppe14",
text:
"erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
},
{
id: 30,
createdAt: "2021-01-11",
name: "iSusan",
group: "gruppe31",
text:
"3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
}
]
};
},
methods: {
onRowClick(params) {
console.log("onRowClick", params.row.createdAt)
console.log("onRowClick", params.row.group)
console.log("onRowClick", params.row.id)
console.log("onRowClick", params.row.name)
console.log("onRowClick", params.row.originalIndex)
console.log("onRowClick", params.row.text)
console.log("onRowClick", params.row.vgt_id)
onRowClick(params) {
console.log("onRowClick", params.row.createdAt);
console.log("onRowClick", params.row.group);
console.log("onRowClick", params.row.id);
console.log("onRowClick", params.row.name);
console.log("onRowClick", params.row.originalIndex);
console.log("onRowClick", params.row.text);
console.log("onRowClick", params.row.vgt_id);
this.creation.createdAt = params.row.createdAt
this.creation.group = params.row.group
this.creation.id = params.row.id
this.creation.name = params.row.name
this.creation.originalIndex = params.row.originalIndex
this.creation.text = params.row.text
this.creation.vgt_id = params.row.vgt_id
this.creation.createdAt = params.row.createdAt;
this.creation.group = params.row.group;
this.creation.id = params.row.id;
this.creation.name = params.row.name;
this.creation.originalIndex = params.row.originalIndex;
this.creation.text = params.row.text;
this.creation.vgt_id = params.row.vgt_id;
// params.row - row object
// params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument
// indicates selected or not
// params.event - click event
// params.row - row object
// params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument
// indicates selected or not
// params.event - click event
},
onSearch(params) {
console.log("onSearch", params)
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
console.log("onSearch", params);
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
},
mySearchFn(params){
mySearchFn(params) {
//console.log("mySearchFn", params)
}
}
};
</script>
</script>

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

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

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

@ -6,14 +6,11 @@
<script>
export default {
name: 'default',
data(){
return {
};
name: "default",
data() {
return {};
},
methods: {
},
watch: {
}
methods: {},
watch: {}
};
</script>
</script>

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

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

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

@ -1,111 +1,152 @@
<template>
<div>
<!--Tables-->
<b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0">
<vue-good-table
:columns="columns"
:rows="rows"
max-height="370px"
:fixed-header="true"
:line-numbers="true"
@on-row-click="onRowClick"
@on-search="onSearch"
:search-options="{
enabled: true,
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle',
externalQuery: searchQuery,
}"
:pagination-options="{
enabled: true,
mode: 'pages'
}"
>
<div slot="table-actions">
Mitglieder suchen .
</div>
</vue-good-table>
</b-col>
<b-col xl="4" class="mb-5 mb-xl-0">
<social-traffic-table></social-traffic-table>
</b-col>
</b-row>
<!--End tables-->
<b-row class="mt-5">
<b-col xl="8" class="mb-5 mb-xl-0">
<vue-good-table
:columns="columns"
:rows="rows"
max-height="370px"
:fixed-header="true"
:line-numbers="true"
@on-row-click="onRowClick"
@on-search="onSearch"
:search-options="{
enabled: true,
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle',
externalQuery: searchQuery
}"
:pagination-options="{
enabled: true,
mode: 'pages'
}"
>
<div slot="table-actions">
Mitglieder suchen .
</div>
</vue-good-table>
</b-col>
<b-col xl="4" class="mb-5 mb-xl-0">
<social-traffic-table></social-traffic-table>
</b-col>
</b-row>
<!--End tables-->
</div>
</template>
<script>
import SocialTrafficTable from './SocialTrafficTable';
import SocialTrafficTable from "./SocialTrafficTable";
export default {
name: 'my-component',
name: "my-component",
components: {
SocialTrafficTable
},
data(){
SocialTrafficTable
},
data() {
return {
columns: [
{
label: 'Name',
field: 'name',
label: "Name",
field: "name"
},
{
label: 'Alter',
field: 'age',
type: 'number',
label: "Alter",
field: "age",
type: "number"
},
{
label: 'Mitglied seid',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'dd.MM.yyyy',
label: "Mitglied seid",
field: "createdAt",
type: "date",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "dd.MM.yyyy"
},
{
label: 'Prozent',
field: 'score',
type: 'percentage',
},
label: "Prozent",
field: "score",
type: "percentage"
}
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '1976-10-25',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"Bohn", age: 70, createdAt: '2011-10-31', score: 0.03343 },
{ id:7, name:"Tellohn", age: 56, createdAt: '2009-10-31', score: 0.13343 },
{ id:7, name:"Tellohn", age: 56, createdAt: '2009-10-31', score: 0.03343 },
],
{
id: 1,
name: "John",
age: 20,
createdAt: "1976-10-25",
score: 0.03343
},
{
id: 2,
name: "Jane",
age: 24,
createdAt: "2011-10-31",
score: 0.03343
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343
},
{
id: 6,
name: "Bohn",
age: 70,
createdAt: "2011-10-31",
score: 0.03343
},
{
id: 7,
name: "Tellohn",
age: 56,
createdAt: "2009-10-31",
score: 0.13343
},
{
id: 7,
name: "Tellohn",
age: 56,
createdAt: "2009-10-31",
score: 0.03343
}
]
};
},
methods: {
onRowClick(params) {
console.log(params)
// params.row - row object
// params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument
// indicates selected or not
// params.event - click event
onRowClick(params) {
console.log(params);
// params.row - row object
// params.pageIndex - index of this row on the current page.
// params.selected - if selection is enabled this argument
// indicates selected or not
// params.event - click event
},
onSearch(params) {
console.log(params)
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
console.log(params);
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
},
mySearchFn(params){
console.log(params)
mySearchFn(params) {
console.log(params);
}
}
};
</script>
</script>

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

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

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

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

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

@ -4,12 +4,13 @@
<!-- Card stats -->
<b-row>
<b-col xl="3" md="6">
<stats-card title="Total traffic"
type="gradient-red"
sub-title="350,897"
icon="ni ni-active-40"
class="mb-4">
<stats-card
title="Total traffic"
type="gradient-red"
sub-title="350,897"
icon="ni ni-active-40"
class="mb-4"
>
<template slot="footer">
<span class="text-success mr-2">3.48%</span>
<span class="text-nowrap">Since last month</span>
@ -17,12 +18,13 @@
</stats-card>
</b-col>
<b-col xl="3" md="6">
<stats-card title="Total traffic"
type="gradient-orange"
sub-title="2,356"
icon="ni ni-chart-pie-35"
class="mb-4">
<stats-card
title="Total traffic"
type="gradient-orange"
sub-title="2,356"
icon="ni ni-chart-pie-35"
class="mb-4"
>
<template slot="footer">
<span class="text-success mr-2">12.18%</span>
<span class="text-nowrap">Since last month</span>
@ -30,26 +32,27 @@
</stats-card>
</b-col>
<b-col xl="3" md="6">
<stats-card title="Sales"
type="gradient-green"
sub-title="924"
icon="ni ni-money-coins"
class="mb-4">
<stats-card
title="Sales"
type="gradient-green"
sub-title="924"
icon="ni ni-money-coins"
class="mb-4"
>
<template slot="footer">
<span class="text-danger mr-2">5.72%</span>
<span class="text-nowrap">Since last month</span>
</template>
</stats-card>
</b-col>
<b-col xl="3" md="6">
<stats-card title="Performance"
type="gradient-info"
sub-title="49,65%"
icon="ni ni-chart-bar-32"
class="mb-4">
<stats-card
title="Performance"
type="gradient-info"
sub-title="49,65%"
icon="ni ni-chart-bar-32"
class="mb-4"
>
<template slot="footer">
<span class="text-success mr-2">54.8%</span>
<span class="text-nowrap">Since last month</span>
@ -63,8 +66,11 @@
<b-row>
<b-col>
<b-card no-body class="border-0">
<div id="map-custom" class="map-canvas"
style="height: 600px;"></div>
<div
id="map-custom"
class="map-canvas"
style="height: 600px;"
></div>
</b-card>
</b-col>
</b-row>
@ -72,79 +78,96 @@
</div>
</template>
<script>
import { API_KEY } from './Maps/API_KEY';
import GoogleMapsLoader from 'google-maps';
import { API_KEY } from "./Maps/API_KEY";
import GoogleMapsLoader from "google-maps";
GoogleMapsLoader.KEY = API_KEY;
GoogleMapsLoader.KEY = API_KEY;
export default {
methods: {
initMap(google) {
let map, lat = 40.748817, lng = -73.985428, color = "#5e72e4";
map = document.getElementById('map-custom');
export default {
methods: {
initMap(google) {
let map,
lat = 40.748817,
lng = -73.985428,
color = "#5e72e4";
map = document.getElementById("map-custom");
let myLatlng = new google.maps.LatLng(lat, lng);
let mapOptions = {
zoom: 12,
scrollwheel: false,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{ "color": "#444444" }]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{ "color": "#f2f2f2" }]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{ "visibility": "off" }]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{ "saturation": -100 }, { "lightness": 45 }]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{ "visibility": "simplified" }]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{ "visibility": "off" }]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{ "visibility": "off" }]
}, { "featureType": "water", "elementType": "all", "stylers": [{ "color": color }, { "visibility": "on" }] }]
}
let myLatlng = new google.maps.LatLng(lat, lng);
let mapOptions = {
zoom: 12,
scrollwheel: false,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{ color: "#444444" }]
},
{
featureType: "landscape",
elementType: "all",
stylers: [{ color: "#f2f2f2" }]
},
{
featureType: "poi",
elementType: "all",
stylers: [{ visibility: "off" }]
},
{
featureType: "road",
elementType: "all",
stylers: [{ saturation: -100 }, { lightness: 45 }]
},
{
featureType: "road.highway",
elementType: "all",
stylers: [{ visibility: "simplified" }]
},
{
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [{ visibility: "off" }]
},
{
featureType: "transit",
elementType: "all",
stylers: [{ visibility: "off" }]
},
{
featureType: "water",
elementType: "all",
stylers: [{ color: color }, { visibility: "on" }]
}
]
};
map = new google.maps.Map(map, mapOptions);
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 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 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
});
let infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
},
mounted() {
GoogleMapsLoader.load(google => {
this.initMap(google);
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
};
},
mounted() {
GoogleMapsLoader.load(google => {
this.initMap(google);
});
}
};
</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>
<div>
<base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
<b-container fluid class="mt--7">
<gdd-status />
<br>
<gdd-send />
<hr>
<gdd-table />
<!-- <hr>
<base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
<b-container fluid class="mt--7">
<gdd-status />
<br />
<gdd-send />
<hr />
<gdd-table />
<!-- <hr>
<div>
<gdd-add-work-2 />
</div>
<br> -->
<!--
<br> -->
<!--
<div>
<gdd-add-work />
</div>
<br>
-->
<!-- <div>
-->
<!-- <div>
<gdd-work-table />
</div> -->
</b-container>
</div> -->
</b-container>
</div>
</template>
<script>
import GddStatus from './KontoOverview/GddStatus.vue';
import GddSend from './KontoOverview/GddSend.vue';
import GddTable from './KontoOverview/GddTable.vue';
// import GddAddWork2 from './KontoOverview/GddAddWork2.vue';
// import GddWorkTable from './KontoOverview/GddWorkTable.vue';
import GddStatus from "./KontoOverview/GddStatus.vue";
import GddSend from "./KontoOverview/GddSend.vue";
import GddTable from "./KontoOverview/GddTable.vue";
// import GddAddWork2 from './KontoOverview/GddAddWork2.vue';
// import GddWorkTable from './KontoOverview/GddWorkTable.vue';
export default {
name: "Overview",
components: {
GddStatus,
GddSend,
GddTable,
//GddAddWork2,
//GddWorkTable
},
created() {
this.$store.dispatch('accountBalance', $cookies.get("gdd_session_id"))
}
};
export default {
name: "Overview",
components: {
GddStatus,
GddSend,
GddTable
//GddAddWork2,
//GddWorkTable
},
created() {
this.$store.dispatch("accountBalance", $cookies.get("gdd_session_id"));
}
};
</script>
<style>
.active { background-color: rgba(192, 192, 192, 0.568);}
.active {
background-color: rgba(192, 192, 192, 0.568);
}
</style>

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

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

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

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

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

@ -2,218 +2,264 @@
<div>
<b-row>
<b-col xl="12" md="12">
<b-alert variant="warning" show dismissible >
<strong>Achtung!</strong> Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
</b-alert>
<b-card class="p-0 p-md-3">
<b-alert show variant="secondary">
<span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
<b-col v-show="!scan" lg="12" class="text-right ">
<img src="/img/icons/gradido/qr-scan-pure.png" height="50" @click="scan = true">
</b-col>
<b-alert v-show="scan" show variant="warning">
<span class="alert-text" @click="scan=false"><strong>schließen!</strong></span>
</b-alert>
<div v-if="scan">
<!-- <b-row>
<b-alert variant="warning" show dismissible>
<strong>Achtung!</strong>
Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine
Verantwortlich für deine Entscheidungen. Versendete Gradidos können
nicht wieder zurück geholt werden.
</b-alert>
<b-card class="p-0 p-md-3">
<b-alert show variant="secondary">
<span class="alert-text">
<strong>QR Code Scanner</strong>
- Scanne den QR Code deines Partners
</span>
<b-col v-show="!scan" lg="12" class="text-right ">
<img
src="/img/icons/gradido/qr-scan-pure.png"
height="50"
@click="scan = true"
/>
</b-col>
<b-alert v-show="scan" show variant="warning">
<span class="alert-text" @click="scan = false">
<strong>schließen!</strong>
</span>
</b-alert>
<div v-if="scan">
<!-- <b-row>
<qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture>
</b-row> -->
<qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect" ></qrcode-stream>
</b-row> -->
<b-container >
<b-row>
<b-col lg="8">
<b-alert show variant="secondary">
<span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
</b-alert>
</b-col>
</b-row>
</b-container>
<qrcode-stream
class="mt-3"
@decode="onDecode"
@detect="onDetect"
></qrcode-stream>
<b-container>
<b-row>
<b-col lg="8">
<b-alert show variant="secondary">
<span class="alert-text">
<strong>QR Code Scanner</strong>
- Scanne den QR Code deines Partners
</span>
</b-alert>
</b-col>
</b-row>
</b-container>
</div>
</b-alert>
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<b-form
role="form"
@submit.prevent="handleSubmit(onSubmit)"
@reset="onReset"
v-if="show"
>
<br />
<div>
<qrcode-drop-zone
id="input-0"
v-model="form.img"
></qrcode-drop-zone>
</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-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>
<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>
<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-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>
</div>
</template>
<script>
import { QrcodeStream, QrcodeDropZone /*, QrcodeCapture*/ } from 'vue-qrcode-reader'
import { BIcon } from 'bootstrap-vue'
import {
QrcodeStream,
QrcodeDropZone /*, QrcodeCapture*/
} from "vue-qrcode-reader";
import { BIcon } from "bootstrap-vue";
export default {
name: 'GddSent',
name: "GddSent",
components: {
QrcodeStream,
QrcodeDropZone,
// QrcodeCapture,
BIcon
},
data(){
QrcodeStream,
QrcodeDropZone,
// QrcodeCapture,
BIcon
},
data() {
return {
scan: false,
show: true,
form: {
img: '',
email: '',
amount: '',
memo:''
},
sent: false,
}
scan: false,
show: true,
form: {
img: "",
email: "",
amount: "",
memo: ""
},
sent: false
};
},
methods: {
sendbutton(){
this.sent = true
sendbutton() {
this.sent = true;
},
async onDecode (decodedString) {
console.log('onDecode JSON.parse(decodedString)',JSON.parse(decodedString) )
const arr = JSON.parse(decodedString)
console.log('qr-email',arr[0].email )
console.log('qr-amount',arr[0].amount )
async onDecode(decodedString) {
console.log(
"onDecode JSON.parse(decodedString)",
JSON.parse(decodedString)
);
const arr = JSON.parse(decodedString);
console.log("qr-email", arr[0].email);
console.log("qr-amount", arr[0].amount);
this.form.email = arr[0].email
this.form.amount1 = arr[0].amount
},
async onDetect (promise) {
try {
const {
imageData, // raw image data of image/frame
content, // decoded String
location // QR code coordinates
} = await promise
// console.log('onDetect promise',promise)
//console.log('JSON.parse(decodedString)',JSON.parse(promise) )
const arr = JSON.parse(decodedString)
} catch (error) {
// ...
}
},
async onSubmit() {
//event.preventDefault()
//console.log("onSubmit", this.form)
this.$store.state.ajaxCreateData.session_id = this.$cookies.get('gdd_session_id')
this.$store.state.ajaxCreateData.email = this.form.email
this.$store.state.ajaxCreateData.amount = this.form.amount
this.$store.state.ajaxCreateData.memo = this.form.memo
this.$store.state.ajaxCreateData.target_date = Date.now()
this.$store.dispatch('ajaxCreate')
},
onReset(event) {
event.preventDefault()
this.form.email = ''
this.form.amount = ''
this.show = false
this.$nextTick(() => {
this.show = true
})
this.form.email = arr[0].email;
this.form.amount1 = arr[0].amount;
},
async onDetect(promise) {
try {
const {
imageData, // raw image data of image/frame
content, // decoded String
location // QR code coordinates
} = await promise;
// console.log('onDetect promise',promise)
//console.log('JSON.parse(decodedString)',JSON.parse(promise) )
const arr = JSON.parse(decodedString);
} catch (error) {
// ...
}
},
async onSubmit() {
//event.preventDefault()
//console.log("onSubmit", this.form)
this.$store.state.ajaxCreateData.session_id = this.$cookies.get(
"gdd_session_id"
);
this.$store.state.ajaxCreateData.email = this.form.email;
this.$store.state.ajaxCreateData.amount = this.form.amount;
this.$store.state.ajaxCreateData.memo = this.form.memo;
this.$store.state.ajaxCreateData.target_date = Date.now();
this.$store.dispatch("ajaxCreate");
},
onReset(event) {
event.preventDefault();
this.form.email = "";
this.form.amount = "";
this.show = false;
this.$nextTick(() => {
this.show = true;
});
}
},
computed: {
state() {
return this.name.length >= 4
},
invalidFeedback() {
if (this.name.length > 0) {
return 'Geben Sie mindestens 4 Zeichen ein.'
}
return 'Bitte geben Sie eine GDD Adresse ein.'
computed: {
state() {
return this.name.length >= 4;
},
invalidFeedback() {
if (this.name.length > 0) {
return "Geben Sie mindestens 4 Zeichen ein.";
}
}
return "Bitte geben Sie eine GDD Adresse ein.";
}
}
};
</script>
<style>
@ -221,4 +267,4 @@ video {
max-height: 665px;
max-width: 665px;
}
</style>
</style>

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

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

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

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

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

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

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

@ -6,14 +6,11 @@
<script>
export default {
name: 'default',
data(){
return {
};
name: "default",
data() {
return {};
},
methods: {
},
watch: {
}
methods: {},
watch: {}
};
</script>
</script>

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

@ -3,7 +3,7 @@
<!-- Header -->
<div class="header bg-gradient-info py-7 py-lg-8 pt-lg-9">
<b-container>
<div class="header-body text-center mb-7">
<div class="header-body text-center mb-7">
<p class="h1">GRADIDO</p>
<p class="h4">Wallet</p>
<!-- <b-row class="justify-content-center">
@ -17,116 +17,181 @@
<router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link>
</b-col>
</b-row> -->
<hr>
<hr />
<p class="lead">
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">
<form @submit.prevent="login">
<form @submit.prevent="login">
<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">
<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-row>
<b-row class="form-group">
<label for="example-password-input"
class="col-md-2 col-form-label form-control-label">Password</label>
<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="lpwd"/>
<base-input
type="password"
autocomplete="current-password"
placeholder="password"
v-model="lpwd"
/>
</b-col>
</b-row>
<b-button block type="submit" >Anmelden</b-button>
<b-button block type="submit">Anmelden</b-button>
</form>
</b-col>
</b-row>
<hr>
<p class="lead">
neues Mitglied anlegen
</p>
<hr />
<p class="lead">
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">
<form>
<b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label">Vorname</label>
<b-col md="10">
<base-input placeholder="Jon " v-model="rfname"></base-input>
</b-col>
</b-row>
<b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label">Nachname</label>
<b-col md="10">
<base-input placeholder=" Snow" v-model="rlname"></base-input>
</b-col>
</b-row>
<b-row class="form-group">
<label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label>
<b-col md="10">
<base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="remail"/>
</b-col>
</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>
<form>
<b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label">
Vorname
</label>
<b-col md="10">
<base-input
placeholder="Jon "
v-model="rfname"
></base-input>
</b-col>
</b-row>
<b-row class="form-group">
<label class="col-md-2 col-form-label form-control-label">
Nachname
</label>
<b-col md="10">
<base-input
placeholder=" Snow"
v-model="rlname"
></base-input>
</b-col>
</b-row>
<b-row class="form-group">
<label
for="example-email-input"
class="col-md-2 col-form-label form-control-label"
>
Email
</label>
<b-col md="10">
<base-input
type="email"
autocomplete="username email"
placeholder="argon@example.com"
v-model="remail"
/>
</b-col>
</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-row>
</div>
</b-container>
<div class="separator separator-bottom separator-skew zindex-100">
<svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
<svg
x="0"
y="0"
viewBox="0 0 2560 100"
preserveAspectRatio="none"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
class="fill-default"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
</div>
<!-- Page content -->
</div>
</template>
<script>
// Components
export default {
name: 'Landing',
data(){
name: "Landing",
data() {
return {
lemail: '',
lpwd: '',
rfname: '',
rlname: '',
remail: '',
rpwd: ''
}
lemail: "",
lpwd: "",
rfname: "",
rlname: "",
remail: "",
rpwd: ""
};
},
methods: {
methods: {
login() {
//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() {
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 () {
console.log("app.vue admin login(): " + this.$store.state.is_admin)
this.modals = false
this.$store.commit('loginAsAdmin')
this.$router.push('/AdminOverview')
loginAsAdmin() {
console.log("app.vue admin login(): " + this.$store.state.is_admin);
this.modals = false;
this.$store.commit("loginAsAdmin");
this.$router.push("/AdminOverview");
}
}
}
};
</script>
</script>

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

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

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

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

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

@ -1,48 +1,43 @@
<template>
<div class="main-content">
<div class="main-content">
<template>
<div class="main-content">
<router-view></router-view>
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
<router-view></router-view>
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
</div>
</template>
</div>
</template>
<script>
import ContentFooter from './ContentFooter.vue';
export default {
components: {
ContentFooter
},
data() {
return {
year: new Date().getFullYear(),
pageClass: 'login-page'
};
},
computed: {
title() {
return `${this.$route.name} Page`;
}
},
methods: {
setLocale(locale) {
this.$i18n.locale = locale
//this.$router.push({
// params: { lang: locale }
//})
//this.hideDropdown()
}
import ContentFooter from "./ContentFooter.vue";
export default {
components: {
ContentFooter
},
data() {
return {
year: new Date().getFullYear(),
pageClass: "login-page"
};
},
computed: {
title() {
return `${this.$route.name} Page`;
}
};
},
methods: {
setLocale(locale) {
this.$i18n.locale = locale;
//this.$router.push({
// params: { lang: locale }
//})
//this.hideDropdown()
}
}
};
</script>
<style lang="scss">
.card { background-color:rgba(136, 130, 131, 0.3); }
.card {
background-color: rgba(136, 130, 131, 0.3);
}
</style>

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

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

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

@ -1,22 +1,29 @@
<template>
<footer class="footer px-4 bg-transparent">
<b-row align-v="center" class="justify-content-lg-between">
<b-col><div class="copyright text-center text-lg-center text-muted">
© {{year}} <a href="#!" to="/login" class="font-weight-bold ml-1" >Gradido-Akademie</a>
</div></b-col>
</b-row>
<b-row align-v="center" class="justify-content-lg-between" >
<b-col>
<b-col>
<div class="copyright text-center text-lg-center text-muted">
© {{ year }}
<a href="#!" to="/login" class="font-weight-bold ml-1">
Gradido-Akademie
</a>
</div>
</b-col>
</b-row>
<b-row align-v="center" class="justify-content-lg-between">
<b-col>
<b-nav class="nav-footer justify-content-center">
<b-nav-item ref="https://gradido.net/" target="_blank">
Gradido
</b-nav-item>
<b-nav-item href="https://gradido.net/de/impressum/" target="_blank">
{{$t('imprint')}}
{{ $t("imprint") }}
</b-nav-item>
<b-nav-item href="https://gradido.net/de/datenschutz/" target="_blank">
{{$t('privacy_policy')}}
<b-nav-item
href="https://gradido.net/de/datenschutz/"
target="_blank"
>
{{ $t("privacy_policy") }}
</b-nav-item>
<!--<b-nav-item href="#!" to="/explorer" >
GDD-Explorer
@ -24,14 +31,13 @@
</b-nav>
</b-col>
</b-row>
</footer>
</template>
<script>
export default {
data() {
return {
year: new Date().getFullYear(),
year: new Date().getFullYear()
};
}
};

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

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

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

@ -2,56 +2,68 @@
<base-nav
container-classes="container-fluid"
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">
{{$route.name}}
<a
href="#"
aria-current="page"
class="h4 mb-0 text-uppercase d-none d-lg-inline-block active router-link-active"
>
{{ $route.name }}
</a>
<!-- Navbar links -->
<b-navbar-nav class="align-items-center ml-md-auto">
<!-- This item dont have <b-nav-item> because item have data-action/data-target on tag <a>, wich we cant add -->
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<a
class="nav-link"
href="#"
data-action="search-show"
data-target="#navbar-search-main"
>
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
</b-navbar-nav>
<b-navbar-nav class="align-items-center ml-auto ml-md-0">
<base-dropdown menu-on-right
class="nav-item"
tag="li"
title-tag="a"
title-classes="nav-link pr-0">
<base-dropdown
menu-on-right
class="nav-item"
tag="li"
title-tag="a"
title-classes="nav-link pr-0"
>
<a href="#" class="pr-1" @click.prevent slot="title-container">
<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">
<span class="avatar ">
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
</span>
<span class="avatar ">
<vue-qrcode
:value="$store.state.email"
type="image/png"
></vue-qrcode>
</span>
</b-media-body>
</b-media>
</a>
<template>
<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-item href="#!" to="/overview">
<b-dropdown-item href="#!" to="/overview">
<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 href="#!" to="/profile">
<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 href="#!" to="/profileedit">
<i class="ni ni-settings-gear-65"></i>
<span>{{ $t('site.navbar.settings') }}</span>
<span>{{ $t("site.navbar.settings") }}</span>
</b-dropdown-item>
<!--
<b-dropdown-item href="#!">
@ -62,30 +74,30 @@
<div class="dropdown-divider"></div>
<b-dropdown-item href="#!" @click="logout">
<i class="ni ni-user-run"></i>
<span>{{ $t('logout') }}</span>
<span>{{ $t("logout") }}</span>
</b-dropdown-item>
</template>
</base-dropdown>
</b-navbar-nav>
</base-nav>
</template>
<script>
import { CollapseTransition } from 'vue2-transitions'
import { BaseNav } from '@/components'
import VueQrcode from 'vue-qrcode'
import { CollapseTransition } from "vue2-transitions";
import { BaseNav } from "@/components";
import VueQrcode from "vue-qrcode";
export default {
components: {
//CollapseTransition,
//CollapseTransition,
BaseNav,
VueQrcode
},
props: {
type: {
type: String,
default: 'default', // default|light
description: 'Look of the dashboard navbar. Default (Green) or light (gray)'
default: "default", // default|light
description:
"Look of the dashboard navbar. Default (Green) or light (gray)"
}
},
computed: {
@ -99,7 +111,7 @@ export default {
activeNotifications: false,
showMenu: false,
searchModalVisible: false,
searchQuery: ''
searchQuery: ""
};
},
methods: {
@ -112,10 +124,10 @@ export default {
closeDropDown() {
this.activeNotifications = false;
},
logout(){
logout() {
//console.log("DashboardNavbar.vue user logout() : ")
this.$store.dispatch('logout')
}
this.$store.dispatch("logout");
}
}
};
</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";

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

File diff suppressed because it is too large Load Diff

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

@ -3,20 +3,29 @@
<!-- Header -->
<div class="header bg-gradient-info py-7 py-lg-3 pt-lg-2">
<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="h4">Explorer</p>
</div>
</b-container>
<div class="separator separator-bottom separator-skew zindex-100">
<svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
<svg
x="0"
y="0"
viewBox="0 0 2560 100"
preserveAspectRatio="none"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
class="fill-default"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
</div>
<!-- Page content -->
<div>
<b-card>
<b-card-body>

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

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

79
frontend/src/views/Pages/Password.vue
View File

@ -5,32 +5,47 @@
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-2">
<h1 >{{ $t('site.password.title')}}</h1>
<p class="text-lead">{{ $t('site.password.subtitle')}}</p>
<h1>{{ $t("site.password.title") }}</h1>
<p class="text-lead">{{ $t("site.password.subtitle") }}</p>
</b-col>
</b-row>
</div>
</b-container>
</div>
<b-container class="mt--8 p-1">
<b-row class="justify-content-center">
<b-col lg="6" md="8" >
<b-card no-body class="border-0" style="background-color: #ebebeba3 !important;">
<b-card-body class="px-lg-5 py-lg-5">
<validation-observer v-slot="{handleSubmit}" ref="formValidator">
<b-col lg="6" md="8">
<b-card
no-body
class="border-0"
style="background-color: #ebebeba3 !important;"
>
<b-card-body class="px-lg-5 py-lg-5">
<validation-observer
v-slot="{ handleSubmit }"
ref="formValidator"
>
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input alternative
<base-input
alternative
class="mb-3"
prepend-icon="ni ni-email-83"
:placeholder="$t('form.email')"
name="Email"
:rules="{required: true, email: true}"
v-model="model.email">
</base-input>
{{form}}
:rules="{ required: true, email: true }"
v-model="model.email"
></base-input>
{{ form }}
<div class="text-center">
<b-button type="submit" outline variant="secondary" class="mt-4" :disabled="disable">{{ $t('site.password.reset_now')}}</b-button>
<b-button
type="submit"
outline
variant="secondary"
class="mt-4"
:disabled="disable"
>
{{ $t("site.password.reset_now") }}
</b-button>
</div>
</b-form>
</validation-observer>
@ -38,30 +53,30 @@
</b-card>
</b-col>
</b-row>
<div class="text-center py-lg-4" >
<router-link to="/Login" class="mt-3">{{ $t('back')}}</router-link>
</div>
<div class="text-center py-lg-4">
<router-link to="/Login" class="mt-3">{{ $t("back") }}</router-link>
</div>
</b-container>
</div>
</template>
<script>
export default {
name: 'password',
data() {
return {
disable: 'disabled',
model: {
email: ''
}
export default {
name: "password",
data() {
return {
disable: "disabled",
model: {
email: ""
}
},
methods: {
onSubmit() {
this.$store.dispatch('passwordReset', {"email":this.model.email})
this.model.email = ""
this.$router.push('/thx')
}
};
},
methods: {
onSubmit() {
this.$store.dispatch("passwordReset", { email: this.model.email });
this.model.email = "";
this.$router.push("/thx");
}
};
}
};
</script>
<style></style>

181
frontend/src/views/Pages/Register.vue
View File

@ -6,75 +6,103 @@
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-2">
<h1 >{{ $t('site.signup.title')}}</h1>
<p class="text-lead">{{ $t('site.signup.subtitle')}}</p>
<h1>{{ $t("site.signup.title") }}</h1>
<p class="text-lead">{{ $t("site.signup.subtitle") }}</p>
</b-col>
</b-row>
</div>
</b-container>
</div>
<!-- Page content -->
<b-container class="mt--8 p-1">
<!-- Table -->
<b-row class="justify-content-center">
<b-col lg="6" md="8" >
<b-card no-body class="border-0" style="background-color: #ebebeba3 !important;">
<b-col lg="6" md="8">
<b-card
no-body
class="border-0"
style="background-color: #ebebeba3 !important;"
>
<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">
<small>{{ $t('signup')}} </small>
<small>{{ $t("signup") }}</small>
</div>
<validation-observer v-slot="{handleSubmit}" ref="formValidator">
<validation-observer
v-slot="{ handleSubmit }"
ref="formValidator"
>
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input alternative
class="mb-3"
prepend-icon="ni ni-hat-3"
:placeholder="$t('form.firstname')"
name="Vorname"
:rules="{required: true}"
v-model="model.firstname">
</base-input>
<base-input alternative
class="mb-3"
prepend-icon="ni ni-hat-3"
:placeholder="$t('form.lastname')"
name="Nachname"
:rules="{required: true}"
v-model="model.lastname">
</base-input>
<base-input
alternative
class="mb-3"
prepend-icon="ni ni-hat-3"
:placeholder="$t('form.firstname')"
name="Vorname"
:rules="{ required: true }"
v-model="model.firstname"
></base-input>
<base-input
alternative
class="mb-3"
prepend-icon="ni ni-hat-3"
:placeholder="$t('form.lastname')"
name="Nachname"
:rules="{ required: true }"
v-model="model.lastname"
></base-input>
<base-input alternative
class="mb-3"
prepend-icon="ni ni-email-83"
:placeholder="$t('form.email')"
name="Email"
:rules="{required: true, email: true}"
v-model="model.email">
</base-input>
<base-input
alternative
class="mb-3"
prepend-icon="ni ni-email-83"
:placeholder="$t('form.email')"
name="Email"
:rules="{ required: true, email: true }"
v-model="model.email"
></base-input>
<base-input alternative
class="mb-3"
prepend-icon="ni ni-lock-circle-open"
:placeholder="$t('form.password')"
type="password"
name="Password"
:rules="{required: true, min: 6}"
v-model="model.password">
</base-input>
<div class="text-muted font-italic"><small>{{ $t('site.signup.strength')}} <span
class="text-success font-weight-700">{{ $t('site.signup.strong')}}</span></small></div>
<base-input
alternative
class="mb-3"
prepend-icon="ni ni-lock-circle-open"
:placeholder="$t('form.password')"
type="password"
name="Password"
:rules="{ required: true, min: 6 }"
v-model="model.password"
></base-input>
<div class="text-muted font-italic">
<small>
{{ $t("site.signup.strength") }}
<span class="text-success font-weight-700">
{{ $t("site.signup.strong") }}
</span>
</small>
</div>
<b-row class=" my-4">
<b-col cols="12">
<base-input :rules="{ required: { allowFalse: false } }" name="Privacy Policy">
<base-input
:rules="{ required: { allowFalse: false } }"
name="Privacy Policy"
>
<b-form-checkbox v-model="model.agree">
<span class="text-muted"><a href="https://gradido.net/de/datenschutz/" target="_blank"> {{ $t('privacy_policy')}}</a> - {{ $t('site.signup.agree')}} </span>
<span class="text-muted">
<a
href="https://gradido.net/de/datenschutz/"
target="_blank"
>
{{ $t("privacy_policy") }}
</a>
- {{ $t("site.signup.agree") }}
</span>
</b-form-checkbox>
</base-input>
</b-col>
</b-row>
<div class="text-center">
<b-button type="submit" variant="secondary" class="mt-4">{{ $t('signup')}}</b-button>
<b-button type="submit" variant="secondary" class="mt-4">
{{ $t("signup") }}
</b-button>
</div>
</b-form>
</validation-observer>
@ -82,39 +110,44 @@
</b-card>
</b-col>
</b-row>
<div class="text-center py-lg-4" >
<router-link to="/Login" class="mt-3">{{ $t('back')}}</router-link>
</div>
<div class="text-center py-lg-4">
<router-link to="/Login" class="mt-3">{{ $t("back") }}</router-link>
</div>
</b-container>
</div>
</template>
<script>
export default {
name: 'register',
data() {
return {
model: {
firstname: '',
lastname: '',
email: '',
password: '',
password2: '',
agree: false
}
export default {
name: "register",
data() {
return {
model: {
firstname: "",
lastname: "",
email: "",
password: "",
password2: "",
agree: false
}
},
methods: {
onSubmit() {
// console.log("this.modals =>", this.modals)
this.$store.dispatch('createUser', {"email":this.model.email, "first_name":this.model.firstname, "last_name":this.model.lastname , "emailType": 2, "password":this.model.password})
this.model.email = ""
this.model.firstname = ""
this.model.lastname = ""
this.model.password = ""
this.$router.push('/thx')
}
};
},
methods: {
onSubmit() {
// console.log("this.modals =>", this.modals)
this.$store.dispatch("createUser", {
email: this.model.email,
first_name: this.model.firstname,
last_name: this.model.lastname,
emailType: 2,
password: this.model.password
});
this.model.email = "";
this.model.firstname = "";
this.model.lastname = "";
this.model.password = "";
this.$router.push("/thx");
}
};
}
};
</script>
<style></style>

37
frontend/src/views/Pages/UserProfile.vue
View File

@ -1,14 +1,20 @@
<template>
<div>
<div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"
style="min-height: 600px; background-image: url(img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
<div
class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"
style="min-height: 600px; background-image: url(img/theme/profile-cover.jpg); background-size: cover; background-position: center top;"
>
<b-container fluid>
<b-container fluid class="d-flex align-items-center">
<b-row >
<b-row>
<b-col lg="7" md="10">
<h1 class="display-2 text-white">Hello {{this.$store.state.email}}</h1>
<p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you've made with your
work and manage your projects or assigned tasks</p>
<h1 class="display-2 text-white">
Hello {{ this.$store.state.email }}
</h1>
<p class="text-white mt-0 mb-5">
This is your profile page. You can see the progress you've made
with your work and manage your projects or assigned tasks
</p>
<a href="#!" class="btn btn-info">Edit profile</a>
</b-col>
</b-row>
@ -29,15 +35,14 @@
</div>
</template>
<script>
import EditProfileForm from './UserProfile/EditProfileForm.vue';
import UserCard from './UserProfile/UserCard.vue';
import EditProfileForm from "./UserProfile/EditProfileForm.vue";
import UserCard from "./UserProfile/UserCard.vue";
export default {
components: {
EditProfileForm,
UserCard
}
};
export default {
components: {
EditProfileForm,
UserCard
}
};
</script>
<style>
</style>
<style></style>

77
frontend/src/views/Pages/UserProfile/EditProfileForm.vue
View File

@ -1,12 +1,8 @@
<template>
<card>
<b-row align-v="center" slot="header" >
<b-col cols="8">
</b-col>
<b-col cols="4" class="text-right">
</b-col>
<b-row align-v="center" slot="header">
<b-col cols="8"></b-col>
<b-col cols="4" class="text-right"></b-col>
</b-row>
<b-form @submit.prevent="updateProfile">
@ -20,8 +16,7 @@
label="Username"
placeholder="Username"
v-model="user.username"
>
</base-input>
></base-input>
</b-col>
<b-col lg="6">
<base-input
@ -29,19 +24,17 @@
label="Email address"
placeholder="mike@email.com"
v-model="user.email"
>
</base-input>
></base-input>
</b-col>
</b-row>
<b-row >
<b-row>
<b-col lg="6">
<base-input
type="text"
label="First Name"
placeholder="First Name"
v-model="user.firstName"
>
</base-input>
></base-input>
</b-col>
<b-col lg="6">
<base-input
@ -49,12 +42,11 @@
label="Last Name"
placeholder="Last Name"
v-model="user.lastName"
>
</base-input>
></base-input>
</b-col>
</b-row>
</div>
<hr class="my-4">
<hr class="my-4" />
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
@ -67,8 +59,7 @@
label="Address"
placeholder="Home Address"
v-model="user.address"
>
</base-input>
></base-input>
</b-col>
</b-row>
<b-row>
@ -78,8 +69,7 @@
label="City"
placeholder="City"
v-model="user.city"
>
</base-input>
></base-input>
</b-col>
<b-col lg="4">
<base-input
@ -87,30 +77,37 @@
label="Country"
placeholder="Country"
v-model="user.country"
>
</base-input>
></base-input>
</b-col>
<b-col lg="4">
<base-input
label="Postal Code"
placeholder="ZIP Code"
v-model="user.postalCode"
>
</base-input>
></base-input>
</b-col>
</b-row>
</div>
<hr class="my-4">
<hr class="my-4" />
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div class="pl-lg-4">
<b-form-group label="About Me" label-class="form-control-label" class="mb-0" label-for="about-form-textaria">
<!-- <label class="form-control-label">About Me</label> -->
<b-form-textarea rows="4" value="A beautiful premium dashboard for BootstrapVue." id="about-form-textaria" placeholder="A few words about you ..."></b-form-textarea>
<b-form-group
label="About Me"
label-class="form-control-label"
class="mb-0"
label-for="about-form-textaria"
>
<!-- <label class="form-control-label">About Me</label> -->
<b-form-textarea
rows="4"
value="A beautiful premium dashboard for BootstrapVue."
id="about-form-textaria"
placeholder="A few words about you ..."
></b-form-textarea>
</b-form-group>
</div>
</b-form>
</card>
</template>
@ -119,22 +116,22 @@ export default {
data() {
return {
user: {
company: 'Creative Code Inc.',
username: 'michael23',
email: '',
firstName: 'Mike',
lastName: 'Andrew',
address: 'Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09',
city: 'New York',
country: 'USA',
postalCode: '',
company: "Creative Code Inc.",
username: "michael23",
email: "",
firstName: "Mike",
lastName: "Andrew",
address: "Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09",
city: "New York",
country: "USA",
postalCode: "",
aboutMe: `Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.`
}
};
},
methods: {
updateProfile() {
alert('Your data: ' + JSON.stringify(this.user));
alert("Your data: " + JSON.stringify(this.user));
}
}
};

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