Add responsive layout
This commit is contained in:
philipp lang
parent
a2b379e349
commit
fec30c9fa8
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 121 B |
|
|
@ -4,7 +4,11 @@
|
|||
|
||||
<!-- ******************************** Sidebar ******************************** -->
|
||||
<div
|
||||
class="fixed bg-gray-800 p-6 w-56 left-0 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between"
|
||||
class="fixed bg-gray-800 p-6 w-56 left-0 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between transition-all"
|
||||
:class="{
|
||||
'-left-[14rem]': !(menuVisible || (!menuVisible && menuOverflowVisible)),
|
||||
'left-0': menuVisible || (!menuVisible && menuOverflowVisible),
|
||||
}"
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<v-link href="/" menu="dashboard" icon="loss">Dashboard</v-link>
|
||||
|
|
@ -18,12 +22,29 @@
|
|||
<v-link href="/setting" menu="setting" icon="setting">Einstellungen</v-link>
|
||||
<v-link @click.prevent="$inertia.post('/logout')" icon="logout" href="/logout">Abmelden</v-link>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="menuOverflowVisible = false"
|
||||
v-if="menuOverflowVisible && !menuVisible"
|
||||
class="absolute right-0 top-0 mr-2 mt-2"
|
||||
>
|
||||
<svg-sprite src="close" class="w-5 h-5 text-gray-300"></svg-sprite>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grow ml-56 bg-gray-900 flex flex-col">
|
||||
<div
|
||||
class="grow bg-gray-900 flex flex-col transition-all"
|
||||
:class="{'ml-56': menuVisible, 'ml-0': !menuVisible}"
|
||||
>
|
||||
<div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
|
||||
<div class="flex">
|
||||
<span class="text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
|
||||
<div class="flex space-x-3 items-center">
|
||||
<a href="#" @click.prevent="menuOverflowVisible = !menuOverflowVisible" class="lg:hidden">
|
||||
<svg-sprite src="menu" class="text-gray-100 w-4 h-4"></svg-sprite>
|
||||
</a>
|
||||
<span
|
||||
class="text-sm md:text-xl font-semibold text-white leading-none"
|
||||
v-html="$page.props.title"
|
||||
></span>
|
||||
<div class="flex ml-4">
|
||||
<i-link
|
||||
v-for="(link, index) in filterMenu"
|
||||
|
|
@ -37,7 +58,7 @@
|
|||
</i-link>
|
||||
</div>
|
||||
</div>
|
||||
<label for="search">
|
||||
<label for="search" class="hidden md:block">
|
||||
<input
|
||||
class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400"
|
||||
placeholder="Suchen…"
|
||||
|
|
@ -60,6 +81,12 @@ import {debounce} from 'lodash';
|
|||
import mergesQueryString from '../mixins/mergesQueryString.js';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
menuVisible: true,
|
||||
menuOverflowVisible: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
VNotification: () => import('../components/VNotification.vue'),
|
||||
VLink,
|
||||
|
|
@ -82,6 +109,27 @@ export default {
|
|||
return this.$page.props.toolbar ? this.$page.props.toolbar.filter((menu) => menu.show !== false) : [];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
menuListener() {
|
||||
var x = window.matchMedia('(min-width: 1024px)');
|
||||
|
||||
if (x.matches && !this.menuVisible) {
|
||||
this.menuVisible = true;
|
||||
this.menuOverflowVisible = false;
|
||||
return;
|
||||
}
|
||||
if (!x.matches && this.menuVisible) {
|
||||
this.menuVisible = false;
|
||||
this.menuOverflowVisible = false;
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this.menuListener);
|
||||
this.menuListener();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section class="bg-gray-800 p-3 rounded-lg flex flex-col">
|
||||
<heading class="col-span-full">{{ heading }}</heading>
|
||||
<main :class="containerClass" class="mt-3">
|
||||
<heading class="col-span-full" v-if="heading">{{ heading }}</heading>
|
||||
<main :class="{'mt-3': heading, 'containerClass': true}">
|
||||
<slot></slot>
|
||||
</main>
|
||||
</section>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
export default {
|
||||
props: {
|
||||
heading: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
containerClass: {
|
||||
|
|
|
|||
|
|
@ -1,182 +1,45 @@
|
|||
<template>
|
||||
<div class="p-6 grid gap-6 this-grid grow">
|
||||
<!-- ****************************** Stammdaten ******************************* -->
|
||||
<box container-class="grid grid-cols-2 gap-3" heading="Stammdaten" class="area-stamm">
|
||||
<key-value class="col-span-2" label="Name" :value="inner.fullname"></key-value>
|
||||
<key-value class="col-span-2" label="Adresse" :value="inner.full_address"></key-value>
|
||||
<key-value label="Geburtsdatum" :value="inner.birthday_human"></key-value>
|
||||
<key-value label="Alter" :value="inner.age"></key-value>
|
||||
<key-value label="Bundesland" :value="inner.region.name"></key-value>
|
||||
<key-value label="Nationalität" :value="inner.nationality.name"></key-value>
|
||||
<key-value
|
||||
v-show="inner.other_country"
|
||||
label="Andere Staatsangehörigkeit"
|
||||
:value="inner.other_country"
|
||||
></key-value>
|
||||
<box heading="Stammdaten" class="area-stamm hidden 2xl:block">
|
||||
<stamm :inner="inner"></stamm>
|
||||
</box>
|
||||
<box heading="Kontakt" class="area-kontakt hidden 2xl:block">
|
||||
<kontakt :inner="inner"></kontakt>
|
||||
</box>
|
||||
<box class="area-stammkontakt block 2xl:hidden">
|
||||
<tabs v-model="tabs.stammkontakt">
|
||||
<stamm v-show="tabs.stammkontakt.active === 'stamm'" :inner="inner"></stamm>
|
||||
<kontakt v-show="tabs.stammkontakt.active === 'kontakt'" :inner="inner"></kontakt>
|
||||
</tabs>
|
||||
</box>
|
||||
|
||||
<!-- ******************************** Kontakt ******************************** -->
|
||||
<box container-class="grid gap-3" heading="Kontakt" class="area-kontakt">
|
||||
<key-value
|
||||
v-show="inner.main_phone"
|
||||
label="Telefon Eltern"
|
||||
:value="inner.main_phone"
|
||||
type="tel"
|
||||
></key-value>
|
||||
<key-value
|
||||
v-show="inner.mobile_phone"
|
||||
label="Handy Eltern"
|
||||
:value="inner.mobile_phone"
|
||||
type="tel"
|
||||
></key-value>
|
||||
<key-value
|
||||
v-show="inner.work_phone"
|
||||
label="Telefon Eltern geschäftlich"
|
||||
:value="inner.work_phone"
|
||||
type="tel"
|
||||
></key-value>
|
||||
<key-value
|
||||
v-show="inner.children_phone"
|
||||
label="Telefon Kind"
|
||||
:value="inner.children_phone"
|
||||
type="tel"
|
||||
></key-value>
|
||||
<key-value v-show="inner.email" label="E-Mail-Adresse Kind" :value="inner.email" type="email"></key-value>
|
||||
<key-value
|
||||
v-show="inner.email_parents"
|
||||
label="E-Mail-Adresse Eltern"
|
||||
:value="inner.email_parents"
|
||||
type="email"
|
||||
></key-value>
|
||||
<key-value v-show="inner.fax" label="Fax" :value="inner.fax" type="tel"></key-value>
|
||||
<box container-class="" heading="Prävention" class="area-praev hidden 2xl:block">
|
||||
<prae :inner="inner"></prae>
|
||||
</box>
|
||||
<box heading="System" class="area-system hidden 2xl:block">
|
||||
<system :inner="inner"></system>
|
||||
</box>
|
||||
<box class="area-praesystem block 2xl:hidden">
|
||||
<tabs v-model="tabs.praesystem">
|
||||
<prae v-show="tabs.praesystem.active === 'prae'" :inner="inner"></prae>
|
||||
<system v-show="tabs.praesystem.active === 'system'" :inner="inner"></system>
|
||||
</tabs>
|
||||
</box>
|
||||
|
||||
<!-- ****************************** Prävention ******************************* -->
|
||||
<box container-class="flex gap-3" heading="Prävention" class="area-praev">
|
||||
<div class="grid gap-3">
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Führungszeugnis eingesehen"
|
||||
:value="inner.efz_human ? inner.efz_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Präventionsschulung"
|
||||
:value="inner.ps_at_human ? inner.ps_at_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Vertiefungsschulung"
|
||||
:value="inner.more_ps_at_human ? inner.more_ps_at_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Einsatz ohne Schulung"
|
||||
:value="inner.without_education_at_human ? inner.without_education_at_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Einsatz ohne EFZ"
|
||||
:value="inner.without_efz_at_human ? inner.without_efz_at_human : 'nie'"
|
||||
></key-value>
|
||||
</div>
|
||||
<div class="grid gap-3 content-start">
|
||||
<boolean :value="inner.has_vk" long-label="Verhaltenskodex unterschrieben" label="VK"></boolean>
|
||||
<boolean :value="inner.has_svk" long-label="SVK unterschrieben" label="SVK"></boolean>
|
||||
<boolean
|
||||
:value="inner.multiply_pv"
|
||||
long-label="Multiplikator*in Präventionsschulung"
|
||||
label="Multipl. PS"
|
||||
></boolean>
|
||||
<boolean
|
||||
:value="inner.multiply_more_pv"
|
||||
long-label="Multiplikator*in Vertierungsschulung"
|
||||
label="Multipl. VS"
|
||||
></boolean>
|
||||
</div>
|
||||
<box heading="Ausbildungen" class="area-courses hidden 2xl:block">
|
||||
<courses :inner="inner"></courses>
|
||||
</box>
|
||||
|
||||
<!-- ******************************** Courses ******************************** -->
|
||||
<box heading="Ausbildungen" class="area-courses">
|
||||
<table
|
||||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
border="0"
|
||||
class="custom-table custom-table-sm text-sm"
|
||||
v-if="inner.courses.length"
|
||||
>
|
||||
<thead>
|
||||
<th>Datum</th>
|
||||
<th>Baustein</th>
|
||||
<th>Veranstaltung</th>
|
||||
<th>Organisator</th>
|
||||
</thead>
|
||||
<tr v-for="(course, index) in inner.courses" :key="index">
|
||||
<td v-text="course.completed_at_human"></td>
|
||||
<td v-text="course.course.short_name"></td>
|
||||
<td v-text="course.event_name"></td>
|
||||
<td v-text="course.organizer"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="py-3 text-gray-400 text-center" v-else>Keine Ausbildungen vorhanden</div>
|
||||
<box heading="Mitgliedschaften" class="area-memberships hidden 2xl:block">
|
||||
<memberships :inner="inner"></memberships>
|
||||
</box>
|
||||
|
||||
<!-- ******************************** System ********************************* -->
|
||||
<box container-class="grid gap-3" heading="System" class="area-system">
|
||||
<key-value v-show="inner.nami_id" label="Nami Mitgliedsnummer" :value="inner.nami_id"></key-value>
|
||||
<key-value label="Beitrag" :value="inner.subscription ? inner.subscription.name : 'kein'"></key-value>
|
||||
<key-value v-if="inner.joined_at_human" label="Eintrittsdatum" :value="inner.joined_at_human"></key-value>
|
||||
<key-value v-if="inner.bill_kind_name" label="Rechnung" :value="inner.bill_kind_name"></key-value>
|
||||
<boolean :value="inner.send_newspaper" label="Mittendrin versenden"></boolean>
|
||||
<box heading="Zahlungen" class="area-payments hidden 2xl:block">
|
||||
<payments :inner="inner"></payments>
|
||||
</box>
|
||||
|
||||
<!-- *************************** Mitgliedschaften **************************** -->
|
||||
<box heading="Mitgliedschaften" class="area-memberships">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm text-sm">
|
||||
<thead>
|
||||
<th>Tätigkeit</th>
|
||||
<th>Untertätigkeit</th>
|
||||
<th>Datum</th>
|
||||
</thead>
|
||||
<tr v-for="(membership, index) in inner.memberships" :key="index">
|
||||
<td v-text="membership.activity_name"></td>
|
||||
<td v-text="membership.subactivity_name"></td>
|
||||
<td v-text="membership.human_date"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</box>
|
||||
|
||||
<!-- ******************************* Zahlungen ******************************* -->
|
||||
<box heading="Zahlungen" class="area-payments">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm text-sm">
|
||||
<thead>
|
||||
<th>Nr</th>
|
||||
<th>Status</th>
|
||||
<th>Betrag-Name</th>
|
||||
<th>Betrag</th>
|
||||
</thead>
|
||||
<tr v-for="(payment, index) in inner.payments" :key="index">
|
||||
<td v-text="payment.nr"></td>
|
||||
<td v-text="payment.status_name"></td>
|
||||
<td v-text="payment.subscription.name"></td>
|
||||
<td v-text="payment.subscription.amount_human"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</box>
|
||||
|
||||
<!-- ********************************* Karte ********************************* -->
|
||||
<box heading="Karte" container-class="grow" class="area-map">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
src="https://www.openstreetmap.org/export/embed.html?bbox=9.699318408966066%2C47.484177893725764%2C9.729595184326174%2C47.49977861091604&layer=mapnik&marker=47.49197883161885%2C9.714467525482178"
|
||||
style="border: 1px solid black"
|
||||
>
|
||||
</iframe>
|
||||
<box heading="Karte" container-class="grow" class="area-map hidden 2xl:block">
|
||||
<vmap :inner="inner"></vmap>
|
||||
</box>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -186,6 +49,22 @@ export default {
|
|||
data: function () {
|
||||
return {
|
||||
inner: {},
|
||||
tabs: {
|
||||
stammkontakt: {
|
||||
children: {
|
||||
stamm: 'Stammdaten',
|
||||
kontakt: 'Kontakt',
|
||||
},
|
||||
active: 'stamm',
|
||||
},
|
||||
praesystem: {
|
||||
children: {
|
||||
prae: 'Prävention',
|
||||
system: 'System',
|
||||
},
|
||||
active: 'system',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -196,9 +75,16 @@ export default {
|
|||
},
|
||||
|
||||
components: {
|
||||
'key-value': () => import('./KeyValue'),
|
||||
'boolean': () => import('./Boolean'),
|
||||
'box': () => import('./Box'),
|
||||
box: () => import('./Box'),
|
||||
stamm: () => import('./boxes/Stamm'),
|
||||
kontakt: () => import('./boxes/Kontakt'),
|
||||
prae: () => import('./boxes/Prae'),
|
||||
courses: () => import('./boxes/Courses'),
|
||||
system: () => import('./boxes/System'),
|
||||
payments: () => import('./boxes/Payments'),
|
||||
memberships: () => import('./boxes/Memberships'),
|
||||
vmap: () => import('./boxes/Vmap'),
|
||||
tabs: () => import('./Tabs'),
|
||||
},
|
||||
|
||||
created() {
|
||||
|
|
@ -210,19 +96,27 @@ export default {
|
|||
<style scoped>
|
||||
.this-grid {
|
||||
grid-template-areas:
|
||||
'stamm kontakt prae system'
|
||||
'stammkontakt'
|
||||
'praesystem';
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media screen and (min-width: 1536px) {
|
||||
.this-grid {
|
||||
grid-template-areas:
|
||||
'stamm kontakt praev system'
|
||||
'courses courses memberships memberships'
|
||||
'payments payments map map';
|
||||
grid-template-columns: max-content max-content max-content 1fr;
|
||||
}
|
||||
}
|
||||
.area-stamm {
|
||||
grid-area: stamm;
|
||||
}
|
||||
.area-kontakt {
|
||||
grid-area: kontakt;
|
||||
}
|
||||
.area-prae {
|
||||
grid-area: prae;
|
||||
.area-praev {
|
||||
grid-area: praev;
|
||||
}
|
||||
.area-courses {
|
||||
grid-area: courses;
|
||||
|
|
@ -239,4 +133,7 @@ export default {
|
|||
.area-map {
|
||||
grid-area: map;
|
||||
}
|
||||
.area-stammkontakt {
|
||||
grid-area: stammkontakt;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<section>
|
||||
<div class="flex space-x-2 border-b border-teal-200">
|
||||
<a
|
||||
v-for="(v, index) in inner.children"
|
||||
href="#"
|
||||
@click.prevent="navigate(index)"
|
||||
class="text-teal-800 font-semibold hover:text-teal-600 transition-all"
|
||||
:class="{'text-teal-600': inner.active === index}"
|
||||
>
|
||||
<span v-text="v"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
inner: {
|
||||
children: {},
|
||||
active: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
},
|
||||
|
||||
methods: {
|
||||
navigate(v) {
|
||||
this.inner.active = v;
|
||||
this.$emit('input', this.inner);
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.inner = this.value;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div>
|
||||
<table
|
||||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
border="0"
|
||||
class="custom-table overflow-auto custom-table-sm text-sm"
|
||||
v-if="inner.courses.length"
|
||||
>
|
||||
<thead>
|
||||
<th>Datum</th>
|
||||
<th>Baustein</th>
|
||||
<th>Veranstaltung</th>
|
||||
<th>Organisator</th>
|
||||
</thead>
|
||||
<tr v-for="(course, index) in inner.courses" :key="index">
|
||||
<td v-text="course.completed_at_human"></td>
|
||||
<td v-text="course.course.short_name"></td>
|
||||
<td v-text="course.event_name"></td>
|
||||
<td v-text="course.organizer"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="py-3 text-gray-400 text-center" v-else>Keine Ausbildungen vorhanden</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="grid gap-3">
|
||||
<key-value v-show="inner.main_phone" label="Telefon Eltern" :value="inner.main_phone" type="tel"></key-value>
|
||||
<key-value v-show="inner.mobile_phone" label="Handy Eltern" :value="inner.mobile_phone" type="tel"></key-value>
|
||||
<key-value
|
||||
v-show="inner.work_phone"
|
||||
label="Telefon Eltern geschäftlich"
|
||||
:value="inner.work_phone"
|
||||
type="tel"
|
||||
></key-value>
|
||||
<key-value
|
||||
v-show="inner.children_phone"
|
||||
label="Telefon Kind"
|
||||
:value="inner.children_phone"
|
||||
type="tel"
|
||||
></key-value>
|
||||
<key-value v-show="inner.email" label="E-Mail-Adresse Kind" :value="inner.email" type="email"></key-value>
|
||||
<key-value
|
||||
v-show="inner.email_parents"
|
||||
label="E-Mail-Adresse Eltern"
|
||||
:value="inner.email_parents"
|
||||
type="email"
|
||||
></key-value>
|
||||
<key-value v-show="inner.fax" label="Fax" :value="inner.fax" type="tel"></key-value>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
components: {
|
||||
'key-value': () => import('../KeyValue'),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table overflow-auto custom-table-sm text-sm">
|
||||
<thead>
|
||||
<th>Tätigkeit</th>
|
||||
<th>Untertätigkeit</th>
|
||||
<th>Datum</th>
|
||||
</thead>
|
||||
<tr v-for="(membership, index) in inner.memberships" :key="index">
|
||||
<td v-text="membership.activity_name"></td>
|
||||
<td v-text="membership.subactivity_name"></td>
|
||||
<td v-text="membership.human_date"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm text-sm">
|
||||
<thead>
|
||||
<th>Tätigkeit</th>
|
||||
<th>Untertätigkeit</th>
|
||||
<th>Datum</th>
|
||||
</thead>
|
||||
<tr v-for="(membership, index) in inner.memberships" :key="index">
|
||||
<td v-text="membership.activity_name"></td>
|
||||
<td v-text="membership.subactivity_name"></td>
|
||||
<td v-text="membership.human_date"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="flex gap-3">
|
||||
<div class="grid gap-3">
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Führungszeugnis eingesehen"
|
||||
:value="inner.efz_human ? inner.efz_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Präventionsschulung"
|
||||
:value="inner.ps_at_human ? inner.ps_at_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Vertiefungsschulung"
|
||||
:value="inner.more_ps_at_human ? inner.more_ps_at_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Einsatz ohne Schulung"
|
||||
:value="inner.without_education_at_human ? inner.without_education_at_human : 'nie'"
|
||||
></key-value>
|
||||
<key-value
|
||||
class="col-start-1"
|
||||
label="Einsatz ohne EFZ"
|
||||
:value="inner.without_efz_at_human ? inner.without_efz_at_human : 'nie'"
|
||||
></key-value>
|
||||
</div>
|
||||
<div class="grid gap-3 content-start">
|
||||
<boolean :value="inner.has_vk" long-label="Verhaltenskodex unterschrieben" label="VK"></boolean>
|
||||
<boolean :value="inner.has_svk" long-label="SVK unterschrieben" label="SVK"></boolean>
|
||||
<boolean
|
||||
:value="inner.multiply_pv"
|
||||
long-label="Multiplikator*in Präventionsschulung"
|
||||
label="Multipl. PS"
|
||||
></boolean>
|
||||
<boolean
|
||||
:value="inner.multiply_more_pv"
|
||||
long-label="Multiplikator*in Vertierungsschulung"
|
||||
label="Multipl. VS"
|
||||
></boolean>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
components: {
|
||||
'key-value': () => import('../KeyValue'),
|
||||
'boolean': () => import('../Boolean'),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<key-value class="col-span-2" label="Name" :value="inner.fullname"></key-value>
|
||||
<key-value class="col-span-2" label="Adresse" :value="inner.full_address"></key-value>
|
||||
<key-value label="Geburtsdatum" :value="inner.birthday_human"></key-value>
|
||||
<key-value label="Alter" :value="inner.age"></key-value>
|
||||
<key-value label="Bundesland" :value="inner.region.name"></key-value>
|
||||
<key-value label="Nationalität" :value="inner.nationality.name"></key-value>
|
||||
<key-value
|
||||
v-show="inner.other_country"
|
||||
label="Andere Staatsangehörigkeit"
|
||||
:value="inner.other_country"
|
||||
></key-value>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
components: {
|
||||
'key-value': () => import('../KeyValue'),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="grid gap-3">
|
||||
<key-value v-show="inner.nami_id" label="Nami Mitgliedsnummer" :value="inner.nami_id"></key-value>
|
||||
<key-value label="Beitrag" :value="inner.subscription ? inner.subscription.name : 'kein'"></key-value>
|
||||
<key-value v-if="inner.joined_at_human" label="Eintrittsdatum" :value="inner.joined_at_human"></key-value>
|
||||
<key-value v-if="inner.bill_kind_name" label="Rechnung" :value="inner.bill_kind_name"></key-value>
|
||||
<boolean :value="inner.send_newspaper" label="Mittendrin versenden"></boolean>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
components: {
|
||||
'key-value': () => import('../KeyValue'),
|
||||
'boolean': () => import('../Boolean'),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<iframe
|
||||
class="grow"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
src="https://www.openstreetmap.org/export/embed.html?bbox=9.699318408966066%2C47.484177893725764%2C9.729595184326174%2C47.49977861091604&layer=mapnik&marker=47.49197883161885%2C9.714467525482178"
|
||||
>
|
||||
</iframe>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inner: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue