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

semicolon rule implemented

Browse Source
This commit is contained in:
Moriz Wahl 2021-03-24 17:35:30 +01:00
parent 1f13507eac
commit 6762a028f2
114 changed files with 2642 additions and 3092 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/.prettierrc.js Normal file
View File

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

16
frontend/babel.config.js
View File

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

10
frontend/intelij.webpack.js
View File

@ -1,12 +1,12 @@
// This configuration file is not used anywhere in the code, it's a hack to handle InteliJ relative path imports
// 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'),
},
},
}

26
frontend/jest.config.js
View File

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

12
frontend/server.js
View File

@ -1,7 +1,7 @@
var express = require("express");
var serveStatic = require("serve-static");
var app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
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.');

55
frontend/src/App.vue
View File

@ -27,35 +27,24 @@
</template>
<script>
import { ParticlesBg } from "particles-bg-vue";
import icon from "./icon.js";
import { ParticlesBg } from 'particles-bg-vue'
import icon from './icon.js'
export default {
name: "app",
name: 'app',
components: {
ParticlesBg
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");
if ($cookies.isKey('gdd_session_id') == true) {
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");
console.log('app.vue to Logout')
this.$store.dispatch('logout')
}
},
data() {
@ -70,19 +59,19 @@ export default {
body: icon,
alpha: [0.6, 0],
scale: [0.1, 0.4],
position: "all",
cross: "dead",
random: 2
}
};
position: 'all',
cross: 'dead',
random: 2,
},
}
},
methods: {
setLocale(locale) {
this.$i18n.locale = locale;
this.$store.commit("language", this.$i18n.locale);
}
}
};
this.$i18n.locale = locale
this.$store.commit('language', this.$i18n.locale)
},
},
}
</script>
<style>
.btn-primary pim {

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

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

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

@ -1,38 +1,38 @@
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);
const result = await axios.post(url, payload)
if (result.status !== 200) {
throw new Error("HTTP Status Error " + result.status);
throw new Error('HTTP Status Error ' + result.status)
}
if (result.data.state !== "success") {
throw new Error(result.data.msg);
if (result.data.state !== 'success') {
throw new Error(result.data.msg)
}
return { success: true, result };
return { success: true, result }
} catch (error) {
return { success: false, result: 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);
const payload = { session_id }
return apiPost(CONFIG.LOGIN_API_URL + 'logout', payload)
},
create: async (email, first_name, last_name, password) => {
const payload = {
@ -41,10 +41,10 @@ const loginAPI = {
last_name,
password,
emailType: EMAIL_TYPE.DEFAULT,
login_after_register: true
};
return apiPost(CONFIG.LOGIN_API_URL + "createUser", payload);
}
};
login_after_register: true,
}
return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload)
},
}
export default loginAPI;
export default loginAPI

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

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

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

@ -34,44 +34,44 @@
</fade-transition>
</template>
<script>
import { FadeTransition } from "vue2-transitions";
import { FadeTransition } from 'vue2-transitions'
export default {
name: "base-alert",
name: 'base-alert',
components: {
FadeTransition
FadeTransition,
},
created() {
console.log("base-alert gesetzt in =>", this.$route.path);
console.log('base-alert gesetzt in =>', this.$route.path)
},
props: {
type: {
type: String,
default: "default",
description: "Alert type"
default: 'default',
description: 'Alert type',
},
dismissible: {
type: Boolean,
default: false,
description: "Whether alert is dismissible (closeable)"
description: 'Whether alert is dismissible (closeable)',
},
icon: {
type: String,
default: "",
description: "Alert icon to display"
}
default: '',
description: 'Alert icon to display',
},
},
data() {
return {
visible: true
};
visible: true,
}
},
methods: {
dismissAlert() {
console.log("sdddddddddddddddddddddddd");
this.visible = false;
this.$store.state.loginfail = false;
}
}
};
console.log('sdddddddddddddddddddddddd')
this.visible = false
this.$store.state.loginfail = false
},
},
}
</script>

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

@ -12,7 +12,7 @@
{ 'btn-wd': wide },
{ 'btn-icon btn-fab': icon },
{ 'btn-link': link },
{ disabled: disabled }
{ disabled: disabled },
]"
>
<slot name="loading">
@ -23,7 +23,7 @@
</template>
<script>
export default {
name: "base-button",
name: 'base-button',
props: {
round: Boolean,
icon: Boolean,
@ -33,34 +33,34 @@ 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 {

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

@ -21,11 +21,7 @@
</slot>
<ul
class="dropdown-menu"
:class="[
{ show: isOpen },
{ 'dropdown-menu-right': menuOnRight },
menuClasses
]"
:class="[{ show: isOpen }, { 'dropdown-menu-right': menuOnRight }, menuClasses]"
>
<slot></slot>
</ul>
@ -33,65 +29,65 @@
</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",
default: true
}
description: 'Whether dropdown has arrow icon shown',
default: true,
},
},
data() {
return {
isOpen: false
};
isOpen: false,
}
},
methods: {
toggleDropDown() {
this.isOpen = !this.isOpen;
this.$emit("change", this.isOpen);
this.isOpen = !this.isOpen
this.$emit('change', this.isOpen)
},
closeDropDown() {
this.isOpen = false;
this.$emit("change", false);
}
}
};
this.isOpen = false
this.$emit('change', false)
},
},
}
</script>
<style lang="scss" scoped>
.dropdown {

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

@ -9,14 +9,14 @@
</template>
<script>
export default {
name: "base-header",
name: 'base-header',
props: {
type: {
type: String,
default: "success",
description: "Header background type"
}
}
};
default: 'success',
description: 'Header background type',
},
},
}
</script>
<style></style>

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

@ -29,41 +29,39 @@
</template>
<script>
export default {
name: "base-pagination",
name: 'base-pagination',
props: {
pageCount: {
type: Number,
default: 0,
description:
"Pagination page count. This should be specified in combination with perPage"
description: 'Pagination page count. This should be specified in combination with perPage',
},
perPage: {
type: Number,
default: 10,
description:
"Pagination per page. Should be specified with total or pageCount"
description: 'Pagination per page. Should be specified with total or pageCount',
},
total: {
type: Number,
default: 0,
description:
"Can be specified instead of pageCount. The page count in this case will be total/perPage"
'Can be specified instead of pageCount. The page count in this case will be total/perPage',
},
value: {
type: Number,
default: 1,
description: "Pagination value"
description: 'Pagination value',
},
size: {
type: String,
default: "",
description: "Pagination size"
default: '',
description: 'Pagination size',
},
align: {
type: String,
default: "",
description: "Pagination alignment (e.g center|start|end)"
}
}
};
default: '',
description: 'Pagination alignment (e.g center|start|end)',
},
},
}
</script>

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

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

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

@ -2,56 +2,55 @@
<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,
default: () => {
return {
min: 0,
max: 100
};
max: 100,
}
},
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,
default: () => {
return {};
return {}
},
description:
"[noUi Slider options](https://refreshless.com/nouislider/slider-options/)"
}
description: '[noUi Slider options](https://refreshless.com/nouislider/slider-options/)',
},
},
data() {
return {
slider: null
};
slider: null,
}
},
methods: {
createSlider() {
@ -59,38 +58,35 @@ export default {
start: this.value || this.start,
connect: Array.isArray(this.value) ? true : this.connect,
range: this.range,
...this.options
});
const slider = this.$el.noUiSlider;
slider.on("slide", () => {
let value = slider.get();
...this.options,
})
const slider = this.$el.noUiSlider
slider.on('slide', () => {
let value = slider.get()
if (value !== this.value) {
this.$emit("input", value);
this.$emit('input', value)
}
});
}
})
},
},
mounted() {
this.createSlider();
this.createSlider()
},
watch: {
value(newValue, oldValue) {
const slider = this.$el.noUiSlider;
const sliderValue = slider.get();
const slider = this.$el.noUiSlider
const sliderValue = slider.get()
if (newValue !== oldValue && sliderValue !== newValue) {
if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
if (
oldValue.length === newValue.length &&
oldValue.every((v, i) => v === newValue[i])
) {
slider.set(newValue);
if (oldValue.length === newValue.length && oldValue.every((v, i) => v === newValue[i])) {
slider.set(newValue)
}
} else {
slider.set(newValue);
slider.set(newValue)
}
}
}
}
};
},
},
}
</script>
<style></style>

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

@ -20,47 +20,47 @@
</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: {
tableClass() {
return this.type && `table-${this.type}`;
}
return this.type && `table-${this.type}`
},
},
methods: {
hasValue(item, column) {
return item[column.toLowerCase()] !== "undefined";
return item[column.toLowerCase()] !== 'undefined'
},
itemValue(item, column) {
return item[column.toLowerCase()];
}
}
};
return item[column.toLowerCase()]
},
},
}
</script>
<style></style>

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

@ -7,19 +7,19 @@
</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',
},
},
}
</script>
<style></style>

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

@ -5,14 +5,14 @@
</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',
},
},
}
</script>
<style></style>

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

@ -11,10 +11,7 @@
:active="index === $route.matched.length - 1"
style="display:inline-block"
>
<router-link
:to="{ name: route.name }"
v-if="index < $route.matched.length - 1"
>
<router-link :to="{ name: route.name }" v-if="index < $route.matched.length - 1">
{{ route.name }}
</router-link>
<span v-else>{{ route.name }}</span>
@ -23,21 +20,21 @@
</template>
<script>
import BreadCrumb from "./Breadcrumb";
import BreadCrumbItem from "./BreadcrumbItem";
import BreadCrumb from './Breadcrumb'
import BreadCrumbItem from './BreadcrumbItem'
export default {
name: "route-breadcrumb",
name: 'route-breadcrumb',
components: {
BreadCrumb,
BreadCrumbItem
BreadCrumbItem,
},
methods: {
getBreadName(route) {
return route.name;
}
}
};
return route.name
},
},
}
</script>
<style scoped></style>

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

@ -8,31 +8,31 @@
</template>
<script>
export default {
name: "button-checkbox",
name: 'button-checkbox',
props: {
value: {
type: Boolean,
description: "Checked value"
description: 'Checked value',
},
buttonClasses: {
type: [String, Object],
description: "Inner button css classes"
}
description: 'Inner button css classes',
},
},
model: {
prop: "value",
event: "change"
prop: 'value',
event: 'change',
},
computed: {
model: {
get() {
return this.value;
return this.value
},
set(val) {
this.$emit("change", val);
}
}
}
};
this.$emit('change', val)
},
},
},
}
</script>
<style></style>

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

@ -20,37 +20,36 @@
</template>
<script>
export default {
name: "button-radio-group",
name: 'button-radio-group',
props: {
options: {
type: Array,
description:
'Radio options. Should be an array of objects {value: "", label: ""}',
default: () => []
description: 'Radio options. Should be an array of objects {value: "", label: ""}',
default: () => [],
},
value: {
type: String,
description: "Radio value"
description: 'Radio value',
},
buttonClasses: {
type: [String, Object],
description: "Inner button css classes"
}
description: 'Inner button css classes',
},
},
model: {
prop: "value",
event: "change"
prop: 'value',
event: 'change',
},
computed: {
model: {
get() {
return this.value;
return this.value
},
set(val) {
this.$emit("change", val);
}
}
}
};
this.$emit('change', val)
},
},
},
}
</script>
<style></style>

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

@ -6,7 +6,7 @@
{ shadow: shadow },
{ [`shadow-${shadowSize}`]: shadowSize },
{ [`bg-gradient-${gradient}`]: gradient },
{ [`bg-${type}`]: type }
{ [`bg-${type}`]: type },
]"
>
<slot name="image"></slot>
@ -26,46 +26,46 @@
</template>
<script>
export default {
name: "card",
name: 'card',
props: {
type: {
type: String,
description: "Card type"
description: 'Card type',
},
gradient: {
type: String,
description: "Card background gradient type (warning,danger etc)"
description: 'Card background gradient type (warning,danger etc)',
},
hover: {
type: Boolean,
description: "Whether card should move on hover"
description: 'Whether card should move on hover',
},
shadow: {
type: Boolean,
description: "Whether card has shadow"
description: 'Whether card has shadow',
},
shadowSize: {
type: String,
description: "Card shadow size"
description: 'Card shadow size',
},
noBody: {
type: Boolean,
default: false,
description: "Whether card should have wrapper body class"
description: 'Whether card should have wrapper body class',
},
bodyClasses: {
type: [String, Object, Array],
description: "Card body css classes"
description: 'Card body css classes',
},
headerClasses: {
type: [String, Object, Array],
description: "Card header css classes"
description: 'Card header css classes',
},
footerClasses: {
type: [String, Object, Array],
description: "Card footer css classes"
}
}
};
description: 'Card footer css classes',
},
},
}
</script>
<style></style>

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

@ -35,24 +35,24 @@
</card>
</template>
<script>
import Card from "./Card.vue";
import Card from './Card.vue'
export default {
name: "stats-card",
name: 'stats-card',
components: {
Card
Card,
},
props: {
type: {
type: String,
default: "primary"
default: 'primary',
},
icon: String,
img: String,
title: String,
subTitle: String,
iconClasses: [String, Array]
}
};
iconClasses: [String, Array],
},
}
</script>
<style></style>

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

@ -1,30 +1,30 @@
import { Bar, mixins } from "vue-chartjs";
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
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: {
extraOptions: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
data() {
return {
ctx: null
};
ctx: null,
}
},
mounted() {
this.$watch(
"chartData",
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);
this.renderChart(this.chartData, this.extraOptions)
}
},
{ immediate: true }
);
}
};
{ immediate: true },
)
},
}

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

@ -1,29 +1,29 @@
import { Line, mixins } from "vue-chartjs";
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
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: {
extraOptions: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
data() {
return {
ctx: null
};
ctx: null,
}
},
mounted() {
this.$watch(
"chartData",
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);
this.renderChart(this.chartData, this.extraOptions)
}
},
{ immediate: true }
);
}
};
{ immediate: true },
)
},
}

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

@ -1,203 +1,201 @@
import { parseOptions } from "@/components/Charts/optionHelpers";
import Chart from "chart.js";
import { parseOptions } from '@/components/Charts/optionHelpers'
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',
},
}
function chartOptions() {
let { colors, mode, fonts } = Charts;
let { colors, mode, fonts } = Charts
// Options
let options = {
defaults: {
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: {
padding: 0
padding: 0,
},
legend: {
display: false,
position: "bottom",
position: 'bottom',
labels: {
usePointStyle: true,
padding: 16
}
padding: 16,
},
},
elements: {
point: {
radius: 0,
backgroundColor: colors.theme["primary"]
backgroundColor: colors.theme['primary'],
},
line: {
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,
borderWidth: 4
}
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) {
let data = chart.data;
let content = "";
let data = chart.data
let content = ''
data.labels.forEach(function(label, index) {
let bgColor = data.datasets[0].backgroundColor[index];
let bgColor = data.datasets[0].backgroundColor[index]
content += '<span class="chart-legend-item">';
content += '<span class="chart-legend-item">'
content +=
'<i class="chart-legend-indicator" style="background-color: ' +
bgColor +
'"></i>';
content += label;
content += "</span>";
});
'<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>'
content += label
content += '</span>'
})
return content;
}
}
}
};
return content
},
},
},
}
// 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]
zeroLineBorderDashOffset: [2],
},
ticks: {
beginAtZero: true,
padding: 10,
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
padding: 20,
},
maxBarThickness: 10
});
maxBarThickness: 10,
})
return options;
return options
}
let initialized = false;
let initialized = false
export function initGlobalOptions() {
if (initialized) {
return;
return
}
parseOptions(Chart, chartOptions());
initialized = true;
parseOptions(Chart, chartOptions())
initialized = true
}
export const basicOptions = {
maintainAspectRatio: false,
legend: {
display: false
display: false,
},
responsive: true
};
responsive: true,
}
export let blueChartOptions = {
scales: {
yAxes: [
{
gridLines: {
color: Charts.colors.gray[700],
zeroLineColor: 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: {
@ -206,16 +204,16 @@ 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',
},
},
],
xAxes: [
@ -223,14 +221,14 @@ 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',
},
},
],
},
}

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

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

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

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

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

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

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

@ -1,28 +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
};
target: 'Target',
expanded: false,
}
const Wrapper = () => {
return mount(CloseButton, { localVue, propsData });
};
return mount(CloseButton, { localVue, propsData })
}
describe("mount", () => {
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()
})
})
})

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

@ -15,22 +15,22 @@
</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)
},
},
}
</script>
<style></style>

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

@ -1,34 +1,28 @@
<template>
<div
id="accordion"
role="tablist"
aria-multiselectable="true"
class="accordion"
>
<div id="accordion" role="tablist" aria-multiselectable="true" class="accordion">
<slot></slot>
</div>
</template>
<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() {
return {
@ -36,50 +30,50 @@ export default {
multipleActive: this.multipleActive,
addItem: this.addItem,
removeItem: this.removeItem,
deactivateAll: this.deactivateAll
};
deactivateAll: this.deactivateAll,
}
},
data() {
return {
items: []
};
items: [],
}
},
methods: {
addItem(item) {
const index = this.$slots.default.indexOf(item.$vnode);
const index = this.$slots.default.indexOf(item.$vnode)
if (index !== -1) {
this.items.splice(index, 0, item);
this.items.splice(index, 0, item)
}
},
removeItem(item) {
const items = this.items;
const index = items.indexOf(item);
const items = this.items
const index = items.indexOf(item)
if (index > -1) {
items.splice(index, 1);
items.splice(index, 1)
}
},
deactivateAll() {
this.items.forEach(item => {
item.active = false;
});
item.active = false
})
},
activateItem() {
if (this.activeIndex !== -1) {
this.items[this.activeIndex].active = true;
this.items[this.activeIndex].active = true
}
}
},
},
mounted() {
this.$nextTick(() => {
this.activateItem();
});
this.activateItem()
})
},
watch: {
activeIndex() {
this.activateItem();
}
}
};
this.activateItem()
},
},
}
</script>
<style scoped></style>

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

@ -26,67 +26,67 @@
</b-card>
</template>
<script>
import { CollapseTransition } from "vue2-transitions";
import { CollapseTransition } from 'vue2-transitions'
export default {
name: "collapse-item",
name: 'collapse-item',
components: {
CollapseTransition
CollapseTransition,
},
props: {
title: {
type: String,
default: "",
description: "Collapse item title"
default: '',
description: 'Collapse item title',
},
id: String
id: String,
},
inject: {
animationDuration: {
default: 250
default: 250,
},
multipleActive: {
default: false
default: false,
},
addItem: {
default: () => {}
default: () => {},
},
removeItem: {
default: () => {}
default: () => {},
},
deactivateAll: {
default: () => {}
}
default: () => {},
},
},
computed: {
itemId() {
return this.id || this.title;
}
return this.id || this.title
},
},
data() {
return {
active: false
};
active: false,
}
},
methods: {
activate() {
let wasActive = this.active;
let wasActive = this.active
if (!this.multipleActive) {
this.deactivateAll();
this.deactivateAll()
}
this.active = !wasActive;
console.log(this.active);
}
this.active = !wasActive
console.log(this.active)
},
},
mounted() {
this.addItem(this);
this.addItem(this)
},
destroyed() {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
this.$el.parentNode.removeChild(this.$el)
}
this.removeItem(this);
}
};
this.removeItem(this)
},
}
</script>
<style></style>

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

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

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

@ -17,7 +17,7 @@
{ focused: focused },
{ 'input-group-alternative': alternative },
{ 'has-label': label || $slots.label },
inputGroupClasses
inputGroupClasses,
]"
>
<div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
@ -39,7 +39,7 @@
:class="[
{ 'is-valid': valid && validated && successMessage },
{ 'is-invalid': invalid && validated },
inputClasses
inputClasses,
]"
/>
</slot>
@ -68,79 +68,78 @@
<script>
export default {
inheritAttrs: false,
name: "base-input",
name: 'base-input',
props: {
required: {
type: Boolean,
description: "Whether input is required (adds an asterix *)"
description: 'Whether input is required (adds an asterix *)',
},
group: {
type: Boolean,
description:
"Whether input is an input group (manual override in special cases)"
description: 'Whether input is an input group (manual override in special cases)',
},
alternative: {
type: Boolean,
description: "Whether input is of alternative layout"
description: 'Whether input is of alternative layout',
},
label: {
type: String,
description: "Input label (text before input)"
description: 'Input label (text before input)',
},
error: {
type: String,
description: "Input error (below input)"
description: 'Input error (below input)',
},
successMessage: {
type: String,
description: "Input success message",
default: ""
description: 'Input success message',
default: '',
},
labelClasses: {
type: String,
description: "Input label css classes",
default: "form-control-label"
description: 'Input label css classes',
default: 'form-control-label',
},
inputClasses: {
type: String,
description: "Input css classes"
description: 'Input css classes',
},
inputGroupClasses: {
type: String,
description: "Input group css classes"
description: 'Input group css classes',
},
value: {
type: [String, Number],
description: "Input value"
description: 'Input value',
},
type: {
type: String,
description: "Input type",
default: "text"
description: 'Input type',
default: 'text',
},
appendIcon: {
type: String,
description: "Append icon (right)"
description: 'Append icon (right)',
},
prependIcon: {
type: String,
description: "Prepend icon (left)"
description: 'Prepend icon (left)',
},
rules: {
type: [String, Array, Object],
description: "Vee validate validation rules",
default: ""
description: 'Vee validate validation rules',
default: '',
},
name: {
type: String,
description: "Input name (used for validation)",
default: ""
}
description: 'Input name (used for validation)',
default: '',
},
},
data() {
return {
focused: false
};
focused: false,
}
},
computed: {
listeners() {
@ -148,41 +147,41 @@ export default {
...this.$listeners,
input: this.updateValue,
focus: this.onFocus,
blur: this.onBlur
};
blur: this.onBlur,
}
},
slotData() {
return {
focused: this.focused,
error: this.error,
...this.listeners
};
...this.listeners,
}
},
hasIcon() {
const { append, prepend } = this.$slots;
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);
let value = evt.target.value
this.$emit('input', value)
},
onFocus(evt) {
this.focused = true;
this.$emit("focus", evt);
this.focused = true
this.$emit('focus', evt)
},
onBlur(evt) {
this.focused = false;
this.$emit("blur", evt);
}
}
};
this.focused = false
this.$emit('blur', evt)
},
},
}
</script>
<style></style>

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

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

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

@ -2,11 +2,11 @@
<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 {};
Vue.use(Loading.directive)
export default {}
</script>
<style>
#loading {

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

@ -14,10 +14,7 @@
@hide="closeModal"
:header-class="headerClasses"
:footer-class="footerClasses"
:content-class="[
gradient ? `bg-gradient-${gradient}` : '',
...modalContentClasses
]"
:content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]"
:body-class="bodyClasses"
:aria-hidden="!show"
>
@ -46,82 +43,82 @@
</slide-y-up-transition>
</template>
<script>
import { SlideYUpTransition } from "vue2-transitions";
import { SlideYUpTransition } from 'vue2-transitions'
export default {
name: "modal",
name: 'modal',
components: {
SlideYUpTransition
SlideYUpTransition,
},
props: {
show: Boolean,
showClose: {
type: Boolean,
default: true
default: true,
},
type: {
type: String,
default: "",
default: '',
validator(value) {
let acceptedValues = ["", "notice", "mini"];
return acceptedValues.indexOf(value) !== -1;
let acceptedValues = ['', 'notice', 'mini']
return acceptedValues.indexOf(value) !== -1
},
description: 'Modal type (notice|mini|"") '
description: 'Modal type (notice|mini|"") ',
},
modalClasses: {
type: [Object, String],
description: "Modal dialog css classes"
description: 'Modal dialog css classes',
},
size: {
type: String,
description: "Modal size",
description: 'Modal size',
validator(value) {
let acceptedValues = ["", "sm", "lg"];
return acceptedValues.indexOf(value) !== -1;
}
let acceptedValues = ['', 'sm', 'lg']
return acceptedValues.indexOf(value) !== -1
},
},
modalContentClasses: {
type: [Object, String],
description: "Modal dialog content css classes"
description: 'Modal dialog content css classes',
},
gradient: {
type: String,
description: "Modal gradient type (danger, primary etc)"
description: 'Modal gradient type (danger, primary etc)',
},
headerClasses: {
type: [Object, String],
description: "Modal Header css classes"
description: 'Modal Header css classes',
},
bodyClasses: {
type: [Object, String],
description: "Modal Body css classes"
description: 'Modal Body css classes',
},
footerClasses: {
type: [Object, String],
description: "Modal Footer css classes"
description: 'Modal Footer css classes',
},
animationDuration: {
type: Number,
default: 500,
description: "Modal transition duration"
}
description: 'Modal transition duration',
},
},
methods: {
closeModal() {
this.$emit("update:show", false);
this.$emit("close");
}
this.$emit('update:show', false)
this.$emit('close')
},
},
watch: {
show(val) {
if (val) {
this.$refs["app-modal"].show();
this.$refs['app-modal'].show()
} else {
this.$refs["app-modal"].hide();
this.$refs['app-modal'].hide()
}
}
}
};
},
},
}
</script>
<style>
.modal-backdrop {

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

@ -15,23 +15,14 @@
invalid-feedback="Name is required"
:state="nameState"
>
<b-form-input
id="name-input"
v-model="name"
:state="nameState"
required
></b-form-input>
<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"
>
<base-button type="link" class="ml-auto" @click="$store.state.modals = false">
abbrechen
</base-button>
</template>
@ -40,47 +31,47 @@
<script>
export default {
name: "modal",
name: 'modal',
data() {
return {
name: "",
name: '',
nameState: null,
submittedNames: []
};
submittedNames: [],
}
},
/*Modal*/
checkFormValidity() {
const valid = this.$refs.form.checkValidity();
this.nameState = valid;
return valid;
const valid = this.$refs.form.checkValidity()
this.nameState = valid
return valid
},
resetModal() {
this.name = "";
this.nameState = null;
this.name = ''
this.nameState = null
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault();
bvModalEvt.preventDefault()
// Trigger submit handler
this.handleSubmit();
this.handleSubmit()
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return;
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");
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");
});
}
};
this.$bvModal.hide('modal-prevent-closing')
})
},
}
</script>
<style>
.modal-backdrop {

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

@ -18,10 +18,7 @@
</button>
</slot>
<b-navbar-toggle
target="nav-text-collapse"
@click.stop="toggleMenu"
></b-navbar-toggle>
<b-navbar-toggle target="nav-text-collapse" @click.stop="toggleMenu"></b-navbar-toggle>
<b-collapse
is-nav
@ -38,87 +35,86 @@
</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: "",
description:
"Navbar menu (items) classes. Can be used to align menu items to the right/left"
default: '',
description: '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"
].includes(value);
'',
'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 color = `bg-${this.type}`
let classes = [
{ "navbar-transparent": this.transparent },
{ [`navbar-expand-${this.expand}`]: this.expand }
];
{ 'navbar-transparent': this.transparent },
{ [`navbar-expand-${this.expand}`]: this.expand },
]
if (this.position) {
classes.push(`navbar-${this.position}`);
classes.push(`navbar-${this.position}`)
}
if (!this.transparent) {
classes.push(color);
classes.push(color)
}
return classes;
return classes
},
hasMenu() {
return this.$slots.default;
}
return this.$slots.default
},
},
methods: {
toggleMenu() {
this.$emit("change", !this.show);
this.$emit('change', !this.show)
},
closeMenu() {
this.$emit("change", false);
}
}
};
this.$emit('change', false)
},
},
}
</script>
<style></style>

4
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>

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

@ -19,14 +19,14 @@ 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',
},
},
}
</script>
<style></style>

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

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

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

@ -12,41 +12,41 @@
</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
Notification,
},
props: {
transitionDuration: {
type: Number,
default: 200
default: 200,
},
overlap: {
type: Boolean,
default: false
}
default: false,
},
},
data() {
return {
notifications: this.$notifications.state
};
notifications: this.$notifications.state,
}
},
methods: {
removeNotification(timestamp) {
this.$notifications.removeNotification(timestamp);
}
this.$notifications.removeNotification(timestamp)
},
},
created() {
this.$notifications.settings.overlap = this.overlap;
this.$notifications.settings.overlap = this.overlap
},
watch: {
overlap: function(newVal) {
this.$notifications.settings.overlap = newVal;
}
}
};
this.$notifications.settings.overlap = newVal
},
},
}
</script>

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

@ -1,66 +1,66 @@
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
showClose: true,
},
setOptions(options) {
this.settings = Object.assign(this.settings, options);
this.settings = Object.assign(this.settings, options)
},
removeNotification(timestamp) {
const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp)
if (indexToDelete !== -1) {
this.state.splice(indexToDelete, 1);
this.state.splice(indexToDelete, 1)
}
},
addNotification(notification) {
if (typeof notification === "string" || notification instanceof String) {
notification = { message: notification };
if (typeof notification === 'string' || notification instanceof String) {
notification = { message: notification }
}
notification.timestamp = new Date();
notification.timestamp = new Date()
notification.timestamp.setMilliseconds(
notification.timestamp.getMilliseconds() + this.state.length
);
notification = Object.assign({}, this.settings, notification);
this.state.push(notification);
notification.timestamp.getMilliseconds() + this.state.length,
)
notification = Object.assign({}, this.settings, notification)
this.state.push(notification)
},
notify(notification) {
if (Array.isArray(notification)) {
notification.forEach(notificationInstance => {
this.addNotification(notificationInstance);
});
this.addNotification(notificationInstance)
})
} else {
this.addNotification(notification);
this.addNotification(notification)
}
}
};
},
}
const NotificationsPlugin = {
install(Vue, options) {
let app = new Vue({
data: {
notificationStore: NotificationStore
notificationStore: NotificationStore,
},
methods: {
notify(notification) {
this.notificationStore.notify(notification);
}
}
});
Vue.prototype.$notify = app.notify;
Vue.prototype.$notifications = app.notificationStore;
Vue.component("Notifications", Notifications);
this.notificationStore.notify(notification)
},
},
})
Vue.prototype.$notify = app.notify
Vue.prototype.$notifications = app.notificationStore
Vue.component('Notifications', Notifications)
if (options) {
NotificationStore.setOptions(options);
NotificationStore.setOptions(options)
}
}
};
},
}
export default NotificationsPlugin;
export default NotificationsPlugin

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

@ -2,7 +2,7 @@
<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)
@ -11,71 +11,71 @@ import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
// Local registration
export default {
name: "SearchUser",
name: 'SearchUser',
components: {
VueBootstrapTypeahead
VueBootstrapTypeahead,
},
data() {
return {
user: "",
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"
]
};
'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);
}
}
};
alert(this.data.user)
},
},
}
</script>

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

@ -18,39 +18,24 @@
<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>
<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"
>
<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>
<span>{{ $t('site.overview.account_overview') }}</span>
</router-link>
<router-link
to="/profile"
class="dropdown-item text-lg text-muted"
>
<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>
<span>{{ $t('site.navbar.my-profil') }}</span>
</router-link>
<router-link
to="/profileedit"
class="dropdown-item text-lg text-muted"
>
<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>
<span>{{ $t('site.navbar.settings') }}</span>
</router-link>
<router-link
to="/transactions"
class="dropdown-item text-lg text-muted"
>
<router-link to="/transactions" class="dropdown-item text-lg text-muted">
<i class="ni ni-calendar-grid-58"></i>
<span>Transactions</span>
</router-link>
@ -63,7 +48,7 @@
<div class="dropdown-divider"></div>
<div @click="logout" class="dropdown-item text-lg text-muted">
<i class="ni ni-support-16"></i>
{{ $t("logout") }}
{{ $t('logout') }}
</div>
</base-dropdown>
</ul>
@ -82,9 +67,7 @@
</router-link>
</div>
<div class="col-6 collapse-close">
<navbar-toggle-button
@click.native="closeSidebar"
></navbar-toggle-button>
<navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button>
</div>
</div>
</div>
@ -95,7 +78,7 @@
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a class="nav-link text-lg" href="#!" @click="logout">
{{ $t("logout") }}
{{ $t('logout') }}
</a>
</li>
</ul>
@ -104,48 +87,47 @@
</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",
name: 'sidebar',
components: {
NavbarToggleButton,
VueQrcode
VueQrcode,
},
props: {
logo: {
type: String,
default: "img/brand/green.png",
description: "Gradido Sidebar app logo"
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"
}
description: 'Whether sidebar should autoclose on mobile when clicking an item',
},
},
provide() {
return {
autoClose: this.autoClose
};
autoClose: this.autoClose,
}
},
methods: {
closeSidebar() {
this.$sidebar.displaySidebar(false);
this.$sidebar.displaySidebar(false)
},
showSidebar() {
this.$sidebar.displaySidebar(true);
this.$sidebar.displaySidebar(true)
},
logout() {
this.$store.dispatch("logout");
}
this.$store.dispatch('logout')
},
},
beforeDestroy() {
if (this.$sidebar.showSidebar) {
this.$sidebar.showSidebar = false;
this.$sidebar.showSidebar = false
}
}
};
},
}
</script>

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

@ -29,21 +29,14 @@
</a>
<collapse-transition>
<div
v-if="$slots.default || this.isMenu"
v-show="!collapsed"
class="collapse show"
>
<div v-if="$slots.default || this.isMenu" v-show="!collapsed" class="collapse show">
<ul class="nav nav-sm flex-column">
<slot></slot>
</ul>
</div>
</collapse-transition>
<slot
name="title"
v-if="children.length === 0 && !$slots.default && link.path"
>
<slot name="title" v-if="children.length === 0 && !$slots.default && link.path">
<component
:to="link.path"
@click.native="linkClick"
@ -65,135 +58,129 @@
</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
CollapseTransition,
},
props: {
menu: {
type: Boolean,
default: false,
description:
"Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior."
"Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior.",
},
link: {
type: Object,
default: () => {
return {
name: "",
path: "",
children: []
};
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() {
return {
addLink: this.addChild,
removeLink: this.removeChild
};
removeLink: this.removeChild,
}
},
inject: {
addLink: { default: null },
removeLink: { default: null },
autoClose: {
default: true
}
default: true,
},
},
data() {
return {
children: [],
collapsed: true
};
collapsed: true,
}
},
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;
return this.children.length > 0 || this.menu === true
},
isActive() {
if (this.$route && this.$route.path) {
let matchingRoute = this.children.find(c =>
this.$route.path.startsWith(c.link.path)
);
let matchingRoute = this.children.find(c => this.$route.path.startsWith(c.link.path))
if (matchingRoute !== undefined) {
return true;
return true
}
}
return false;
}
return false
},
},
methods: {
addChild(item) {
const index = this.$slots.default.indexOf(item.$vnode);
this.children.splice(index, 0, item);
const index = this.$slots.default.indexOf(item.$vnode)
this.children.splice(index, 0, item)
},
removeChild(item) {
const tabs = this.children;
const index = tabs.indexOf(item);
tabs.splice(index, 1);
const tabs = this.children
const index = tabs.indexOf(item)
tabs.splice(index, 1)
},
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("");
const matches = name.match(/\b(\w)/g)
return matches.join('')
},
linkClick() {
if (
this.autoClose &&
this.$sidebar &&
this.$sidebar.showSidebar === true
) {
this.$sidebar.displaySidebar(false);
if (this.autoClose && this.$sidebar && this.$sidebar.showSidebar === true) {
this.$sidebar.displaySidebar(false)
}
},
collapseMenu() {
this.collapsed = !this.collapsed;
this.collapsed = !this.collapsed
},
collapseSubMenu(link) {
link.collapsed = !link.collapsed;
}
link.collapsed = !link.collapsed
},
},
mounted() {
if (this.addLink) {
this.addLink(this);
this.addLink(this)
}
if (this.link.collapsed !== undefined) {
this.collapsed = this.link.collapsed;
this.collapsed = this.link.collapsed
}
if (this.isActive && this.isMenu) {
this.collapsed = false;
this.collapsed = false
}
},
destroyed() {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
this.$el.parentNode.removeChild(this.$el)
}
if (this.removeLink) {
this.removeLink(this);
this.removeLink(this)
}
}
};
},
}
</script>
<style>
.sidebar-menu-item {

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

@ -1,43 +1,43 @@
import Sidebar from "./SideBar.vue";
import SidebarItem from "./SidebarItem.vue";
import Sidebar from './SideBar.vue'
import SidebarItem from './SidebarItem.vue'
const SidebarStore = {
showSidebar: false,
sidebarLinks: [],
isMinimized: false,
displaySidebar(value) {
this.showSidebar = value;
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"));
}, 180);
window.dispatchEvent(new Event('resize'))
}, 180)
// we stop the simulation of Window Resize after the animations are completed
setTimeout(() => {
clearInterval(simulateWindowResize);
}, 1000);
clearInterval(simulateWindowResize)
}, 1000)
this.isMinimized = !this.isMinimized;
}
};
this.isMinimized = !this.isMinimized
},
}
const SidebarPlugin = {
install(Vue, options) {
if (options && options.sidebarLinks) {
SidebarStore.sidebarLinks = options.sidebarLinks;
SidebarStore.sidebarLinks = options.sidebarLinks
}
let app = new Vue({
data: {
sidebarStore: SidebarStore
}
});
Vue.prototype.$sidebar = app.sidebarStore;
Vue.component("side-bar", Sidebar);
Vue.component("sidebar-item", SidebarItem);
}
};
sidebarStore: SidebarStore,
},
})
Vue.prototype.$sidebar = app.sidebarStore
Vue.component('side-bar', Sidebar)
Vue.component('sidebar-item', SidebarItem)
},
}
export default SidebarPlugin;
export default SidebarPlugin

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

@ -11,23 +11,23 @@
</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
};
active: false,
}
},
mounted() {
this.addTab(this);
this.addTab(this)
},
destroyed() {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
this.$el.parentNode.removeChild(this.$el)
}
this.removeTab(this);
}
};
this.removeTab(this)
},
}
</script>
<style></style>

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

@ -4,7 +4,7 @@
:class="[
{ 'col-md-4': vertical && !tabNavWrapperClasses },
{ 'col-12': centered && !tabNavWrapperClasses },
tabNavWrapperClasses
tabNavWrapperClasses,
]"
>
<b-nav
@ -14,7 +14,7 @@
`nav-pills-${type}`,
{ 'flex-column': vertical },
{ 'justify-content-center': centered },
tabNavClasses
tabNavClasses,
]"
>
<b-nav-item
@ -37,7 +37,7 @@
:class="[
{ 'tab-space': !vertical },
{ 'col-md-8': vertical && !tabContentClasses },
tabContentClasses
tabContentClasses,
]"
>
<slot></slot>
@ -47,115 +47,109 @@
<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])
},
},
},
provide() {
return {
addTab: this.addTab,
removeTab: this.removeTab
};
removeTab: this.removeTab,
}
},
props: {
type: {
type: String,
default: "primary",
default: 'primary',
validator: value => {
let acceptedValues = [
"primary",
"info",
"success",
"warning",
"danger"
];
return acceptedValues.indexOf(value) !== -1;
}
let acceptedValues = ['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,
value: String
value: String,
},
data() {
return {
tabs: []
};
tabs: [],
}
},
methods: {
findAndActivateTab(title) {
let tabToActivate = this.tabs.find(t => t.title === title);
let tabToActivate = this.tabs.find(t => t.title === title)
if (tabToActivate) {
this.activateTab(tabToActivate);
this.activateTab(tabToActivate)
}
},
activateTab(tab) {
if (this.handleClick) {
this.handleClick(tab);
this.handleClick(tab)
}
this.deactivateTabs();
tab.active = true;
this.deactivateTabs()
tab.active = true
},
deactivateTabs() {
this.tabs.forEach(tab => {
tab.active = false;
});
tab.active = false
})
},
addTab(tab) {
const index = this.$slots.default.indexOf(tab.$vnode);
const index = this.$slots.default.indexOf(tab.$vnode)
if (!this.activeTab && index === 0) {
tab.active = true;
tab.active = true
}
if (this.activeTab === tab.name) {
tab.active = true;
tab.active = true
}
this.tabs.splice(index, 0, tab);
this.tabs.splice(index, 0, tab)
},
removeTab(tab) {
const tabs = this.tabs;
const index = tabs.indexOf(tab);
const tabs = this.tabs
const index = tabs.indexOf(tab)
if (index > -1) {
tabs.splice(index, 1);
tabs.splice(index, 1)
}
}
},
},
mounted() {
this.$nextTick(() => {
if (this.value) {
this.findAndActivateTab(this.value);
this.findAndActivateTab(this.value)
}
});
})
},
watch: {
value(newVal) {
this.findAndActivateTab(newVal);
}
}
};
this.findAndActivateTab(newVal)
},
},
}
</script>
<style scoped></style>

48
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,
@ -48,5 +48,5 @@ export {
BaseButton,
Collapse,
CollapseItem,
LoadingPanel
};
LoadingPanel,
}

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

@ -5,27 +5,24 @@
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/",
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/",
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/",
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/"
};
process.env.COMMUNITY_API_TRANSACTION_SEND_COINS || 'http://localhost/transaction-send-coins/',
}
const CONFIG = {
...environment,
...server
};
...server,
}
export default CONFIG;
export default CONFIG

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

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

56
frontend/src/i18n.js
View File

@ -1,45 +1,41 @@
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 = {};
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",
currency: "GDD",
abbreviate: true
}
style: 'currency',
currency: 'GDD',
abbreviate: true,
},
},
"de-DE": {
'de-DE': {
currency: {
style: "currency",
currency: "GDD",
abbreviate: true
}
}
};
style: 'currency',
currency: 'GDD',
abbreviate: true,
},
},
}
export default new VueI18n({
locale: "en",
fallbackLocale: "en",
locale: 'en',
fallbackLocale: 'en',
messages: loadLocaleMessages(),
numberFormats
});
numberFormats,
})

2
frontend/src/icon.js
View File

File diff suppressed because one or more lines are too long

26
frontend/src/main.js
View File

@ -1,25 +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);
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),
})

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

@ -1,67 +1,67 @@
// 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";
locale.use(lang);
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 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 'vue-good-table/dist/vue-good-table.css'
import VueMoment from "vue-moment";
import VueMoment from 'vue-moment'
Object.keys(rules).forEach(rule => {
extend(rule, {
...rules[rule], // copies rule configuration
message: messages[rule] // assign message
});
});
message: messages[rule], // assign message
})
})
export default {
install(Vue) {
Vue.use(GlobalComponents);
Vue.use(GlobalDirectives);
Vue.use(SideBar);
Vue.use(Notifications);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(VueGoodTablePlugin);
Vue.use(VueMoment);
Vue.use(VueQrcodeReader);
Vue.use(VueQrcode);
Vue.use(VueFlatPickr);
Vue.use(GlobalComponents)
Vue.use(GlobalDirectives)
Vue.use(SideBar)
Vue.use(Notifications)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(VueGoodTablePlugin)
Vue.use(VueMoment)
Vue.use(VueQrcodeReader)
Vue.use(VueQrcode)
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!
},
})
},
}

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

@ -1,45 +1,45 @@
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 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'
/**
* You can register global components here and use them as a plugin in your main Vue instance
*/
const GlobalComponents = {
install(Vue) {
Vue.component(Badge.name, Badge);
Vue.component(BaseAlert.name, BaseAlert);
Vue.component(BaseButton.name, BaseButton);
Vue.component(BaseCheckbox.name, BaseCheckbox);
Vue.component(BaseHeader.name, BaseHeader);
Vue.component(BaseInput.name, BaseInput);
Vue.component(BaseDropdown.name, BaseDropdown);
Vue.component(BaseNav.name, BaseNav);
Vue.component(BasePagination.name, BasePagination);
Vue.component(BaseProgress.name, BaseProgress);
Vue.component(BaseRadio.name, BaseRadio);
Vue.component(Card.name, Card);
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.use(Tooltip);
Vue.use(Popover);
}
};
Vue.component(Badge.name, Badge)
Vue.component(BaseAlert.name, BaseAlert)
Vue.component(BaseButton.name, BaseButton)
Vue.component(BaseCheckbox.name, BaseCheckbox)
Vue.component(BaseHeader.name, BaseHeader)
Vue.component(BaseInput.name, BaseInput)
Vue.component(BaseDropdown.name, BaseDropdown)
Vue.component(BaseNav.name, BaseNav)
Vue.component(BasePagination.name, BasePagination)
Vue.component(BaseProgress.name, BaseProgress)
Vue.component(BaseRadio.name, BaseRadio)
Vue.component(Card.name, Card)
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.use(Tooltip)
Vue.use(Popover)
},
}
export default GlobalComponents;
export default GlobalComponents

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

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

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

@ -1,30 +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",
linkActiveClass: 'active',
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) {
return 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;
let language = to.params.lang
if (!language) {
language = "de";
language = 'de'
}
next();
});
next()
})
export default router;
export default router

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

@ -1,84 +1,84 @@
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: '/thx',
component: () => import('../views/Pages/thx.vue'),
},
{
path: "/register",
component: () => import("../views/Pages/Register.vue")
path: '/register',
component: () => import('../views/Pages/Register.vue'),
},
{
path: "/password",
component: () => import("../views/Pages/Password.vue")
path: '/password',
component: () => import('../views/Pages/Password.vue'),
},
{
path: "/explorer",
name: "Explorer",
component: () => import("../views/Pages/Explorer.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
}
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
}
}
]
}
];
requiresAuth: true,
},
},
],
},
]
export default routes;
export default routes

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

@ -1,33 +1,33 @@
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);
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",
components: { default: Starter }
}
]
}
path: 'dashboard',
name: 'dashboard',
components: { default: Starter },
},
],
},
],
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
return savedPosition
}
if (to.hash) {
return { selector: to.hash };
return { selector: to.hash }
}
return { x: 0, y: 0 };
}
});
return { x: 0, y: 0 }
},
})

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

@ -1,40 +1,40 @@
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: "",
name: '',
balance: 0,
balance_gdt: 0
balance_gdt: 0,
},
ajaxCreateData: {
session_id: "",
email: "",
session_id: '',
email: '',
amount: 0,
target_date: "2021-02-19T13:25:36+00:00",
memo: "",
auto_sign: true
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',
},
},
},
getters: {
//isLoggedIn: (state /*, getters */) => {
@ -44,62 +44,62 @@ 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);
if (state.language == "de") {
state.sizeDE = "big";
state.sizeGB = "normal";
console.log('mutation: language', language)
state.language = language
$cookies.set('gdd_lang', language)
if (state.language == 'de') {
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) => {
//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;
console.log('mutation: user_balance')
state.user.balance = balance / 10000
},
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) => {
//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);
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");
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);
commit('loginfail', true)
//dispatch('logout')
}
},
passwordReset: async data => {
console.log("<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>", data.email);
console.log('<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>', data.email)
},
schoepfen: async data => {
// http://localhost/transaction-creations/ajaxCreate
@ -110,63 +110,61 @@ export const store = new Vuex.Store({
data.email,
data.first_name,
data.last_name,
data.password
);
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");
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");
console.log('action: logout')
// Are we actually logged in?
if (state.session_id) {
const result = await loginAPI.logout(state.session_id);
const result = await loginAPI.logout(state.session_id)
// The result can be error, but thats ok with us
}
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)
},
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);
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);
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')
}
}
}
});
},
},
})

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

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

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

@ -13,7 +13,7 @@
<template slot="footer">
<span class="text-success mr-2">3.48%</span>
<span class="text-nowrap">
{{ $t("site.overview.since_last_month") }}
{{ $t('site.overview.since_last_month') }}
</span>
</template>
</stats-card>
@ -29,7 +29,7 @@
<template slot="footer">
<span class="text-success mr-2">12.18%</span>
<span class="text-nowrap">
{{ $t("site.overview.since_last_month") }}
{{ $t('site.overview.since_last_month') }}
</span>
</template>
</stats-card>
@ -45,7 +45,7 @@
<template slot="footer">
<span class="text-danger mr-2">5.72%</span>
<span class="text-nowrap">
{{ $t("site.overview.since_last_month") }}
{{ $t('site.overview.since_last_month') }}
</span>
</template>
</stats-card>
@ -61,7 +61,7 @@
<template slot="footer">
<span class="text-success mr-2">54.8%</span>
<span class="text-nowrap">
{{ $t("site.overview.since_last_month") }}
{{ $t('site.overview.since_last_month') }}
</span>
</template>
</stats-card>
@ -135,11 +135,7 @@
</b-col>
</b-row>
<bar-chart
:height="350"
ref="barChart"
:chart-data="redBarChart.chartData"
></bar-chart>
<bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
</card>
</b-col>
</b-row>
@ -215,21 +211,21 @@
</template>
<script>
// Charts
import * as chartConfigs from "@/components/Charts/config";
import LineChart from "@/components/Charts/LineChart";
import BarChart from "@/components/Charts/BarChart";
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";
import BaseProgress from '@/components/BaseProgress'
import StatsCard from '@/components/Cards/StatsCard'
import SearchUser from '@/components/SearchUser'
// Tables
import PageVisitsTable from "./Dashboard/PageVisitsTable";
import AdminUserSearch from "./AdminOverview/AdminUserSearch";
import AdminUserCreation from "./AdminOverview/AdminUserCreation";
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: {
@ -239,7 +235,7 @@ export default {
StatsCard,
//PageVisitsTable,
AdminUserSearch,
AdminUserCreation
AdminUserCreation,
//SearchUser
},
data() {
@ -251,149 +247,149 @@ export default {
userlist: [],
transactionlist: [],
transiencelist: [],
filter: "",
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 }
{ 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]
[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]
}
label: 'Performance',
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
},
],
labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
extraOptions: chartConfigs.blueChartOptions
extraOptions: chartConfigs.blueChartOptions,
},
redBarChart: {
chartData: {
labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: "Sales",
data: [25, 20, 30, 22, 17, 29]
}
]
label: 'Sales',
data: [25, 20, 30, 22, 17, 29],
},
],
},
extraOptions: chartConfigs.blueChartOptions
}
};
extraOptions: chartConfigs.blueChartOptions,
},
}
},
methods: {
TransienceList() {
axios.get("/json-example/admin_transience_list.json").then(
axios.get('/json-example/admin_transience_list.json').then(
d => {
//console.log(d);
this.transiencelist = d.data;
this.transiencelist = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
TransactionList() {
axios.get("/json-example/admin_transaction_list.json").then(
axios.get('/json-example/admin_transaction_list.json').then(
d => {
//console.log(d);
this.transactionlist = d.data;
this.transactionlist = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
UserList() {
axios.get("/json-example/admin_userlist.json").then(
axios.get('/json-example/admin_userlist.json').then(
d => {
//console.log(d);
this.userlist = d.data;
this.userlist = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
CommunityStatistic() {
axios.get("/json-example/admin_community_statistic.json").then(
axios.get('/json-example/admin_community_statistic.json').then(
d => {
//console.log(d);
this.communitystatistic = d.data;
this.communitystatistic = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
ChartsStatistic() {
axios.get("/json-example/admin_charts_statistic.json").then(
axios.get('/json-example/admin_charts_statistic.json').then(
d => {
//console.log(d);
this.chartsstatistic = d.data;
this.chartsstatistic = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
CardStatistic() {
axios.get("/json-example/admin_card_statistic.json").then(
axios.get('/json-example/admin_card_statistic.json').then(
d => {
//console.log(d);
this.cardstatistic = d.data;
this.cardstatistic = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
StatisticDatas() {
axios.get("/json-example/admin_statisticdatas.json").then(
axios.get('/json-example/admin_statisticdatas.json').then(
d => {
//console.log(d);
this.userdata = d.data;
this.userdata = d.data
},
error => {
console.log(error);
}
);
console.log(error)
},
)
},
initBigChart(index) {
let chartData = {
datasets: [
{
label: "Performance",
data: this.bigLineChart.allData[index]
}
label: 'Performance',
data: this.bigLineChart.allData[index],
},
],
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'],
}
this.bigLineChart.chartData = chartData
this.bigLineChart.activeIndex = index
},
},
mounted() {
this.initBigChart(0);
this.TransienceList();
this.TransactionList();
this.UserList();
this.CommunityStatistic();
this.ChartsStatistic();
this.CardStatistic();
}
};
this.initBigChart(0)
this.TransienceList()
this.TransactionList()
this.UserList()
this.CommunityStatistic()
this.ChartsStatistic()
this.CardStatistic()
},
}
</script>
<style>
.el-table .cell {

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

@ -19,11 +19,11 @@
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle'
placeholder: 'durchsuche die tabelle',
}"
:pagination-options="{
enabled: true,
mode: 'pages'
mode: 'pages',
}"
>
<div slot="table-actions">
@ -61,302 +61,272 @@
<script>
export default {
name: "admin-user-creation",
name: 'admin-user-creation',
data() {
return {
creation: {
createdAt: "",
group: "",
id: "",
name: "",
originalIndex: "",
text: "",
vgt_id: ""
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
}
]
};
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);
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.
@ -365,13 +335,13 @@ export default {
// params.event - click event
},
onSearch(params) {
console.log("onSearch", params);
console.log('onSearch', params)
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
},
mySearchFn(params) {
//console.log("mySearchFn", params)
}
}
};
},
},
}
</script>

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

@ -18,11 +18,11 @@
enabled: true,
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle'
placeholder: 'durchsuche die tabelle',
}"
:pagination-options="{
enabled: true,
mode: 'pages'
mode: 'pages',
}"
>
<div slot="table-actions">
@ -54,10 +54,7 @@
</b-col>
</b-row>
<b-row class="">
<label
for="example-email-input"
class="col-md-3 col-form-label form-control-label"
>
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">
Email
</label>
<b-col md="10">
@ -88,11 +85,7 @@
<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"
>
<a href="#!" @click="showNewUser = true" class="btn btn-sm btn-warning">
schliesen
</a>
</b-col>
@ -114,10 +107,7 @@
</b-col>
</b-row>
<b-row class="">
<label
for="example-email-input"
class="col-md-3 col-form-label form-control-label"
>
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">
Email
</label>
<b-col md="10">
@ -147,107 +137,107 @@
<script>
export default {
name: "admin-user-search",
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"
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"
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"
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"
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"
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"
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"
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"
}
]
};
name: 'Tellohn',
email: 'temail@tutanota.com',
createdAt: '2009-10-31',
group: 'gruppe5',
},
],
}
},
methods: {
onRowClick(params) {
console.log(params.row);
this.showNewUser = false;
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
@ -255,7 +245,7 @@ export default {
// params.event - click event
},
onSearch(params) {
console.log(params);
console.log(params)
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
},
@ -264,18 +254,18 @@ export default {
},
validateEmail(value) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
this.msg["email"] = "";
this.msg['email'] = ''
} else {
this.msg["email"] = "Invalid Email Address";
this.msg['email'] = 'Invalid Email Address'
}
}
},
},
watch: {
mail(value) {
// binding this to the data value in the email input
this.email = value;
this.validateEmail(value);
}
}
};
this.email = value
this.validateEmail(value)
},
},
}
</script>

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

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

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

@ -112,11 +112,7 @@
</b-col>
</b-row>
<bar-chart
:height="350"
ref="barChart"
:chart-data="redBarChart.chartData"
></bar-chart>
<bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
</card>
</b-col>
</b-row>
@ -137,17 +133,17 @@
</template>
<script>
// Charts
import * as chartConfigs from "@/components/Charts/config";
import LineChart from "@/components/Charts/LineChart";
import BarChart from "@/components/Charts/BarChart";
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 BaseProgress from '@/components/BaseProgress'
import StatsCard from '@/components/Cards/StatsCard'
// Tables
import SocialTrafficTable from "./Dashboard/SocialTrafficTable";
import PageVisitsTable from "./Dashboard/PageVisitsTable";
import SocialTrafficTable from './Dashboard/SocialTrafficTable'
import PageVisitsTable from './Dashboard/PageVisitsTable'
export default {
components: {
@ -156,60 +152,60 @@ export default {
//BaseProgress,
StatsCard,
PageVisitsTable,
SocialTrafficTable
SocialTrafficTable,
},
data() {
return {
bigLineChart: {
allData: [
[0, 20, 10, 30, 15, 40, 20, 60, 60],
[0, 20, 5, 25, 10, 30, 15, 40, 40]
[0, 20, 5, 25, 10, 30, 15, 40, 40],
],
activeIndex: 0,
chartData: {
datasets: [
{
label: "Performance",
data: [0, 20, 10, 30, 15, 40, 20, 60, 60]
}
label: 'Performance',
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
},
],
labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
extraOptions: chartConfigs.blueChartOptions
extraOptions: chartConfigs.blueChartOptions,
},
redBarChart: {
chartData: {
labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: "Sales",
data: [25, 20, 30, 22, 17, 29]
}
]
label: 'Sales',
data: [25, 20, 30, 22, 17, 29],
},
],
},
extraOptions: chartConfigs.blueChartOptions
}
};
extraOptions: chartConfigs.blueChartOptions,
},
}
},
methods: {
initBigChart(index) {
let chartData = {
datasets: [
{
label: "Performance",
data: this.bigLineChart.allData[index]
}
label: 'Performance',
data: this.bigLineChart.allData[index],
},
],
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'],
}
this.bigLineChart.chartData = chartData
this.bigLineChart.activeIndex = index
},
},
mounted() {
this.initBigChart(0);
}
};
this.initBigChart(0)
},
}
</script>
<style>
.el-table .cell {

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

@ -17,11 +17,11 @@
skipDiacritics: true,
searchFn: mySearchFn,
placeholder: 'durchsuche die tabelle',
externalQuery: searchQuery
externalQuery: searchQuery,
}"
:pagination-options="{
enabled: true,
mode: 'pages'
mode: 'pages',
}"
>
<div slot="table-actions">
@ -38,101 +38,101 @@
</template>
<script>
import SocialTrafficTable from "./SocialTrafficTable";
import SocialTrafficTable from './SocialTrafficTable'
export default {
name: "my-component",
name: 'my-component',
components: {
SocialTrafficTable
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",
name: 'John',
age: 20,
createdAt: "1976-10-25",
score: 0.03343
createdAt: '1976-10-25',
score: 0.03343,
},
{
id: 2,
name: "Jane",
name: 'Jane',
age: 24,
createdAt: "2011-10-31",
score: 0.03343
createdAt: '2011-10-31',
score: 0.03343,
},
{
id: 3,
name: "Susan",
name: 'Susan',
age: 16,
createdAt: "2011-10-30",
score: 0.03343
createdAt: '2011-10-30',
score: 0.03343,
},
{
id: 4,
name: "Chris",
name: 'Chris',
age: 55,
createdAt: "2011-10-11",
score: 0.03343
createdAt: '2011-10-11',
score: 0.03343,
},
{
id: 5,
name: "Dan",
name: 'Dan',
age: 40,
createdAt: "2011-10-21",
score: 0.03343
createdAt: '2011-10-21',
score: 0.03343,
},
{
id: 6,
name: "Bohn",
name: 'Bohn',
age: 70,
createdAt: "2011-10-31",
score: 0.03343
createdAt: '2011-10-31',
score: 0.03343,
},
{
id: 7,
name: "Tellohn",
name: 'Tellohn',
age: 56,
createdAt: "2009-10-31",
score: 0.13343
createdAt: '2009-10-31',
score: 0.13343,
},
{
id: 7,
name: "Tellohn",
name: 'Tellohn',
age: 56,
createdAt: "2009-10-31",
score: 0.03343
}
]
};
createdAt: '2009-10-31',
score: 0.03343,
},
],
}
},
methods: {
onRowClick(params) {
console.log(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
@ -140,13 +140,13 @@ export default {
// params.event - click event
},
onSearch(params) {
console.log(params);
console.log(params)
// params.searchTerm - term being searched for
// params.rowCount - number of rows that match search
},
mySearchFn(params) {
console.log(params);
}
}
};
console.log(params)
},
},
}
</script>

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

@ -11,26 +11,14 @@
</b-row>
</template>
<el-table
class="table-responsive table"
:data="tableData"
header-row-class-name="thead-light"
>
<el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
<el-table-column label="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 }">
@ -41,58 +29,52 @@
</b-card>
</template>
<script>
import {
Table,
TableColumn,
DropdownMenu,
DropdownItem,
Dropdown
} from "element-ui";
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
export default {
name: "page-visits-table",
name: 'page-visits-table',
components: {
[Table.name]: Table,
[TableColumn.name]: TableColumn,
[Dropdown.name]: Dropdown,
[DropdownItem.name]: DropdownItem,
[DropdownMenu.name]: DropdownMenu
[DropdownMenu.name]: DropdownMenu,
},
data() {
return {
tableData: [
{
page: "/argon/",
visitors: "4,569",
unique: "340",
bounceRate: "46,53%"
page: '/argon/',
visitors: '4,569',
unique: '340',
bounceRate: '46,53%',
},
{
page: "/argon/index.html",
visitors: "3,985",
unique: "319",
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/charts.html',
visitors: '3,513',
unique: '294',
bounceRate: '36,49%',
},
{
page: "/argon/tables.html",
visitors: "2,050",
unique: "147",
bounceRate: "50,87%"
page: '/argon/tables.html',
visitors: '2,050',
unique: '147',
bounceRate: '50,87%',
},
{
page: "/argon/profile.html",
visitors: "1,795",
unique: "190",
bounceRate: "46,53%"
}
]
};
}
};
page: '/argon/profile.html',
visitors: '1,795',
unique: '190',
bounceRate: '46,53%',
},
],
}
},
}
</script>
<style></style>

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

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

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

@ -66,11 +66,7 @@
<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>
@ -78,10 +74,10 @@
</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: {
@ -89,10 +85,10 @@ export default {
let map,
lat = 40.748817,
lng = -73.985428,
color = "#5e72e4";
map = document.getElementById("map-custom");
color = '#5e72e4'
map = document.getElementById('map-custom')
let myLatlng = new google.maps.LatLng(lat, lng);
let myLatlng = new google.maps.LatLng(lat, lng)
let mapOptions = {
zoom: 12,
scrollwheel: false,
@ -100,74 +96,74 @@ export default {
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{ color: "#444444" }]
featureType: 'administrative',
elementType: 'labels.text.fill',
stylers: [{ color: '#444444' }],
},
{
featureType: "landscape",
elementType: "all",
stylers: [{ color: "#f2f2f2" }]
featureType: 'landscape',
elementType: 'all',
stylers: [{ color: '#f2f2f2' }],
},
{
featureType: "poi",
elementType: "all",
stylers: [{ visibility: "off" }]
featureType: 'poi',
elementType: 'all',
stylers: [{ visibility: 'off' }],
},
{
featureType: "road",
elementType: "all",
stylers: [{ saturation: -100 }, { lightness: 45 }]
featureType: 'road',
elementType: 'all',
stylers: [{ saturation: -100 }, { lightness: 45 }],
},
{
featureType: "road.highway",
elementType: "all",
stylers: [{ visibility: "simplified" }]
featureType: 'road.highway',
elementType: 'all',
stylers: [{ visibility: 'simplified' }],
},
{
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [{ visibility: "off" }]
featureType: 'road.arterial',
elementType: 'labels.icon',
stylers: [{ visibility: 'off' }],
},
{
featureType: "transit",
elementType: "all",
stylers: [{ visibility: "off" }]
featureType: 'transit',
elementType: 'all',
stylers: [{ visibility: 'off' }],
},
{
featureType: "water",
elementType: "all",
stylers: [{ color: color }, { visibility: "on" }]
}
]
};
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!"
});
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>";
'<p>A beautiful premium dashboard for Bootstrap 4.</p></div>'
let infowindow = new google.maps.InfoWindow({
content: contentString
});
content: contentString,
})
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker)
})
},
},
mounted() {
GoogleMapsLoader.load(google => {
this.initMap(google);
});
}
};
this.initMap(google)
})
},
}
</script>

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

@ -1592,24 +1592,24 @@
</div>
</template>
<script>
import Vue from "vue";
import VueClipboard from "vue-clipboard2";
import BaseHeader from "@/components/BaseHeader";
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
import BaseHeader from '@/components/BaseHeader'
Vue.use(VueClipboard);
Vue.use(VueClipboard)
export default {
name: "icons",
name: 'icons',
components: {
BaseHeader
BaseHeader,
},
methods: {
onCopy() {
this.$notify({
type: "info",
message: "Copied to clipboard"
});
}
}
};
type: 'info',
message: 'Copied to clipboard',
})
},
},
}
</script>
<style></style>

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

@ -25,25 +25,25 @@
</div>
</template>
<script>
import GddStatus from "./KontoOverview/GddStatus.vue";
import GddSend from "./KontoOverview/GddSend.vue";
import GddTable from "./KontoOverview/GddTable.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",
name: 'Overview',
components: {
GddStatus,
GddSend,
GddTable
GddTable,
//GddAddWork2,
//GddWorkTable
},
created() {
this.$store.dispatch("accountBalance", $cookies.get("gdd_session_id"));
}
};
this.$store.dispatch('accountBalance', $cookies.get('gdd_session_id'))
},
}
</script>
<style>

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

@ -5,7 +5,7 @@
<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") }}
{{ $t('site.overview.add_work') }}
</span>
</base-button>
<b-collapse id="collapse-2" class="mt-2">
@ -62,12 +62,7 @@
Stunden
</label>
<b-col md="10">
<base-input
type="text"
v-model="form.hours"
disabled
class="form-control-lg"
/>
<base-input type="text" v-model="form.hours" disabled class="form-control-lg" />
</b-col>
</b-row>
<b-row class="form-group">
@ -87,9 +82,7 @@
</b-col>
</b-row>
<b-row class="form-group">
<label
class="col-md-2 col-form-label form-control-label form-control-lg"
>
<label class="col-md-2 col-form-label form-control-label form-control-lg">
Ort
</label>
<b-col md="10">
@ -101,9 +94,7 @@
</b-col>
</b-row>
<b-row class="form-group">
<label
class="col-md-2 col-form-label form-control-label form-control-lg"
>
<label class="col-md-2 col-form-label form-control-label form-control-lg">
Kategorie
</label>
<b-col md="10">
@ -125,9 +116,7 @@
></textarea>
</base-input>
<b-row class="form-group">
<label
class="col-md-2 col-form-label form-control-label form-control-lg"
>
<label class="col-md-2 col-form-label form-control-label form-control-lg">
Tätigkeit
</label>
<b-col md="8">
@ -166,59 +155,56 @@
<script>
export default {
name: "GDDAddWork",
name: 'GDDAddWork',
data() {
return {
show: true,
form: {
from: "",
to: "",
hours: "",
text: "",
from: '',
to: '',
hours: '',
text: '',
gdd: 0.0,
location: "",
text2: "",
sendtime: ""
location: '',
text2: '',
sendtime: '',
},
timestamp: ""
};
timestamp: '',
}
},
created() {
setInterval(this.getNow, 2000);
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 date = today.getDate()+'.'+(today.getMonth()+1)+'.'+ today.getFullYear();
//const time = today.getHours() + ":" + today.getMinutes();
//const dateTime = date +', '+ time;
this.timestamp = new Date();
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);
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));
this.form.sendtime = new Date()
alert(JSON.stringify(this.form))
},
onReset(event) {
event.preventDefault();
event.preventDefault()
// Reset our form values
// Trick to reset/clear native browser form validation state
this.show = false;
this.show = false
this.$nextTick(() => {
this.show = true;
});
}
}
};
this.show = true
})
},
},
}
</script>

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

@ -8,38 +8,24 @@
<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>
<flat-pickr class="form-control" v-model="date" :config="config"></flat-pickr>
</base-input>
</b-col>
<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"
>
<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"
>
<button class="btn btn-info text-right" @click.prevent="submitForm2">
save new Report
</button>
</div>
@ -54,38 +40,24 @@
<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>
<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>
<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"
>
<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"
>
<button class="btn btn-info text-right" @click.prevent="submitForm2">
save new Report
</button>
</div>
@ -97,8 +69,8 @@
<p>
Du hast diesen Monat
{{ stundenSumme > 0 ? "schon " : "noch keine" }}
{{ stundenSumme > 0 ? "" + stundenSumme : "" }}
{{ stundenSumme > 0 ? 'schon ' : 'noch keine' }}
{{ stundenSumme > 0 ? '' + stundenSumme : '' }}
Stunden eingetragen
</p>
</b-tab>
@ -119,29 +91,19 @@
</b-col>
<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"
>
<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"
>
<button class="btn btn-info text-right" @click.prevent="submitForm3">
save new Report
</button>
</div>
@ -157,49 +119,49 @@
</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",
name: 'GDDAddWork2',
components: { flatPickr },
data() {
return {
date: null,
config: {
altInput: false,
dateFormat: "d-m-Y",
dateFormat: 'd-m-Y',
minDate: this.$moment()
.startOf("month")
.format("DD.MM.YYYY"),
maxDate: this.$moment().format("DD.MM.YYYY"),
mode: "range"
.startOf('month')
.format('DD.MM.YYYY'),
maxDate: this.$moment().format('DD.MM.YYYY'),
mode: 'range',
},
lastConfig: {
altInput: false,
dateFormat: "d-m-Y",
dateFormat: 'd-m-Y',
minDate: this.$moment()
.month(this.$moment().month() - 1)
.startOf("month")
.format("DD.MM.YYYY"),
.startOf('month')
.format('DD.MM.YYYY'),
maxDate: this.$moment()
.month(this.$moment().month() - 1)
.endOf("month")
.format("DD.MM.YYYY"),
mode: "range"
.endOf('month')
.format('DD.MM.YYYY'),
mode: 'range',
},
beforLastConfig: {
altInput: false,
dateFormat: "d-m-Y",
dateFormat: 'd-m-Y',
minDate: this.$moment()
.month(this.$moment().month() - 2)
.startOf("month")
.format("DD.MM.YYYY"),
.startOf('month')
.format('DD.MM.YYYY'),
maxDate: this.$moment()
.month(this.$moment().month() - 2)
.endOf("month")
.format("DD.MM.YYYY"),
mode: "range"
.endOf('month')
.format('DD.MM.YYYY'),
mode: 'range',
},
index: 0,
form: [],
@ -215,44 +177,44 @@ export default {
.daysInMonth(),
beforLastMonth: this.$moment()
.month(this.$moment().month() - 2)
.daysInMonth()
.daysInMonth(),
},
names: {
thisMonth: this.$moment()
.month(this.$moment().month())
.format("MMMM"),
.format('MMMM'),
lastMonth: this.$moment()
.month(this.$moment().month() - 1)
.format("MMMM"),
.format('MMMM'),
beforLastMonth: this.$moment()
.month(this.$moment().month() - 2)
.format("MMMM")
}
};
.format('MMMM'),
},
}
},
created() {},
watch: {
$form: function() {
stunden(this.form);
}
stunden(this.form)
},
},
methods: {
getTR(m, i) {
console.log(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);
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);
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]);
console.log('>arr[n]=> ', this.form[n])
if (this.form[n] > 0) {
this.stundenSumme += parseInt(this.form[n]);
this.stundenSumme += parseInt(this.form[n])
}
}
this.messages.push({
@ -260,43 +222,43 @@ export default {
MonthsNumber: mon,
DaysNumber: i,
HoursNumber: hour,
DestinationText: "",
TextDecoded: ""
});
this.index++;
console.log("this.stundenSumme ende=> ", this.stundenSumme);
DestinationText: '',
TextDecoded: '',
})
this.index++
console.log('this.stundenSumme ende=> ', this.stundenSumme)
},
addNewMessage: function() {
this.messages.push({
DaysNumber: "",
TextDecoded: ""
});
DaysNumber: '',
TextDecoded: '',
})
},
deleteNewMessage: function(event) {
console.log("deleteNewMessage:event) => ", event);
console.log('deleteNewMessage:event) => ', event)
//console.log("deleteNewMessage:this.events.splice(this.event) => ", this.events.splice(this.event))
this.form.splice(event, null);
this.messages.splice(index, 1);
this.index--;
this.form.splice(event, null)
this.messages.splice(index, 1)
this.index--
},
submitForm: function(e) {
console.log(this.messages);
console.log(this.messages)
this.messages = [{ DaysNumber: "", TextDecoded: "" }];
this.submitted = true;
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");
console.log('textFocus TODO')
},
newWorkForm() {
console.log("newWorkForm TODO");
}
}
};
console.log('newWorkForm TODO')
},
},
}
</script>

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

@ -4,9 +4,8 @@
<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.
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">
@ -15,11 +14,7 @@
- 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"
/>
<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">
@ -31,11 +26,7 @@
<qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture>
</b-row> -->
<qrcode-stream
class="mt-3"
@decode="onDecode"
@detect="onDetect"
></qrcode-stream>
<qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect"></qrcode-stream>
<b-container>
<b-row>
@ -61,10 +52,7 @@
>
<br />
<div>
<qrcode-drop-zone
id="input-0"
v-model="form.img"
></qrcode-drop-zone>
<qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
</div>
<br />
<div>
@ -99,10 +87,7 @@
<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-col v-if="$store.state.user.balance == form.amount" class="text-right">
<b-badge variant="primary">
maximale anzahl GDD zum versenden erreicht!
</b-badge>
@ -149,12 +134,12 @@
<b-row>
<b-col>
<b-button type="reset" variant="secondary">
{{ $t("form.cancel") }}
{{ $t('form.cancel') }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button type="submit" variant="success">
{{ $t("form.send_now") }}
{{ $t('form.send_now') }}
</b-button>
</b-col>
</b-row>
@ -169,59 +154,53 @@
</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
BIcon,
},
data() {
return {
scan: false,
show: true,
form: {
img: "",
email: "",
amount: "",
memo: ""
img: '',
email: '',
amount: '',
memo: '',
},
sent: false
};
sent: false,
}
},
methods: {
sendbutton() {
this.sent = true;
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);
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;
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;
location, // QR code coordinates
} = await promise
// console.log('onDetect promise',promise)
//console.log('JSON.parse(decodedString)',JSON.parse(promise) )
const arr = JSON.parse(decodedString);
const arr = JSON.parse(decodedString)
} catch (error) {
// ...
}
@ -229,38 +208,36 @@ export default {
async onSubmit() {
//event.preventDefault()
//console.log("onSubmit", this.form)
this.$store.state.ajaxCreateData.session_id = this.$cookies.get(
"gdd_session_id"
);
this.$store.state.ajaxCreateData.email = this.form.email;
this.$store.state.ajaxCreateData.amount = this.form.amount;
this.$store.state.ajaxCreateData.memo = this.form.memo;
this.$store.state.ajaxCreateData.target_date = Date.now();
this.$store.state.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");
this.$store.dispatch('ajaxCreate')
},
onReset(event) {
event.preventDefault();
this.form.email = "";
this.form.amount = "";
this.show = false;
event.preventDefault()
this.form.email = ''
this.form.amount = ''
this.show = false
this.$nextTick(() => {
this.show = true;
});
}
this.show = true
})
},
},
computed: {
state() {
return this.name.length >= 4;
return this.name.length >= 4
},
invalidFeedback() {
if (this.name.length > 0) {
return "Geben Sie mindestens 4 Zeichen ein.";
return 'Geben Sie mindestens 4 Zeichen ein.'
}
return "Bitte geben Sie eine GDD Adresse ein.";
}
}
};
return 'Bitte geben Sie eine GDD Adresse ein.'
},
},
}
</script>
<style>
video {

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

@ -7,11 +7,7 @@
</stats-card>
</b-col>
<b-col xl="6" md="6">
<stats-card
type="gradient-orange"
sub-title="balance_gdt"
class="mb-4 h1"
>
<stats-card type="gradient-orange" sub-title="balance_gdt" class="mb-4 h1">
{{ $n($store.state.user.balance_gdt) }} GDT
</stats-card>
</b-col>
@ -21,6 +17,6 @@
<script>
export default {
name: "GddStatus"
};
name: 'GddStatus',
}
</script>

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

@ -58,16 +58,10 @@
{{ 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 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-collapse :id="'collapse-1-inner' + item.transaction_id" class="mt-2">
<b-card>{{ item }}</b-card>
</b-collapse>
</b-card>
@ -91,60 +85,50 @@
</template>
<script>
import axios from "axios";
import communityAPI from "../../apis/communityAPI";
import axios from 'axios'
import communityAPI from '../../apis/communityAPI'
export default {
name: "GddTable",
name: 'GddTable',
data() {
return {
form: [],
fields: [
"balance",
"date",
"memo",
"name",
"transaction_id",
"type",
"details"
],
fields: ['balance', 'date', 'memo', 'name', 'transaction_id', 'type', 'details'],
items: [],
count: 0
};
count: 0,
}
},
async created() {
const result = await communityAPI.transactions(
this.$store.state.session_id
);
const result = await communityAPI.transactions(this.$store.state.session_id)
if (result.success) {
this.$store.state.user.balance_gdt = result.result.data.gdtSum;
this.items = result.result.data.transactions;
this.count = result.result.data.count;
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);
console.log('error', result)
}
},
computed: {
filteredItems(a) {
// console.log("filteredItems date",a.items)
return 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";
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>';
}
}
};
'<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
},
},
}
</script>
<style>
.el-table .cell {

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

@ -10,13 +10,7 @@
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>
<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 }}
@ -29,51 +23,51 @@
<script>
export default {
name: "GddWorkTable",
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"
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"
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"
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"
}
]
};
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";
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>';
}
}
};
'<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
},
},
}
</script>
<style>
.el-table .cell {

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

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

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

@ -77,10 +77,7 @@
Vorname
</label>
<b-col md="10">
<base-input
placeholder="Jon "
v-model="rfname"
></base-input>
<base-input placeholder="Jon " v-model="rfname"></base-input>
</b-col>
</b-row>
<b-row class="form-group">
@ -88,10 +85,7 @@
Nachname
</label>
<b-col md="10">
<base-input
placeholder=" Snow"
v-model="rlname"
></base-input>
<base-input placeholder=" Snow" v-model="rlname"></base-input>
</b-col>
</b-row>
<b-row class="form-group">
@ -144,10 +138,7 @@
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
class="fill-default"
points="2560 0 2560 100 0 100"
></polygon>
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
</svg>
</div>
</div>
@ -158,40 +149,40 @@
// Components
export default {
name: "Landing",
name: 'Landing',
data() {
return {
lemail: "",
lpwd: "",
rfname: "",
rlname: "",
remail: "",
rpwd: ""
};
lemail: '',
lpwd: '',
rfname: '',
rlname: '',
remail: '',
rpwd: '',
}
},
methods: {
login() {
//if (this.lemail !== '' || this.lpwd !== '') { // TODO this should be done via form validation
this.$store.dispatch("login", {
this.$store.dispatch('login', {
email: this.lemail,
password: this.lpwd
});
password: this.lpwd,
})
//}
},
createUser() {
this.$store.dispatch("createUser", {
this.$store.dispatch('createUser', {
email: this.remail,
first_name: this.rfname,
last_name: this.rlname,
password: this.rpwd
});
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");
}
}
};
console.log('app.vue admin login(): ' + this.$store.state.is_admin)
this.modals = false
this.$store.commit('loginAsAdmin')
this.$router.push('/AdminOverview')
},
},
}
</script>

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

@ -7,28 +7,28 @@
:link="{
name: 'Kontoübersicht',
path: '/overview',
icon: 'ni ni-tv-2 text-primary'
icon: 'ni ni-tv-2 text-primary',
}"
></sidebar-item>
<sidebar-item
:link="{
name: 'User Profile',
path: '/profile',
icon: 'ni ni-single-02 text-yellow'
icon: 'ni ni-single-02 text-yellow',
}"
></sidebar-item>
<sidebar-item
:link="{
name: 'Login',
path: '/login',
icon: 'ni ni-key-25 text-info'
icon: 'ni ni-key-25 text-info',
}"
></sidebar-item>
<sidebar-item
:link="{
name: 'Register',
path: '/register',
icon: 'ni ni-circle-08 text-pink'
icon: 'ni ni-circle-08 text-pink',
}"
></sidebar-item>
</template>
@ -68,47 +68,47 @@
</template>
<script>
/* eslint-disable no-new */
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'
function hasElement(className) {
return document.getElementsByClassName(className).length > 0;
return document.getElementsByClassName(className).length > 0
}
function initScrollbar(className) {
if (hasElement(className)) {
new PerfectScrollbar(`.${className}`);
new PerfectScrollbar(`.${className}`)
} else {
// try to init it later in case this component is loaded async
setTimeout(() => {
initScrollbar(className);
}, 100);
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
FadeTransition,
},
methods: {
initScrollbar() {
let isWindows = navigator.platform.startsWith("Win");
let isWindows = navigator.platform.startsWith('Win')
if (isWindows) {
initScrollbar("sidenav");
initScrollbar('sidenav')
}
}
},
},
mounted() {
this.initScrollbar();
}
};
this.initScrollbar()
},
}
</script>
<style lang="scss"></style>

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

@ -22,11 +22,7 @@
</router-link>
</b-col>
<b-col cols="6" class="collapse-close">
<button
type="button"
class="navbar-toggler"
@click="showMenu = false"
>
<button type="button" class="navbar-toggler" @click="showMenu = false">
<span></span>
<span></span>
</button>
@ -48,26 +44,17 @@
<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"
>
<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"
>
<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">
@ -81,19 +68,19 @@
</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
ZoomCenterTransition,
},
props: {
backgroundColor: {
type: String,
default: "black"
}
default: 'black',
},
},
data() {
return {
@ -101,60 +88,60 @@ export default {
menuTransitionDuration: 250,
pageTransitionDuration: 200,
year: new Date().getFullYear(),
pageClass: "login-page"
};
pageClass: 'login-page',
}
},
computed: {
title() {
return `${this.$route.name} Page`;
}
return `${this.$route.name} Page`
},
},
methods: {
toggleNavbar() {
document.body.classList.toggle("nav-open");
this.showMenu = !this.showMenu;
document.body.classList.toggle('nav-open')
this.showMenu = !this.showMenu
},
closeMenu() {
document.body.classList.remove("nav-open");
this.showMenu = false;
document.body.classList.remove('nav-open')
this.showMenu = false
},
setBackgroundColor() {
document.body.classList.add("bg-default");
document.body.classList.add('bg-default')
},
removeBackgroundColor() {
document.body.classList.remove("bg-default");
document.body.classList.remove('bg-default')
},
updateBackground() {
if (!this.$route.meta.noBodyBackground) {
this.setBackgroundColor();
this.setBackgroundColor()
} else {
this.removeBackgroundColor();
this.removeBackgroundColor()
}
}
},
},
beforeDestroy() {
this.removeBackgroundColor();
this.removeBackgroundColor()
},
beforeRouteUpdate(to, from, next) {
// Close the mobile menu first then transition to next page
if (this.showMenu) {
this.closeMenu();
this.closeMenu()
setTimeout(() => {
next();
}, this.menuTransitionDuration);
next()
}, this.menuTransitionDuration)
} else {
next();
next()
}
},
watch: {
$route: {
immediate: true,
handler: function() {
this.updateBackground();
}
}
}
};
this.updateBackground()
},
},
},
}
</script>
<style lang="scss">
$scaleSize: 0.8;

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

@ -9,32 +9,32 @@
</div>
</template>
<script>
import ContentFooter from "./ContentFooter.vue";
import ContentFooter from './ContentFooter.vue'
export default {
components: {
ContentFooter
ContentFooter,
},
data() {
return {
year: new Date().getFullYear(),
pageClass: "login-page"
};
pageClass: 'login-page',
}
},
computed: {
title() {
return `${this.$route.name} Page`;
}
return `${this.$route.name} Page`
},
},
methods: {
setLocale(locale) {
this.$i18n.locale = locale;
this.$i18n.locale = locale
//this.$router.push({
// params: { lang: locale }
//})
//this.hideDropdown()
}
}
};
},
},
}
</script>
<style lang="scss">
.card {

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

@ -7,11 +7,11 @@
</div>
</template>
<script>
import { FadeTransition } from "vue2-transitions";
import { FadeTransition } from 'vue2-transitions'
export default {
components: {
FadeTransition
}
};
FadeTransition,
},
}
</script>
<style></style>

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

@ -17,13 +17,10 @@
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
@ -37,9 +34,9 @@
export default {
data() {
return {
year: new Date().getFullYear()
};
}
};
year: new Date().getFullYear(),
}
},
}
</script>
<style></style>

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

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

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

@ -15,12 +15,7 @@
<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>
@ -40,10 +35,7 @@
</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>
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
</span>
</b-media-body>
</b-media>
@ -51,19 +43,19 @@
<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">
<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="#!">
@ -74,7 +66,7 @@
<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>
@ -82,52 +74,51 @@
</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,
BaseNav,
VueQrcode
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: {
routeName() {
const { name } = this.$route;
return this.capitalizeFirstLetter(name);
}
const { name } = this.$route
return this.capitalizeFirstLetter(name)
},
},
data() {
return {
activeNotifications: false,
showMenu: false,
searchModalVisible: false,
searchQuery: ""
};
searchQuery: '',
}
},
methods: {
capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
return string.charAt(0).toUpperCase() + string.slice(1)
},
toggleNotificationDropDown() {
this.activeNotifications = !this.activeNotifications;
this.activeNotifications = !this.activeNotifications
},
closeDropDown() {
this.activeNotifications = false;
this.activeNotifications = false
},
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'

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

@ -6,7 +6,7 @@
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="6" class="px-5">
<h1 class="text-light">{{ $t("site.404.text") }}</h1>
<h1 class="text-light">{{ $t('site.404.text') }}</h1>
</b-col>
</b-row>
<a href="/login" to="/login">
@ -1198,10 +1198,7 @@
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
class="fill-default"
points="2560 0 2560 100 0 100"
></polygon>
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
</svg>
</div>
</div>
@ -1214,13 +1211,10 @@
</b-col>
<b-col md="6">
<div class="pr-md-5">
<h1 class="text-light">{{ $t("site.landing1.explore") }}</h1>
<p class="text-light">{{ $t("site.landing1.text") }}</p>
<router-link
to="/overview"
class="font-weight-bold text-warning mt-5"
>
{{ $t("site.landing1.link") }}
<h1 class="text-light">{{ $t('site.landing1.explore') }}</h1>
<p class="text-light">{{ $t('site.landing1.text') }}</p>
<router-link to="/overview" class="font-weight-bold text-warning mt-5">
{{ $t('site.landing1.link') }}
</router-link>
</div>
</b-col>
@ -1232,30 +1226,30 @@
<script>
export default {
name: "not-found",
name: 'not-found',
data() {
return {
anime: {
targets: ".row svg",
targets: '.row svg',
translateY: 10,
autoplay: true,
loop: true,
easing: "easeInOutSine",
direction: "alternate"
easing: 'easeInOutSine',
direction: 'alternate',
},
anime2: {
targets: "#zero",
targets: '#zero',
translateX: 10,
autoplay: true,
loop: true,
easing: "easeInOutSine",
direction: "alternate",
easing: 'easeInOutSine',
direction: 'alternate',
scale: [{ value: 1 }, { value: 1.4 }, { value: 1, delay: 250 }],
rotateY: { value: "+=180", delay: 200 }
}
};
}
};
rotateY: { value: '+=180', delay: 200 },
},
}
},
}
</script>
<style>
body {

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

@ -17,10 +17,7 @@
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
class="fill-default"
points="2560 0 2560 100 0 100"
></polygon>
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
</svg>
</div>
</div>

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

@ -7,7 +7,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,19 +17,12 @@
<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>
<small>{{ $t('login') }}</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
@ -52,17 +45,12 @@
v-model="model.password"
></base-input>
<b-alert
v-show="$store.state.loginfail"
show
variant="warning"
>
<b-alert v-show="$store.state.loginfail" show variant="warning">
<span class="alert-text bv-example-row">
<b-row>
<b-col class="col-9 text-left">
<strong>
Leider konnten wir keinen Account finden mit diesen
Daten!
Leider konnten wir keinen Account finden mit diesen Daten!
</strong>
</b-col>
<b-col class="text-right">
@ -81,12 +69,8 @@
<!-- <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 type="secondary" native-type="submit" class="my-4">
{{ $t('site.login.signin') }}
</base-button>
</div>
</b-form>
@ -96,12 +80,12 @@
<b-row class="mt-3">
<b-col cols="6">
<router-link to="/password">
{{ $t("site.login.forgot_pwd") }}
{{ $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") }}
{{ $t('site.login.new_wallet') }}
</router-link>
</b-col>
</b-row>
@ -112,26 +96,26 @@
</template>
<script>
export default {
name: "login",
name: 'login',
data() {
return {
model: {
email: "",
password: ""
email: '',
password: '',
// rememberMe: false
}
};
},
}
},
methods: {
onSubmit() {
this.$store.dispatch("login", {
this.$store.dispatch('login', {
email: this.model.email,
password: this.model.password
});
password: this.model.password,
})
},
closeAlert() {
this.$store.state.loginfail = false;
}
}
};
this.$store.state.loginfail = false
},
},
}
</script>

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

@ -5,8 +5,8 @@
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-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>
@ -15,16 +15,9 @@
<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 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"
>
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input
alternative
@ -44,7 +37,7 @@
class="mt-4"
:disabled="disable"
>
{{ $t("site.password.reset_now") }}
{{ $t('site.password.reset_now') }}
</b-button>
</div>
</b-form>
@ -54,29 +47,29 @@
</b-col>
</b-row>
<div class="text-center py-lg-4">
<router-link to="/Login" class="mt-3">{{ $t("back") }}</router-link>
<router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
</div>
</b-container>
</div>
</template>
<script>
export default {
name: "password",
name: 'password',
data() {
return {
disable: "disabled",
disable: 'disabled',
model: {
email: ""
}
};
email: '',
},
}
},
methods: {
onSubmit() {
this.$store.dispatch("passwordReset", { email: this.model.email });
this.model.email = "";
this.$router.push("/thx");
}
}
};
this.$store.dispatch('passwordReset', { email: this.model.email })
this.model.email = ''
this.$router.push('/thx')
},
},
}
</script>
<style></style>

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

@ -6,8 +6,8 @@
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-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>
@ -18,19 +18,12 @@
<!-- 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-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
@ -73,9 +66,9 @@
></base-input>
<div class="text-muted font-italic">
<small>
{{ $t("site.signup.strength") }}
{{ $t('site.signup.strength') }}
<span class="text-success font-weight-700">
{{ $t("site.signup.strong") }}
{{ $t('site.signup.strong') }}
</span>
</small>
</div>
@ -87,13 +80,10 @@
>
<b-form-checkbox v-model="model.agree">
<span class="text-muted">
<a
href="https://gradido.net/de/datenschutz/"
target="_blank"
>
{{ $t("privacy_policy") }}
<a href="https://gradido.net/de/datenschutz/" target="_blank">
{{ $t('privacy_policy') }}
</a>
- {{ $t("site.signup.agree") }}
- {{ $t('site.signup.agree') }}
</span>
</b-form-checkbox>
</base-input>
@ -101,7 +91,7 @@
</b-row>
<div class="text-center">
<b-button type="submit" variant="secondary" class="mt-4">
{{ $t("signup") }}
{{ $t('signup') }}
</b-button>
</div>
</b-form>
@ -111,43 +101,43 @@
</b-col>
</b-row>
<div class="text-center py-lg-4">
<router-link to="/Login" class="mt-3">{{ $t("back") }}</router-link>
<router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
</div>
</b-container>
</div>
</template>
<script>
export default {
name: "register",
name: 'register',
data() {
return {
model: {
firstname: "",
lastname: "",
email: "",
password: "",
password2: "",
agree: false
}
};
firstname: '',
lastname: '',
email: '',
password: '',
password2: '',
agree: false,
},
}
},
methods: {
onSubmit() {
// console.log("this.modals =>", this.modals)
this.$store.dispatch("createUser", {
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");
}
}
};
password: this.model.password,
})
this.model.email = ''
this.model.firstname = ''
this.model.lastname = ''
this.model.password = ''
this.$router.push('/thx')
},
},
}
</script>
<style></style>

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

@ -8,12 +8,10 @@
<b-container fluid class="d-flex align-items-center">
<b-row>
<b-col lg="7" md="10">
<h1 class="display-2 text-white">
Hello {{ this.$store.state.email }}
</h1>
<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
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>
@ -35,14 +33,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
}
};
UserCard,
},
}
</script>
<style></style>

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

@ -116,24 +116,24 @@ 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: "",
aboutMe: `Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.`
}
};
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))
},
},
}
</script>
<style></style>

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