Merge pull request #77 from gradido/eslint-rules

feat: Tougher eslint rules

frontend/.eslintignore

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

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/.prettierrc.js

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

frontend/babel.config.js

@@ -1,14 +1,12 @@
 module.exports = {
-  "presets": [
+  presets: ['@vue/app'],
-    "@vue/app"
+  plugins: [
-  ],
-  "plugins": [
     [
-      "component",
+      '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

@@ -1,34 +1,25 @@
 module.exports = {
   verbose: true,
-    collectCoverageFrom: [
+  collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'],
-      "**/*.{js,vue}",
-      "!**/node_modules/**",
-      "!**/?(*.)+(spec|test).js?(x)"
-    ],
   moduleFileExtensions: [
     'js',
     //'jsx',
     'json',
     'vue',
   ],
-    coverageReporters: [
+  coverageReporters: ['lcov'],
-      "lcov"
-    ],
   moduleNameMapper: {
-      '^@/(.*)$': '<rootDir>/src/$1'
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   transform: {
     '^.+\\.vue$': 'vue-jest',
     // '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-      "^.+\\.(js|jsx)?$": "babel-jest"
+    '^.+\\.(js|jsx)?$': 'babel-jest',
   },
   //setupFiles: [
   //  "<rootDir>/test/registerContext.js"
   //],
-    testMatch: [
+  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",
@@ -36,6 +45,7 @@
     "nouislider": "^12.1.0",
     "particles-bg-vue": "1.2.3",
     "perfect-scrollbar": "^1.3.0",
+    "prettier": "^2.2.1",
     "qrcode": "^1.4.4",
     "quill": "^1.3.6",
     "sweetalert2": "^9.5.4",

frontend/server.js

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

frontend/src/App.vue

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

frontend/src/apis/communityAPI.js

@@ -1,9 +1,9 @@
-import axios from 'axios';
+import axios from 'axios'
 import CONFIG from '../config'
 
 const apiGet = async (url) => {
   try {
-    const result = await axios.get(url);
+    const result = await axios.get(url)
     if (result.status !== 200) {
       throw new Error('HTTP Status Error ' + result.status)
     }
@@ -18,7 +18,7 @@ const apiGet = async (url) => {
 
 const apiPost = async (url, payload) => {
   try {
-    const result = await axios.post(url, payload);
+    const result = await axios.post(url, payload)
     if (result.status !== 200) {
       throw new Error('HTTP Status Error ' + result.status)
     }
@@ -45,7 +45,7 @@ const communityAPI = {
       amount,
       target_date,
       memo,
-      auto_sign: true
+      auto_sign: true,
     }
     return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload)
   },*/
@@ -55,10 +55,10 @@ const communityAPI = {
       email,
       amount,
       memo,
-      auto_sign: true
+      auto_sign: true,
     }
     return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_SEND_COINS + 'ajaxCreate/', payload)
-  }
+  },
 }
 
 export default communityAPI

frontend/src/apis/loginAPI.js

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios from 'axios'
 import CONFIG from '../config'
 
 // control email-text sended with email verification code
@@ -9,7 +9,7 @@ const EMAIL_TYPE = {
 
 const apiPost = async (url, payload) => {
   try {
-    const result = await axios.post(url, payload);
+    const result = await axios.post(url, payload)
     if (result.status !== 200) {
       throw new Error('HTTP Status Error ' + result.status)
     }
@@ -41,7 +41,7 @@ const loginAPI = {
       last_name,
       password,
       emailType: EMAIL_TYPE.DEFAULT,
-      login_after_register: true
+      login_after_register: true,
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload)
   },

frontend/src/components/Badge.vue

@@ -1,9 +1,5 @@
 <template>
-  <b-badge
+  <b-badge :variant="type" :pill="rounded" :size="size" :class="{ 'badge-circle': circle }">
-    :variant="type"
-    :pill="rounded"
-    :size="size"
-    :class="{'badge-circle': circle }">
     <slot>
       <i v-if="icon" :class="icon"></i>
     </slot>
@@ -11,40 +7,39 @@
 </template>
 <script>
 export default {
-    name: "badge",
+  name: 'badge',
   props: {
     tag: {
       type: String,
-        default: "span",
+      default: 'span',
-        description: "Html tag to use for the badge."
+      description: 'Html tag to use for the badge.',
     },
     rounded: {
       type: Boolean,
       default: false,
-        description: "Whether badge is of pill type"
+      description: 'Whether badge is of pill type',
     },
     circle: {
       type: Boolean,
       default: false,
-        description: "Whether badge is circle"
+      description: 'Whether badge is circle',
     },
     icon: {
       type: String,
-        default: "",
+      default: '',
-        description: "Icon name. Will be overwritten by slot if slot is used"
+      description: 'Icon name. Will be overwritten by slot if slot is used',
     },
     type: {
       type: String,
-        default: "default",
+      default: 'default',
-        description: "Badge type (primary|info|danger|default|warning|success)"
+      description: 'Badge type (primary|info|danger|default|warning|success)',
     },
     size: {
       type: String,
       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">
@@ -20,11 +19,13 @@
         <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,44 +34,43 @@
   </fade-transition>
 </template>
 <script>
-  import { FadeTransition } from 'vue2-transitions';
+import { FadeTransition } from 'vue2-transitions'
 
 export default {
   name: 'base-alert',
   components: {
-      FadeTransition
+    FadeTransition,
   },
   created() {
-      console.log("base-alert gesetzt in =>", this.$route.path )
+    //console.log('base-alert gesetzt in =>', this.$route.path)
   },
   props: {
     type: {
       type: String,
       default: 'default',
-        description: 'Alert type'
+      description: 'Alert type',
     },
     dismissible: {
       type: Boolean,
       default: false,
-        description: 'Whether alert is dismissible (closeable)'
+      description: 'Whether alert is dismissible (closeable)',
     },
     icon: {
       type: String,
       default: '',
-        description: 'Alert icon to display'
+      description: 'Alert icon to display',
-      }
+    },
   },
   data() {
     return {
-        visible: true
+      visible: true,
-      };
+    }
   },
   methods: {
     dismissAlert() {
-        console.log("sdddddddddddddddddddddddd")
+      this.visible = false
-        this.visible = false;
+      this.$store.state.loginfail = false
-        this.$store.state.loginfail = false;
+    },
+  },
 }
-    }
-  };
 </script>

frontend/src/components/BaseButton.vue

@@ -12,7 +12,7 @@
       { 'btn-wd': wide },
       { 'btn-icon btn-fab': icon },
       { 'btn-link': link },
-      { disabled: disabled }
+      { disabled: disabled },
     ]"
   >
     <slot name="loading">
@@ -34,33 +34,33 @@ export default {
     type: {
       type: String,
       default: 'default',
-      description: 'Button type (primary|secondary|danger etc)'
+      description: 'Button type (primary|secondary|danger etc)',
     },
     nativeType: {
       type: String,
       default: 'button',
-      description: 'Button native type (e.g button, input etc)'
+      description: 'Button native type (e.g button, input etc)',
     },
     size: {
       type: String,
       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 {

frontend/src/components/BaseDropdown.vue

@@ -14,17 +14,14 @@
         data-toggle="dropdown"
       >
         <slot name="title" :is-open="isOpen">
-          <i :class="icon"></i> {{ title }}
+          <i :class="icon"></i>
+          {{ title }}
         </slot>
       </component>
     </slot>
     <ul
       class="dropdown-menu"
-      :class="[
+      :class="[{ show: isOpen }, { 'dropdown-menu-right': menuOnRight }, menuClasses]"
-        { show: isOpen },
-        { 'dropdown-menu-right': menuOnRight },
-        menuClasses
-      ]"
     >
       <slot></slot>
     </ul>
@@ -37,60 +34,60 @@ export default {
     tag: {
       type: String,
       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',
-      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
-      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',
-      default: true
+      default: true,
-    }
+    },
   },
   data() {
     return {
-      isOpen: false
+      isOpen: false,
-    };
+    }
   },
   methods: {
     toggleDropDown() {
-      this.isOpen = !this.isOpen;
+      this.isOpen = !this.isOpen
-      this.$emit('change', this.isOpen);
+      this.$emit('change', this.isOpen)
     },
     closeDropDown() {
-      this.isOpen = false;
+      this.isOpen = false
-      this.$emit('change', false);
+      this.$emit('change', false)
+    },
+  },
 }
-  }
-};
 </script>
 <style lang="scss" scoped>
 .dropdown {

frontend/src/components/BaseHeader.vue

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

frontend/src/components/BaseProgress.vue

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

frontend/src/components/BaseSlider.vue

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

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

frontend/src/components/Breadcrumb/Breadcrumb.vue

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

frontend/src/components/Breadcrumb/BreadcrumbItem.vue

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

frontend/src/components/Breadcrumb/RouteBreadcrumb.vue

@@ -1,43 +1,40 @@
 <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"
       style="display: inline-block"
     >
-      <router-link
+      <router-link :to="{ name: route.name }" v-if="index < $route.matched.length - 1">
-        :to="{ name: route.name }"
-        v-if="index < $route.matched.length - 1"
-      >
         {{ route.name }}
       </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 {
   name: 'route-breadcrumb',
   components: {
     BreadCrumb,
-      BreadCrumbItem
+    BreadCrumbItem,
   },
   methods: {
     getBreadName(route) {
-        return route.name;
+      return route.name
+    },
+  },
 }
-    }
-  };
 </script>
 
 <style scoped></style>

frontend/src/components/ButtonCheckbox.vue

@@ -1,7 +1,7 @@
 <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>
@@ -12,16 +12,16 @@
   props: {
     value: {
       type: Boolean,
-        description: 'Checked value'
+      description: 'Checked value',
     },
     buttonClasses: {
       type: [String, Object],
-        description: 'Inner button css classes'
+      description: 'Inner button css classes',
-      }
+    },
   },
   model: {
     prop: 'value',
-      event: 'change'
+    event: 'change',
   },
   computed: {
     model: {
@@ -30,10 +30,9 @@
       },
       set(val) {
         this.$emit('change', val)
-        }
+      },
-      }
+    },
-    }
+  },
 }
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/ButtonRadioGroup.vue

@@ -1,10 +1,19 @@
 <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="">
+    >
+      <input
+        :value="option.value"
+        v-model="model"
+        type="radio"
+        id="option1"
+        autocomplete="off"
+        checked=""
+      />
       {{ option.label }}
     </label>
   </div>
@@ -16,20 +25,20 @@
     options: {
       type: Array,
       description: 'Radio options. Should be an array of objects {value: "", label: ""}',
-        default: () => []
+      default: () => [],
     },
     value: {
       type: String,
-        description: 'Radio value'
+      description: 'Radio value',
     },
     buttonClasses: {
       type: [String, Object],
-        description: 'Inner button css classes'
+      description: 'Inner button css classes',
-      }
+    },
   },
   model: {
     prop: 'value',
-      event: 'change'
+    event: 'change',
   },
   computed: {
     model: {
@@ -38,10 +47,9 @@
       },
       set(val) {
         this.$emit('change', val)
-        }
+      },
-      }
+    },
-    }
+  },
 }
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/Cards/Card.vue

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

frontend/src/components/Cards/StatsCard.vue

@@ -1,57 +1,58 @@
 <template>
   <card class="card-stats" :show-footer-line="true">
     <b-row>
-
       <b-col>
         <slot>
-          <h5 class="card-title text-uppercase text-muted mb-0" v-if="title">{{title}}</h5>
+          <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 {
   name: 'stats-card',
   components: {
-      Card
+    Card,
   },
   props: {
     type: {
       type: String,
-        default: 'primary'
+      default: 'primary',
     },
     icon: String,
     img: String,
     title: String,
     subTitle: String,
-      iconClasses: [String, Array]
+    iconClasses: [String, Array],
+  },
 }
-  };
 </script>
 <style></style>

frontend/src/components/Charts/BarChart.js

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

frontend/src/components/Charts/LineChart.js

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

frontend/src/components/Charts/config.js

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

frontend/src/components/Charts/optionHelpers.js

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

frontend/src/components/Charts/roundedCornersExtension.js

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

frontend/src/components/CloseButton.spec.js

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

frontend/src/components/CloseButton.vue

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

frontend/src/components/Collapse/Collapse.vue

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

frontend/src/components/Collapse/CollapseItem.vue

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

frontend/src/components/Inputs/BaseCheckbox.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="custom-control custom-checkbox"
+  <div
-       :class="[
+    class="custom-control custom-checkbox"
-       {disabled: disabled},
+    :class="[{ disabled: disabled }, { [`custom-checkbox-${type}`]: type }, inlineClass]"
-       {[`custom-checkbox-${type}`]: type},inlineClass]">
+  >
-    <input :id="cbId"
+    <input
+      :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>
@@ -18,61 +20,59 @@
 </template>
 <script>
 export default {
-    name: "base-checkbox",
+  name: 'base-checkbox',
   model: {
-      prop: "checked"
+    prop: 'checked',
   },
   props: {
     checked: {
       type: [Array, Boolean],
-        description: "Whether checkbox is checked"
+      description: 'Whether checkbox is checked',
     },
     disabled: {
       type: Boolean,
-        description: "Whether checkbox is disabled"
+      description: 'Whether checkbox is disabled',
     },
     inline: {
       type: Boolean,
-        description: "Whether checkbox is inline"
+      description: 'Whether checkbox is inline',
     },
     inputClasses: {
       type: [String, Object, Array],
-        description: "Checkbox input classes"
+      description: 'Checkbox input classes',
     },
     type: {
       type: String,
-        description: 'Checkbox type (e.g info, danger etc)'
+      description: 'Checkbox type (e.g info, danger etc)',
-      }
+    },
   },
   data() {
     return {
-        cbId: "",
+      cbId: '',
-        touched: false
+      touched: false,
-      };
+    }
   },
   computed: {
     model: {
       get() {
-          return this.checked;
+        return this.checked
       },
       set(check) {
         if (!this.touched) {
-            this.touched = true;
+          this.touched = true
-          }
-          this.$emit("input", check);
         }
+        this.$emit('input', check)
+      },
     },
     inlineClass() {
       if (this.inline) {
-          return `form-check-inline`;
+        return `form-check-inline`
       }
       return ''
-      }
+    },
   },
   created() {
-      this.cbId = Math.random()
+    this.cbId = Math.random().toString(16).slice(2)
-        .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>
       </slot>
-      <div :class="[
+      <div
+        :class="[
           { 'input-group': hasIcon },
-       {'focused': focused},
+          { focused: focused },
           { 'input-group-alternative': alternative },
           { 'has-label': label || $slots.label },
-       inputGroupClasses
+          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">
@@ -46,7 +58,7 @@
         </div>
       </slot>
       <slot name="error">
-        <div v-if="errors[0]" class="invalid-feedback" style="display: block;">
+        <div v-if="errors[0]" class="invalid-feedback" style="display: block">
           {{ errors[0] }}
         </div>
       </slot>
@@ -56,78 +68,78 @@
 <script>
 export default {
   inheritAttrs: false,
-    name: "base-input",
+  name: 'base-input',
   props: {
     required: {
       type: Boolean,
-        description: "Whether input is required (adds an asterix *)"
+      description: 'Whether input is required (adds an asterix *)',
     },
     group: {
       type: Boolean,
-        description: "Whether input is an input group (manual override in special cases)"
+      description: 'Whether input is an input group (manual override in special cases)',
     },
     alternative: {
       type: Boolean,
-        description: "Whether input is of alternative layout"
+      description: 'Whether input is of alternative layout',
     },
     label: {
       type: String,
-        description: "Input label (text before input)"
+      description: 'Input label (text before input)',
     },
     error: {
       type: String,
-        description: "Input error (below input)"
+      description: 'Input error (below input)',
     },
     successMessage: {
       type: String,
-        description: "Input success message",
+      description: 'Input success message',
-        default: ''
+      default: '',
     },
     labelClasses: {
       type: String,
-        description: "Input label css classes",
+      description: 'Input label css classes',
-        default: "form-control-label"
+      default: 'form-control-label',
     },
     inputClasses: {
       type: String,
-        description: "Input css classes"
+      description: 'Input css classes',
     },
     inputGroupClasses: {
       type: String,
-        description: "Input group css classes"
+      description: 'Input group css classes',
     },
     value: {
       type: [String, Number],
-        description: "Input value"
+      description: 'Input value',
     },
     type: {
       type: String,
-        description: "Input type",
+      description: 'Input type',
-        default: "text"
+      default: 'text',
     },
     appendIcon: {
       type: String,
-        description: "Append icon (right)"
+      description: 'Append icon (right)',
     },
     prependIcon: {
       type: String,
-        description: "Prepend icon (left)"
+      description: 'Prepend icon (left)',
     },
     rules: {
       type: [String, Array, Object],
       description: 'Vee validate validation rules',
-        default: ''
+      default: '',
     },
     name: {
       type: String,
       description: 'Input name (used for validation)',
-        default: ''
+      default: '',
-      }
+    },
   },
   data() {
     return {
-        focused: false
+      focused: false,
-      };
+    }
   },
   computed: {
     listeners() {
@@ -135,42 +147,41 @@
         ...this.$listeners,
         input: this.updateValue,
         focus: this.onFocus,
-          blur: this.onBlur
+        blur: this.onBlur,
-        };
+      }
     },
     slotData() {
       return {
         focused: this.focused,
         error: this.error,
-          ...this.listeners
+        ...this.listeners,
-        };
+      }
     },
     hasIcon() {
-        const { append, prepend } = this.$slots;
+      const { append, prepend } = this.$slots
       return (
         append !== undefined ||
         prepend !== undefined ||
         this.appendIcon !== undefined ||
         this.prependIcon !== undefined ||
         this.group
-        );
+      )
-      }
+    },
   },
   methods: {
     updateValue(evt) {
-        let value = evt.target.value;
+      let value = evt.target.value
-        this.$emit("input", value);
+      this.$emit('input', value)
     },
     onFocus(evt) {
-        this.focused = true;
+      this.focused = true
-        this.$emit("focus", evt);
+      this.$emit('focus', evt)
     },
     onBlur(evt) {
-        this.focused = false;
+      this.focused = false
-        this.$emit("blur", evt);
+      this.$emit('blur', evt)
+    },
+  },
 }
-    }
-  };
 </script>
-<style>
+<style></style>
-</style>

frontend/src/components/Inputs/BaseRadio.vue

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

frontend/src/components/LoadingPanel.vue

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

frontend/src/components/Modal-OLD.vue

@@ -1,6 +1,7 @@
 <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"
@@ -15,17 +16,19 @@
       :footer-class="footerClasses"
       :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,87 +39,86 @@
       <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 {
-    name: "modal",
+  name: 'modal',
   components: {
-      SlideYUpTransition
+    SlideYUpTransition,
   },
   props: {
     show: Boolean,
     showClose: {
       type: Boolean,
-        default: true
+      default: true,
     },
     type: {
       type: String,
-        default: "",
+      default: '',
       validator(value) {
-          let acceptedValues = ["", "notice", "mini"];
+        let acceptedValues = ['', 'notice', 'mini']
-          return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
       },
-        description: 'Modal type (notice|mini|"") '
+      description: 'Modal type (notice|mini|"") ',
     },
     modalClasses: {
       type: [Object, String],
-        description: "Modal dialog css classes"
+      description: 'Modal dialog css classes',
     },
     size: {
       type: String,
       description: 'Modal size',
       validator(value) {
-          let acceptedValues = ["", "sm", "lg"];
+        let acceptedValues = ['', 'sm', 'lg']
-          return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
       },
     },
     modalContentClasses: {
       type: [Object, String],
-        description: "Modal dialog content css classes"
+      description: 'Modal dialog content css classes',
     },
     gradient: {
       type: String,
-        description: "Modal gradient type (danger, primary etc)"
+      description: 'Modal gradient type (danger, primary etc)',
     },
     headerClasses: {
       type: [Object, String],
-        description: "Modal Header css classes"
+      description: 'Modal Header css classes',
     },
     bodyClasses: {
       type: [Object, String],
-        description: "Modal Body css classes"
+      description: 'Modal Body css classes',
     },
     footerClasses: {
       type: [Object, String],
-        description: "Modal Footer css classes"
+      description: 'Modal Footer css classes',
     },
     animationDuration: {
       type: Number,
       default: 500,
-        description: "Modal transition duration"
+      description: 'Modal transition duration',
-      }
+    },
   },
   methods: {
     closeModal() {
-        this.$emit("update:show", false);
+      this.$emit('update:show', false)
-        this.$emit("close");
+      this.$emit('close')
-      }
+    },
   },
   watch: {
     show(val) {
       if (val) {
-          this.$refs['app-modal'].show();
+        this.$refs['app-modal'].show()
       } else {
-          this.$refs['app-modal'].hide();
+        this.$refs['app-modal'].hide()
       }
+    },
+  },
 }
-    }
-  };
 </script>
 <style>
 .modal-backdrop {

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"
@@ -14,34 +15,28 @@
           invalid-feedback="Name is required"
           :state="nameState"
         >
-                  <b-form-input
+          <b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input>
-                    id="name-input"
-                    v-model="name"
-                    :state="nameState"
-                    required
-                  ></b-form-input>
         </b-form-group>
       </form>
     </div>
 
     <template slot="footer">
       <base-button type="white">Ok</base-button>
-            <base-button type="link" class="ml-auto" @click="$store.state.modals = false">abbrechen</base-button>
+      <base-button type="link" class="ml-auto" @click="$store.state.modals = false">
+        abbrechen
+      </base-button>
     </template>
   </modal>
-     
 </template>
 
 <script>
- 
-
 export default {
   name: 'modal',
   data() {
     return {
       name: '',
       nameState: null,
-        submittedNames: []
+      submittedNames: [],
     }
   },
   /*Modal*/
@@ -75,8 +70,8 @@
     this.$nextTick(() => {
       this.$bvModal.hide('modal-prevent-closing')
     })
+  },
 }
-  };
 </script>
 <style>
 .modal-backdrop {

frontend/src/components/Navbar/BaseNav.vue

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

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,14 +19,14 @@ export default {
   props: {
     target: {
       type: [String, Number],
-      description: 'Button target element'
+      description: 'Button target element',
     },
     toggled: {
       type: Boolean,
       default: false,
-      description: 'Whether button is toggled'
+      description: 'Whether button is toggled',
+    },
+  },
 }
-  }
-};
 </script>
 <style></style>

frontend/src/components/NotificationPlugin/Notification.vue

@@ -3,12 +3,7 @@
     @click="tryClose"
     data-notify="container"
     class="alert alert-notify alert-dismissible"
-    :class="[
+    :class="[{ 'alert-with-icon': icon }, verticalAlign, horizontalAlign, alertType]"
-      { 'alert-with-icon': icon },
-      verticalAlign,
-      horizontalAlign,
-      alertType
-    ]"
     role="alert"
     :style="customPosition"
     data-notify-position="top-center"
@@ -22,23 +17,18 @@
     </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
+      <content-render v-if="!message && component" :component="component"></content-render>
-        v-if="!message && component"
-        :component="component"
-      ></content-render>
     </span>
 
     <slot name="dismiss-icon">
-      <button type="button"
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click="close">
-              class="close"
-              data-dismiss="alert"
-              aria-label="Close"
-              @click="close">
         <span aria-hidden="true">×</span>
       </button>
     </slot>
@@ -52,140 +42,135 @@
       props: ['component'],
       render: function (createElement) {
         return createElement(this.component)
-        }
+      },
-      }
+    },
   },
   props: {
     message: String,
     title: {
       type: String,
-        description: 'Notification title'
+      description: 'Notification title',
     },
     icon: {
       type: String,
-        description: 'Notification icon'
+      description: 'Notification icon',
     },
     verticalAlign: {
       type: String,
       default: 'top',
-        validator: value => {
+      validator: (value) => {
-          let acceptedValues = ['top', 'bottom'];
+        let acceptedValues = ['top', 'bottom']
-          return acceptedValues.indexOf(value) !== -1;
+        return acceptedValues.indexOf(value) !== -1
       },
-        description: 'Vertical alignment of notification (top|bottom)'
+      description: 'Vertical alignment of notification (top|bottom)',
     },
     horizontalAlign: {
       type: String,
       default: 'right',
-        validator: value => {
+      validator: (value) => {
-          let acceptedValues = ['left', 'center', 'right'];
+        let acceptedValues = ['left', 'center', 'right']
-          return acceptedValues.indexOf(value) !== -1;
+        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',
-        validator: value => {
+      validator: (value) => {
-          let acceptedValues = [
+        let acceptedValues = ['default', 'info', 'primary', 'danger', 'warning', 'success']
-            'default',
+        return acceptedValues.indexOf(value) !== -1
-            'info',
-            'primary',
-            'danger',
-            'warning',
-            '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,
       default: 5000,
-        validator: value => {
+      validator: (value) => {
-          return value >= 0;
+        return value >= 0
       },
-        description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)'
+      description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)',
     },
     timestamp: {
       type: Date,
       default: () => new Date(),
-        description: 'Notification timestamp (used internally to handle notification removal correctly)'
+      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() {
     return {
-        elmHeight: 0
+      elmHeight: 0,
-      };
+    }
   },
   computed: {
     hasIcon() {
-        return this.icon && this.icon.length > 0;
+      return this.icon && this.icon.length > 0
     },
     alertType() {
-        return `alert-${this.type}`;
+      return `alert-${this.type}`
     },
     customPosition() {
-        let initialMargin = 20;
+      let initialMargin = 20
-        let alertHeight = this.elmHeight + 10;
+      let alertHeight = this.elmHeight + 10
-        let sameAlertsCount = this.$notifications.state.filter(alert => {
+      let sameAlertsCount = this.$notifications.state.filter((alert) => {
         return (
           alert.horizontalAlign === this.horizontalAlign &&
           alert.verticalAlign === this.verticalAlign &&
           alert.timestamp <= this.timestamp
-          );
+        )
-        }).length;
+      }).length
       if (this.$notifications.settings.overlap) {
-          sameAlertsCount = 1;
+        sameAlertsCount = 1
       }
-        let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
+      let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin
-        let styles = {};
+      let styles = {}
       if (this.verticalAlign === 'top') {
-          styles.top = `${pixels}px`;
+        styles.top = `${pixels}px`
       } else {
-          styles.bottom = `${pixels}px`;
+        styles.bottom = `${pixels}px`
-        }
-        return styles;
       }
+      return styles
+    },
   },
   methods: {
     close() {
-        this.$emit('close', this.timestamp);
+      this.$emit('close', this.timestamp)
     },
     tryClose(evt) {
       if (this.clickHandler) {
-          this.clickHandler(evt, this);
+        this.clickHandler(evt, this)
       }
       if (this.closeOnClick) {
-          this.close();
+        this.close()
-        }
       }
     },
+  },
   mounted() {
-      this.elmHeight = this.$el.clientHeight;
+    this.elmHeight = this.$el.clientHeight
     if (this.timeout) {
-        setTimeout(this.close, this.timeout);
+      setTimeout(this.close, this.timeout)
     }
+  },
 }
-  };
 </script>
 <style lang="scss">
 .notifications .alert {

frontend/src/components/NotificationPlugin/Notifications.vue

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

frontend/src/components/NotificationPlugin/index.js

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

frontend/src/components/SearchUser.vue

@@ -1,9 +1,5 @@
 <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'
@@ -15,71 +11,71 @@
 
 // Local registration
 export default {
-    name: "SearchUser",
+  name: 'SearchUser',
   components: {
-        VueBootstrapTypeahead
+    VueBootstrapTypeahead,
   },
   data() {
     return {
-        user: "",
+      user: '',
       users: [
-          "Bob",
+        'Bob',
-          "Alice",
+        'Alice',
-          "Bernd",
+        'Bernd',
-          "Dario",
+        'Dario',
-          "Alex",
+        'Alex',
-          "Pauls",
+        'Pauls',
-          "Ulf",
+        'Ulf',
-          "Delaware",
+        'Delaware',
-          "Florida",
+        'Florida',
-          "Georgia",
+        'Georgia',
-          "Hawaii",
+        'Hawaii',
-          "Idaho",
+        'Idaho',
-          "Illnois",
+        'Illnois',
-          "Indiana",
+        'Indiana',
-          "Iowa",
+        'Iowa',
-          "Kansas",
+        'Kansas',
-          "Kentucky",
+        'Kentucky',
-          "Louisiana",
+        'Louisiana',
-          "Maine",
+        'Maine',
-          "Maryland",
+        'Maryland',
-          "Massachusetts",
+        'Massachusetts',
-          "Michigan",
+        'Michigan',
-          "Minnesota",
+        'Minnesota',
-          "Mississippi",
+        'Mississippi',
-          "Missouri",
+        'Missouri',
-          "Montana",
+        'Montana',
-          "Nebraska",
+        'Nebraska',
-          "Nevada",
+        'Nevada',
-          "New Hampshire",
+        'New Hampshire',
-          "New Jersey",
+        'New Jersey',
-          "New Mexico",
+        'New Mexico',
-          "New York",
+        'New York',
-          "North Carolina",
+        'North Carolina',
-          "North Dakota",
+        'North Dakota',
-          "Ohio",
+        'Ohio',
-          "Oklahoma",
+        'Oklahoma',
-          "Oregon",
+        'Oregon',
-          "Pennsylvania",
+        'Pennsylvania',
-          "Rhode Island",
+        'Rhode Island',
-          "South Carolina",
+        'South Carolina',
-          "South Dakota",
+        'South Dakota',
-          "Tennessee",
+        'Tennessee',
-          "Texas",
+        'Texas',
-          "Utah",
+        'Utah',
-          "Vermont",
+        'Vermont',
-          "Virginia",
+        'Virginia',
-          "Washington",
+        'Washington',
-          "West Virginia",
+        'West Virginia',
-          "Wisconsin",
+        'Wisconsin',
-          "Wyoming"
+        'Wyoming',
-        ]
+      ],
-      };
+    }
   },
   methods: {
     getUser() {
       alert(this.data.user)
+    },
+  },
 }
-    }
-  };
 </script>

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -1,18 +1,19 @@
 <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">
@@ -53,13 +54,16 @@
         </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">
@@ -68,10 +72,9 @@
           </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">
@@ -91,24 +94,24 @@
   name: 'sidebar',
   components: {
     NavbarToggleButton,
-      VueQrcode
+    VueQrcode,
   },
   props: {
     logo: {
       type: String,
       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() {
     return {
-        autoClose: this.autoClose
+      autoClose: this.autoClose,
-      };
+    }
   },
   methods: {
     closeSidebar() {
@@ -119,12 +122,12 @@
     },
     logout() {
       this.$store.dispatch('logout')
-      }  
+    },
   },
   beforeDestroy() {
     if (this.$sidebar.showSidebar) {
-        this.$sidebar.showSidebar = false;
+      this.$sidebar.showSidebar = false
     }
+  },
 }
-  };
 </script>

frontend/src/components/SidebarPlugin/SidebarItem.vue

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

frontend/src/components/SidebarPlugin/index.js

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

frontend/src/components/Tabs/Tab.vue

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

frontend/src/components/Tabs/Tabs.vue

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

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

frontend/src/config/index.js

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

frontend/src/directives/click-ouside.js

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

frontend/src/i18n.js

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

frontend/src/main.js

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

frontend/src/plugins/dashboard-plugin.js

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

frontend/src/plugins/globalComponents.js

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

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

frontend/src/routes/router.js

@@ -10,17 +10,16 @@ const router = new VueRouter({
   linkActiveClass: 'active',
   scrollBehavior: (to, from, savedPosition) => {
     if (savedPosition) {
-      return savedPosition;
+      return savedPosition
     }
     if (to.hash) {
       return { selector: to.hash }
     }
     return { x: 0, y: 0 }
-  }
+  },
-});
+})
 
 router.beforeEach((to, from, next) => {
- 
   let language = to.params.lang
   if (!language) {
     language = 'de'

frontend/src/routes/routes.js

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

frontend/src/routes/starterRouter.js

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

frontend/src/store/store.js

@@ -14,17 +14,17 @@ export const store = new Vuex.Store({
     sizeGB: 'big',
     loginfail: false,
     user: {
-      name:"",
+      name: '',
       balance: 0,
-      balance_gdt: 0
+      balance_gdt: 0,
     },
     ajaxCreateData: {
       session_id: '',
-      email: "",
+      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
+      auto_sign: true,
     },
     transactions: [],
     modals: false,
@@ -32,9 +32,9 @@ export const store = new Vuex.Store({
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
         'Access-Control-Allow-Origin': '*',
-          'Access-Control-Allow-Credentials': 'true'
+        'Access-Control-Allow-Credentials': 'true',
-      }
+      },
-    }
+    },
   },
   getters: {
     //isLoggedIn: (state /*, getters */) => {
@@ -44,17 +44,16 @@ 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
-      $cookies.set('gdd_lang',  language);
+      $cookies.set('gdd_lang', language)
-      if (state.language == "de") {
+      if (state.language == 'de') {
         state.sizeDE = 'big'
         state.sizeGB = 'normal'
       } else {
         state.sizeDE = 'normal'
         state.sizeGB = 'big'
       }
-
     },
     loginfail: (state, loginfail) => {
       //console.log('mutation: email')
@@ -69,17 +68,17 @@ export const store = new Vuex.Store({
       state.session_id = session_id
     },
     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) => {
       //console.log('mutation: user_balance_gdt')
-      state.user.balance_gdt = (balance/10000)
+      state.user.balance_gdt = balance / 10000
     },
     transactions: (state, transactions) => {
       //console.log('mutation: transactions')
       state.transactions = transactions
-    }
+    },
   },
   // Asyncronous actions - used for api calls
   actions: {
@@ -88,8 +87,8 @@ export const store = new Vuex.Store({
       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_session_id', result.result.data.session_id)
-        $cookies.set('gdd_u',  data.email);
+        $cookies.set('gdd_u', data.email)
         router.push('/overview')
       } else {
         // Register failed, we perform a logout
@@ -100,19 +99,24 @@ export const store = new Vuex.Store({
       }
     },
     passwordReset: async (data) => {
-      console.log("<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>", data.email)
+      //console.log('<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>', data.email)
     },
     schoepfen: async (data) => {
       // http://localhost/transaction-creations/ajaxCreate
     },
     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(
+        data.email,
+        data.first_name,
+        data.last_name,
+        data.password,
+      )
       if (result.success) {
         commit('session_id', result.result.data.session_id)
         commit('email', data.email)
-        $cookies.set('gdd_session_id', result.result.data.session_id);
+        $cookies.set('gdd_session_id', result.result.data.session_id)
-        $cookies.set('gdd_u',  data.email);
+        $cookies.set('gdd_u', data.email)
         router.push('/overview')
       } else {
         // Register failed, we perform a logout
@@ -121,7 +125,7 @@ export const store = new Vuex.Store({
       }
     },
     logout: async ({ commit, state }) => {
-      console.log('action: logout')
+      //console.log('action: logout')
       // Are we actually logged in?
       if (state.session_id) {
         const result = await loginAPI.logout(state.session_id)
@@ -130,37 +134,37 @@ export const store = new Vuex.Store({
 
       commit('session_id', 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')
     },
     ajaxCreate: async ({ dispatch, state }) => {
-      console.log('action: ajaxCreate')
+      //console.log('action: ajaxCreate')
-      state.ajaxCreateData.amount = (state.ajaxCreateData.amount)*10000
+      state.ajaxCreateData.amount = state.ajaxCreateData.amount * 10000
-      const result = await communityAPI.send(state.session_id, state.ajaxCreateData.email, state.ajaxCreateData.amount, state.ajaxCreateData.memo) 
+      const result = await communityAPI.create($cookies.get('gdd_session_id', email, amount, memo))
-      console.log(result)
+      //console.log(result)
     },
     ajaxListTransactions: async ({ commit, dispatch, state }) => {
       // 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) {
         commit('user_balance', result.result.data.balance)
       } else {
-        console.log('action accountBalance to  logout start')
+        //console.log('action accountBalance to  logout start')
         dispatch('logout')
       }
-    }
+    },
-  }  
+  },
 })

frontend/src/util/throttle.js

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

frontend/src/vee-validate.js

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

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">
               <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>
 
@@ -123,55 +135,45 @@
               </b-col>
             </b-row>
 
-            <bar-chart
+            <bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
-              :height="350"
-              ref="barChart"
-              :chart-data="redBarChart.chartData"
-            >
-            </bar-chart>
           </card>
         </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 />
 
-
+      <br />
-    <br> 
 
       <b-card-header>
-     <hr>
+        <hr />
         <h3>Admin Participation List</h3>
         <small>/public/json-example/admin_card_statistic.json</small>
         <p>
           {{ cardstatistic }}
         </p>
-
       </b-card-header>
       <b-card-header>
-   <hr>
+        <hr />
         <h3>Admin Charts Statistic</h3>
         <small>/public/json-example/admin_charts_statistic.json</small>
         <p>
           {{ chartsstatistic }}
         </p>
-
       </b-card-header>
       <b-card-header>
-       <hr>
+        <hr />
         <h3>Admin Community Statistic</h3>
         <small>/public/json-example/admin_community_statistic.json</small>
         <p>
@@ -179,7 +181,7 @@
         </p>
       </b-card-header>
       <b-card-header>
-    <hr>
+        <hr />
         <h3>Admin User List</h3>
         <small>/public/json-example/admin_userlist.json</small>
         <p>
@@ -187,14 +189,14 @@
         </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 }}
         </p>
 
-      <hr>
+        <hr />
       </b-card-header>
       <b-card-header>
         <h3>Admin Transience List</h3>
@@ -205,27 +207,25 @@
       </b-card-header>
       <!--End tables-->
     </b-container>
-
   </div>
 </template>
 <script>
 // 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
-  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
 
-  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 {
   components: {
@@ -249,18 +249,18 @@
       transiencelist: [],
       filter: '',
       items: [
-          { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
+        { id: 1, first_name: 'Mikkel', last_name: 'Hansen', age: 54 },
-          { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
+        { id: 2, first_name: 'Kasper', last_name: 'Hvidt', age: 42 },
-          { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
+        { id: 3, first_name: 'Lasse', last_name: 'Boesen', age: 39 },
-          { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
+        { id: 4, first_name: 'Kasper', last_name: 'Hansen', age: 62 },
-          { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
+        { id: 5, first_name: 'Mads', last_name: 'Mikkelsen', age: 31 },
       ],
       bigLineChart: {
         allData: [
           [0, 20, 10, 30, 15, 40, 20, 60, 60],
           [0, 20, 5, 25, 10, 30, 35, 60, 40],
           [0, 2, 5, 7, 10, 30, 15, 9, 10],
-            [0, 2, 5, 7, 10, 14, 29, 78, 120]
+          [0, 2, 5, 7, 10, 14, 29, 78, 120],
         ],
         activeIndex: 0,
         chartData: {
@@ -268,7 +268,7 @@
             {
               label: 'Performance',
               data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
-              }
+            },
           ],
           labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         },
@@ -277,103 +277,118 @@
       redBarChart: {
         chartData: {
           labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-            datasets: [{
+          datasets: [
+            {
               label: 'Sales',
-              data: [25, 20, 30, 22, 17, 29]
+              data: [25, 20, 30, 22, 17, 29],
-            }]
+            },
+          ],
+        },
+        extraOptions: chartConfigs.blueChartOptions,
       },
-          extraOptions: chartConfigs.blueChartOptions
     }
-      };
   },
   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;
+          this.transiencelist = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(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;
+          this.transactionlist = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(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;
+          this.userlist = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(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;
+          this.communitystatistic = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(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;
+          this.chartsstatistic = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(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;
+          this.cardstatistic = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(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;
+          this.userdata = d.data
-          
+        },
-        }, (error) => {
+        (error) => {
-          console.log(error);
+          //console.log(error)
-        });
+        },
+      )
     },
     initBigChart(index) {
       let chartData = {
         datasets: [
           {
             label: 'Performance',
-              data: this.bigLineChart.allData[index]
+            data: this.bigLineChart.allData[index],
-            }
+          },
         ],
         labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        };
-        this.bigLineChart.chartData = chartData;
-        this.bigLineChart.activeIndex = index;
       }
+      this.bigLineChart.chartData = chartData
+      this.bigLineChart.activeIndex = index
+    },
   },
   mounted() {
-      this.initBigChart(0);
+    this.initBigChart(0)
-      this.TransienceList();
+    this.TransienceList()
-      this.TransactionList(); 
+    this.TransactionList()
-      this.UserList(); 
+    this.UserList()
-      this.CommunityStatistic();
+    this.CommunityStatistic()
-      this.ChartsStatistic();
+    this.ChartsStatistic()
-      this.CardStatistic();
+    this.CardStatistic()
-    }
+  },
- 
 }
 </script>
 <style>

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"
@@ -21,22 +19,17 @@
 
             skipDiacritics: true,
             searchFn: mySearchFn,
-        placeholder: 'durchsuche die tabelle'
+            placeholder: 'durchsuche die tabelle',
-         
           }"
           :pagination-options="{
             enabled: true,
-    mode: 'pages'
+            mode: 'pages',
           }"
         >
-       <div slot="table-actions">
+          <div slot="table-actions">Einträge suchen .</div>
-    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">
@@ -58,30 +51,25 @@
             <p>{{ creation.vgt_id }}</p>
           </b-card-body>
         </b-card>
-
       </b-col>
     </b-row>
     <!--End tables-->
-
-
-
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'admin-user-creation',
   data() {
     return {
       creation: {
-          createdAt:"",
+        createdAt: '',
-          group:"",
+        group: '',
-          id:"",
+        id: '',
-          name:"",
+        name: '',
-          originalIndex:"",
+        originalIndex: '',
-          text:"",
+        text: '',
-          vgt_id:"",
+        vgt_id: '',
       },
       columns: [
         {
@@ -107,51 +95,230 @@ export default {
         },
       ],
       rows: [
-        { id:1, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1",  text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:2, createdAt: '2021-01-31', name:"Jane",    group: "gruppe14", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 1,
-        { id:3, createdAt: '2021-01-30', name:"Susan",   group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          createdAt: '2021-01-25',
-        { id:4, createdAt: '2020-01-11', name:"Chris",   group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: 'Sellora',
-        { id:5, createdAt: '2020-12-21', name:"Dan",     group: "gruppe11", text: "Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: 'gruppe1',
-        { id:6, createdAt: '2020-12-31', name:"zBohn",    group: "gruppe71", text: "Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-        { id:7, createdAt: '2020-12-31', name:"xyTellohn", group: "gruppe31", text: "Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:8, createdAt: '2021-01-25', name:"uSellora", group: "gruppe1",  text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:9, createdAt: '2021-01-31', name:"yJane",    group: "gruppe14", text: "55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 2,
-        { id:10, createdAt: '2021-01-20', name:"kSusan",   group: "gruppe31", text: "IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          createdAt: '2021-01-31',
-        { id:11, createdAt: '2021-01-25', name:"qSellora", group: "gruppe12",  text: "aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: 'Jane',
-        { id:12, createdAt: '2021-01-31', name:"fJane",    group: "gruppe15", text: "WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: 'gruppe14',
-        { id:13, createdAt: '2021-01-38', name:"aSusan",   group: "gruppe1", text: "asssss  IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-        { id:14, createdAt: '2020-01-11', name:"uChris",   group: "gruppe12", text: "TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:15, createdAt: '2020-12-21', name:"tzDan",     group: "gruppe11", text: "Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:16, createdAt: '2020-12-31', name:"fBohn",    group: "gruppe71", text: "3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 3,
-        { id:17, createdAt: '2020-12-31', name:"aEsau",    group: "gruppe15", text: "2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          createdAt: '2021-01-30',
-        { id:18, createdAt: '2021-01-25', name:"gSellora", group: "gruppe1",  text: "5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: 'Susan',
-        { id:19, createdAt: '2021-01-31', name:"sJane",    group: "gruppe14", text: "as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: 'gruppe31',
-        { id:20, createdAt: '2021-01-30', name:"oSusan",   group: "gruppe31", text: "sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-        { id:21, createdAt: '2021-01-25', name:"Sellora", group: "gruppe1",  text: "3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:22, createdAt: '2021-01-13', name:"rtJane",    group: "gruppe14", text: "q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:23, createdAt: '2021-01-16', name:"rSusan",   group: "gruppe31", text: "Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 4,
-        { id:24, createdAt: '2020-01-15', name:"sChris",   group: "gruppe12", text: "43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          createdAt: '2020-01-11',
-        { id:25, createdAt: '2020-12-14', name:"dDan",     group: "gruppe11", text: "aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          name: 'Chris',
-        { id:26, createdAt: '2020-12-13', name:"fBohn",    group: "gruppe71", text: "Ta  adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          group: 'gruppe12',
-        { id:27, createdAt: '2020-12-12', name:"gTellohn", group: "gruppe31", text: "55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
-        { id:28, createdAt: '2021-01-12', name:"zSellora", group: "gruppe1",  text: "e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        },
-        { id:29, createdAt: '2021-01-12', name:"uJane",    group: "gruppe14", text: "erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+        {
-        { id:30, createdAt: '2021-01-11', name:"iSusan",   group: "gruppe31", text: "3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk" },
+          id: 5,
-       
+          createdAt: '2020-12-21',
+          name: 'Dan',
+          group: 'gruppe11',
+          text: 'Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 6,
+          createdAt: '2020-12-31',
+          name: 'zBohn',
+          group: 'gruppe71',
+          text: 'Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 7,
+          createdAt: '2020-12-31',
+          name: 'xyTellohn',
+          group: 'gruppe31',
+          text: 'Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 8,
+          createdAt: '2021-01-25',
+          name: 'uSellora',
+          group: 'gruppe1',
+          text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 9,
+          createdAt: '2021-01-31',
+          name: 'yJane',
+          group: 'gruppe14',
+          text: '55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 10,
+          createdAt: '2021-01-20',
+          name: 'kSusan',
+          group: 'gruppe31',
+          text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 11,
+          createdAt: '2021-01-25',
+          name: 'qSellora',
+          group: 'gruppe12',
+          text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 12,
+          createdAt: '2021-01-31',
+          name: 'fJane',
+          group: 'gruppe15',
+          text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 13,
+          createdAt: '2021-01-38',
+          name: 'aSusan',
+          group: 'gruppe1',
+          text: 'asssss  IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 14,
+          createdAt: '2020-01-11',
+          name: 'uChris',
+          group: 'gruppe12',
+          text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 15,
+          createdAt: '2020-12-21',
+          name: 'tzDan',
+          group: 'gruppe11',
+          text: 'Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 16,
+          createdAt: '2020-12-31',
+          name: 'fBohn',
+          group: 'gruppe71',
+          text: '3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 17,
+          createdAt: '2020-12-31',
+          name: 'aEsau',
+          group: 'gruppe15',
+          text: '2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 18,
+          createdAt: '2021-01-25',
+          name: 'gSellora',
+          group: 'gruppe1',
+          text: '5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 19,
+          createdAt: '2021-01-31',
+          name: 'sJane',
+          group: 'gruppe14',
+          text: 'as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 20,
+          createdAt: '2021-01-30',
+          name: 'oSusan',
+          group: 'gruppe31',
+          text: 'sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 21,
+          createdAt: '2021-01-25',
+          name: 'Sellora',
+          group: 'gruppe1',
+          text: '3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 22,
+          createdAt: '2021-01-13',
+          name: 'rtJane',
+          group: 'gruppe14',
+          text: 'q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 23,
+          createdAt: '2021-01-16',
+          name: 'rSusan',
+          group: 'gruppe31',
+          text: 'Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 24,
+          createdAt: '2020-01-15',
+          name: 'sChris',
+          group: 'gruppe12',
+          text: '43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 25,
+          createdAt: '2020-12-14',
+          name: 'dDan',
+          group: 'gruppe11',
+          text: 'aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 26,
+          createdAt: '2020-12-13',
+          name: 'fBohn',
+          group: 'gruppe71',
+          text: 'Ta  adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 27,
+          createdAt: '2020-12-12',
+          name: 'gTellohn',
+          group: 'gruppe31',
+          text: '55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 28,
+          createdAt: '2021-01-12',
+          name: 'zSellora',
+          group: 'gruppe1',
+          text: 'e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 29,
+          createdAt: '2021-01-12',
+          name: 'uJane',
+          group: 'gruppe14',
+          text: 'erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
+        {
+          id: 30,
+          createdAt: '2021-01-11',
+          name: 'iSusan',
+          group: 'gruppe31',
+          text: '3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
+        },
       ],
-    };
+    }
   },
   methods: {
     onRowClick(params) {
-     
+      /*
-    console.log("onRowClick", params.row.createdAt)
+      console.log('onRowClick', params.row.createdAt)
-    console.log("onRowClick", params.row.group)
+      console.log('onRowClick', params.row.group)
-    console.log("onRowClick", params.row.id)
+      console.log('onRowClick', params.row.id)
-    console.log("onRowClick", params.row.name)
+      console.log('onRowClick', params.row.name)
-    console.log("onRowClick", params.row.originalIndex)
+      console.log('onRowClick', params.row.originalIndex)
-    console.log("onRowClick", params.row.text)
+      console.log('onRowClick', params.row.text)
-    console.log("onRowClick", params.row.vgt_id)
+      console.log('onRowClick', params.row.vgt_id)
-   
+      */
 
       this.creation.createdAt = params.row.createdAt
       this.creation.group = params.row.group
@@ -168,13 +335,13 @@ export default {
       // params.event - click event
     },
     onSearch(params) {
-      console.log("onSearch", params)
+      //console.log('onSearch', params)
       // params.searchTerm - term being searched for
       // params.rowCount - number of rows that match search
     },
     mySearchFn(params) {
       //console.log("mySearchFn", params)
+    },
+  },
 }
-  }
-};
 </script>

frontend/src/views/AdminOverview/AdminUserSearch.vue

@@ -18,17 +18,14 @@
             enabled: true,
             skipDiacritics: true,
             searchFn: mySearchFn,
-                placeholder: 'durchsuche die tabelle'
+            placeholder: 'durchsuche die tabelle',
-                
           }"
           :pagination-options="{
             enabled: true,
-                mode: 'pages'
+            mode: 'pages',
-              }" >
+          }"
-                <div slot="table-actions">
+        >
-                  Mitglieder suchen  .
+          <div slot="table-actions">Mitglieder suchen .</div>
-                </div>
- 
         </vue-good-table>
       </b-col>
       <b-col xl="4" class="mb-5 mb-xl-0">
@@ -53,9 +50,15 @@
                 </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="">
@@ -65,7 +68,6 @@
                 </b-col>
               </b-row>
             </form>
-
           </b-card-body>
         </b-card>
 
@@ -77,13 +79,17 @@
                 <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="">
@@ -93,9 +99,16 @@
                 </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="">
@@ -105,10 +118,8 @@
                 </b-col>
               </b-row>
             </form>
-
           </b-card-body>
         </b-card>
-
       </b-col>
     </b-row>
   </div>
@@ -121,14 +132,14 @@ export default {
     return {
       showNewUser: true,
       formSetUser: {
-        name:"",
+        name: '',
-        email:"",
+        email: '',
-        group:""
+        group: '',
       },
       formGetUser: {
-        name:"",
+        name: '',
-        email:"",
+        email: '',
-        group:""
+        group: '',
       },
       columns: [
         {
@@ -154,20 +165,68 @@ export default {
         },
       ],
       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
       // params.row - row object
       // params.pageIndex - index of this row on the current page.
@@ -176,7 +235,7 @@ export default {
       // params.event - click event
     },
     onSearch(params) {
-      console.log(params)
+      //console.log(params)
       // params.searchTerm - term being searched for
       // params.rowCount - number of rows that match search
     },
@@ -184,20 +243,19 @@ export default {
       //console.log(params)
     },
     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 {
-          this.msg['email'] = 'Invalid Email Address';
+        this.msg['email'] = 'Invalid Email Address'
       }
     },
   },
   watch: {
     mail(value) {
       // binding this to the data value in the email input
-      this.email = value;
+      this.email = value
-      this.validateEmail(value);
+      this.validateEmail(value)
+    },
   },
 }
-};
 </script>

frontend/src/views/AdminOverview/default.vue

@@ -1,19 +1,14 @@
 <template>
-  <div>
+  <div>default</div>
-    default
-  </div>
 </template>
 
 <script>
 export default {
   name: 'default',
   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>
 
@@ -110,12 +112,7 @@
               </b-col>
             </b-row>
 
-            <bar-chart
+            <bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
-              :height="350"
-              ref="barChart"
-              :chart-data="redBarChart.chartData"
-            >
-            </bar-chart>
           </card>
         </b-col>
       </b-row>
@@ -132,22 +129,21 @@
       </b-row>
       <!--End tables-->
     </b-container>
-
   </div>
 </template>
 <script>
 // 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
-  import BaseProgress from '@/components/BaseProgress';
+import BaseProgress from '@/components/BaseProgress'
-  import StatsCard from '@/components/Cards/StatsCard';
+import StatsCard from '@/components/Cards/StatsCard'
 
 // Tables
-  import SocialTrafficTable from './Dashboard/SocialTrafficTable';
+import SocialTrafficTable from './Dashboard/SocialTrafficTable'
-  import PageVisitsTable from './Dashboard/PageVisitsTable';
+import PageVisitsTable from './Dashboard/PageVisitsTable'
 
 export default {
   components: {
@@ -156,14 +152,14 @@
     //BaseProgress,
     StatsCard,
     PageVisitsTable,
-      SocialTrafficTable
+    SocialTrafficTable,
   },
   data() {
     return {
       bigLineChart: {
         allData: [
           [0, 20, 10, 30, 15, 40, 20, 60, 60],
-            [0, 20, 5, 25, 10, 30, 15, 40, 40]
+          [0, 20, 5, 25, 10, 30, 15, 40, 40],
         ],
         activeIndex: 0,
         chartData: {
@@ -171,7 +167,7 @@
             {
               label: 'Performance',
               data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
-              }
+            },
           ],
           labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         },
@@ -180,14 +176,16 @@
       redBarChart: {
         chartData: {
           labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-            datasets: [{
+          datasets: [
+            {
               label: 'Sales',
-              data: [25, 20, 30, 22, 17, 29]
+              data: [25, 20, 30, 22, 17, 29],
-            }]
+            },
+          ],
+        },
+        extraOptions: chartConfigs.blueChartOptions,
       },
-          extraOptions: chartConfigs.blueChartOptions
     }
-      };
   },
   methods: {
     initBigChart(index) {
@@ -195,19 +193,19 @@
         datasets: [
           {
             label: 'Performance',
-              data: this.bigLineChart.allData[index]
+            data: this.bigLineChart.allData[index],
-            }
+          },
         ],
         labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        };
-        this.bigLineChart.chartData = chartData;
-        this.bigLineChart.activeIndex = index;
       }
+      this.bigLineChart.chartData = chartData
+      this.bigLineChart.activeIndex = index
+    },
   },
   mounted() {
-      this.initBigChart(0);
+    this.initBigChart(0)
+  },
 }
-  };
 </script>
 <style>
 .el-table .cell {

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">
@@ -23,13 +21,10 @@
           }"
           :pagination-options="{
             enabled: true,
-    mode: 'pages'
+            mode: 'pages',
           }"
         >
-       <div slot="table-actions">
+          <div slot="table-actions">Mitglieder suchen .</div>
-    Mitglieder suchen  .
-  </div>
- 
         </vue-good-table>
       </b-col>
       <b-col xl="4" class="mb-5 mb-xl-0">
@@ -37,20 +32,16 @@
       </b-col>
     </b-row>
     <!--End tables-->
-
-
-
-  
   </div>
 </template>
 
 <script>
-  import SocialTrafficTable from './SocialTrafficTable';
+import SocialTrafficTable from './SocialTrafficTable'
 
 export default {
   name: 'my-component',
   components: {
-      SocialTrafficTable      
+    SocialTrafficTable,
   },
   data() {
     return {
@@ -78,20 +69,68 @@ export default {
         },
       ],
       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,13 +138,13 @@ export default {
       // params.event - click event
     },
     onSearch(params) {
-      console.log(params)
+      //console.log(params)
       // params.searchTerm - term being searched for
       // params.rowCount - number of rows that match search
     },
     mySearchFn(params) {
-      console.log(params)
+      //console.log(params)
+    },
+  },
 }
-  }
-};
 </script>

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,28 +11,16 @@
       </b-row>
     </template>
 
-    <el-table class="table-responsive table"
+    <el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
-              :data="tableData"
+      <el-table-column label="Page name" min-width="130px" prop="page">
-              header-row-class-name="thead-light">
-      <el-table-column label="Page name"
-                       min-width="130px"
-                       prop="page">
         <template v-slot="{ row }">
           <div class="font-weight-600">{{ row.page }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="Visitors"
+      <el-table-column label="Visitors" min-width="70px" prop="visitors"></el-table-column>
-                       min-width="70px"
+      <el-table-column label="Unique users" min-width="90px" prop="unique"></el-table-column>
-                       prop="visitors">
-      </el-table-column>
-      <el-table-column label="Unique users"
-                       min-width="90px"
-                       prop="unique">
-      </el-table-column>
 
-      <el-table-column label="Bounce rate"
+      <el-table-column label="Bounce rate" min-width="90px" prop="bounceRate">
-                       min-width="90px"
-                       prop="bounceRate">
         <template v-slot="{ row }">
           {{ row.bounceRate }}
         </template>
@@ -59,36 +46,35 @@
           page: '/argon/',
           visitors: '4,569',
           unique: '340',
-            bounceRate: '46,53%'
+          bounceRate: '46,53%',
         },
         {
           page: '/argon/index.html',
           visitors: '3,985',
           unique: '319',
-            bounceRate: '46,53%'
+          bounceRate: '46,53%',
         },
         {
           page: '/argon/charts.html',
           visitors: '3,513',
           unique: '294',
-            bounceRate: '36,49%'
+          bounceRate: '36,49%',
         },
         {
           page: '/argon/tables.html',
           visitors: '2,050',
           unique: '147',
-            bounceRate: '50,87%'
+          bounceRate: '50,87%',
         },
         {
           page: '/argon/profile.html',
           visitors: '1,795',
           unique: '190',
-            bounceRate: '46,53%'
+          bounceRate: '46,53%',
-          }
+        },
-        ]
+      ],
-      }
     }
+  },
 }
 </script>
-<style>
+<style></style>
-</style>

frontend/src/views/Dashboard/SocialTrafficTable.vue

@@ -11,19 +11,14 @@
       </b-row>
     </template>
 
-
+    <el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
-    <el-table
-      class="table-responsive table"
-      :data="tableData"
-      header-row-class-name="thead-light">
       <el-table-column label="Referral" min-width="115px" prop="name">
         <template v-slot="{ row }">
           <div class="font-weight-600">{{ row.name }}</div>
         </template>
       </el-table-column>
 
-      <el-table-column label="Visitors" min-width="110px" prop="visitors">
+      <el-table-column label="Visitors" min-width="110px" prop="visitors"></el-table-column>
-      </el-table-column>
 
       <el-table-column min-width="220px" prop="progress">
         <template v-slot="{ row }">
@@ -37,7 +32,7 @@
   </b-card>
 </template>
 <script>
-  import { BaseProgress } from '@/components';
+import { BaseProgress } from '@/components'
 import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
 export default {
   name: 'social-traffic-table',
@@ -81,12 +76,10 @@
           visitors: '2,645',
           progress: 30,
           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,7 @@
       <b-row>
         <b-col>
           <b-card no-body class="border-0">
-            <div id="map-custom" class="map-canvas"
+            <div id="map-custom" class="map-canvas" style="height: 600px"></div>
-                 style="height: 600px;"></div>
           </b-card>
         </b-col>
       </b-row>
@@ -72,79 +74,96 @@
   </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 {
   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 myLatlng = new google.maps.LatLng(lat, lng)
       let mapOptions = {
         zoom: 12,
         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);
+      map = new google.maps.Map(map, mapOptions)
 
       let marker = new google.maps.Marker({
         position: myLatlng,
         map: map,
         animation: google.maps.Animation.DROP,
-          title: 'Hello World!'
+        title: 'Hello World!',
-        });
+      })
 
-        let contentString = '<div class="info-window-content"><h2>Argon Dashboard PRO</h2>' +
+      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
+        content: contentString,
-        });
+      })
 
       google.maps.event.addListener(marker, 'click', function () {
-          infowindow.open(map, marker);
+        infowindow.open(map, marker)
-        });
+      })
-      }
+    },
   },
   mounted() {
-      GoogleMapsLoader.load(google => {
+    GoogleMapsLoader.load((google) => {
-        this.initMap(google);
+      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,19 +21,18 @@
       <!-- <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 GddWorkTable from './KontoOverview/GddWorkTable.vue';
 
 export default {
-    name: "Overview",
+  name: 'Overview',
   components: {
     GddStatus,
     GddSend,
@@ -42,15 +41,13 @@
     //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,42 +20,83 @@
                   <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" />
                   </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
+                      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">
@@ -65,27 +108,42 @@
                   </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,7 +154,6 @@
 </template>
 
 <script>
- 
 export default {
   name: 'GDDAddWork',
   data() {
@@ -107,20 +164,20 @@ export default {
         to: '',
         hours: '',
         text: '',
-           gdd: 0.00,
+        gdd: 0.0,
         location: '',
         text2: '',
-           sendtime: ''
+        sendtime: '',
       },
-        timestamp: ""
+      timestamp: '',
     }
   },
   created() {
-    setInterval(this.getNow, 2000);
+    setInterval(this.getNow, 2000)
   },
   methods: {
     dateDiff() {
-      this.form.hours = ((((this.$moment(this.form.to)) - (this.$moment(this.form.from)))/1000)/3600)
+      this.form.hours = (this.$moment(this.form.to) - this.$moment(this.form.from)) / 1000 / 3600
     },
     getNow: function () {
       //const today = new Date()
@@ -131,13 +188,12 @@ export default {
     },
     onSubmit(event) {
       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()
       alert(JSON.stringify(this.form))
-     
     },
     onReset(event) {
       event.preventDefault()
@@ -148,7 +204,7 @@ export default {
       this.$nextTick(() => {
         this.show = true
       })
+    },
+  },
 }
-  }
-};
 </script>

frontend/src/views/KontoOverview/GddAddWork2.vue

@@ -2,10 +2,8 @@
   <div>
     <b-tabs content-class="mt-3" fill>
       <b-tab :title="names.thisMonth" active>
-        
         <b-row>
           <b-col cols="3">
-             
             <base-input label="Arbeitstunden">
               <b-form-input type="number" placeholder="23" />
             </base-input>
@@ -18,24 +16,26 @@
               <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-col cols="3">
-             
             <base-input label="Arbeitstunden">
               <b-form-input type="number" placeholder="23" />
             </base-input>
@@ -48,40 +48,45 @@
               <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>
         <p>{{ days.lastMonth }} Days in {{ names.lastMonth }}</p>
 
-      <p>Du hast diesen Monat 
+        <p>
+          Du hast diesen Monat
           {{ stundenSumme > 0 ? 'schon ' : 'noch keine' }}
           {{ stundenSumme > 0 ? '' + stundenSumme : '' }}
-              Stunden eingetragen</p>
+          Stunden eingetragen
-         
+        </p>
       </b-tab>
 
-  
-   
-  
       <b-tab :title="names.beforLastMonth">
-
         <b-row>
           <b-col cols="3">
-             
             <base-input label="Arbeitstunden">
               <b-form-input type="number" placeholder="23" />
             </base-input>
             <base-input label="Datum / Zeitraum">
-              <flat-pickr class="form-control" v-model="date" :config="beforLastConfig"></flat-pickr>
+              <flat-pickr
+                class="form-control"
+                v-model="date"
+                :config="beforLastConfig"
+              ></flat-pickr>
             </base-input>
           </b-col>
           <b-col cols="9">
@@ -89,32 +94,33 @@
               <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>
         <p>{{ days.beforLastMonth }} Days in {{ names.beforLastMonth }}</p>
         <p>Du hast noch keine Einträge</p>
-    
-     
       </b-tab>
-    
     </b-tabs>
- 
   </div>
 </template>
 
 <script>
-import flatPickr from "vue-flatpickr-component"
+import flatPickr from 'vue-flatpickr-component'
-import "flatpickr/dist/flatpickr.css"
+import 'flatpickr/dist/flatpickr.css'
 
 export default {
   name: 'GDDAddWork2',
@@ -124,25 +130,36 @@ export default {
       date: null,
       config: {
         altInput: false,
-        dateFormat: "d-m-Y",        
+        dateFormat: 'd-m-Y',
-        minDate:  this.$moment().startOf('month').format("DD.MM.YYYY"),
+        minDate: this.$moment().startOf('month').format('DD.MM.YYYY'),
-        maxDate: this.$moment().format("DD.MM.YYYY"),
+        maxDate: this.$moment().format('DD.MM.YYYY'),
-         mode: 'range'
+        mode: 'range',
-      
       },
       lastConfig: {
         altInput: false,
-        dateFormat: "d-m-Y",        
+        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: {
         altInput: false,
-        dateFormat: "d-m-Y",        
+        dateFormat: 'd-m-Y',
-        minDate:  this.$moment().month(this.$moment().month()-2).startOf('month').format("DD.MM.YYYY"),
+        minDate: this.$moment()
-        maxDate: this.$moment().month(this.$moment().month()-2).endOf('month').format("DD.MM.YYYY"),
+          .month(this.$moment().month() - 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: [],
@@ -151,46 +168,48 @@ export default {
       submitted: false,
       days: {
         thisMonth: this.$moment().month(this.$moment().month()).daysInMonth(),
-        lastMonth: this.$moment().month(this.$moment().month()-1).daysInMonth(),
+        lastMonth: this.$moment()
-        beforLastMonth: this.$moment().month(this.$moment().month()-2).daysInMonth(),
+          .month(this.$moment().month() - 1)
+          .daysInMonth(),
+        beforLastMonth: this.$moment()
+          .month(this.$moment().month() - 2)
+          .daysInMonth(),
       },
       names: {
         thisMonth: this.$moment().month(this.$moment().month()).format('MMMM'),
-        lastMonth: this.$moment().month(this.$moment().month()-1).format('MMMM'),
+        lastMonth: this.$moment()
-        beforLastMonth: this.$moment().month(this.$moment().month()-2).format('MMMM')
+          .month(this.$moment().month() - 1)
-      }
+          .format('MMMM'),
+        beforLastMonth: this.$moment()
+          .month(this.$moment().month() - 2)
+          .format('MMMM'),
+      },
     }
   },
-  created() {
+  created() {},
-    
-  },
   watch: {
     $form: function () {
       stunden(this.form)
-    }
+    },
   },
   methods: {
     getTR(m, i) {
-       console.log(m+"-"+i)
+      //console.log(m + '-' + i)
     },
     stunden(hour, i, mon) {
       let n = 0
-       console.log("stunden(form)=>", hour)
+      //console.log('stunden(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
-       console.log("arr.length => ", this.form.length) 
+      //console.log('arr.length => ', this.form.length)
       for (n; n < this.form.length; n++) {
-         console.log(">arr[n]=> ",this.form[n])
+        //console.log('>arr[n]=> ', this.form[n])
         if (this.form[n] > 0) {
-           this.stundenSumme += parseInt(this.form[n]) ;
+          this.stundenSumme += parseInt(this.form[n])
-           	
         }
-
-          
       }
       this.messages.push({
         id: this.index,
@@ -198,43 +217,42 @@ export default {
         DaysNumber: i,
         HoursNumber: hour,
         DestinationText: '',
-        	    TextDecoded: ''
+        TextDecoded: '',
-             });
+      })
       this.index++
-       console.log("this.stundenSumme ende=> ", this.stundenSumme) 
+      //console.log('this.stundenSumme ende=> ', this.stundenSumme)
     },
     addNewMessage: function () {
       this.messages.push({
         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.form.splice(event, null)
-        this.messages.splice(index, 1);
+      this.messages.splice(index, 1)
       this.index--
     },
     submitForm: function (e) {
-    	console.log(this.messages);
+      //console.log(this.messages)
 
-        this.messages = [{ DaysNumber: '', TextDecoded: '' }];
+      this.messages = [{ DaysNumber: '', TextDecoded: '' }]
-        this.submitted = true;
+      this.submitted = true
     },
     submitForm2() {
-      console.log("submitForm2 TODO")
+      //console.log('submitForm2 TODO')
     },
     submitForm3() {
-      console.log("submitForm3 TODO")
+      //console.log('submitForm3 TODO')
     },
     textFocus() {
-      console.log("textFocus TODO")
+      //console.log('textFocus TODO')
     },
     newWorkForm() {
-      console.log("newWorkForm TODO")
+      //console.log('newWorkForm TODO')
+    },
+  },
 }
-  }
-};
 </script>

frontend/src/views/KontoOverview/GddSend.vue

@@ -2,19 +2,24 @@
   <div>
     <b-row>
       <b-col xl="12" md="12">
-          
         <b-alert variant="warning" show dismissible>
-                  <strong>Achtung!</strong> Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
+          <strong>Achtung!</strong>
+          Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine
+          Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
         </b-alert>
         <b-card class="p-0 p-md-3">
- 
           <b-alert show variant="secondary">
-                            <span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
+            <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>                                          
@@ -27,29 +32,31 @@
                 <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" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset" v-if="show">                     
+            <b-form
-                  <br>
+              role="form"
+              @submit.prevent="handleSubmit(onSubmit)"
+              @reset="onReset"
+              v-if="show"
+            >
+              <br />
               <div>
                 <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
               </div>
-                  <br>
+              <br />
               <div>
-                     <b-col  class="text-left p-3 p-sm-1">
+                <b-col class="text-left p-3 p-sm-1">Empfänger</b-col>
-                       Empfänger                            
-                          </b-col>  
 
                 <b-input-group
                   id="input-group-1"
@@ -69,24 +76,25 @@
                     placeholder="E-Mail"
                     :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">
+                <b-col class="text-left p-3 p-sm-1">Betrag</b-col>
-                      Betrag
+                <b-col v-if="$store.state.user.balance == form.amount" class="text-right">
-                            
-                          </b-col> 
-                      <b-col v-if="($store.state.user.balance == form.amount)"  class="text-right">
                   <b-badge variant="primary">maximale anzahl GDD zum versenden erreicht!</b-badge>
                 </b-col>
-                    <b-input-group id="input-group-2" label="Betrag:" label-for="input-2"
+                <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,34 +104,42 @@
                     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">
+                <b-col class="text-left p-3 p-sm-1">Nachricht für den Empfänger</b-col>
-                       Nachricht für den Empfänger
-                          </b-col>         
 
                 <b-input-group>
                   <b-input-group-prepend class="p-3 d-none d-md-block">
                     <b-icon icon="chat-right-text" class="display-3"></b-icon>
                   </b-input-group-prepend>
-                      <b-form-textarea rows="3"  v-model="form.memo"  class="pl-3" style="font-size: x-large;" ></b-form-textarea>
+                  <b-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>
@@ -139,7 +155,7 @@ export default {
     QrcodeStream,
     QrcodeDropZone,
     // QrcodeCapture,
-        BIcon
+    BIcon,
   },
   data() {
     return {
@@ -149,7 +165,7 @@ export default {
         img: '',
         email: '',
         amount: '',
-          memo:''     
+        memo: '',
       },
       sent: false,
     }
@@ -159,21 +175,20 @@ export default {
       this.sent = true
     },
     async onDecode(decodedString) {
-           console.log('onDecode JSON.parse(decodedString)',JSON.parse(decodedString) )
+      //console.log('onDecode JSON.parse(decodedString)', JSON.parse(decodedString))
       const arr = JSON.parse(decodedString)
-           console.log('qr-email',arr[0].email )
+      //console.log('qr-email', arr[0].email)
-           console.log('qr-amount',arr[0].amount )
+      //console.log('qr-amount', arr[0].amount)
 
       this.form.email = arr[0].email
       this.form.amount1 = arr[0].amount
-
     },
     async onDetect(promise) {
       try {
         const {
           imageData, // raw image data of image/frame
           content, // decoded String
-            location      // QR code coordinates
+          location, // QR code coordinates
         } = await promise
         // console.log('onDetect promise',promise)
         //console.log('JSON.parse(decodedString)',JSON.parse(promise) )
@@ -201,7 +216,7 @@ export default {
       this.$nextTick(() => {
         this.show = true
       })
-      }
+    },
   },
   computed: {
     state() {
@@ -212,9 +227,9 @@ export default {
         return 'Geben Sie mindestens 4 Zeichen ein.'
       }
       return 'Bitte geben Sie eine GDD Adresse ein.'
+    },
+  },
 }
-    }  
-};
 </script>
 <style>
 video {

frontend/src/views/KontoOverview/GddStatus.vue

@@ -2,26 +2,21 @@
   <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">
-                      sub-title="balance_gdt"
-                      class="mb-4 h1">
           {{ $n($store.state.user.balance_gdt) }} GDT
         </stats-card>
       </b-col>
     </b-row>
-      
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GddStatus'
+  name: 'GddStatus',
-};
+}
 </script>

frontend/src/views/KontoOverview/GddTable.vue

@@ -1,26 +1,66 @@
 <template>
   <div>
-  
     <b-list-group>
-          <b-list-group-item v-for="item in filteredItems" :key="item.id" style="background-color:#ebebeba3 !important;"> 
+      <b-list-group-item
+        v-for="item in filteredItems"
+        :key="item.id"
+        style="background-color: #ebebeba3 !important"
+      >
         <div class="d-flex w-100 justify-content-between" @click="toogle(item)">
-            <b-icon v-if="item.type === 'send'" icon="box-arrow-left"   class="m-1"  font-scale="2" style="color:red"></b-icon>
+          <b-icon
-            <b-icon v-else icon="box-arrow-right" class="m-1"  font-scale="2" style="color:green" ></b-icon>       
+            v-if="item.type === 'send'"
-              <h1 class="mb-1">{{ $n((item.balance/10000)) }} <small>GDD</small></h1>
+            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>
+          <b-button v-b-toggle="'a' + item.transaction_id" variant="secondary">
+            <b>i</b>
+          </b-button>
         </div>
         <b-collapse :id="'a' + item.transaction_id" class="mt-2">
           <b-card>
             <b-list-group>
-                  <b-list-group-item> <b-badge class="mr-4" variant="primary" pill>name</b-badge>{{item.name}}</b-list-group-item>
+              <b-list-group-item>
-                  <b-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 v-b-toggle="'collapse-1-inner' + item.transaction_id" variant="secondary">
+              {{ $t('transaction.more') }}
+            </b-button>
             <b-collapse :id="'collapse-1-inner' + item.transaction_id" class="mt-2">
               <b-card>{{ item }}</b-card>
             </b-collapse>
@@ -28,18 +68,24 @@
         </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'
 
 export default {
@@ -49,8 +95,8 @@ export default {
       form: [],
       fields: ['balance', 'date', 'memo', 'name', 'transaction_id', 'type', 'details'],
       items: [],
-        count: 0
+      count: 0,
-    };
+    }
   },
 
   async created() {
@@ -61,15 +107,14 @@ export default {
       this.items = result.result.data.transactions
       this.count = result.result.data.count
     } else {
-        console.log('error',result)
+      //console.log('error', result)
     }
   },
   computed: {
     filteredItems(a) {
       // console.log("filteredItems date",a.items)
       return a.items
-    
+    },
-  }
   },
   methods: {
     rowClass(item, type) {
@@ -79,11 +124,11 @@ export default {
       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 {

frontend/src/views/KontoOverview/GddWorkTable.vue

@@ -3,9 +3,18 @@
     <b-list-group>
       <b-list-group-item v-for="item in items" :key="item.id">
         <div class="d-flex w-100 justify-content-between" @click="toogle(item)">
-          <b-icon v-if="item.status == 'submitted'" icon="clock-history"   class="m-1"  font-scale="2" style="color:orange"></b-icon>
+          <b-icon
+            v-if="item.status == 'submitted'"
+            icon="clock-history"
+            class="m-1"
+            font-scale="2"
+            style="color: orange"
+          ></b-icon>
           <b-icon v-else icon="check2-all" class="m-1" font-scale="2" style="color: green"></b-icon>
-            <h2 class="text-muted"><small>{{item.datel}}</small> - {{item.text}}</h2>
+          <h2 class="text-muted">
+            <small>{{ item.datel }}</small>
+            - {{ item.text }}
+          </h2>
         </div>
       </b-list-group-item>
     </b-list-group>
@@ -19,12 +28,32 @@ export default {
     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) {
@@ -34,10 +63,11 @@ export default {
       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 {

frontend/src/views/KontoOverview/default.vue

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

frontend/src/views/Landing.vue

@@ -17,27 +17,43 @@
               <router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link>
             </b-col>
           </b-row> -->
-          <hr>
+          <hr />
-          <p class="lead">
+          <p class="lead">Anmelden</p>
-            Anmelden
-          </p>
 
           <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>
 
@@ -46,10 +62,8 @@
             </b-col>
           </b-row>
 
-      <hr>
+          <hr />
-      <p class="lead">
+          <p class="lead">neues Mitglied anlegen</p>
-        neues Mitglied anlegen
-      </p>
 
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="6" class="px-5">
@@ -67,34 +81,58 @@
                   </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-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
+          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>
@@ -109,24 +147,32 @@ export default {
       rfname: '',
       rlname: '',
       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() {
-       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.$store.commit('loginAsAdmin')
       this.$router.push('/AdminOverview')
+    },
+  },
 }
-   }
-};
 </script>

frontend/src/views/Layout/AdminLayout.vue

@@ -9,39 +9,36 @@
             path: '/overview',
             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'
+            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'
+            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'
+            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>
@@ -71,48 +68,47 @@
 </template>
 <script>
 /* eslint-disable no-new */
-  import PerfectScrollbar from 'perfect-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar'
-  import 'perfect-scrollbar/css/perfect-scrollbar.css';
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
 
 function hasElement(className) {
-    return document.getElementsByClassName(className).length > 0;
+  return document.getElementsByClassName(className).length > 0
 }
 
 function initScrollbar(className) {
   if (hasElement(className)) {
-      new PerfectScrollbar(`.${className}`);
+    new PerfectScrollbar(`.${className}`)
   } else {
     // try to init it later in case this component is loaded async
     setTimeout(() => {
-        initScrollbar(className);
+      initScrollbar(className)
-      }, 100);
+    }, 100)
   }
 }
 
-  import DashboardNavbar from './DashboardNavbar.vue';
+import DashboardNavbar from './DashboardNavbar.vue'
-  import ContentFooter from './ContentFooter.vue';
+import ContentFooter from './ContentFooter.vue'
-  import DashboardContent from './Content.vue';
+import DashboardContent from './Content.vue'
-  import { FadeTransition } from 'vue2-transitions';
+import { FadeTransition } from 'vue2-transitions'
 
 export default {
   components: {
     DashboardNavbar,
     ContentFooter,
     //DashboardContent,
-      FadeTransition
+    FadeTransition,
   },
   methods: {
     initScrollbar() {
-        let isWindows = navigator.platform.startsWith('Win');
+      let isWindows = navigator.platform.startsWith('Win')
       if (isWindows) {
-          initScrollbar('sidenav');
+        initScrollbar('sidenav')
-        }
       }
     },
+  },
   mounted() {
     this.initScrollbar()
+  },
 }
-  };
 </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,7 +18,7 @@
           <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">
@@ -29,15 +29,11 @@
             </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>
@@ -47,14 +43,15 @@
         <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-item ref="https://www.creative-tim.com" target="_blank">
+              <b-nav-item ref="https://www.creative-tim.com" target="_blank">Gradido</b-nav-item>
-                Gradido
-              </b-nav-item>
               <b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
                 Impressum
               </b-nav-item>
@@ -69,19 +66,19 @@
   </div>
 </template>
 <script>
-  import { BaseNav } from '@/components';
+import { BaseNav } from '@/components'
-  import { ZoomCenterTransition } from 'vue2-transitions';
+import { ZoomCenterTransition } from 'vue2-transitions'
 
 export default {
   components: {
     BaseNav,
-      ZoomCenterTransition
+    ZoomCenterTransition,
   },
   props: {
     backgroundColor: {
       type: String,
-        default: 'black'
+      default: 'black',
-      }
+    },
   },
   data() {
     return {
@@ -89,49 +86,49 @@
       menuTransitionDuration: 250,
       pageTransitionDuration: 200,
       year: new Date().getFullYear(),
-        pageClass: 'login-page'
+      pageClass: 'login-page',
-      };
+    }
   },
   computed: {
     title() {
-        return `${this.$route.name} Page`;
+      return `${this.$route.name} Page`
-      }
+    },
   },
   methods: {
     toggleNavbar() {
-        document.body.classList.toggle('nav-open');
+      document.body.classList.toggle('nav-open')
-        this.showMenu = !this.showMenu;
+      this.showMenu = !this.showMenu
     },
     closeMenu() {
-        document.body.classList.remove('nav-open');
+      document.body.classList.remove('nav-open')
-        this.showMenu = false;
+      this.showMenu = false
     },
     setBackgroundColor() {
-        document.body.classList.add('bg-default');
+      document.body.classList.add('bg-default')
     },
     removeBackgroundColor() {
-        document.body.classList.remove('bg-default');
+      document.body.classList.remove('bg-default')
     },
     updateBackground() {
       if (!this.$route.meta.noBodyBackground) {
-          this.setBackgroundColor();
+        this.setBackgroundColor()
       } else {
         this.removeBackgroundColor()
       }
-      }
+    },
   },
   beforeDestroy() {
-      this.removeBackgroundColor();
+    this.removeBackgroundColor()
   },
   beforeRouteUpdate(to, from, next) {
     // Close the mobile menu first then transition to next page
     if (this.showMenu) {
-        this.closeMenu();
+      this.closeMenu()
       setTimeout(() => {
-          next();
+        next()
-        }, this.menuTransitionDuration);
+      }, this.menuTransitionDuration)
     } else {
-        next();
+      next()
     }
   },
   watch: {
@@ -139,10 +136,10 @@
       immediate: true,
       handler: function () {
         this.updateBackground()
+      },
+    },
+  },
 }
-      }
-    }
-  };
 </script>
 <style lang="scss">
 $scaleSize: 0.8;

frontend/src/views/Layout/AuthLayout_gdd.vue

@@ -12,7 +12,7 @@
 import ContentFooter from './ContentFooter.vue'
 export default {
   components: {
-     ContentFooter
+    ContentFooter,
   },
 }
 </script>

frontend/src/views/Layout/Content.vue

@@ -1,17 +1,17 @@
 <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
+    FadeTransition,
+  },
 }
-};
 </script>
 <style></style>

frontend/src/views/Layout/ContentFooter.vue

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

frontend/src/views/Layout/DashboardLayout.vue

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

frontend/src/views/Layout/DashboardNavbar.vue

@@ -4,7 +4,11 @@
     class="navbar-top navbar-expand"
     :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
+      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 -->
@@ -17,18 +21,19 @@
       </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>
               </span>
@@ -37,7 +42,6 @@
         </a>
 
         <template>
-
           <b-dropdown-header class="noti-title">
             <h6 class="text-overflow m-0">{{ $t('welcome') }}</h6>
           </b-dropdown-header>
@@ -64,7 +68,6 @@
             <i class="ni ni-user-run"></i>
             <span>{{ $t('logout') }}</span>
           </b-dropdown-item>
-
         </template>
       </base-dropdown>
     </b-navbar-nav>
@@ -79,43 +82,43 @@ export default {
   components: {
     //CollapseTransition,
     BaseNav,
-    VueQrcode
+    VueQrcode,
   },
   props: {
     type: {
       type: String,
       default: 'default', // default|light
-      description: 'Look of the dashboard navbar. Default (Green) or light (gray)'
+      description: 'Look of the dashboard navbar. Default (Green) or light (gray)',
-    }
+    },
   },
   computed: {
     routeName() {
-      const { name } = this.$route;
+      const { name } = this.$route
-      return this.capitalizeFirstLetter(name);
+      return this.capitalizeFirstLetter(name)
-    }
+    },
   },
   data() {
     return {
       activeNotifications: false,
       showMenu: false,
       searchModalVisible: false,
-      searchQuery: ''
+      searchQuery: '',
-    };
+    }
   },
   methods: {
     capitalizeFirstLetter(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
+      return string.charAt(0).toUpperCase() + string.slice(1)
     },
     toggleNotificationDropDown() {
-      this.activeNotifications = !this.activeNotifications;
+      this.activeNotifications = !this.activeNotifications
     },
     closeDropDown() {
-      this.activeNotifications = false;
+      this.activeNotifications = false
     },
     logout() {
       //console.log("DashboardNavbar.vue user logout() : ")
       this.$store.dispatch('logout')
+    },
+  },
 }
-  }
-};
 </script>

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,11 +6,17 @@
         <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
+          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>
@@ -19,9 +25,7 @@
 
     <div>
       <b-card>
-        <b-card-body>
+        <b-card-body>This is some text within a card body.</b-card-body>
-          This is some text within a card body.
-        </b-card-body>
       </b-card>
     </div>
   </div>

frontend/src/views/Pages/Login.vue

@@ -17,45 +17,48 @@
     <b-container class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
-          <b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important;">
+          <b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important">
             <b-card-body class="py-lg-4 px-sm-0 px-0 px-md-2 px-lg-4">
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('login') }}</small>
               </div>
               <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <base-input alternative
+                  <base-input
+                    alternative
                     class="mb-3"
                     name="Email"
                     :rules="{ required: true, email: true }"
                     prepend-icon="ni ni-email-83"
                     placeholder="Email"
-                              v-model="model.email">
+                    v-model="model.email"
-                  </base-input>
+                  ></base-input>
 
-                  <base-input alternative
+                  <base-input
+                    alternative
                     class="mb-3"
                     name="Password"
                     :rules="{ required: true, min: 6 }"
                     prepend-icon="ni ni-lock-circle-open"
                     type="password"
                     :placeholder="$t('form.password')"
-                              v-model="model.password">
+                    v-model="model.password"
-                  </base-input>
+                  ></base-input>
-
 
                   <b-alert v-show="$store.state.loginfail" show variant="warning">
-                     
                     <span class="alert-text bv-example-row">
                       <b-row>
                         <b-col class="col-9 text-left">
-                                      <strong>Leider konnten wir keinen Account finden mit diesen Daten!</strong>
+                          <strong>
+                            Leider konnten wir keinen Account finden mit diesen Daten!
+                          </strong>
                         </b-col>
                         <b-col class="text-right">
                           <a href="#!" @click="closeAlert">
                             <div>
-    
+                              <b-icon-exclamation-triangle-fill
-                                          <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 +69,9 @@
 
                   <!-- <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 +79,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 +95,27 @@
   </div>
 </template>
 <script>
-
 export default {
-    name: "login",
+  name: 'login',
   data() {
     return {
       model: {
         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() {
       this.$store.state.loginfail = false
-      }
+    },
-    }
+  },
 }
 </script>