release v2.0.0 #4

Merged
crimsen merged 481 commits from develop into master 2024-01-18 15:15:08 +00:00
15 changed files with 470 additions and 31 deletions
Showing only changes of commit 2ee3cb0dbc - Show all commits

58
public/logo-dark.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

59
public/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -0,0 +1,28 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{ title: 'Neues About', link: 'newAbout', icon: 'mdi-information-outline' },
{ title: 'Altes About', link: 'oldAbout', icon: 'mdi-information-variant' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

View File

@ -0,0 +1,27 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{ title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
{ title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

View File

@ -1,27 +1,38 @@
<template>
<q-layout view="hHh lpr lFf">
<q-header
elevated
class="bg-primary text-white"
>
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
<q-btn
dense
flat
round
icon="menu"
@click="leftDrawerOpen = !leftDrawerOpen"
v-if="!leftDrawerOpen"
/>
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
<img src="logo.svg" />
</q-avatar>
<span class="gt-xs">
Flaschengeist
</span>
</q-toolbar-title>
<!-- Hier kommen die Shortlinks hin -->
<div>
<q-btn flat round dense icon="sim_card" />
<q-btn flat round dense icon="gamepad" />
</div>
<q-btn
flat
round
dense
icon="mdi-exit-to-app"
@click="$router.push({ name: 'login' })"
/>
</q-toolbar>
</q-header>
@ -30,44 +41,73 @@
v-model="leftDrawerOpen"
side="left"
bordered
:mini="leftDrawerMini"
@click.capture="leftDrawerClicker"
>
<!-- Plugins -->
<q-list>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
>
/>
</q-list>
<q-separator />
</essential-link>
<!-- Plugin functions -->
<router-view name="plugin-nav" />
<!-- drawer content -->
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
<q-btn
size="sm"
dense
round
unelevated
color="secondary"
icon="chevron_left"
@click="leftDrawerMini = true"
/>
</div>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import EssentialLink from 'components/EssentialLink.vue';
import { defineComponent, ref } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
import { event, Screen } from 'quasar';
import { defineComponent, ref, reactive, computed } from '@vue/composition-api';
const links = [
{ title: 'home', icon: 'mdi-home' },
{ title: 'about', link: 'about', icon: 'mdi-information' },
{ title: 'about', link: 'about', icon: 'mdi-information' }
];
export default defineComponent({
name: 'MainLayout',
components: { EssentialLink },
setup() {
const leftDrawerOpen = ref(true);
const leftDrawer = ref(false);
return { leftDrawerOpen, links };
},
const leftDrawerOpen = ref(
computed({
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
set: (val: boolean) => (leftDrawer.value = val)
})
);
const leftDrawerMini = ref(false);
function leftDrawerClicker() {
if (leftDrawerMini.value) {
leftDrawerMini.value = false;
}
}
return { leftDrawerOpen, leftDrawerMini, leftDrawerClicker, links };
}
});
</script>

41
src/layouts/OutLayout.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<q-layout view="hHh lpr lFf"> <!-- Be sure to play with the Layout demo on docs -->
<!-- (Optional) The Header -->
<q-header elevated>
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="logo.svg">
</q-avatar>
<span class="gt-xs">
Flaschengeist
</span>
</q-toolbar-title>
</q-toolbar>
</q-header>
<!-- (Optional) The Footer -->
<!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
<q-page-container>
<!-- This is where pages get injected -->
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'OutLayout',
setup() {
return { }
}
})
</script>

56
src/pages/Login.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<q-page padding class="fit row justify-center items-center content-center">
<q-card
class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
>
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
Login
</q-toolbar-title>
</q-toolbar>
<q-card-section>
<q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
<q-input
filled
v-model="username"
label="Benutzername oder E-Mail"
:rules="rules"
/>
<q-input
filled
v-model="password"
type="password"
label="Password"
:rules="rules"
/>
<div class="row justify-end">
<q-btn label="Login" type="submit" color="primary" />
</div>
</q-form>
</q-card-section>
</q-card>
</q-page>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
setup() {
const username = ref('');
const password = ref('');
const rules = [
(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
];
function doLogin() {
console.log(username.value, password.value);
this.$router.push({ name: 'home' });
}
return { username, password, doLogin, rules };
}
});
</script>

17
src/pages/about/About.vue Normal file
View File

@ -0,0 +1,17 @@
<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-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
});
</script>

View File

@ -1,13 +1,14 @@
<template>
<h1>Hello Bla blab blablelmewafjanfökawfd</h1>
<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: 'about',
// name: 'PageName'
});
</script>
<style>
</style>

View File

@ -0,0 +1,14 @@
<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>

18
src/pages/home/Home.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == 'home'">
<q-card-section>
Home
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import {} from '';
export default defineComponent({
// name: 'PageName'
});
</script>

View File

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

View File

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

View File

@ -3,11 +3,62 @@ import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [
{
path: '/',
redirect: 'login',
component: () => import('layouts/OutLayout.vue'),
children: [
{
name: 'login',
path: 'login',
component: () => import('pages/Login.vue')
}
]
},
{
path: '/main',
component: () => import('layouts/MainLayout.vue'),
children: [
{ name: 'home', path: '', component: () => import('pages/Index.vue') },
{ name: 'about', path: 'about', component: () => import('pages/About.vue') }
{
name: 'home',
path: 'home',
components: {
default: () => import('pages/home/Home.vue'),
'plugin-nav': () =>
import('components/navigation/PluginLinksHome.vue')
},
children: [
{
name: 'newHome',
path: 'newHome',
component: () => import('pages/home/NewHome.vue')
},
{
name: 'oldHome',
path: 'oldHome',
component: () => import('pages/home/OldHome.vue')
}
]
},
{
name: 'about',
path: 'about',
components: {
default: () => import('pages/about/About.vue'),
'plugin-nav': () =>
import('components/navigation/PluginLinksAbout.vue')
},
children: [
{
name: 'newAbout',
path: 'newAbout',
component: () => import('pages/about/NewAbout.vue')
},
{
name: 'oldAbout',
path: 'oldAbout',
component: () => import('pages/about/OldAbout.vue')
}
]
}
]
},
@ -15,6 +66,7 @@ const routes: RouteConfig[] = [
// but you can also remove it
{
path: '*',
redirect: 'login',
component: () => import('pages/Error404.vue')
}
];