ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

About-Page hinzugefügt 

kwt
This commit is contained in:
Tim Gröger 2020-10-13 23:13:42 +02:00
parent c5799967af
commit 61a679dfb1
11 changed files with 196 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/boot/plugins.ts
View File

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

52
src/components/about/Developer.vue Normal file
View File

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

39
src/layouts/MainLayout.vue
View File

@ -47,14 +47,7 @@
<!-- Plugins -->
<q-list>
<essential-link
v-for="(link, index) in links"
:key="'main' + index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
<essential-link
v-for="(link, index) in $flaschengeist_plugins"
v-for="(link, index) in $flaschengeistPluginsMainLinks"
: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',
children: [
{
title: 'Neues About',
link: 'newAbout',
icon: 'mdi-information-outline'
},
{
title: 'Altes About',
link: 'oldAbout',
icon: 'mdi-information-variant'
}
]
icon: 'mdi-information'
}
];
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;

16
src/layouts/OutLayout.vue
View File

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

106
src/pages/about/About.vue
View File

@ -1,17 +1,113 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == 'about'">
<q-card-section>
About
<q-page
padding
class="fit row justify-center content-center items-center"
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>

14
src/pages/about/NewAbout.vue
View File

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

14
src/pages/about/OldAbout.vue
View File

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

2
src/plugins/plugin-example/pages/Plugin.vue
View File

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

2
src/plugins/user-plugin/pages/Plugin.vue
View File

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

2
src/plugins/user/pages/User.vue
View File

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

19
src/router/routes.ts
View File

@ -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'),
children: [
{
name: 'newAbout',
path: 'newAbout',
component: () => import('pages/about/NewAbout.vue')
},
{
name: 'oldAbout',
path: 'oldAbout',
component: () => import('pages/about/OldAbout.vue')
}
]
component: () => import('pages/about/About.vue')
}
]
},