wip: general updates

This commit is contained in:
2024-12-02 11:54:05 +01:00
parent 196b386d6d
commit 1eab535381
17 changed files with 324 additions and 719 deletions

View File

@@ -2,8 +2,7 @@
<div class="min-h-screen w-full p-4">
<section class="text-white body-font">
<div class="container mx-auto flex items-center md:flex-row flex-col">
<div
class="
<div class="
flex flex-col
md:pr-10 md:mb-0
mb-6
@@ -12,25 +11,18 @@
md:w-auto md:text-left
text-center text-black
dark:text-gray-200
"
>
<p
class="text-3xl font-bold whitespace-nowrap"
v-text="
(state.firstname || '') +
' ' +
(state.middlename || '') +
' ' +
(state.lastname || '')
"
></p>
">
<p class="text-3xl font-bold whitespace-nowrap" v-text="(state.firstname || '') +
' ' +
(state.middlename || '') +
' ' +
(state.lastname || '')
"></p>
<p class="text-md whitespace-nowrap">{{ state.group }}</p>
</div>
<div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center">
<div v-if="state.delete_active === false">
<button
type="button"
class="
<button type="button" class="
focus:border-black focus:ring-2 focus:ring-black
text-white text-sm
py-2.5
@@ -42,31 +34,17 @@
md:w-auto
mb-1
md:mr-1
"
@click="get_registration"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-download"
style="display: inline; height: 1rem; vertical-align: sub"
>
" @click="get_registration">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
{{ $t("download_registrationcode") }}
</button>
<button
type="button"
class="
<button type="button" class="
focus:border-black focus:ring-2 focus:ring-black
text-white text-sm
py-2.5
@@ -78,31 +56,17 @@
md:w-auto
mb-1
md:mr-1
"
@click="get_certificate"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-download"
style="display: inline; height: 1rem; vertical-align: sub"
>
" @click="get_certificate">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
{{ $t("download_certificate") }}
</button>
<button
type="button"
class="
<button type="button" class="
focus:border-black focus:ring-2 focus:ring-black
text-white text-sm
py-2.5
@@ -112,39 +76,22 @@
hover:bg-red-700 hover:shadow-lg
w-full
md:w-auto
"
@click="
() => {
" @click="() => {
state.delete_active = true;
}
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-download"
style="display: inline; height: 1rem; vertical-align: sub"
>
">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
<path d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z"
/>
<path fill="currentColor"
d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z" />
</svg>
{{ $t("delete_my_data") }}
</button>
</div>
<div v-if="state.delete_active === true">
<button
type="button"
class="
<button type="button" class="
focus:border-black focus:ring-2 focus:ring-black
text-white text-sm
py-2.5
@@ -156,37 +103,19 @@
md:w-auto
bg-blue-500
hover:bg-blue-600 hover:shadow-lg
"
@click="
() => {
" @click="() => {
state.delete_active = false;
}
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-download"
style="display: inline; height: 1rem; vertical-align: sub"
>
">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
<path fill="none" d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M12 11l5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5-5-5 1-1z"
/>
<path fill="currentColor" d="M12 11l5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5-5-5 1-1z" />
</svg>
{{ $t("cancel_keep_my_data") }}
</button>
<button
type="button"
class="
<button type="button" class="
focus:border-black focus:ring-2 focus:ring-black
text-white text-sm
py-2.5
@@ -197,27 +126,13 @@
bg-red-600
hover:bg-red-700 hover:shadow-lg
md:ml-1
"
@click="delete_me"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-download"
style="display: inline; height: 1rem; vertical-align: sub"
>
" @click="delete_me">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-download" style="display: inline; height: 1rem; vertical-align: sub">
<path d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z"
/>
<path fill="currentColor"
d="M17 6h5v2h-2v13a1 1 0 01-1 1H5a1 1 0 01-1-1V8H2V6h5V3a1 1 0 011-1h8a1 1 0 011 1v3zm1 2H6v12h12V8zm-5 6l2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2zM9 4v2h6V4H9z" />
</svg>
{{ $t("confirm_delete_all_of_my_data") }}
</button>
@@ -230,53 +145,35 @@
<div class="flex flex-wrap flex-col w-full tabs">
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
<div class="flex-none">
<button
@click="
() => {
state.activetab = 'profile';
}
"
:class="{
<button @click="() => {
state.activetab = 'profile';
}
" :class="{
'tab-active border-b-2 font-medium border-blue-500':
state.activetab === 'profile',
}"
class="tab tab-underline py-4 px-6 block"
type="button"
>
}" class="tab tab-underline py-4 px-6 block" type="button">
{{ $t("profile") }}
</button>
</div>
<div class="flex-none">
<button
@click="
() => {
state.activetab = 'laptimes';
}
"
:class="{
<button @click="() => {
state.activetab = 'laptimes';
}
" :class="{
'tab-active border-b-2 font-medium border-blue-500':
state.activetab === 'laptimes',
}"
class="tab tab-underline py-4 px-6 block"
type="button"
>
}" class="tab tab-underline py-4 px-6 block" type="button">
{{ $t("lap_times") }}
</button>
</div>
<div class="flex-none">
<button
@click="
() => {
state.activetab = 'sponsorings';
}
"
:class="{
<button @click="() => {
state.activetab = 'sponsorings';
}
" :class="{
'tab-active border-b-2 font-medium border-blue-500':
state.activetab === 'sponsorings',
}"
class="tab tab-underline py-4 px-6 block"
type="button"
>
}" class="tab tab-underline py-4 px-6 block" type="button">
{{ $t("sponsoring") }}
</button>
</div>
@@ -288,14 +185,9 @@
<div class="w-full">
<div class="form-element">
<div class="text-lg">{{ $t("registrationcode") }}</div>
<img
class="w-full md:w-auto mb-2 bg-white p-2"
alt="Registrierungscode"
:src="state.barcode"
/>
<img class="w-full md:w-auto mb-2 bg-white p-2" alt="Registrierungscode" :src="state.barcode" />
<div class="text-lg">{{ $t("vorname") }}</div>
<p
class="
<p class="
h-10
w-full
dark:bg-gray-800
@@ -310,14 +202,11 @@
transition-colors
duration-200
ease-in-out
"
v-text="state.firstname || '---'"
/>
" v-text="state.firstname || '---'" />
</div>
<div class="form-element">
<div class="text-lg">{{ $t("mittelname") }}</div>
<p
class="
<p class="
h-10
w-full
dark:bg-gray-800
@@ -332,14 +221,11 @@
transition-colors
duration-200
ease-in-out
"
v-text="state.middlename || '---'"
/>
" v-text="state.middlename || '---'" />
</div>
<div class="form-element">
<div class="text-lg">{{ $t("nachname") }}</div>
<p
class="
<p class="
h-10
w-full
dark:bg-gray-800
@@ -354,14 +240,11 @@
transition-colors
duration-200
ease-in-out
"
v-text="state.lastname || '---'"
/>
" v-text="state.lastname || '---'" />
</div>
<div class="form-element">
<div class="text-lg">{{ $t("e_mail_adress") }}</div>
<p
class="
<p class="
h-10
w-full
dark:bg-gray-800
@@ -376,14 +259,11 @@
transition-colors
duration-200
ease-in-out
"
v-text="state.email || '---'"
/>
" v-text="state.email || '---'" />
</div>
<div class="form-element">
<div class="text-lg">{{ $t("phone_number") }}</div>
<p
class="
<p class="
h-10
w-full
dark:bg-gray-800
@@ -398,9 +278,7 @@
transition-colors
duration-200
ease-in-out
"
v-text="state.phone || '---'"
/>
" v-text="state.phone || '---'" />
</div>
</div>
</form>
@@ -412,40 +290,31 @@
<section class="text-gray-400 dark:bg-gray-900 body-font">
<div class="container mx-auto">
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
<table
v-if="state.scans.length > 0"
class="table-auto w-full text-left whitespace-no-wrap"
>
<thead
class="
<table v-if="state.scans.length > 0" class="table-auto w-full text-left whitespace-no-wrap">
<thead class="
text-black
bg-gray-300
dark:text-white
text-sm
dark:bg-gray-800
"
>
">
<tr>
<th
class="
<th class="
px-4
py-3
title-font
tracking-wider
font-medium
"
>
">
{{ $t("distance") }}
</th>
<th
class="
<th class="
px-4
py-3
title-font
tracking-wider
font-medium
"
>
">
{{ $t("lap_time") }}
</th>
</tr>
@@ -459,21 +328,15 @@
</tr>
</tbody>
</table>
<div
v-else
class="
<div v-else class="
text-center
font-bold
text-black
dark:text-white
text-2xl
"
>
<img
src="../assets/empty_laps.svg"
style="height: 25rem; margin: 0 auto"
:alt="[[$t('no_laps_scans_were_recorded_yet')]]"
/>
">
<img src="../assets/empty_laps.svg" style="height: 25rem; margin: 0 auto"
:alt="[[$t('no_laps_scans_were_recorded_yet')]]" />
{{ $t("no_laps_scans_were_recorded_yet") }}
</div>
</div>
@@ -481,59 +344,45 @@
</section>
</div>
</div>
<div
v-if="state.activetab === 'sponsorings'"
class="tab-content block"
>
<div v-if="state.activetab === 'sponsorings'" class="tab-content block">
<div class="py-4 w-full">
<section class="text-gray-400 dark:bg-gray-900 body-font">
<div class="container mx-auto">
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
<table
v-if="state.sponsorings.length > 0"
class="table-auto w-full text-left whitespace-no-wrap"
>
<thead
class="
<table v-if="state.sponsorings.length > 0" class="table-auto w-full text-left whitespace-no-wrap">
<thead class="
text-black
bg-gray-300
dark:text-white
text-sm
dark:bg-gray-800
"
>
">
<tr>
<th
class="
<th class="
px-4
py-3
title-font
tracking-wider
font-medium
"
>
">
Name
</th>
<th
class="
<th class="
px-4
py-3
title-font
tracking-wider
font-medium
"
>
">
{{ $t("amount_per_kilometer_in_eur") }}
</th>
<th
class="
<th class="
px-4
py-3
title-font
tracking-wider
font-medium
"
>
">
{{ $t("current_total_amount_in_eur") }}
</th>
</tr>
@@ -548,24 +397,16 @@
<span v-text="s.donor.lastname"></span>
</td>
<td class="px-4 py-3">
<span
v-text="
(s.amountPerDistance / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"
></span
>€
<span v-text="(s.amountPerDistance / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"></span>€
</td>
<td class="px-4 py-3">
<span
v-text="
(s.amount / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"
></span
>€
<span v-text="(s.amount / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"></span>€
</td>
</tr>
</tbody>
@@ -573,61 +414,46 @@
<tr>
<td class="px-4 py-3">{{ $t("total") }}</td>
<td class="px-4 py-3">
<span
v-text="
(
state.sponsorings.reduce(function (
sum,
current
) {
return sum + current.amountPerDistance;
},
<span v-text="(
state.sponsorings.reduce(function (
sum,
current
) {
return sum + current.amountPerDistance;
},
0) / 100
)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"
></span
>€
)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"></span>€
</td>
<td class="px-4 py-3">
<span
v-text="
(
state.sponsorings.reduce(function (
sum,
current
) {
return sum + current.amount;
},
<span v-text="(
state.sponsorings.reduce(function (
sum,
current
) {
return sum + current.amount;
},
0) / 100
)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"
></span
>€
)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })
"></span>€
</td>
</tr>
</tfoot>
</table>
<div
v-else
class="
<div v-else class="
text-center
font-bold
text-black
dark:text-white
text-2xl
"
>
<img
src="../assets/empty_laps.svg"
style="height: 25rem; margin: 0 auto"
:alt="[
[$t('no_sponsorings_for_you_were_recorded_yet')],
]"
/>
">
<img src="../assets/empty_laps.svg" style="height: 25rem; margin: 0 auto" :alt="[
[$t('no_sponsorings_for_you_were_recorded_yet')],
]" />
{{ $t("no_sponsorings_for_you_were_recorded_yet") }}
</div>
</div>
@@ -792,7 +618,7 @@ function get_registration() {
toast("Registrierungscode wird generiert...");
var a = document.createElement("a");
a.href = state.barcode;
a.download = "LfK23_Registrierungscode.png";
a.download = "LfK25_Registrierungscode.png";
a.click();
toast.clear();
toast("Registrierungscode generiert!", { type: TYPE.SUCCESS });