setup eslint with tougher rules

frontend/.eslintignore

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

frontend/.eslintrc.js

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

frontend/babel.config.js

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

frontend/intelij.webpack.js

@@ -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")
     }
   }
 };

frontend/jest.config.js

@@ -6,29 +6,24 @@ module.exports = {
     "!**/?(*.)+(spec|test).js?(x)"
   ],
   moduleFileExtensions: [
-      'js',
+    "js",
     //'jsx',
-      'json',
+    "json",
-      'vue',
+    "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"
   },
   //setupFiles: [
   //  "<rootDir>/test/registerContext.js"
   //],
-    testMatch: [
+  testMatch: ["**/?(*.)+(spec|test).js?(x)"],
-      "**/?(*.)+(spec|test).js?(x)"
-    ],
   // snapshotSerializers: ['jest-serializer-vue'],
-    transformIgnorePatterns: ['<rootDir>/node_modules/']
+  transformIgnorePatterns: ["<rootDir>/node_modules/"]
-  };
+};
-  

frontend/package.json

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

frontend/server.js

@@ -1,5 +1,5 @@
-var express = require('express');
+var express = require("express");
-var serveStatic = require('serve-static');
+var serveStatic = require("serve-static");
 var app = express();
 app.use(serveStatic(__dirname + "/dist"));
 var port = process.env.PORT || 5000;

frontend/src/App.vue

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

frontend/src/apis/communityAPI.js

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

frontend/src/apis/loginAPI.js

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

frontend/src/components/Badge.vue

@@ -3,14 +3,15 @@
     :variant="type"
     :pill="rounded"
     :size="size"
-    :class="{'badge-circle': circle }">
+    :class="{ 'badge-circle': circle }"
+  >
     <slot>
       <i v-if="icon" :class="icon"></i>
     </slot>
   </b-badge>
 </template>
 <script>
-  export default {
+export default {
   name: "badge",
   props: {
     tag: {
@@ -40,11 +41,10 @@
     },
     size: {
       type: String,
-        description: 'Badge size (md, lg)',
+      description: "Badge size (md, lg)",
-        default: ''
+      default: ""
     }
   }
-  };
+};
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/BaseAlert.vue

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

frontend/src/components/BaseButton.vue

@@ -23,7 +23,7 @@
 </template>
 <script>
 export default {
-  name: 'base-button',
+  name: "base-button",
   props: {
     round: Boolean,
     icon: Boolean,
@@ -33,37 +33,37 @@ export default {
     disabled: Boolean,
     type: {
       type: String,
-      default: 'default',
+      default: "default",
-      description: 'Button type (primary|secondary|danger etc)'
+      description: "Button type (primary|secondary|danger etc)"
     },
     nativeType: {
       type: String,
-      default: 'button',
+      default: "button",
-      description: 'Button native type (e.g button, input etc)'
+      description: "Button native type (e.g button, input etc)"
     },
     size: {
       type: String,
-      default: '',
+      default: "",
-      description: 'Button size (sm|lg)'
+      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 {
+.base-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -71,5 +71,5 @@ export default {
   i {
     padding: 0 3px;
   }
-  }
+}
 </style>

frontend/src/components/BaseDropdown.vue

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

frontend/src/components/BaseHeader.vue

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

frontend/src/components/BasePagination.vue

@@ -1,14 +1,27 @@
 <template>
   <div>
-    <b-pagination first-number last-number :per-page="perPage" :size="size" :value="value" @change="(val) => $emit('change', val)" :align="align" :total-rows="total">
+    <b-pagination
+      first-number
+      last-number
+      :per-page="perPage"
+      :size="size"
+      :value="value"
+      @change="val => $emit('change', val)"
+      :align="align"
+      :total-rows="total"
+    >
       <template v-slot:prev-text>
         <a class="page-link" aria-label="Previous">
-          <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
+          <span aria-hidden="true">
+            <i class="fa fa-angle-left" aria-hidden="true"></i>
+          </span>
         </a>
       </template>
       <template v-slot:next-text>
         <a class="page-link" aria-label="Next">
-          <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
+          <span aria-hidden="true">
+            <i class="fa fa-angle-right" aria-hidden="true"></i>
+          </span>
         </a>
       </template>
     </b-pagination>
@@ -51,6 +64,6 @@ export default {
       default: "",
       description: "Pagination alignment (e.g center|start|end)"
     }
-  },
+  }
 };
 </script>

frontend/src/components/BaseProgress.vue

@@ -3,25 +3,26 @@
     <div :class="`progress-${type}`" v-if="showLabel">
       <div class="progress-label">
         <slot name="label">
-          <span>{{label}}</span>
+          <span>{{ label }}</span>
         </slot>
       </div>
       <div class="progress-percentage">
         <slot>
-          <span>{{value}}%</span>
+          <span>{{ value }}%</span>
         </slot>
       </div>
     </div>
     <b-progress
       :size="size"
       :class="[progressClasses]"
-      :style="`height: ${height}px`">
+      :style="`height: ${height}px`"
+    >
       <b-progress-bar :class="computedClasses" :value="value"></b-progress-bar>
     </b-progress>
   </div>
 </template>
 <script>
-  export default {
+export default {
   name: "base-progress",
   props: {
     striped: {
@@ -53,12 +54,12 @@
     },
     progressClasses: {
       type: [Array, String],
-        default: '',
+      default: "",
-        description: 'Progress css classes'
+      description: "Progress css classes"
     },
     size: {
       type: String,
-        default: ''
+      default: ""
     },
     value: {
       type: Number,
@@ -78,7 +79,6 @@
       ];
     }
   }
-  };
+};
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/BaseSlider.vue

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

frontend/src/components/BaseTable.vue

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

frontend/src/components/Breadcrumb/Breadcrumb.vue

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

frontend/src/components/Breadcrumb/BreadcrumbItem.vue

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

frontend/src/components/Breadcrumb/RouteBreadcrumb.vue

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

frontend/src/components/ButtonCheckbox.vue

@@ -1,39 +1,38 @@
 <template>
   <div class="btn-group-toggle" data-toggle="buttons">
     <label class="btn" :class="[{ active: value }, buttonClasses]">
-      <input v-model="model" type="checkbox" checked="" autocomplete="off">
+      <input v-model="model" type="checkbox" checked="" autocomplete="off" />
       <slot></slot>
     </label>
   </div>
 </template>
 <script>
-  export default {
+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',
+    prop: "value",
-      event: 'change'
+    event: "change"
   },
   computed: {
     model: {
       get() {
-          return this.value
+        return this.value;
       },
       set(val) {
-          this.$emit('change', val)
+        this.$emit("change", val);
-        }
       }
     }
   }
+};
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/ButtonRadioGroup.vue

@@ -1,47 +1,56 @@
 <template>
   <div class="btn-group-toggle" data-toggle="buttons">
-    <label v-for="(option, index) in options"
+    <label
+      v-for="(option, index) in options"
       :key="index"
       class="btn"
-           :class="[{ active: value === option.value }, buttonClasses]">
+      :class="[{ active: value === option.value }, buttonClasses]"
-      <input :value="option.value" v-model="model" type="radio" id="option1" autocomplete="off" checked="">
+    >
-      {{option.label}}
+      <input
+        :value="option.value"
+        v-model="model"
+        type="radio"
+        id="option1"
+        autocomplete="off"
+        checked=""
+      />
+      {{ option.label }}
     </label>
   </div>
 </template>
 <script>
-  export default {
+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: ""}',
+      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',
+    prop: "value",
-      event: 'change'
+    event: "change"
   },
   computed: {
     model: {
       get() {
-          return this.value
+        return this.value;
       },
       set(val) {
-          this.$emit('change', val)
+        this.$emit("change", val);
-        }
       }
     }
   }
+};
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/Cards/Card.vue

@@ -2,17 +2,16 @@
   <b-card
     no-body
     :class="[
-         {'card-lift--hover': hover},
+      { 'card-lift--hover': hover },
-         {'shadow': shadow},
+      { shadow: shadow },
-         {[`shadow-${shadowSize}`]: shadowSize},
+      { [`shadow-${shadowSize}`]: shadowSize },
-         {[`bg-gradient-${gradient}`]: gradient},
+      { [`bg-gradient-${gradient}`]: gradient },
-         {[`bg-${type}`]: type}
+      { [`bg-${type}`]: type }
-       ]">
+    ]"
-
+  >
     <slot name="image"></slot>
     <b-card-header :class="headerClasses" v-if="$slots.header">
-      <slot name="header">
+      <slot name="header"></slot>
-      </slot>
     </b-card-header>
     <b-card-body :class="bodyClasses" v-if="!noBody">
       <slot></slot>
@@ -26,7 +25,7 @@
   </b-card>
 </template>
 <script>
-  export default {
+export default {
   name: "card",
   props: {
     type: {
@@ -67,7 +66,6 @@
       description: "Card footer css classes"
     }
   }
-  };
+};
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/Cards/StatsCard.vue

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

frontend/src/components/Charts/BarChart.js

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

frontend/src/components/Charts/LineChart.js

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

frontend/src/components/Charts/config.js

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

frontend/src/components/Charts/globalOptionsMixin.js

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

frontend/src/components/Charts/optionHelpers.js

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

frontend/src/components/Charts/roundedCornersExtension.js

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

frontend/src/components/CloseButton.spec.js

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

frontend/src/components/CloseButton.vue

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

frontend/src/components/Collapse/Collapse.vue

@@ -11,22 +11,23 @@
 
 <script>
 export default {
-  name: 'collapse',
+  name: "collapse",
   props: {
     animationDuration: {
       type: Number,
       default: 250,
-      description: 'Collapse animation duration'
+      description: "Collapse animation duration"
     },
     multipleActive: {
       type: Boolean,
       default: true,
-      description: 'Whether you can have multiple collapse items opened at the same time'
+      description:
+        "Whether you can have multiple collapse items opened at the same time"
     },
     activeIndex: {
       type: Number,
       default: -1,
-      description: 'Active collapse item index'
+      description: "Active collapse item index"
     }
   },
   provide() {

frontend/src/components/Collapse/CollapseItem.vue

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

frontend/src/components/Inputs/BaseCheckbox.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="custom-control custom-checkbox"
+  <div
+    class="custom-control custom-checkbox"
     :class="[
-       {disabled: disabled},
+      { disabled: disabled },
-       {[`custom-checkbox-${type}`]: type},inlineClass]">
+      { [`custom-checkbox-${type}`]: type },
-    <input :id="cbId"
+      inlineClass
+    ]"
+  >
+    <input
+      :id="cbId"
       class="custom-control-input"
       :class="inputClasses"
       type="checkbox"
       :disabled="disabled"
-           v-model="model"/>
+      v-model="model"
+    />
     <label :for="cbId" class="custom-control-label">
       <slot>
         <span v-if="inline">&nbsp;</span>
@@ -17,7 +23,7 @@
   </div>
 </template>
 <script>
-  export default {
+export default {
   name: "base-checkbox",
   model: {
     prop: "checked"
@@ -41,7 +47,7 @@
     },
     type: {
       type: String,
-        description: 'Checkbox type (e.g info, danger etc)'
+      description: "Checkbox type (e.g info, danger etc)"
     }
   },
   data() {
@@ -66,7 +72,7 @@
       if (this.inline) {
         return `form-check-inline`;
       }
-        return ''
+      return "";
     }
   },
   created() {
@@ -74,5 +80,5 @@
       .toString(16)
       .slice(2);
   }
-  };
+};
 </script>

frontend/src/components/Inputs/BaseInput.vue

@@ -1,18 +1,25 @@
 <template>
-  <validation-provider :rules="rules" :name="name" v-bind="$attrs" v-slot="{errors, valid, invalid, validated}">
+  <validation-provider
+    :rules="rules"
+    :name="name"
+    v-bind="$attrs"
+    v-slot="{ errors, valid, invalid, validated }"
+  >
     <b-form-group>
       <slot name="label">
         <label v-if="label" :class="labelClasses">
-          {{label}}
+          {{ label }}
         </label>
       </slot>
-      <div :class="[
+      <div
-       {'input-group': hasIcon},
+        :class="[
-       {'focused': focused},
+          { 'input-group': hasIcon },
-       {'input-group-alternative': alternative},
+          { focused: focused },
-       {'has-label': label || $slots.label},
+          { 'input-group-alternative': alternative },
+          { 'has-label': label || $slots.label },
           inputGroupClasses
-       ]">
+        ]"
+      >
         <div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
           <span class="input-group-text">
             <slot name="prepend">
@@ -29,7 +36,12 @@
             :valid="valid"
             :required="required"
             class="form-control"
-            :class="[{'is-valid': valid && validated && successMessage}, {'is-invalid': invalid && validated}, inputClasses]">
+            :class="[
+              { 'is-valid': valid && validated && successMessage },
+              { 'is-invalid': invalid && validated },
+              inputClasses
+            ]"
+          />
         </slot>
         <div v-if="appendIcon || $slots.append" class="input-group-append">
           <span class="input-group-text">
@@ -42,7 +54,7 @@
       </div>
       <slot name="success">
         <div class="valid-feedback" v-if="valid && validated && successMessage">
-          {{successMessage}}
+          {{ successMessage }}
         </div>
       </slot>
       <slot name="error">
@@ -54,7 +66,7 @@
   </validation-provider>
 </template>
 <script>
-  export default {
+export default {
   inheritAttrs: false,
   name: "base-input",
   props: {
@@ -64,7 +76,8 @@
     },
     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,
@@ -81,7 +94,7 @@
     successMessage: {
       type: String,
       description: "Input success message",
-        default: ''
+      default: ""
     },
     labelClasses: {
       type: String,
@@ -115,13 +128,13 @@
     },
     rules: {
       type: [String, Array, Object],
-        description: 'Vee validate validation rules',
+      description: "Vee validate validation rules",
-        default: ''
+      default: ""
     },
     name: {
       type: String,
-        description: 'Input name (used for validation)',
+      description: "Input name (used for validation)",
-        default: ''
+      default: ""
     }
   },
   data() {
@@ -170,7 +183,6 @@
       this.$emit("blur", evt);
     }
   }
-  };
+};
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/Inputs/BaseRadio.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     class="custom-control custom-radio"
-    :class="[inlineClass, { disabled: disabled }]">
+    :class="[inlineClass, { disabled: disabled }]"
+  >
     <input
       :id="cbId"
       class="custom-control-input"
@@ -18,29 +19,29 @@
   </div>
 </template>
 <script>
-  export default {
+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: {
@@ -49,14 +50,14 @@
         return this.value;
       },
       set(value) {
-          this.$emit('input', value);
+        this.$emit("input", value);
       }
     },
     inlineClass() {
       if (this.inline) {
         return `form-check-inline`;
       }
-        return '';
+      return "";
     }
   },
   created() {
@@ -64,5 +65,5 @@
       .toString(16)
       .slice(2);
   }
-  };
+};
 </script>

frontend/src/components/LoadingPanel.vue

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

frontend/src/components/Modal-OLD.vue

@@ -1,10 +1,11 @@
 <template>
-  <SlideYUpTransition :duration="animationDuration">
+  <slide-y-up-transition :duration="animationDuration">
-    <b-modal class="modal fade"
+    <b-modal
+      class="modal fade"
       ref="app-modal"
       :size="size"
       :hide-header="!$slots.header"
-        :modal-class="[{'modal-mini': type === 'mini'}, ...modalClasses]"
+      :modal-class="[{ 'modal-mini': type === 'mini' }, ...modalClasses]"
       @mousedown.self="closeModal"
       tabindex="-1"
       role="dialog"
@@ -13,19 +14,24 @@
       @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">
+      :aria-hidden="!show"
-
+    >
       <template v-slot:modal-header>
         <slot name="header"></slot>
         <slot name="close-button">
-              <button type="button"
+          <button
+            type="button"
             class="close"
             v-if="showClose"
             @click="closeModal"
             data-dismiss="modal"
-                      aria-label="Close">
+            aria-label="Close"
+          >
             <span :aria-hidden="!show">×</span>
           </button>
         </slot>
@@ -36,14 +42,13 @@
       <template v-slot:modal-footer>
         <slot name="footer"></slot>
       </template>
-
     </b-modal>
-  </SlideYUpTransition>
+  </slide-y-up-transition>
 </template>
 <script>
-  import { SlideYUpTransition } from "vue2-transitions";
+import { SlideYUpTransition } from "vue2-transitions";
 
-  export default {
+export default {
   name: "modal",
   components: {
     SlideYUpTransition
@@ -69,11 +74,11 @@
     },
     size: {
       type: String,
-        description: 'Modal size',
+      description: "Modal size",
       validator(value) {
         let acceptedValues = ["", "sm", "lg"];
         return acceptedValues.indexOf(value) !== -1;
-        },
+      }
     },
     modalContentClasses: {
       type: [Object, String],
@@ -110,16 +115,16 @@
   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 {
+.modal-backdrop {
   background-color: rgba(0, 0, 0, 0.6) !important;
-  }
+}
 </style>

frontend/src/components/Modal.vue

@@ -1,12 +1,13 @@
 <template>
   <!--Notice modal-->
-        <modal :show.sync="$store.state.modals"
+  <modal
+    :show.sync="$store.state.modals"
     modal-classes="modal-danger"
-              modal-content-classes="bg-gradient-danger">
+    modal-content-classes="bg-gradient-danger"
+  >
     <h6 slot="header" class="modal-title">Your attention is required</h6>
 
     <div class="py-3 text-center">
-             
       <form ref="form" @submit.stop.prevent="handleSubmit">
         <b-form-group
           label="Name"
@@ -26,60 +27,63 @@
 
     <template slot="footer">
       <base-button type="white">Ok</base-button>
-            <base-button type="link" class="ml-auto" @click="$store.state.modals = false">abbrechen</base-button>
+      <base-button
+        type="link"
+        class="ml-auto"
+        @click="$store.state.modals = false"
+      >
+        abbrechen
+      </base-button>
     </template>
   </modal>
-     
 </template>
 
 <script>
- 
+export default {
-
+  name: "modal",
- export default {
-   name: 'modal',
   data() {
     return {
-        name: '',
+      name: "",
       nameState: null,
       submittedNames: []
-      }
+    };
   },
   /*Modal*/
   checkFormValidity() {
-        const valid = this.$refs.form.checkValidity()
+    const valid = this.$refs.form.checkValidity();
-        this.nameState = valid
+    this.nameState = valid;
-        return valid
+    return valid;
   },
   resetModal() {
-        this.name = ''
+    this.name = "";
-        this.nameState = null
+    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.submittedNames.push(this.name);
-         this.$store.state.modals = false
+    this.$store.state.modals = false;
-         this.$store.commit('loginAsAdmin')
+    this.$store.commit("loginAsAdmin");
-         this.$router.push('/AdminOverview')        
+    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 {
+.modal-backdrop {
   background-color: rgba(0, 0, 0, 0.6) !important;
-  }
+}
 </style>

frontend/src/components/Navbar/BaseNav.vue

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

frontend/src/components/Navbar/NavbarToggleButton.vue

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

frontend/src/components/NavbarToggleButton.vue

@@ -19,12 +19,12 @@ export default {
   props: {
     target: {
       type: [String, Number],
-      description: 'Button target element'
+      description: "Button target element"
     },
     toggled: {
       type: Boolean,
       default: false,
-      description: 'Whether button is toggled'
+      description: "Whether button is toggled"
     }
   }
 };

frontend/src/components/NotificationPlugin/Notification.vue

@@ -22,9 +22,11 @@
     </template>
 
     <span class="alert-text">
-
       <span v-if="title" class="title">
-        <b>{{ title }}<br/></b>
+        <b>
+          {{ title }}
+          <br />
+        </b>
       </span>
       <span v-if="message" v-html="message"></span>
       <content-render
@@ -34,24 +36,26 @@
     </span>
 
     <slot name="dismiss-icon">
-      <button type="button"
+      <button
+        type="button"
         class="close"
         data-dismiss="alert"
         aria-label="Close"
-              @click="close">
+        @click="close"
+      >
         <span aria-hidden="true">×</span>
       </button>
     </slot>
   </div>
 </template>
 <script>
-  export default {
+export default {
-    name: 'notification',
+  name: "notification",
   components: {
     contentRender: {
-        props: ['component'],
+      props: ["component"],
-        render: function (createElement) {
+      render: function(createElement) {
-          return createElement(this.component)
+        return createElement(this.component);
       }
     }
   },
@@ -59,45 +63,46 @@
     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'];
+        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'];
+        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',
+          "default",
-            'info',
+          "info",
-            'primary',
+          "primary",
-            'danger',
+          "danger",
-            'warning',
+          "warning",
-            'success'
+          "success"
         ];
         return acceptedValues.indexOf(value) !== -1;
       },
-        description: 'Notification type of notification (default|info|primary|danger|warning|success)'
+      description:
+        "Notification type of notification (default|info|primary|danger|warning|success)"
     },
     timeout: {
       type: Number,
@@ -105,30 +110,33 @@
       validator: value => {
         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)'
+      description:
+        "Notification timestamp (used internally to handle notification removal correctly)"
     },
     component: {
       type: [Object, Function],
-        description: 'Custom content component. Cane be a `.vue` component or render function'
+      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() {
@@ -158,7 +166,7 @@
       }
       let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
       let styles = {};
-        if (this.verticalAlign === 'top') {
+      if (this.verticalAlign === "top") {
         styles.top = `${pixels}px`;
       } else {
         styles.bottom = `${pixels}px`;
@@ -168,7 +176,7 @@
   },
   methods: {
     close() {
-        this.$emit('close', this.timestamp);
+      this.$emit("close", this.timestamp);
     },
     tryClose(evt) {
       if (this.clickHandler) {
@@ -185,14 +193,14 @@
       setTimeout(this.close, this.timeout);
     }
   }
-  };
+};
 </script>
 <style lang="scss">
-  .notifications .alert {
+.notifications .alert {
   position: fixed;
   z-index: 10000;
 
-    &[data-notify='container'] {
+  &[data-notify="container"] {
     max-width: 500px;
   }
 
@@ -205,5 +213,5 @@
   &.right {
     right: 20px;
   }
-  }
+}
 </style>

frontend/src/components/NotificationPlugin/Notifications.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="notifications">
-    <slide-y-up-transition :duration="transitionDuration"
+    <slide-y-up-transition :duration="transitionDuration" group mode="out-in">
-                             group
-                             mode="out-in">
       <notification
         v-for="notification in notifications"
         v-bind="notification"
         :clickHandler="notification.onClick"
         :key="notification.timestamp.getTime()"
         @close="removeNotification"
-      >
+      ></notification>
-      </notification>
     </slide-y-up-transition>
   </div>
 </template>
 <script>
-  import Notification from './Notification.vue';
+import Notification from "./Notification.vue";
-  import { SlideYUpTransition } from 'vue2-transitions';
+import { SlideYUpTransition } from "vue2-transitions";
 
-  export default {
+export default {
   components: {
     SlideYUpTransition,
     Notification
@@ -47,9 +44,9 @@
     this.$notifications.settings.overlap = this.overlap;
   },
   watch: {
-      overlap: function (newVal) {
+    overlap: function(newVal) {
       this.$notifications.settings.overlap = newVal;
     }
   }
-  };
+};
 </script>

frontend/src/components/NotificationPlugin/index.js

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

frontend/src/components/SearchUser.vue

@@ -1,12 +1,8 @@
 <template>
-    <vue-bootstrap-typeahead 
+  <vue-bootstrap-typeahead v-model="query" :data="users" @change="getUser" />
-    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)
@@ -78,8 +74,8 @@ export default {
   },
   methods: {
     getUser() {
-        alert(this.data.user)
+      alert(this.data.user);
     }
   }
-  };
+};
 </script>

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -1,40 +1,56 @@
 <template>
-    <nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-transparent" id="sidenav-main">
+  <nav
+    class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-transparent"
+    id="sidenav-main"
+  >
     <div class="container-fluid">
-
       <!--Toggler-->
-            <navbar-toggle-button @click.native="showSidebar">
+      <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
-                
-            </navbar-toggle-button>
       <div class="navbar-brand">
-                <img :src="logo" class="navbar-brand-img" alt="...">                
+        <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
-            <b-row class="text-center"><b-col>{{$n($store.state.user.balance)}} GDD</b-col></b-row>
+      <b-row class="text-center">
+        <b-col>{{ $n($store.state.user.balance) }} GDD</b-col>
+      </b-row>
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
-                
           <base-dropdown class="nav-item" menu-on-right tag="li" title-tag="a">
             <a slot="title-container" class="nav-link" href="#" role="button">
               <div class="media align-items-center">
                 <span class="avatar avatar-sm">
-                                <vue-qrcode :value="$store.state.email" type="image/png" ></vue-qrcode>  
+                  <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>
@@ -45,37 +61,41 @@
                         </router-link>
                        -->
             <div class="dropdown-divider"></div>
-                        <div @click="logout" class="dropdown-item  text-lg text-muted" >
+            <div @click="logout" class="dropdown-item  text-lg text-muted">
               <i class="ni ni-support-16"></i>
-                             {{ $t('logout') }} 
+              {{ $t("logout") }}
             </div>
           </base-dropdown>
         </ul>
       </slot>
       <slot></slot>
-            <div v-show="$sidebar.showSidebar" class="navbar-collapse collapse show" id="sidenav-collapse-main">
+      <div
-
+        v-show="$sidebar.showSidebar"
+        class="navbar-collapse collapse show"
+        id="sidenav-collapse-main"
+      >
         <div class="navbar-collapse-header d-md-none">
           <div class="row">
             <div class="col-6 collapse-brand">
               <router-link to="/overview">
-                                <img :src="logo">
+                <img :src="logo" />
               </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>
         <ul class="navbar-nav">
-                    <slot name="links">
+          <slot name="links"></slot>
-                    </slot>
         </ul>
-                <hr class="my-3">     
+        <hr class="my-3" />
         <ul class="navbar-nav mb-md-3">
           <li class="nav-item">
             <a class="nav-link text-lg" href="#!" @click="logout">
-                        {{ $t('logout') }}
+              {{ $t("logout") }}
             </a>
           </li>
         </ul>
@@ -84,11 +104,11 @@
   </nav>
 </template>
 <script>
-  import NavbarToggleButton from '@/components/NavbarToggleButton'
+import NavbarToggleButton from "@/components/NavbarToggleButton";
-  import VueQrcode from 'vue-qrcode'
+import VueQrcode from "vue-qrcode";
 
-  export default {
+export default {
-    name: 'sidebar',
+  name: "sidebar",
   components: {
     NavbarToggleButton,
     VueQrcode
@@ -96,13 +116,14 @@
   props: {
     logo: {
       type: String,
-        default: 'img/brand/green.png',
+      default: "img/brand/green.png",
-        description: 'Gradido Sidebar app logo'
+      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() {
@@ -112,13 +133,13 @@
   },
   methods: {
     closeSidebar() {
-        this.$sidebar.displaySidebar(false)
+      this.$sidebar.displaySidebar(false);
     },
     showSidebar() {
-        this.$sidebar.displaySidebar(true)
+      this.$sidebar.displaySidebar(true);
     },
-      logout(){
+    logout() {
-        this.$store.dispatch('logout')
+      this.$store.dispatch("logout");
     }
   },
   beforeDestroy() {
@@ -126,5 +147,5 @@
       this.$sidebar.showSidebar = false;
     }
   }
-  };
+};
 </script>

frontend/src/components/SidebarPlugin/SidebarItem.vue

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

frontend/src/components/SidebarPlugin/index.js

@@ -1,5 +1,5 @@
-import Sidebar from './SideBar.vue';
+import Sidebar from "./SideBar.vue";
-import SidebarItem from './SidebarItem.vue';
+import SidebarItem from "./SidebarItem.vue";
 
 const SidebarStore = {
   showSidebar: false,
@@ -9,10 +9,10 @@ const SidebarStore = {
     this.showSidebar = value;
   },
   toggleMinimize() {
-    document.body.classList.toggle('sidebar-mini');
+    document.body.classList.toggle("sidebar-mini");
     // we simulate the window Resize so the charts will get updated in realtime.
     const simulateWindowResize = setInterval(() => {
-      window.dispatchEvent(new Event('resize'));
+      window.dispatchEvent(new Event("resize"));
     }, 180);
 
     // we stop the simulation of Window Resize after the animations are completed
@@ -35,8 +35,8 @@ const SidebarPlugin = {
       }
     });
     Vue.prototype.$sidebar = app.sidebarStore;
-    Vue.component('side-bar', Sidebar);
+    Vue.component("side-bar", Sidebar);
-    Vue.component('sidebar-item', SidebarItem);
+    Vue.component("sidebar-item", SidebarItem);
   }
 };
 

frontend/src/components/Tabs/Tab.vue

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

frontend/src/components/Tabs/Tabs.vue

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

frontend/src/components/index.js

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

frontend/src/config/index.js

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

frontend/src/directives/click-ouside.js

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

frontend/src/i18n.js

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

frontend/src/main.js

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

frontend/src/plugins/dashboard-plugin.js

@@ -1,43 +1,41 @@
 // Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE)
-import '@/polyfills';
+import "@/polyfills";
 // Notifications plugin. Used on Notifications page
-import Notifications from '@/components/NotificationPlugin';
+import Notifications from "@/components/NotificationPlugin";
 // Validation plugin used to validate forms
-import { configure } from 'vee-validate';
+import { configure } from "vee-validate";
 // A plugin file where you could register global components used across the app
-import GlobalComponents from './globalComponents';
+import GlobalComponents from "./globalComponents";
 // A plugin file where you could register global directives
-import GlobalDirectives from './globalDirectives';
+import GlobalDirectives from "./globalDirectives";
 // Sidebar on the right. Used as a local plugin in DashboardLayout.vue
-import SideBar from '@/components/SidebarPlugin';
+import SideBar from "@/components/SidebarPlugin";
 
 // element ui language configuration
-import lang from 'element-ui/lib/locale/lang/en';
+import lang from "element-ui/lib/locale/lang/en";
-import locale from 'element-ui/lib/locale';
+import locale from "element-ui/lib/locale";
 locale.use(lang);
 
 // vue-bootstrap
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
 
 // asset imports
-import '@/assets/scss/argon.scss';
+import "@/assets/scss/argon.scss";
-import '@/assets/vendor/nucleo/css/nucleo.css';
+import "@/assets/vendor/nucleo/css/nucleo.css";
-import { extend } from 'vee-validate';
+import { extend } from "vee-validate";
-import * as rules from 'vee-validate/dist/rules';
+import * as rules from "vee-validate/dist/rules";
-import { messages } from 'vee-validate/dist/locale/en.json';
+import { messages } from "vee-validate/dist/locale/en.json";
 
 import VueQrcodeReader from "vue-qrcode-reader";
 import 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, {
@@ -60,12 +58,10 @@ export default {
     Vue.use(VueFlatPickr);
     configure({
       classes: {
-        valid: 'is-valid',
+        valid: "is-valid",
-        invalid: 'is-invalid',
+        invalid: "is-invalid",
-        dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
+        dirty: ["is-dirty", "is-dirty"] // multiple classes per flag!
       }
-    })
+    });
   }
 };
-
-

frontend/src/plugins/globalComponents.js

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

frontend/src/plugins/globalDirectives.js

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

frontend/src/routes/router.js

@@ -1,31 +1,30 @@
-import Vue from 'vue'
+import Vue from "vue";
-import VueRouter from 'vue-router'
+import VueRouter from "vue-router";
-import routes from './routes'
+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) => {
+  scrollBehavior: (to, from, savedPosition) => {
     if (savedPosition) {
       return savedPosition;
     }
     if (to.hash) {
-      return { selector: to.hash }
+      return { selector: to.hash };
     }
-    return { x: 0, y: 0 }
+    return { x: 0, y: 0 };
   }
 });
 
 router.beforeEach((to, from, next) => {
- 
+  let language = to.params.lang;
-  let language = to.params.lang
   if (!language) {
-       language = 'de'
+    language = "de";
   }
-     next()  
+  next();
-})
+});
 
-export default router
+export default router;

frontend/src/routes/routes.js

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

frontend/src/routes/starterRouter.js

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

frontend/src/store/store.js

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

frontend/src/views/AdminOverview.vue

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

frontend/src/views/AdminOverview/AdminUserCreation.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
-
     <b-card-header>Gradido Schüpfung</b-card-header>
     <!--Tables-->
     <b-row class="mt-5">
-       
       <b-col xl="8" class="mb-5 mb-xl-0">
         <vue-good-table
           :columns="columns"
@@ -22,7 +20,6 @@
             skipDiacritics: true,
             searchFn: mySearchFn,
             placeholder: 'durchsuche die tabelle'
-         
           }"
           :pagination-options="{
             enabled: true,
@@ -32,11 +29,9 @@
           <div slot="table-actions">
             Einträge suchen .
           </div>
- 
         </vue-good-table>
       </b-col>
       <b-col xl="4" class="mb-5 mb-xl-0">
-          
         <b-card body-class="p-0" header-class="border-0">
           <template v-slot:header>
             <b-row align-v="center">
@@ -49,117 +44,319 @@
             </b-row>
           </template>
           <b-card-body>
-          <p>{{ creation.createdAt }} </p>
+            <p>{{ creation.createdAt }}</p>
-          <p>{{ creation.group }} </p>
+            <p>{{ creation.group }}</p>
-          <p>{{ creation.id }} </p>
+            <p>{{ creation.id }}</p>
-          <p>{{ creation.name }} </p>
+            <p>{{ creation.name }}</p>
-          <p>{{ creation.originalIndex }} </p>
+            <p>{{ creation.originalIndex }}</p>
-          <p>{{ creation.text }} </p>
+            <p>{{ creation.text }}</p>
-          <p>{{ creation.vgt_id }} </p>
+            <p>{{ creation.vgt_id }}</p>
           </b-card-body>
         </b-card>
-
       </b-col>
     </b-row>
     <!--End tables-->
-
-
-
   </div>
 </template>
 
 <script>
-
 export default {
-  name: 'admin-user-creation',
+  name: "admin-user-creation",
-  data(){
+  data() {
     return {
-      creation:{
+      creation: {
-          createdAt:"",
+        createdAt: "",
-          group:"",
+        group: "",
-          id:"",
+        id: "",
-          name:"",
+        name: "",
-          originalIndex:"",
+        originalIndex: "",
-          text:"",
+        text: "",
-          vgt_id:"",
+        vgt_id: ""
       },
       columns: [
         {
-          label: 'Name',
+          label: "Name",
-          field: 'name',
+          field: "name"
         },
         {
-          label: 'Gruppe',
+          label: "Gruppe",
-          field: 'group',
+          field: "group",
-          type: 'group',
+          type: "group"
         },
         {
-          label: 'eingereicht',
+          label: "eingereicht",
-          field: 'createdAt',
+          field: "createdAt",
-          type: 'date',
+          type: "date",
-          dateInputFormat: 'yyyy-MM-dd',
+          dateInputFormat: "yyyy-MM-dd",
-          dateOutputFormat: 'dd.MM.yyyy',
+          dateOutputFormat: "dd.MM.yyyy"
         },
         {
-          label: 'Text',
+          label: "Text",
-          field: 'text',
+          field: "text",
-          type: 'text',
+          type: "text"
-        },
+        }
       ],
       rows: [
-        { id:1, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1",  text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:2, createdAt: '2021-01-31', name:"Jane",    group: "gruppe14", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 1,
-        { id:3, createdAt: '2021-01-30', name:"Susan",   group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          createdAt: "2021-01-25",
-        { id:4, createdAt: '2020-01-11', name:"Chris",   group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: "Sellora",
-        { id:5, createdAt: '2020-12-21', name:"Dan",     group: "gruppe11", text: "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: "gruppe1",
-        { id:6, createdAt: '2020-12-31', name:"zBohn",    group: "gruppe71", text: "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text:
-        { id:7, createdAt: '2020-12-31', name:"xyTellohn", group: "gruppe31", text: "Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+            "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
-        { id:8, createdAt: '2021-01-25', name:"uSellora", group: "gruppe1",  text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:9, createdAt: '2021-01-31', name:"yJane",    group: "gruppe14", text: "55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:10, createdAt: '2021-01-20', name:"kSusan",   group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 2,
-        { id:11, createdAt: '2021-01-25', name:"qSellora", group: "gruppe12",  text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          createdAt: "2021-01-31",
-        { id:12, createdAt: '2021-01-31', name:"fJane",    group: "gruppe15", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: "Jane",
-        { id:13, createdAt: '2021-01-38', name:"aSusan",   group: "gruppe1", text: "asssss  IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: "gruppe14",
-        { id:14, createdAt: '2020-01-11', name:"uChris",   group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text:
-        { id:15, createdAt: '2020-12-21', name:"tzDan",     group: "gruppe11", text: "Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+            "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
-        { id:16, createdAt: '2020-12-31', name:"fBohn",    group: "gruppe71", text: "3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:17, createdAt: '2020-12-31', name:"aEsau",    group: "gruppe15", text: "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:18, createdAt: '2021-01-25', name:"gSellora", group: "gruppe1",  text: "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 3,
-        { 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-30",
-        { id:20, createdAt: '2021-01-30', name:"oSusan",   group: "gruppe31", text: "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: "Susan",
-        { id:21, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1",  text: "3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: "gruppe31",
-        { id:22, createdAt: '2021-01-13', name:"rtJane",    group: "gruppe14", text: "q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text:
-        { id:23, createdAt: '2021-01-16', name:"rSusan",   group: "gruppe31", text: "Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+            "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
-        { id:24, createdAt: '2020-01-15', name:"sChris",   group: "gruppe12", text: "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:25, createdAt: '2020-12-14', name:"dDan",     group: "gruppe11", text: "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:26, createdAt: '2020-12-13', name:"fBohn",    group: "gruppe71", text: "Ta  adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 4,
-        { 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-01-11",
-        { id:28, createdAt: '2021-01-12', name:"zSellora", group: "gruppe1",  text: "e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: "Chris",
-        { id:29, createdAt: '2021-01-12', name:"uJane",    group: "gruppe14", text: "erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: "gruppe12",
-        { id:30, createdAt: '2021-01-11', name:"iSusan",   group: "gruppe31", text: "3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text:
-       
+            "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
-       ],
+        },
+        {
+          id: 5,
+          createdAt: "2020-12-21",
+          name: "Dan",
+          group: "gruppe11",
+          text:
+            "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 6,
+          createdAt: "2020-12-31",
+          name: "zBohn",
+          group: "gruppe71",
+          text:
+            "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 7,
+          createdAt: "2020-12-31",
+          name: "xyTellohn",
+          group: "gruppe31",
+          text:
+            "Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 8,
+          createdAt: "2021-01-25",
+          name: "uSellora",
+          group: "gruppe1",
+          text:
+            "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 9,
+          createdAt: "2021-01-31",
+          name: "yJane",
+          group: "gruppe14",
+          text:
+            "55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 10,
+          createdAt: "2021-01-20",
+          name: "kSusan",
+          group: "gruppe31",
+          text:
+            "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 11,
+          createdAt: "2021-01-25",
+          name: "qSellora",
+          group: "gruppe12",
+          text:
+            "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 12,
+          createdAt: "2021-01-31",
+          name: "fJane",
+          group: "gruppe15",
+          text:
+            "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 13,
+          createdAt: "2021-01-38",
+          name: "aSusan",
+          group: "gruppe1",
+          text:
+            "asssss  IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 14,
+          createdAt: "2020-01-11",
+          name: "uChris",
+          group: "gruppe12",
+          text:
+            "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 15,
+          createdAt: "2020-12-21",
+          name: "tzDan",
+          group: "gruppe11",
+          text:
+            "Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 16,
+          createdAt: "2020-12-31",
+          name: "fBohn",
+          group: "gruppe71",
+          text:
+            "3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 17,
+          createdAt: "2020-12-31",
+          name: "aEsau",
+          group: "gruppe15",
+          text:
+            "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 18,
+          createdAt: "2021-01-25",
+          name: "gSellora",
+          group: "gruppe1",
+          text:
+            "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 19,
+          createdAt: "2021-01-31",
+          name: "sJane",
+          group: "gruppe14",
+          text:
+            "as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 20,
+          createdAt: "2021-01-30",
+          name: "oSusan",
+          group: "gruppe31",
+          text:
+            "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 21,
+          createdAt: "2021-01-25",
+          name: "Sellora",
+          group: "gruppe1",
+          text:
+            "3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 22,
+          createdAt: "2021-01-13",
+          name: "rtJane",
+          group: "gruppe14",
+          text:
+            "q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 23,
+          createdAt: "2021-01-16",
+          name: "rSusan",
+          group: "gruppe31",
+          text:
+            "Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 24,
+          createdAt: "2020-01-15",
+          name: "sChris",
+          group: "gruppe12",
+          text:
+            "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 25,
+          createdAt: "2020-12-14",
+          name: "dDan",
+          group: "gruppe11",
+          text:
+            "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 26,
+          createdAt: "2020-12-13",
+          name: "fBohn",
+          group: "gruppe71",
+          text:
+            "Ta  adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 27,
+          createdAt: "2020-12-12",
+          name: "gTellohn",
+          group: "gruppe31",
+          text:
+            "55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 28,
+          createdAt: "2021-01-12",
+          name: "zSellora",
+          group: "gruppe1",
+          text:
+            "e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 29,
+          createdAt: "2021-01-12",
+          name: "uJane",
+          group: "gruppe14",
+          text:
+            "erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        },
+        {
+          id: 30,
+          createdAt: "2021-01-11",
+          name: "iSusan",
+          group: "gruppe31",
+          text:
+            "3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk"
+        }
+      ]
     };
   },
   methods: {
     onRowClick(params) {
+      console.log("onRowClick", params.row.createdAt);
+      console.log("onRowClick", params.row.group);
+      console.log("onRowClick", params.row.id);
+      console.log("onRowClick", params.row.name);
+      console.log("onRowClick", params.row.originalIndex);
+      console.log("onRowClick", params.row.text);
+      console.log("onRowClick", params.row.vgt_id);
 
-    console.log("onRowClick", params.row.createdAt)
+      this.creation.createdAt = params.row.createdAt;
-    console.log("onRowClick", params.row.group)
+      this.creation.group = params.row.group;
-    console.log("onRowClick", params.row.id)
+      this.creation.id = params.row.id;
-    console.log("onRowClick", params.row.name)
+      this.creation.name = params.row.name;
-    console.log("onRowClick", params.row.originalIndex)
+      this.creation.originalIndex = params.row.originalIndex;
-    console.log("onRowClick", params.row.text)
+      this.creation.text = params.row.text;
-    console.log("onRowClick", params.row.vgt_id)
+      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.
@@ -168,11 +365,11 @@ 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){
+    mySearchFn(params) {
       //console.log("mySearchFn", params)
     }
   }

frontend/src/views/AdminOverview/AdminUserSearch.vue

@@ -19,16 +19,15 @@
             skipDiacritics: true,
             searchFn: mySearchFn,
             placeholder: 'durchsuche die tabelle'
-                
           }"
           :pagination-options="{
             enabled: true,
             mode: 'pages'
-              }" >
+          }"
+        >
           <div slot="table-actions">
             Mitglieder suchen .
           </div>
- 
         </vue-good-table>
       </b-col>
       <b-col xl="4" class="mb-5 mb-xl-0">
@@ -47,25 +46,37 @@
           <b-card-body>
             <form>
               <b-row class="">
-                    <label class="col-md-3 col-form-label form-control-label">Name</label>
+                <label class="col-md-3 col-form-label form-control-label">
+                  Name
+                </label>
                 <b-col md="10">
                   <base-input placeholder="Jon Snow"></base-input>
                 </b-col>
               </b-row>
               <b-row class="">
-                    <label for="example-email-input" class="col-md-3 col-form-label form-control-label">Email</label>
+                <label
+                  for="example-email-input"
+                  class="col-md-3 col-form-label form-control-label"
+                >
+                  Email
+                </label>
                 <b-col md="10">
-                      <base-input type="email" placeholder="gradido@example.com" id="example-email-input0" />
+                  <base-input
+                    type="email"
+                    placeholder="gradido@example.com"
+                    id="example-email-input0"
+                  />
                 </b-col>
               </b-row>
               <b-row class="">
-                    <label class="col-md-3 col-form-label form-control-label">Gruppe</label>
+                <label class="col-md-3 col-form-label form-control-label">
+                  Gruppe
+                </label>
                 <b-col md="10">
                   <base-input placeholder="Gruppe"></base-input>
                 </b-col>
               </b-row>
             </form>
-
           </b-card-body>
         </b-card>
 
@@ -77,38 +88,58 @@
                 <h3 class="mb-0">Mitglied Daten</h3>
               </b-col>
               <b-col class="text-right">
-                  <a href="#!" @click="showNewUser=true" class="btn btn-sm btn-warning">schliesen</a>
+                <a
+                  href="#!"
+                  @click="showNewUser = true"
+                  class="btn btn-sm btn-warning"
+                >
+                  schliesen
+                </a>
               </b-col>
             </b-row>
           </template>
           <b-card-body>
-              <img style="width: 147px" src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg" />
+            <img
-
+              style="width: 147px"
+              src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg"
+            />
 
             <form>
               <b-row class="">
-                    <label class="col-md-3 col-form-label form-control-label">Name</label>
+                <label class="col-md-3 col-form-label form-control-label">
+                  Name
+                </label>
                 <b-col md="10">
                   <base-input placeholder="name"></base-input>
                 </b-col>
               </b-row>
               <b-row class="">
-                    <label for="example-email-input" class="col-md-3 col-form-label form-control-label">Email</label>
+                <label
+                  for="example-email-input"
+                  class="col-md-3 col-form-label form-control-label"
+                >
+                  Email
+                </label>
                 <b-col md="10">
-                      <base-input type="email" autocomplete="username email" placeholder="agradido@example.com" id="example-email-input1"/>
+                  <base-input
+                    type="email"
+                    autocomplete="username email"
+                    placeholder="agradido@example.com"
+                    id="example-email-input1"
+                  />
                 </b-col>
               </b-row>
               <b-row class="">
-                    <label class="col-md-3 col-form-label form-control-label">Gruppe</label>
+                <label class="col-md-3 col-form-label form-control-label">
+                  Gruppe
+                </label>
                 <b-col md="10">
                   <base-input placeholder="Gruppe"></base-input>
                 </b-col>
               </b-row>
             </form>
-
           </b-card-body>
         </b-card>
-
       </b-col>
     </b-row>
   </div>
@@ -116,59 +147,107 @@
 
 <script>
 export default {
-  name: 'admin-user-search',
+  name: "admin-user-search",
-  data(){
+  data() {
     return {
       showNewUser: true,
       formSetUser: {
-        name:"",
+        name: "",
-        email:"",
+        email: "",
-        group:""
+        group: ""
       },
       formGetUser: {
-        name:"",
+        name: "",
-        email:"",
+        email: "",
-        group:""
+        group: ""
       },
       columns: [
         {
-          label: 'Name',
+          label: "Name",
-          field: 'name',
+          field: "name"
         },
         {
-          label: 'E-Mail',
+          label: "E-Mail",
-          field: 'email',
+          field: "email",
-          type: 'email',
+          type: "email"
         },
         {
-          label: 'Mitglied seid',
+          label: "Mitglied seid",
-          field: 'createdAt',
+          field: "createdAt",
-          type: 'date',
+          type: "date",
-          dateInputFormat: 'yyyy-MM-dd',
+          dateInputFormat: "yyyy-MM-dd",
-          dateOutputFormat: 'dd.MM.yyyy',
+          dateOutputFormat: "dd.MM.yyyy"
         },
         {
-          label: 'Gruppe',
+          label: "Gruppe",
-          field: 'group',
+          field: "group",
-          type: 'group',
+          type: "group"
-        },
+        }
       ],
       rows: [
-        { id:1, name:"John", email: "temail@tutanota.com", createdAt: '1976-10-25',group: "gruppe1" },
+        {
-        { id:2, name:"Jane", email: "temail@tutanota.com", createdAt: '2011-10-31', group: "gruppe2" },
+          id: 1,
-        { id:3, name:"Susan", email: "temail@tutanota.com", createdAt: '2011-10-30', group: "gruppe4" },
+          name: "John",
-        { id:4, name:"Chris", email: "temail@tutanota.com", createdAt: '2011-10-11', group: "gruppe3" },
+          email: "temail@tutanota.com",
-        { id:5, name:"Dan", email: "temail@tutanota.com", createdAt: '2011-10-21', group: "gruppe1" },
+          createdAt: "1976-10-25",
-        { id:6, name:"Bohn", email: "temail@tutanota.com", createdAt: '2011-10-31', group: "gruppe2" },
+          group: "gruppe1"
-        { id:7, name:"Tellohn", email: "temail@tutanota.com", createdAt: '2009-10-31', group: "gruppe2" },
+        },
-        { id:7, name:"Tellohn", email: "temail@tutanota.com", createdAt: '2009-10-31', group: "gruppe5" },
+        {
-      ],
+          id: 2,
+          name: "Jane",
+          email: "temail@tutanota.com",
+          createdAt: "2011-10-31",
+          group: "gruppe2"
+        },
+        {
+          id: 3,
+          name: "Susan",
+          email: "temail@tutanota.com",
+          createdAt: "2011-10-30",
+          group: "gruppe4"
+        },
+        {
+          id: 4,
+          name: "Chris",
+          email: "temail@tutanota.com",
+          createdAt: "2011-10-11",
+          group: "gruppe3"
+        },
+        {
+          id: 5,
+          name: "Dan",
+          email: "temail@tutanota.com",
+          createdAt: "2011-10-21",
+          group: "gruppe1"
+        },
+        {
+          id: 6,
+          name: "Bohn",
+          email: "temail@tutanota.com",
+          createdAt: "2011-10-31",
+          group: "gruppe2"
+        },
+        {
+          id: 7,
+          name: "Tellohn",
+          email: "temail@tutanota.com",
+          createdAt: "2009-10-31",
+          group: "gruppe2"
+        },
+        {
+          id: 7,
+          name: "Tellohn",
+          email: "temail@tutanota.com",
+          createdAt: "2009-10-31",
+          group: "gruppe5"
+        }
+      ]
     };
   },
   methods: {
     onRowClick(params) {
-    console.log(params.row)
+      console.log(params.row);
-    this.showNewUser = false
+      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
@@ -176,28 +255,27 @@ 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){
+    mySearchFn(params) {
       //console.log(params)
     },
-    validateEmail(value){
+    validateEmail(value) {
-      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
+      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
-        {
+        this.msg["email"] = "";
-          this.msg['email'] = '';
+      } else {
-        } else{
+        this.msg["email"] = "Invalid Email Address";
-          this.msg['email'] = 'Invalid Email Address';
+      }
     }
   },
-  },
   watch: {
-     mail(value){
+    mail(value) {
       // binding this to the data value in the email input
       this.email = value;
       this.validateEmail(value);
-    },
+    }
   }
 };
 </script>

frontend/src/views/AdminOverview/default.vue

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

frontend/src/views/Dashboard.vue

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

frontend/src/views/Dashboard/GoodTable.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-
- 
     <!--Tables-->
     <b-row class="mt-5">
       <b-col xl="8" class="mb-5 mb-xl-0">
@@ -19,7 +17,7 @@
             skipDiacritics: true,
             searchFn: mySearchFn,
             placeholder: 'durchsuche die tabelle',
-        externalQuery: searchQuery,        
+            externalQuery: searchQuery
           }"
           :pagination-options="{
             enabled: true,
@@ -29,7 +27,6 @@
           <div slot="table-actions">
             Mitglieder suchen .
           </div>
- 
         </vue-good-table>
       </b-col>
       <b-col xl="4" class="mb-5 mb-xl-0">
@@ -37,61 +34,105 @@
       </b-col>
     </b-row>
     <!--End tables-->
-
-
-
-  
   </div>
 </template>
 
 <script>
-  import SocialTrafficTable from './SocialTrafficTable';
+import SocialTrafficTable from "./SocialTrafficTable";
 
 export default {
-  name: 'my-component',
+  name: "my-component",
   components: {
     SocialTrafficTable
   },
-  data(){
+  data() {
     return {
       columns: [
         {
-          label: 'Name',
+          label: "Name",
-          field: 'name',
+          field: "name"
         },
         {
-          label: 'Alter',
+          label: "Alter",
-          field: 'age',
+          field: "age",
-          type: 'number',
+          type: "number"
         },
         {
-          label: 'Mitglied seid',
+          label: "Mitglied seid",
-          field: 'createdAt',
+          field: "createdAt",
-          type: 'date',
+          type: "date",
-          dateInputFormat: 'yyyy-MM-dd',
+          dateInputFormat: "yyyy-MM-dd",
-          dateOutputFormat: 'dd.MM.yyyy',
+          dateOutputFormat: "dd.MM.yyyy"
         },
         {
-          label: 'Prozent',
+          label: "Prozent",
-          field: 'score',
+          field: "score",
-          type: 'percentage',
+          type: "percentage"
-        },
+        }
       ],
       rows: [
-        { id:1, name:"John", age: 20, createdAt: '1976-10-25',score: 0.03343 },
+        {
-        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
+          id: 1,
-        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
+          name: "John",
-        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
+          age: 20,
-        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
+          createdAt: "1976-10-25",
-        { id:6, name:"Bohn", age: 70, createdAt: '2011-10-31', score: 0.03343 },
+          score: 0.03343
-        { id:7, name:"Tellohn", age: 56, createdAt: '2009-10-31', score: 0.13343 },
+        },
-        { id:7, name:"Tellohn", age: 56, createdAt: '2009-10-31', score: 0.03343 },
+        {
-      ],
+          id: 2,
+          name: "Jane",
+          age: 24,
+          createdAt: "2011-10-31",
+          score: 0.03343
+        },
+        {
+          id: 3,
+          name: "Susan",
+          age: 16,
+          createdAt: "2011-10-30",
+          score: 0.03343
+        },
+        {
+          id: 4,
+          name: "Chris",
+          age: 55,
+          createdAt: "2011-10-11",
+          score: 0.03343
+        },
+        {
+          id: 5,
+          name: "Dan",
+          age: 40,
+          createdAt: "2011-10-21",
+          score: 0.03343
+        },
+        {
+          id: 6,
+          name: "Bohn",
+          age: 70,
+          createdAt: "2011-10-31",
+          score: 0.03343
+        },
+        {
+          id: 7,
+          name: "Tellohn",
+          age: 56,
+          createdAt: "2009-10-31",
+          score: 0.13343
+        },
+        {
+          id: 7,
+          name: "Tellohn",
+          age: 56,
+          createdAt: "2009-10-31",
+          score: 0.03343
+        }
+      ]
     };
   },
   methods: {
     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
@@ -99,12 +140,12 @@ 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){
+    mySearchFn(params) {
-      console.log(params)
+      console.log(params);
     }
   }
 };

frontend/src/views/Dashboard/PageVisitsTable.vue

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

frontend/src/views/Dashboard/SocialTrafficTable.vue

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

frontend/src/views/GoogleMaps.vue

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

frontend/src/views/KontoOverview.vue

@@ -3,9 +3,9 @@
     <base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
     <b-container fluid class="mt--7">
       <gdd-status />
-              <br>
+      <br />
       <gdd-send />
-              <hr>
+      <hr />
       <gdd-table />
       <!-- <hr>
               <div>
@@ -21,36 +21,33 @@
       <!-- <div>
                 <gdd-work-table />       
               </div>     -->
-              
     </b-container>
   </div>
 </template>
 <script>
-  import GddStatus    from './KontoOverview/GddStatus.vue';
+import GddStatus from "./KontoOverview/GddStatus.vue";
-  import GddSend      from './KontoOverview/GddSend.vue';
+import GddSend from "./KontoOverview/GddSend.vue";
-  import GddTable     from './KontoOverview/GddTable.vue';
+import GddTable from "./KontoOverview/GddTable.vue";
- // import GddAddWork2  from './KontoOverview/GddAddWork2.vue';
+// import GddAddWork2  from './KontoOverview/GddAddWork2.vue';
- // import GddWorkTable from './KontoOverview/GddWorkTable.vue';
+// import GddWorkTable from './KontoOverview/GddWorkTable.vue';
 
-  export default {  
+export default {
   name: "Overview",
   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>
-.active { background-color: rgba(192, 192, 192, 0.568);}
+.active {
-
+  background-color: rgba(192, 192, 192, 0.568);
+}
 </style>
-
-
- 

frontend/src/views/KontoOverview/GddAddWork.vue

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

frontend/src/views/KontoOverview/GddAddWork2.vue

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

frontend/src/views/KontoOverview/GddSend.vue

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

frontend/src/views/KontoOverview/GddStatus.vue

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

frontend/src/views/KontoOverview/GddTable.vue

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

frontend/src/views/KontoOverview/GddWorkTable.vue

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

frontend/src/views/KontoOverview/default.vue

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

frontend/src/views/Landing.vue

@@ -17,7 +17,7 @@
               <router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link>
             </b-col>
           </b-row> -->
-          <hr>
+          <hr />
           <p class="lead">
             Anmelden
           </p>
@@ -25,28 +25,46 @@
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="6" class="px-5">
               <form @submit.prevent="login">
- 
                 <b-row class="form-group">
-                  <label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label>
+                  <label
+                    for="example-email-input"
+                    class="col-md-2 col-form-label form-control-label"
+                  >
+                    Email
+                  </label>
                   <b-col md="10">
-                    <base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="lemail"/>
+                    <base-input
+                      type="email"
+                      autocomplete="username email"
+                      placeholder="argon@example.com"
+                      v-model="lemail"
+                    />
                   </b-col>
                 </b-row>
 
                 <b-row class="form-group">
-                  <label for="example-password-input"
+                  <label
-                        class="col-md-2 col-form-label form-control-label">Password</label>
+                    for="example-password-input"
+                    class="col-md-2 col-form-label form-control-label"
+                  >
+                    Password
+                  </label>
                   <b-col md="10">
-                    <base-input type="password" autocomplete="current-password" placeholder="password" v-model="lpwd"/>
+                    <base-input
+                      type="password"
+                      autocomplete="current-password"
+                      placeholder="password"
+                      v-model="lpwd"
+                    />
                   </b-col>
                 </b-row>
 
-                <b-button block type="submit" >Anmelden</b-button>
+                <b-button block type="submit">Anmelden</b-button>
               </form>
             </b-col>
           </b-row>
 
-      <hr>
+          <hr />
           <p class="lead">
             neues Mitglied anlegen
           </p>
@@ -55,77 +73,124 @@
             <b-col xl="5" lg="6" md="6" class="px-5">
               <form>
                 <b-row class="form-group">
-                <label class="col-md-2 col-form-label form-control-label">Vorname</label>
+                  <label class="col-md-2 col-form-label form-control-label">
+                    Vorname
+                  </label>
                   <b-col md="10">
-                  <base-input placeholder="Jon "  v-model="rfname"></base-input>
+                    <base-input
+                      placeholder="Jon "
+                      v-model="rfname"
+                    ></base-input>
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
-                <label class="col-md-2 col-form-label form-control-label">Nachname</label>
+                  <label class="col-md-2 col-form-label form-control-label">
+                    Nachname
+                  </label>
                   <b-col md="10">
-                  <base-input placeholder=" Snow"  v-model="rlname"></base-input>
+                    <base-input
+                      placeholder=" Snow"
+                      v-model="rlname"
+                    ></base-input>
                   </b-col>
                 </b-row>
                 <b-row class="form-group">
-                <label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label>
+                  <label
+                    for="example-email-input"
+                    class="col-md-2 col-form-label form-control-label"
+                  >
+                    Email
+                  </label>
                   <b-col md="10">
-                  <base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="remail"/>
+                    <base-input
+                      type="email"
+                      autocomplete="username email"
+                      placeholder="argon@example.com"
+                      v-model="remail"
+                    />
                   </b-col>
                 </b-row>
 
                 <b-row class="form-group">
-                <label for="example-password-input"
+                  <label
-                      class="col-md-2 col-form-label form-control-label">Password</label>
+                    for="example-password-input"
+                    class="col-md-2 col-form-label form-control-label"
+                  >
+                    Password
+                  </label>
                   <b-col md="10">
-                  <base-input type="password" autocomplete="current-password" placeholder="password" v-model="rpwd"/>
+                    <base-input
+                      type="password"
+                      autocomplete="current-password"
+                      placeholder="password"
+                      v-model="rpwd"
+                    />
                   </b-col>
                 </b-row>
               </form>
-             <b-button block type="submit" @click="createUser()">Anmelden</b-button>
+              <b-button block type="submit" @click="createUser()">
+                Anmelden
+              </b-button>
             </b-col>
           </b-row>
-    
         </div>
       </b-container>
       <div class="separator separator-bottom separator-skew zindex-100">
-        <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <svg
-          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
+          x="0"
+          y="0"
+          viewBox="0 0 2560 100"
+          preserveAspectRatio="none"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            class="fill-default"
+            points="2560 0 2560 100 0 100"
+          ></polygon>
         </svg>
       </div>
     </div>
     <!-- Page content -->
-  
   </div>
 </template>
 <script>
 // Components
 
 export default {
-  name: 'Landing',
+  name: "Landing",
-  data(){
+  data() {
     return {
-      lemail: '',
+      lemail: "",
-      lpwd: '',
+      lpwd: "",
-      rfname: '',
+      rfname: "",
-      rlname: '',
+      rlname: "",
-      remail: '',
+      remail: "",
-      rpwd: ''
+      rpwd: ""
-    }
+    };
   },
   methods: {
     login() {
       //if (this.lemail !== '' || this.lpwd !== '') { // TODO this should be done via form validation
-      this.$store.dispatch('login', {email: this.lemail, password: this.lpwd})   
+      this.$store.dispatch("login", {
+        email: this.lemail,
+        password: this.lpwd
+      });
       //}
     },
     createUser() {
-      this.$store.dispatch('createUser', {email:this.remail, first_name:this.rfname, last_name:this.rlname, password:this.rpwd})            
+      this.$store.dispatch("createUser", {
+        email: this.remail,
+        first_name: this.rfname,
+        last_name: this.rlname,
+        password: this.rpwd
+      });
     },
-    loginAsAdmin () {      
+    loginAsAdmin() {
-       console.log("app.vue admin login(): " + this.$store.state.is_admin)
+      console.log("app.vue admin login(): " + this.$store.state.is_admin);
-      this.modals = false
+      this.modals = false;
-      this.$store.commit('loginAsAdmin')
+      this.$store.commit("loginAsAdmin");
-      this.$router.push('/AdminOverview')   
+      this.$router.push("/AdminOverview");
     }
   }
 };

frontend/src/views/Layout/AdminLayout.vue

@@ -7,41 +7,38 @@
           :link="{
             name: 'Kontoübersicht',
             path: '/overview',
-            icon: 'ni ni-tv-2 text-primary',
+            icon: 'ni ni-tv-2 text-primary'
           }"
-        >
+        ></sidebar-item>
-        </sidebar-item> 
         <sidebar-item
           :link="{
             name: 'User Profile',
             path: '/profile',
             icon: 'ni ni-single-02 text-yellow'
-                }">
+          }"
-        </sidebar-item>
+        ></sidebar-item>
         <sidebar-item
           :link="{
             name: 'Login',
             path: '/login',
             icon: 'ni ni-key-25 text-info'
-                  }">
+          }"
-        </sidebar-item>
+        ></sidebar-item>
         <sidebar-item
           :link="{
             name: 'Register',
             path: '/register',
             icon: 'ni ni-circle-08 text-pink'
-                  }">
+          }"
-        </sidebar-item>
+        ></sidebar-item>
       </template>
 
       <template slot="links-after">
-        <hr class="my-3">
+        <hr class="my-3" />
         <h6 class="navbar-heading p-0 text-muted">Community</h6>
 
         <b-nav class="navbar-nav mb-md-3">
-          <b-nav-item
+          <b-nav-item href="https://gradido.net/de/" target="_blank">
-               href="https://gradido.net/de/" target="_blank"
-               >
             <i class="ni ni-spaceship"></i>
             <b-nav-text class="p-0">GRADIDO.net</b-nav-text>
           </b-nav-item>
@@ -70,15 +67,15 @@
   </div>
 </template>
 <script>
-  /* eslint-disable no-new */
+/* eslint-disable no-new */
-  import PerfectScrollbar from 'perfect-scrollbar';
+import PerfectScrollbar from "perfect-scrollbar";
-  import 'perfect-scrollbar/css/perfect-scrollbar.css';
+import "perfect-scrollbar/css/perfect-scrollbar.css";
 
-  function hasElement(className) {
+function hasElement(className) {
   return document.getElementsByClassName(className).length > 0;
-  }
+}
 
-  function initScrollbar(className) {
+function initScrollbar(className) {
   if (hasElement(className)) {
     new PerfectScrollbar(`.${className}`);
   } else {
@@ -87,14 +84,14 @@
       initScrollbar(className);
     }, 100);
   }
-  }
+}
 
-  import DashboardNavbar from './DashboardNavbar.vue';
+import DashboardNavbar from "./DashboardNavbar.vue";
-  import ContentFooter from './ContentFooter.vue';
+import ContentFooter from "./ContentFooter.vue";
-  import DashboardContent from './Content.vue';
+import DashboardContent from "./Content.vue";
-  import { FadeTransition } from 'vue2-transitions';
+import { FadeTransition } from "vue2-transitions";
 
-  export default {
+export default {
   components: {
     DashboardNavbar,
     ContentFooter,
@@ -103,16 +100,15 @@
   },
   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 lang="scss"></style>
-</style>

frontend/src/views/Layout/AuthLayout.vue

@@ -9,7 +9,7 @@
     >
       <div slot="brand" class="navbar-wrapper">
         <b-navbar-brand to="/overview">
-          <img src="img/brand/white.png">
+          <img src="img/brand/white.png" />
         </b-navbar-brand>
       </div>
 
@@ -18,44 +18,56 @@
           <b-row>
             <b-col cols="6" class="collapse-brand">
               <router-link to="/overview">
-               <img src="img/brand/green.png">
+                <img src="img/brand/green.png" />
               </router-link>
             </b-col>
             <b-col cols="6" class="collapse-close">
-             <button type="button" class="navbar-toggler" @click="showMenu = false">
+              <button
+                type="button"
+                class="navbar-toggler"
+                @click="showMenu = false"
+              >
                 <span></span>
                 <span></span>
               </button>
             </b-col>
           </b-row>
         </div>
-         
       </template>
     </base-nav>
 
     <div class="main-content">
-      <zoom-center-transition
+      <zoom-center-transition :duration="pageTransitionDuration" mode="out-in">
-        :duration="pageTransitionDuration"
-        mode="out-in"
-      >
         <router-view></router-view>
       </zoom-center-transition>
     </div>
 
     <footer class="py-5" id="footer-main">
-      <b-container >
+      <b-container>
         <b-row align-v="center" class="justify-content-xl-between">
           <b-col xl="6">
             <div class="copyright text-center text-xl-left text-muted">
-               © {{year}} <a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">Gradido-Akademie</a>
+              © {{ year }}
+              <a
+                href="https://gradido.net/"
+                class="font-weight-bold ml-1"
+                target="_blank"
+              >
+                Gradido-Akademie
+              </a>
             </div>
           </b-col>
           <b-col xl="6" class="col-xl-6">
-            <b-nav class="nav-footer justify-content-center justify-content-lg-end">
+            <b-nav
+              class="nav-footer justify-content-center justify-content-lg-end"
+            >
               <b-nav-item ref="https://www.creative-tim.com" target="_blank">
                 Gradido
               </b-nav-item>
-              <b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
+              <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">
@@ -69,10 +81,10 @@
   </div>
 </template>
 <script>
-  import { BaseNav } from '@/components';
+import { BaseNav } from "@/components";
-  import { ZoomCenterTransition } from 'vue2-transitions';
+import { ZoomCenterTransition } from "vue2-transitions";
 
-  export default {
+export default {
   components: {
     BaseNav,
     ZoomCenterTransition
@@ -80,7 +92,7 @@
   props: {
     backgroundColor: {
       type: String,
-        default: 'black'
+      default: "black"
     }
   },
   data() {
@@ -89,7 +101,7 @@
       menuTransitionDuration: 250,
       pageTransitionDuration: 200,
       year: new Date().getFullYear(),
-        pageClass: 'login-page'
+      pageClass: "login-page"
     };
   },
   computed: {
@@ -99,24 +111,24 @@
   },
   methods: {
     toggleNavbar() {
-        document.body.classList.toggle('nav-open');
+      document.body.classList.toggle("nav-open");
       this.showMenu = !this.showMenu;
     },
     closeMenu() {
-        document.body.classList.remove('nav-open');
+      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();
       } else {
-          this.removeBackgroundColor()
+        this.removeBackgroundColor();
       }
     }
   },
@@ -137,16 +149,16 @@
   watch: {
     $route: {
       immediate: true,
-        handler: function () {
+      handler: function() {
-          this.updateBackground()
+        this.updateBackground();
       }
     }
   }
-  };
+};
 </script>
 <style lang="scss">
-  $scaleSize: 0.8;
+$scaleSize: 0.8;
-  @keyframes zoomIn8 {
+@keyframes zoomIn8 {
   from {
     opacity: 0;
     transform: scale3d($scaleSize, $scaleSize, $scaleSize);
@@ -154,13 +166,13 @@
   100% {
     opacity: 1;
   }
-  }
+}
 
-  .main-content .zoomIn {
+.main-content .zoomIn {
   animation-name: zoomIn8;
-  }
+}
 
-  @keyframes zoomOut8 {
+@keyframes zoomOut8 {
   from {
     opacity: 1;
   }
@@ -168,9 +180,9 @@
     opacity: 0;
     transform: scale3d($scaleSize, $scaleSize, $scaleSize);
   }
-  }
+}
 
-  .main-content .zoomOut {
+.main-content .zoomOut {
   animation-name: zoomOut8;
-  }
+}
 </style>

frontend/src/views/Layout/AuthLayout_gdd.vue

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

frontend/src/views/Layout/Content.vue

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

frontend/src/views/Layout/ContentFooter.vue

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

frontend/src/views/Layout/DashboardLayout.vue

@@ -2,29 +2,31 @@
   <div class="wrapper">
     <notifications></notifications>
     <side-bar>
-      <template slot="links" >
+      <template slot="links">
-       
         <b-nav-item href="#!" to="/overview">
-               
+          <b-nav-text class="p-0 text-lg text-muted">
-              <b-nav-text class="p-0 text-lg text-muted">{{ $t('sent')}}</b-nav-text>
+            {{ $t("sent") }}
+          </b-nav-text>
         </b-nav-item>
         <b-nav-item href="#!" to="/transactions">
           <b-nav-text class="p-0 text-lg text-muted">Transaktionen</b-nav-text>
         </b-nav-item>
         <b-nav-item href="#!" to="/profile">
-             
+          <b-nav-text class="p-0 text-lg text-muted">
-              <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil')}}</b-nav-text>
+            {{ $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">
-              <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
+            {{ $t("site.navbar.settings") }}
+          </b-nav-text>
         </b-nav-item>
 
         <b-nav-item href="#!" to="/activity">
-              <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
+          <b-nav-text class="p-0 text-lg text-muted">
+            {{ $t("site.navbar.activity") }}
+          </b-nav-text>
         </b-nav-item>
-          
-          
       </template>
     </side-bar>
     <div class="main-content">
@@ -41,15 +43,15 @@
   </div>
 </template>
 <script>
-  /* eslint-disable no-new */
+/* eslint-disable no-new */
-  import PerfectScrollbar from 'perfect-scrollbar';
+import PerfectScrollbar from "perfect-scrollbar";
-  import 'perfect-scrollbar/css/perfect-scrollbar.css';
+import "perfect-scrollbar/css/perfect-scrollbar.css";
 
-  function hasElement(className) {
+function hasElement(className) {
   return document.getElementsByClassName(className).length > 0;
-  }
+}
 
-  function initScrollbar(className) {
+function initScrollbar(className) {
   if (hasElement(className)) {
     new PerfectScrollbar(`.${className}`);
   } else {
@@ -58,14 +60,14 @@
       initScrollbar(className);
     }, 100);
   }
-  }
+}
 
-  import DashboardNavbar from './DashboardNavbar.vue';
+import DashboardNavbar from "./DashboardNavbar.vue";
-  import ContentFooter from './ContentFooter.vue';
+import ContentFooter from "./ContentFooter.vue";
-  // import DashboardContent from './Content.vue';
+// import DashboardContent from './Content.vue';
-  import { FadeTransition } from 'vue2-transitions';
+import { FadeTransition } from "vue2-transitions";
 
-  export default {
+export default {
   components: {
     DashboardNavbar,
     ContentFooter,
@@ -74,16 +76,15 @@
   },
   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 lang="scss"></style>
-</style>

frontend/src/views/Layout/DashboardNavbar.vue

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

frontend/src/views/Maps/API_KEY.js

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

frontend/src/views/Pages/Explorer.vue

@@ -6,12 +6,21 @@
         <div class="header-body text-center mb-7">
           <p class="h1">GDD</p>
           <p class="h4">Explorer</p>
-          
         </div>
       </b-container>
       <div class="separator separator-bottom separator-skew zindex-100">
-        <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <svg
-          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
+          x="0"
+          y="0"
+          viewBox="0 0 2560 100"
+          preserveAspectRatio="none"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            class="fill-default"
+            points="2560 0 2560 100 0 100"
+          ></polygon>
         </svg>
       </div>
     </div>

frontend/src/views/Pages/Login.vue

@@ -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,45 +17,60 @@
     <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
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)"  >
+                v-slot="{ handleSubmit }"
-                  <base-input alternative
+                ref="formValidator"
+              >
+                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+                  <base-input
+                    alternative
                     class="mb-3"
                     name="Email"
-                              :rules="{required: true, email: true}"
+                    :rules="{ required: true, email: true }"
                     prepend-icon="ni ni-email-83"
                     placeholder="Email"
-                              v-model="model.email">
+                    v-model="model.email"
-                  </base-input>
+                  ></base-input>
 
-                  <base-input alternative
+                  <base-input
+                    alternative
                     class="mb-3"
                     name="Password"
-                              :rules="{required: true, min: 6}"
+                    :rules="{ required: true, min: 6 }"
                     prepend-icon="ni ni-lock-circle-open"
                     type="password"
                     :placeholder="$t('form.password')"
-                              v-model="model.password">
+                    v-model="model.password"
-                  </base-input>
+                  ></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!</strong>
+                          <strong>
+                            Leider konnten wir keinen Account finden mit diesen
+                            Daten!
+                          </strong>
                         </b-col>
-                                    <b-col class="text-right" >
+                        <b-col class="text-right">
                           <a href="#!" @click="closeAlert">
                             <div>
-    
+                              <b-icon-exclamation-triangle-fill
-                                          <b-icon-exclamation-triangle-fill class="h2 mb-0"></b-icon-exclamation-triangle-fill>
+                                class="h2 mb-0"
+                              ></b-icon-exclamation-triangle-fill>
                               <b-icon-x class="h1 pl-2"></b-icon-x>
                             </div>
                           </a>
@@ -66,7 +81,13 @@
 
                   <!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> -->
                   <div class="text-center">
-                    <base-button type="secondary" native-type="submit" class="my-4">{{ $t('site.login.signin')}}</base-button>
+                    <base-button
+                      type="secondary"
+                      native-type="submit"
+                      class="my-4"
+                    >
+                      {{ $t("site.login.signin") }}
+                    </base-button>
                   </div>
                 </b-form>
               </validation-observer>
@@ -74,10 +95,14 @@
           </b-card>
           <b-row class="mt-3">
             <b-col cols="6">
-              <router-link to="/password" >{{ $t('site.login.forgot_pwd')}}</router-link>
+              <router-link to="/password">
+                {{ $t("site.login.forgot_pwd") }}
+              </router-link>
             </b-col>
             <b-col cols="6" class="text-right">
-              <router-link to="/register">{{ $t('site.login.new_wallet')}}</router-link>
+              <router-link to="/register">
+                {{ $t("site.login.new_wallet") }}
+              </router-link>
             </b-col>
           </b-row>
         </b-col>
@@ -86,25 +111,27 @@
   </div>
 </template>
 <script>
-
+export default {
-  export default {
   name: "login",
   data() {
     return {
       model: {
-          email: '',
+        email: "",
-          password: ''
+        password: ""
         // rememberMe: false
       }
     };
   },
   methods: {
     onSubmit() {
-        this.$store.dispatch('login', {"email":  this.model.email, "password":  this.model.password})
+      this.$store.dispatch("login", {
+        email: this.model.email,
+        password: this.model.password
+      });
     },
-      closeAlert(){
+    closeAlert() {
-        this.$store.state.loginfail = false
+      this.$store.state.loginfail = false;
-      }
     }
   }
+};
 </script>

frontend/src/views/Pages/Password.vue

@@ -5,32 +5,47 @@
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1 >{{ $t('site.password.title')}}</h1>
+              <h1>{{ $t("site.password.title") }}</h1>
-              <p class="text-lead">{{ $t('site.password.subtitle')}}</p>
+              <p class="text-lead">{{ $t("site.password.subtitle") }}</p>
             </b-col>
           </b-row>
         </div>
       </b-container>
-    
     </div>
     <b-container class="mt--8 p-1">
       <b-row class="justify-content-center">
-        <b-col lg="6" md="8" >
+        <b-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
+                  <base-input
+                    alternative
                     class="mb-3"
                     prepend-icon="ni ni-email-83"
                     :placeholder="$t('form.email')"
                     name="Email"
-                    :rules="{required: true, email: true}"
+                    :rules="{ required: true, email: true }"
-                    v-model="model.email">
+                    v-model="model.email"
-                  </base-input>  
+                  ></base-input>
-                    {{form}}
+                  {{ form }}
                   <div class="text-center">
-                    <b-button type="submit" outline variant="secondary" class="mt-4" :disabled="disable">{{ $t('site.password.reset_now')}}</b-button>
+                    <b-button
+                      type="submit"
+                      outline
+                      variant="secondary"
+                      class="mt-4"
+                      :disabled="disable"
+                    >
+                      {{ $t("site.password.reset_now") }}
+                    </b-button>
                   </div>
                 </b-form>
               </validation-observer>
@@ -38,30 +53,30 @@
           </b-card>
         </b-col>
       </b-row>
-      <div class="text-center py-lg-4" >
+      <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 {
+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.$store.dispatch("passwordReset", { email: this.model.email });
-        this.model.email = ""
+      this.model.email = "";
-        this.$router.push('/thx')          
+      this.$router.push("/thx");
     }
   }
-  };
+};
 </script>
 <style></style>

frontend/src/views/Pages/Register.vue

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

frontend/src/views/Pages/UserProfile.vue

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

frontend/src/views/Pages/UserProfile/EditProfileForm.vue

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