From 4bc533a6569e92f21d4108bcb767f0eedcf2e778 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 29 Jun 2022 12:54:11 +0200
Subject: [PATCH] Add new client pages

---
 client/package.json                           |  5 +-
 client/src/components/MainNavigationBar.vue   | 73 +++++++++++++------
 client/src/components/icons/IconVbv.vue       | 22 ++++++
 client/src/input.css                          |  0
 client/src/router/index.ts                    | 24 ++++--
 client/src/stores/user.ts                     |  3 +
 client/src/views/DashboardView.vue            | 19 +++++
 client/src/views/HomeView.vue                 |  4 +-
 client/src/views/MediaView.vue                | 19 +++++
 client/src/views/ProfileView.vue              | 41 ++++-------
 client/src/views/ShopView.vue                 | 19 +++++
 client/src/views/StyelGuideView.vue           | 10 +++
 .../vbv_lernwelt/core/create_default_users.py |  5 +-
 .../static/icons/icon-vbv-pos.svg             | 37 ++++++++++
 server/vbv_lernwelt/static/icons/icon-vbv.svg | 37 ++++++++++
 15 files changed, 256 insertions(+), 62 deletions(-)
 create mode 100644 client/src/components/icons/IconVbv.vue
 create mode 100644 client/src/input.css
 create mode 100644 client/src/views/DashboardView.vue
 create mode 100644 client/src/views/MediaView.vue
 create mode 100644 client/src/views/ShopView.vue
 create mode 100644 server/vbv_lernwelt/static/icons/icon-vbv-pos.svg
 create mode 100644 server/vbv_lernwelt/static/icons/icon-vbv.svg

diff --git a/client/package.json b/client/package.json
index 2eb81179..c64f788f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,18 +33,19 @@
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "@vue/tsconfig": "^0.1.3",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.7",
     "cypress": "^9.5.3",
     "eslint": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^8.2.0",
     "happy-dom": "^5.3.1",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
     "prettier": "^2.5.1",
     "sass": "^1.50.1",
     "sass-loader": "^12.6.0",
     "start-server-and-test": "^1.14.0",
+    "tailwindcss": "^3.1.4",
     "typescript": "~4.6.3",
     "vite": "^2.9.1",
     "vitest": "^0.15.1",
diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 9e73317d..dcb80409 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -1,7 +1,12 @@
 <script setup>
+import * as log from 'loglevel';
 
 import { reactive } from 'vue';
+import { useUserStore } from '@/stores/user';
 
+log.debug('MainNavigationBar.vue created');
+
+const userStore = useUserStore();
 const state = reactive({showMenu: false});
 
 function toggleNav() {
@@ -27,15 +32,18 @@ function calcNavigationMobileOpenClasses() {
     >
       <div class="flex items-center justify-between">
         <router-link
-          to="/"
-          class="
-            font-bold
+          to="/" class="flex">
+          <it-icon-vbv class="h-8 w-16 -mt-3 -ml-3"/>
+          <div class="
             text-white
             text-2xl
-            hover:text-sky-500
             pr-10
+            pl-3
+            ml-1
+            border-l border-white
           "
-        >myVBV
+          >myVBV
+          </div>
         </router-link>
 
         <!-- Mobile menu button -->
@@ -48,18 +56,13 @@ function calcNavigationMobileOpenClasses() {
               focus:outline-none focus:text-sky-500
             "
           >
-            <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
-              <path
-                fill-rule="evenodd"
-                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
-              ></path>
-            </svg>
+            <it-icon-menu class="h-8 w-10"/>
           </button>
         </div>
       </div>
 
       <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-      <ul
+      <div
         :class="state.showMenu ? 'flex' : 'hidden'"
         class="
           flex-auto
@@ -69,17 +72,43 @@ function calcNavigationMobileOpenClasses() {
           lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
         "
       >
-        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Lernpfad</li>
-        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Kompetenzprofil</li>
+        <router-link
+          to="/dashboard"
+          class="
+              nav-item
+              underline underline-offset-[21px] decoration-sky-500 decoration-4
+          ">
+          Dashboard
+        </router-link>
+        <router-link to="/shop" class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Shop</router-link>
         <hr class="text-white lg:hidden">
-        <li class="hidden lg:list-item flex-auto"></li>
-        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Mediathek</li>
-        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal flex flex-row items-center">
-          <it-icon-message class="w-8 h-8 mr-2 lg:w-6 lg:h-6 lg:mr-1"/>
-          Netzwerk
-        </li>
-        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Jan Baumgartner</li>
-      </ul>
+        <div class="hidden lg:list-item flex-auto"></div>
+        <div class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Mediathek</div>
+        <div class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal flex flex-row items-center">
+          <it-icon-message class="w-8 h-8 mr-2"/>
+        </div>
+        <div
+          class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal flex items-center"
+        >
+          <div v-if="userStore.loggedIn">
+            <div v-if="userStore.avatar_url">
+              <img class="inline-block h-8 w-8 rounded-full"
+                   :src="userStore.avatar_url"
+                   alt=""/>
+            </div>
+            <div v-else>
+              {{ userStore.getFullName }}
+            </div>
+          </div>
+          <div v-else><a class="" href="/login">Login</a></div>
+        </div>
+      </div>
     </nav>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.nav-item {
+  @apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal;
+}
+</style>
diff --git a/client/src/components/icons/IconVbv.vue b/client/src/components/icons/IconVbv.vue
new file mode 100644
index 00000000..b864c7eb
--- /dev/null
+++ b/client/src/components/icons/IconVbv.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg viewBox="0 0 39 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M38.3507 28.111C38.3898 28.1686 38.4124 28.2358 38.4162 28.3053C38.4201 28.3748 38.4049 28.4441 38.3725 28.5057C38.34 28.5672 38.2914 28.6188 38.2319 28.655C38.1724 28.6911 38.1042 28.7104 38.0346 28.7108H36.3463C36.2839 28.7105 36.2224 28.6949 36.1673 28.6655C36.1122 28.636 36.0652 28.5936 36.0302 28.5419L32.0792 22.7066L28.1282 28.5419C28.0932 28.5936 28.0461 28.636 27.991 28.6654C27.9359 28.6949 27.8745 28.7104 27.812 28.7108H26.122C26.0523 28.7104 25.9841 28.6911 25.9246 28.655C25.8651 28.6188 25.8165 28.5672 25.7841 28.5057C25.7516 28.4441 25.7365 28.3748 25.7403 28.3053C25.7442 28.2358 25.7668 28.1686 25.8058 28.111L31.7648 19.312C31.8 19.26 31.8475 19.2175 31.9029 19.1881C31.9584 19.1586 32.0202 19.1432 32.083 19.1432C32.1458 19.1432 32.2076 19.1586 32.2631 19.1881C32.3186 19.2175 32.366 19.26 32.4012 19.312L38.3507 28.111Z"
+      fill="#007AC3"/>
+    <path
+      d="M12.6181 28.111C12.6572 28.1686 12.6798 28.2358 12.6836 28.3053C12.6874 28.3748 12.6723 28.4441 12.6399 28.5057C12.6074 28.5672 12.5588 28.6188 12.4993 28.655C12.4398 28.6911 12.3716 28.7104 12.302 28.7108H10.6119C10.5495 28.7104 10.488 28.6949 10.4329 28.6654C10.3779 28.636 10.3308 28.5936 10.2958 28.5419L6.34521 22.7066L2.3942 28.5419C2.35919 28.5936 2.31211 28.636 2.25702 28.6654C2.20193 28.6949 2.1405 28.7104 2.07805 28.7108H0.383918C0.314304 28.7104 0.246102 28.6911 0.186595 28.655C0.127088 28.6188 0.0785123 28.5672 0.0460511 28.5057C0.01359 28.4441 -0.00153491 28.3748 0.00228956 28.3053C0.00611403 28.2358 0.0287451 28.1686 0.0677665 28.111L6.0268 19.312C6.06202 19.26 6.10943 19.2175 6.1649 19.1881C6.22037 19.1586 6.2822 19.1432 6.34498 19.1432C6.40777 19.1432 6.4696 19.1586 6.52506 19.1881C6.58053 19.2175 6.62795 19.26 6.66317 19.312L12.6181 28.111Z"
+      fill="white"/>
+    <path
+      d="M0.0660575 7.0891C0.027036 7.03145 0.00440495 6.96429 0.000580477 6.89478C-0.003244 6.82527 0.0118844 6.75603 0.0443455 6.69444C0.0768067 6.63286 0.125382 6.58125 0.184889 6.54512C0.244396 6.50899 0.312599 6.48971 0.382213 6.48932H2.07047C2.13293 6.48967 2.19436 6.50523 2.24944 6.53466C2.30453 6.56409 2.35161 6.60651 2.38662 6.65824L6.33718 12.4935L10.2882 6.65824C10.3232 6.60651 10.3703 6.56409 10.4254 6.53466C10.4805 6.50523 10.5419 6.48967 10.6043 6.48932H12.2944C12.364 6.48971 12.4322 6.50899 12.4917 6.54512C12.5512 6.58125 12.5998 6.63286 12.6323 6.69444C12.6647 6.75603 12.6799 6.82527 12.676 6.89478C12.6722 6.96429 12.6496 7.03145 12.6106 7.0891L6.65966 15.8876C6.62451 15.9397 6.57711 15.9824 6.52164 16.0118C6.46616 16.0413 6.40429 16.0568 6.34147 16.0568C6.27865 16.0568 6.21678 16.0413 6.16131 16.0118C6.10583 15.9824 6.05844 15.9397 6.02328 15.8876L0.0660575 7.0891Z"
+      fill="#007AC3"/>
+    <path
+      d="M25.7982 7.0891C25.7592 7.03145 25.7366 6.96429 25.7328 6.89478C25.7289 6.82527 25.7441 6.75603 25.7765 6.69444C25.809 6.63286 25.8576 6.58125 25.9171 6.54512C25.9766 6.50899 26.0448 6.48971 26.1144 6.48932H27.8026C27.8651 6.48963 27.9265 6.50517 27.9816 6.53461C28.0367 6.56405 28.0838 6.60648 28.1188 6.65824L32.0698 12.4935L36.0208 6.65824C36.0558 6.60651 36.1029 6.56409 36.158 6.53466C36.2131 6.50523 36.2745 6.48967 36.337 6.48932H38.027C38.0966 6.48971 38.1648 6.50899 38.2244 6.54512C38.2839 6.58125 38.3324 6.63286 38.3649 6.69444C38.3974 6.75603 38.4125 6.82527 38.4087 6.89478C38.4048 6.96429 38.3822 7.03145 38.3432 7.0891L32.3841 15.8881C32.349 15.9402 32.3016 15.9828 32.2461 16.0123C32.1906 16.0418 32.1288 16.0572 32.066 16.0572C32.0031 16.0572 31.9413 16.0418 31.8858 16.0123C31.8303 15.9828 31.7829 15.9402 31.7478 15.8881L25.7982 7.0891Z"
+      fill="white"/>
+    <path
+      d="M24.2526 20.5202C23.1808 19.5633 21.7844 19.0514 20.3481 19.0889C17.1866 19.0889 15.1465 21.3851 15.1465 24.9395V34.1161C15.1466 34.218 15.1872 34.3156 15.2592 34.3876C15.3313 34.4596 15.429 34.5 15.5308 34.5H17.1035C17.2053 34.5 17.303 34.4596 17.3751 34.3876C17.4472 34.3156 17.4877 34.218 17.4878 34.1161V28.5739H22.0228C22.1247 28.5738 22.2223 28.5333 22.2943 28.4612C22.3663 28.3891 22.4067 28.2914 22.4067 28.1896V26.7895C22.4067 26.6876 22.3663 26.5899 22.2943 26.5179C22.2223 26.4458 22.1247 26.4052 22.0228 26.4051H17.4874V24.8722C17.4874 22.5431 18.5262 21.2591 20.4163 21.2591C21.3288 21.2362 22.2134 21.5752 22.8769 22.2021L23.0395 22.3471C23.0789 22.3821 23.125 22.4086 23.1751 22.4251C23.2252 22.4415 23.2782 22.4474 23.3307 22.4425C23.3831 22.4376 23.434 22.4219 23.4802 22.3965C23.5264 22.3711 23.5668 22.3364 23.5991 22.2947L24.4545 21.1859C24.5125 21.1105 24.5406 21.0163 24.5331 20.9214C24.5257 20.8265 24.4834 20.7378 24.4143 20.6724C24.3343 20.596 24.263 20.5283 24.2526 20.5202Z"
+      fill="white"/>
+    <path
+      d="M19.2443 6.13249C19.2444 6.08179 19.2546 6.03161 19.2742 5.98484C19.2938 5.93808 19.3224 5.89566 19.3585 5.86001C19.3945 5.82437 19.4373 5.79622 19.4843 5.77717C19.5313 5.75813 19.5816 5.74857 19.6323 5.74904C19.7226 5.74904 19.7989 5.74904 19.8129 5.7522C21.1089 5.881 22.3057 6.50307 23.1558 7.4897C24.0059 8.47632 24.4442 9.75198 24.38 11.0527C24.2917 12.3636 23.7038 13.5907 22.7374 14.4808C21.7709 15.3709 20.4998 15.8562 19.186 15.8366H15.5277C15.4258 15.8365 15.3282 15.7959 15.2562 15.7238C15.1842 15.6518 15.1438 15.5541 15.1438 15.4522V0.884351C15.1438 0.782493 15.1842 0.6848 15.2562 0.612733C15.3282 0.540666 15.4258 0.50012 15.5277 0.5H17.0976C17.1996 0.5 17.2973 0.540494 17.3694 0.612574C17.4415 0.684654 17.482 0.782414 17.482 0.884351V13.2405C17.482 13.3425 17.5225 13.4402 17.5946 13.5123C17.6666 13.5844 17.7644 13.6249 17.8663 13.6249H19.2326C19.9527 13.6327 20.6501 13.3736 21.1905 12.8975C21.7308 12.4215 22.0758 11.7622 22.1588 11.0469C22.2259 10.2951 21.9924 9.5474 21.5092 8.96758C21.0261 8.38775 20.3328 8.0231 19.5812 7.95353C19.4866 7.94417 19.3988 7.89972 19.3353 7.82892C19.2718 7.75812 19.2371 7.66611 19.238 7.57099L19.2443 6.13249Z"
+      fill="white"/>
+  </svg>
+</template>
diff --git a/client/src/input.css b/client/src/input.css
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 08fb9fcb..b325c75e 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,6 +1,6 @@
 import {createRouter, createWebHistory} from 'vue-router'
-import HomeView from '../views/HomeView.vue';
-import LoginView from '../views/LoginView.vue';
+import HomeView from '@/views/HomeView.vue';
+import LoginView from '@/views/LoginView.vue';
 import {redirectToLoginIfRequired, updateLoggedIn} from '@/router/guards';
 
 const router = createRouter({
@@ -22,6 +22,22 @@ const router = createRouter({
         public: true
       }
     },
+    {
+      path: '/dashboard',
+      component: () => import('@/views/DashboardView.vue'),
+    },
+    {
+      path: '/shop',
+      component: () => import('@/views/ShopView.vue'),
+    },
+    {
+      path: '/mediacenter',
+      component: () => import('@/views/MediaView.vue'),
+    },
+    {
+      path: '/profile',
+      component: () => import('@/views/ProfileView.vue'),
+    },
     {
       path: '/learningpath/:learningPathSlug',
       component: () => import('../views/LearningPathView.vue'),
@@ -32,10 +48,6 @@ const router = createRouter({
       component: () => import('../views/CircleView.vue'),
       props: true
     },
-    {
-      path: '/profile',
-      component: () => import('../views/ProfileView.vue'),
-    },
     {
       path: '/styleguide',
       component: () => import('../views/StyelGuideView.vue'),
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index 32d9aaf3..4881e38c 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -24,6 +24,9 @@ export const useUserStore = defineStore({
     loggedIn: false
   } as UserState),
   getters: {
+    getFullName(): string {
+      return `${this.first_name} ${this.last_name}`.trim();
+    },
   },
   actions: {
     handleLogin(username: string, password: string, next='/') {
diff --git a/client/src/views/DashboardView.vue b/client/src/views/DashboardView.vue
new file mode 100644
index 00000000..e4997bc7
--- /dev/null
+++ b/client/src/views/DashboardView.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
+
+log.debug('DashboardView created');
+
+</script>
+
+<template>
+  <MainNavigationBar/>
+
+  <main class="px-8 py-8">
+    <h1>Dashboard</h1>
+  </main>
+</template>
+
+<style scoped>
+</style>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index 7b72def6..a641128a 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -11,8 +11,8 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
       <router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
       <a class="link text-xl" href="/login">Login</a>
 
-      <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>
-      <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
+      <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin"</router-link>
+      <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse"</router-link>
     </div>
   </main>
 </template>
diff --git a/client/src/views/MediaView.vue b/client/src/views/MediaView.vue
new file mode 100644
index 00000000..02bf8a26
--- /dev/null
+++ b/client/src/views/MediaView.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
+
+log.debug('ShopView created');
+
+</script>
+
+<template>
+  <MainNavigationBar/>
+
+  <main class="px-8 py-8">
+    <h1>Mediathek</h1>
+  </main>
+</template>
+
+<style scoped>
+</style>
diff --git a/client/src/views/ProfileView.vue b/client/src/views/ProfileView.vue
index c5f45614..e174c0de 100644
--- a/client/src/views/ProfileView.vue
+++ b/client/src/views/ProfileView.vue
@@ -1,34 +1,19 @@
-<template>
-  <div class="about">
-    <h1>This is a profile page</h1>
-  </div>
-</template>
+<script setup lang="ts">
+import * as log from 'loglevel';
 
-<script>
-import { ref, onMounted } from 'vue'
-import { getUserData } from '@/services/http'
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
 
-export default {
-  setup () {
+log.debug('ProfileView created');
 
-    onMounted(async () => {
-      // const res = await getUserData();
-      // users.value = res.data;
-      // console.log(res);
-    });
-
-    return {
-    }
-  },
-}
 </script>
 
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
+<template>
+  <MainNavigationBar/>
+
+  <main class="px-8 py-8">
+    <h1>Profil</h1>
+  </main>
+</template>
+
+<style scoped>
 </style>
diff --git a/client/src/views/ShopView.vue b/client/src/views/ShopView.vue
new file mode 100644
index 00000000..f2eb17b8
--- /dev/null
+++ b/client/src/views/ShopView.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
+
+log.debug('ShopView created');
+
+</script>
+
+<template>
+  <MainNavigationBar/>
+
+  <main class="px-8 py-8">
+    <h1>Shop</h1>
+  </main>
+</template>
+
+<style scoped>
+</style>
diff --git a/client/src/views/StyelGuideView.vue b/client/src/views/StyelGuideView.vue
index 8fb83e88..d3aea4d8 100644
--- a/client/src/views/StyelGuideView.vue
+++ b/client/src/views/StyelGuideView.vue
@@ -168,6 +168,16 @@ function colorBgClass(color: string, value: number) {
         <it-icon-close class="w-6 h-6"/>
       </div>
 
+      <div class="inline-flex flex-col text-white bg-blue-900">
+        vbv
+        <it-icon-vbv class="w-24 h-24"/>
+      </div>
+
+      <div class="inline-flex flex-col">
+        vbv-pos
+        <it-icon-vbv-pos class="w-24 h-24"/>
+      </div>
+
 
     </div>
 
diff --git a/server/vbv_lernwelt/core/create_default_users.py b/server/vbv_lernwelt/core/create_default_users.py
index 41f8be4f..cab5e08b 100644
--- a/server/vbv_lernwelt/core/create_default_users.py
+++ b/server/vbv_lernwelt/core/create_default_users.py
@@ -30,6 +30,7 @@ def create_default_users(user_model=User, group_model=Group, default_password=No
         admin_user.is_staff = True
         admin_user.first_name = first_name
         admin_user.last_name = last_name
+        admin_user.avatar_url = avatar_url
         admin_user.groups.add(admin_group)
         admin_user.save()
 
@@ -65,14 +66,14 @@ def create_default_users(user_model=User, group_model=Group, default_password=No
         email='axel.manderbach@lernetz.ch',
         first_name='Axel',
         last_name='Manderbach',
-        avatar_url='/static/avatars/avatar_axel.png'
+        avatar_url='/static/avatars/avatar_axel.jpg'
     )
 
     _create_student_user(
         email='christoph.bosshard@vbv-afa.ch',
         first_name='Christoph',
         last_name='Bosshard',
-        avatar_url='/static/avatars/avatar_christoph.png'
+        avatar_url='/static/avatars/avatar_christoph.jpg'
     )
 
 
diff --git a/server/vbv_lernwelt/static/icons/icon-vbv-pos.svg b/server/vbv_lernwelt/static/icons/icon-vbv-pos.svg
new file mode 100644
index 00000000..12aa3e79
--- /dev/null
+++ b/server/vbv_lernwelt/static/icons/icon-vbv-pos.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px"
+     y="0px"
+     viewBox="0 0 450.709 418.11" enable-background="new 0 0 450.709 418.11" xml:space="preserve">
+<g>
+	<g>
+		<path d="M262.573,231.338c-8.74-7.379-17.496-10.559-28.81-10.559c-23.314,0-38.378,16.943-38.378,43.168v67.706
+			c0,1.566,1.269,2.835,2.835,2.835h11.603c1.566,0,2.835-1.269,2.835-2.835v-40.89h33.462c1.566,0,2.835-1.269,2.835-2.835v-10.34
+			c0-1.566-1.269-2.835-2.835-2.835h-33.462v-11.31c0-17.186,7.677-26.653,21.612-26.653c7.148,0,12.845,2.163,18.155,6.957
+			c0.069,0.063,0.586,0.523,1.2,1.07c1.228,1.093,3.126,0.917,4.13-0.385l6.31-8.181c0.888-1.151,0.76-2.788-0.295-3.789
+			C263.175,231.899,262.648,231.401,262.573,231.338z"/>
+	</g>
+    <g>
+		<path d="M225.62,125.182c0.003-1.573,1.289-2.843,2.863-2.829c0.675,0.006,1.231,0.014,1.333,0.024
+			c6.856,0.657,13.394,3.223,18.955,7.448c9.876,7.504,15.388,19.34,14.743,31.662c-1.041,19.793-17.869,35.296-38.312,35.296
+			h-26.977c-1.566,0-2.835-1.269-2.835-2.835V86.457c0-1.566,1.269-2.835,2.835-2.835h11.585c1.566,0,2.835,1.269,2.835,2.835
+			v91.169c0,1.566,1.269,2.835,2.835,2.835h10.081c11.139,0,20.622-8.355,21.591-19.019c1.042-11.523-7.505-21.809-19.019-22.824
+			c-1.445-0.127-2.537-1.369-2.534-2.82L225.62,125.182z"/>
+	</g>
+</g>
+    <g>
+	<path fill="#0069B0" d="M351.43,291.772"/>
+        <path fill="#0079C3" d="M366.594,287.348c1.275,1.882-0.074,4.424-2.347,4.424h0.012H351.79c-0.941,0-1.82-0.467-2.347-1.245
+		l-29.151-43.055l-29.151,43.055c-0.527,0.779-1.406,1.245-2.347,1.245h-12.47c-2.273,0-3.622-2.542-2.347-4.424l43.967-64.92
+		c1.124-1.66,3.57-1.66,4.694,0L366.594,287.348z"/>
+        <path d="M176.731,287.348c1.275,1.882-0.074,4.424-2.347,4.424h0.012h-12.469c-0.941,0-1.82-0.467-2.347-1.245l-29.151-43.055
+		l-29.151,43.055c-0.527,0.779-1.406,1.245-2.347,1.245h-12.47c-2.273,0-3.622-2.542-2.347-4.424l43.967-64.92
+		c1.124-1.66,3.57-1.66,4.694,0L176.731,287.348z"/>
+        <path fill="#0079C3" d="M84.114,132.238c-1.275-1.882,0.074-4.424,2.347-4.424h-0.012h12.469c0.941,0,1.82,0.467,2.347,1.245
+		l29.151,43.055l29.151-43.055c0.527-0.779,1.406-1.245,2.347-1.245h12.47c2.273,0,3.622,2.542,2.347,4.424l-43.967,64.92
+		c-1.124,1.66-3.57,1.66-4.694,0L84.114,132.238z"/>
+        <path d="M273.978,132.238c-1.275-1.882,0.074-4.424,2.347-4.424h-0.012h12.469c0.941,0,1.82,0.467,2.347,1.245l29.151,43.055
+		l29.151-43.055c0.527-0.779,1.406-1.245,2.347-1.245h12.47c2.273,0,3.622,2.542,2.347,4.424l-43.967,64.92
+		c-1.124,1.66-3.57,1.66-4.694,0L273.978,132.238z"/>
+</g>
+</svg>
diff --git a/server/vbv_lernwelt/static/icons/icon-vbv.svg b/server/vbv_lernwelt/static/icons/icon-vbv.svg
new file mode 100644
index 00000000..e4b14657
--- /dev/null
+++ b/server/vbv_lernwelt/static/icons/icon-vbv.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px"
+     y="0px"
+     viewBox="0 0 450.709 418.11" enable-background="new 0 0 450.709 418.11" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M262.573,231.338c-8.74-7.379-17.496-10.559-28.81-10.559c-23.314,0-38.378,16.943-38.378,43.168v67.706
+			c0,1.566,1.269,2.835,2.835,2.835h11.603c1.566,0,2.835-1.269,2.835-2.835v-40.89h33.462c1.566,0,2.835-1.269,2.835-2.835v-10.34
+			c0-1.566-1.269-2.835-2.835-2.835h-33.462v-11.31c0-17.186,7.677-26.653,21.612-26.653c7.148,0,12.845,2.163,18.155,6.957
+			c0.069,0.063,0.586,0.523,1.2,1.07c1.228,1.093,3.126,0.917,4.13-0.385l6.31-8.181c0.888-1.151,0.76-2.788-0.295-3.789
+			C263.175,231.899,262.648,231.401,262.573,231.338z"/>
+	</g>
+    <g>
+		<path fill="#FFFFFF" d="M225.62,125.182c0.003-1.573,1.289-2.843,2.863-2.829c0.675,0.006,1.231,0.014,1.333,0.024
+			c6.856,0.657,13.394,3.223,18.955,7.448c9.876,7.504,15.388,19.34,14.743,31.662c-1.041,19.793-17.869,35.296-38.312,35.296
+			h-26.977c-1.566,0-2.835-1.269-2.835-2.835V86.457c0-1.566,1.269-2.835,2.835-2.835h11.585c1.566,0,2.835,1.269,2.835,2.835
+			v91.169c0,1.566,1.269,2.835,2.835,2.835h10.081c11.139,0,20.622-8.355,21.591-19.019c1.042-11.523-7.505-21.809-19.019-22.824
+			c-1.445-0.127-2.537-1.369-2.534-2.82L225.62,125.182z"/>
+	</g>
+</g>
+    <g>
+	<path fill="#0069B0" d="M351.43,291.772"/>
+        <path fill="#0079C3" d="M366.594,287.348c1.275,1.882-0.074,4.424-2.347,4.424h0.012H351.79c-0.941,0-1.82-0.467-2.347-1.245
+		l-29.151-43.055l-29.151,43.055c-0.527,0.779-1.406,1.245-2.347,1.245h-12.47c-2.273,0-3.622-2.542-2.347-4.424l43.967-64.92
+		c1.124-1.66,3.57-1.66,4.694,0L366.594,287.348z"/>
+        <path fill="#FFFFFF" d="M176.731,287.348c1.275,1.882-0.074,4.424-2.347,4.424h0.012h-12.469c-0.941,0-1.82-0.467-2.347-1.245
+		l-29.151-43.055l-29.151,43.055c-0.527,0.779-1.406,1.245-2.347,1.245h-12.47c-2.273,0-3.622-2.542-2.347-4.424l43.967-64.92
+		c1.124-1.66,3.57-1.66,4.694,0L176.731,287.348z"/>
+        <path fill="#0079C3" d="M84.114,132.238c-1.275-1.882,0.074-4.424,2.347-4.424h-0.012h12.469c0.941,0,1.82,0.467,2.347,1.245
+		l29.151,43.055l29.151-43.055c0.527-0.779,1.406-1.245,2.347-1.245h12.47c2.273,0,3.622,2.542,2.347,4.424l-43.967,64.92
+		c-1.124,1.66-3.57,1.66-4.694,0L84.114,132.238z"/>
+        <path fill="#FFFFFF" d="M273.978,132.238c-1.275-1.882,0.074-4.424,2.347-4.424h-0.012h12.469c0.941,0,1.82,0.467,2.347,1.245
+		l29.151,43.055l29.151-43.055c0.527-0.779,1.406-1.245,2.347-1.245h12.47c2.273,0,3.622,2.542,2.347,4.424l-43.967,64.92
+		c-1.124,1.66-3.57,1.66-4.694,0L273.978,132.238z"/>
+</g>
+</svg>