src/boot/plugins.ts

@@ -161,6 +161,8 @@ export default boot(({ Vue, router, store }) => {
   console.log(routes);
   router.addRoutes(routes);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  Vue.prototype.$flaschengeist_plugins = pluginMainLinks;
+  Vue.prototype.$flaschengeistPluginsMainLinks = pluginMainLinks;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  Vue.prototype.$flaschengeistPlugins = plugins;
   console.log(pluginMainLinks);
 });

src/components/about/Developer.vue

@@ -0,0 +1,52 @@
+<template>
+  <q-card class="col-4">
+    <q-card-section class="row fit justify-center items-center content-center">
+      <q-avatar size="150px">
+        <q-img :src="pic" placeholder-src="logo-black.svg" />
+      </q-avatar>
+    </q-card-section>
+    <q-card-section>
+      <div class="text-h6">{{ firstname }} {{ lastname }}</div>
+      <div class="text-subtitle2">{{ club }}</div>
+      <q-separator />
+      <div class="text-subtitle2">Aufgabe bei Flaschengeist:</div>
+      <div>
+        {{ job }}
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      {{ description }}
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  name: 'Developer',
+  props: {
+    pic: {
+      default: 'logo-dark.svg'
+    },
+    firstname: {
+      //required: true,
+      default: 'firstname'
+    },
+    lastname: {
+      //required: true,
+      default: 'lastname'
+    },
+    job: {
+      default: 'student'
+    },
+    club: {
+      default: 'Studentenclub Wu5 e.V.'
+    },
+    description: {
+      default:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '
+    }
+  }
+});
+</script>

src/layouts/MainLayout.vue

@@ -47,14 +47,7 @@
       <!-- Plugins -->
       <q-list>
         <essential-link
-          v-for="(link, index) in links"
+          v-for="(link, index) in $flaschengeistPluginsMainLinks"
-          :key="'main' + index"
-          :title="link.title"
-          :link="link.link"
-          :icon="link.icon"
-        />
-        <essential-link
-          v-for="(link, index) in $flaschengeist_plugins"
           :key="'plugin' + index"
           :title="link.title"
           :link="link.link"
@@ -88,6 +81,16 @@
           @click="leftDrawerMini = true"
         />
       </div>
+
+      <q-separator />
+
+      <essential-link
+        v-for="(link, index) in links"
+        :key="'main' + index"
+        :title="link.title"
+        :link="link.link"
+        :icon="link.icon"
+      />
     </q-drawer>
 
     <q-page-container>
@@ -105,27 +108,15 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
 const links = [
   {
     name: 'about',
-    title: 'about',
+    title: 'Über Flaschengeist',
     link: 'about',
-    icon: 'mdi-information',
+    icon: 'mdi-information'
-    children: [
-      {
-        title: 'Neues About',
-        link: 'newAbout',
-        icon: 'mdi-information-outline'
-      },
-      {
-        title: 'Altes About',
-        link: 'oldAbout',
-        icon: 'mdi-information-variant'
-      }
-    ]
   }
 ];
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $flaschengeist_plugins: PluginMainLink[];
+    $flaschengeistPluginsMainLinks: PluginMainLink[];
   }
 }
 
@@ -151,7 +142,7 @@ export default defineComponent({
     const pluginChildLinks = computed(() => {
       const test:
         | PluginMainLink
-        | undefined = ctx.root.$flaschengeist_plugins.find(
+        | undefined = ctx.root.$flaschengeistPluginsMainLinks.find(
         (plugin: PluginMainLink) => {
           if (ctx.root.$route.matched.length > 1) {
             return plugin.name == ctx.root.$route.matched[1].name;

src/layouts/OutLayout.vue

@@ -13,6 +13,22 @@
             Flaschengeist
           </span>
         </q-toolbar-title>
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-information"
+          v-if="$route.name != 'about_out'"
+          @click="$router.push({ name: 'about_out' })"
+        />
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-login-variant"
+          v-if="$route.name != 'login'"
+          @click="$router.push({ name: 'login' })"
+        />
       </q-toolbar>
     </q-header>
 

src/pages/about/About.vue

@@ -1,17 +1,113 @@
 <template>
-  <q-page padding class="fit row justify-center content-center items-center">
+  <q-page
-    <q-card class="col-4" height="" v-if="$route.name == 'about'">
+    padding
-      <q-card-section>
+    class="fit row justify-center content-center items-center"
-        About
+    v-if="$route.name == 'about' || $route.name == 'about_out'"
+  >
+    <q-card flat class="col-6">
+      <q-card-section
+        class="row fit justify-center items-center content-center"
+      >
+        <q-img
+          src="logo-dark.svg"
+          class="q-mt-md"
+          style="min-width: 200px; max-width: 400px"
+        />
+      </q-card-section>
+      <q-card-section class="text-h4 text-center">
+        Flaschengeist
+        <div class="text-caption">
+          Version 2.0.0
+        </div>
+      </q-card-section>
+      <q-card-section class="text-center">
+        Flaschengeist ist ein dynamischen Managementsystem für Studentenclubs.
+        Es ermöglicht unter anderem die Mitgliederverwaltung, Dienstverwaltung,
+        Arbeitsgruppenverwaltung und vieles meher. Es kann fast alles ermöglich
+        werden, wenn ein Plugin dafür geschrieben wird. Jeder Club hat die
+        Möglichkeit sein eigenes Flaschengeist zu hosten. Ziel ist später
+        Clubübergreifend dezentralisiert miteinander zu arbeiten.
       </q-card-section>
     </q-card>
-    <router-view />
+    <q-separator />
+    <q-card flat class="col-12">
+      <q-card-section class="text-h6" v-if="$route.name == 'about'">
+        Geladene Plugins:
+      </q-card-section>
+      <q-card-section v-if="$route.name == 'about'">
+        <q-chip
+          v-for="(plugin, index) in $flaschengeistPlugins"
+          :key="'plugin' + index"
+        >
+          {{ plugin.name }}
+          <q-separator vertical color="black" class="q-ma-xs" />
+          Version
+        </q-chip>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="text-h6">
+        Entwickler:
+      </q-card-section>
+    </q-card>
+
+    <div
+      class="fit row inline wrap justify-around items-start content-start q-gutter-sm"
+    >
+      <developer
+        v-for="developer in developers"
+        :key="i"
+        class="col-xs-12 col-md-5 col-lg-3"
+        :firstname="developer.firstname"
+        :lastname="developer.lastname"
+        :job="developer.job"
+        :club="developer.club"
+        :description="developer.description"
+        :pic="developer.pic"
+      />
+    </div>
   </q-page>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
+import Developer from 'components/about/Developer.vue';
+
+const developers = [
+  {
+    firstname: 'Tim',
+    lastname: 'Gröger',
+    club: 'Studentenclub Wu5 e.V.',
+    job: 'Gründer von Flaschengeist; Maintainer',
+    pic:
+      'https://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/31768724_1663023210401956_3834323197281435648_n.jpg?_nc_cat=109&_nc_sid=09cbfe&_nc_ohc=jWvUfn_xJ9YAX_oJ3CE&_nc_ht=scontent-frt3-2.xx&oh=15249378051f1e27f8b15122effb5c4a&oe=5FAC6A17',
+    description:
+      'Eigentlich wöllte ich jetzt hier echt viel hinschreiben. Aber ich habe keinen Plan was. Früher war ich einfach nur Tim G. und habe für andere den Kaffe geholt. Unter anderen für Ferdinand Thiessen.'
+  },
+  {
+    firstname: 'Ferdinand',
+    lastname: 'Thiessen',
+    club: 'Club Aquarium e.V.',
+    pic:
+      'https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-9/17022243_1418942461493397_9069541318944803902_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=HjkSm8vcRW8AX8bTnJ8&_nc_ht=scontent-frx5-1.xx&oh=f09bd36525f3c6e55feaafb3b05b43d2&oe=5FAD432A',
+    job: 'Backend-Developer; Co-Maintainer',
+    description:
+      'Geiler Typ. Einfach mal so alles Aufgeräumt. Aufeinmal könnte man aus dem Code eine Dokumentation zaubern!'
+  },
+  {
+    firstname: 'Dominik',
+    lastname: 'Renz',
+    club: 'Studentenclub Wu5 e.V.',
+    job: 'Eigentlich Frontend-Developer',
+    description: 'Er findet sich langsam rein.',
+    pic:
+      'https://scontent-frt3-1.xx.fbcdn.net/v/t31.0-8/10363433_647611335326483_3447118968375865826_o.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=nWMgo-6Ih74AX_NiGUz&_nc_ht=scontent-frt3-1.xx&oh=f16d2edfe86f68d54900099087edb9c9&oe=5FAACFD4'
+  }
+];
 export default defineComponent({
   // name: 'PageName'
+  components: { Developer },
+  setup() {
+    return { developers };
+  }
 });
 </script>

src/pages/about/NewAbout.vue

@@ -1,14 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section>
-      Neues About
-    </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-export default defineComponent({
-  // name: 'PageName'
-});
-</script>

src/pages/about/OldAbout.vue

@@ -1,14 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section>
-      Altes About
-    </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-export default defineComponent({
-  // name: 'PageName'
-});
-</script>

src/plugins/plugin-example/pages/Plugin.vue

@@ -15,7 +15,7 @@ import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
-    const a = ctx.root.$flaschengeist_plugins;
+    const a = ctx.root.$flaschengeistPluginsMainLinks;
     return { a, mainLink };
   }
 });

src/plugins/user-plugin/pages/Plugin.vue

@@ -15,7 +15,7 @@ import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
-    const a = ctx.root.$flaschengeist_plugins;
+    const a = ctx.root.$flaschengeistPluginsMainLinks;
     return { a, mainLink };
   }
 });

src/plugins/user/pages/User.vue

@@ -21,7 +21,7 @@ import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
-    const a = ctx.root.$flaschengeist_plugins;
+    const a = ctx.root.$flaschengeistPluginsMainLinks;
     return { a, mainLink };
   }
 });

src/router/routes.ts

@@ -10,6 +10,11 @@ const routes: RouteConfig[] = [
         name: 'login',
         path: 'login',
         component: () => import('pages/Login.vue')
+      },
+      {
+        name: 'about_out',
+        path: 'about',
+        component: () => import('pages/about/About.vue')
       }
     ]
   },
@@ -21,19 +26,7 @@ const routes: RouteConfig[] = [
       {
         name: 'about',
         path: 'about',
-        component: () => import('pages/about/About.vue'),
+        component: () => import('pages/about/About.vue')
-        children: [
-          {
-            name: 'newAbout',
-            path: 'newAbout',
-            component: () => import('pages/about/NewAbout.vue')
-          },
-          {
-            name: 'oldAbout',
-            path: 'oldAbout',
-            component: () => import('pages/about/OldAbout.vue')
-          }
-        ]
       }
     ]
   },