lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: loading screen

Browse Source
This commit is contained in:
Philipp Dormann 2025-03-17 22:35:12 +01:00
parent e7b9c6e203
commit 2939911c99
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/Profile.vue
View File

@ -11,15 +11,18 @@
dark:text-gray-200
">
<img src="/favicon-lfk.png" class="h-20 mx-auto" />
<h1 class="text-3xl font-bold whitespace-nowrap font-[Athiti]" v-text="(state.firstname || '') +
' ' +
(state.middlename || '') +
' ' +
(state.lastname || '')
"></h1>
<p class="text-md whitespace-nowrap">Team: {{ state.group }}</p>
<div v-if="loadstate === 'loaded'">
<h1 class="text-3xl font-bold whitespace-nowrap font-[Athiti]" v-text="(state.firstname || '') +
' ' +
(state.middlename || '') +
' ' +
(state.lastname || '')
"></h1>
<p class="text-md whitespace-nowrap">Team: {{ state.group }}</p>
</div>
<h1 v-else class="text-3xl font-bold whitespace-nowrap font-[Athiti]">Daten werden geladen...</h1>
</div>
<div class="flex flex-wrap">
<div v-if="loadstate === 'loaded'" class="flex flex-wrap">
<div class="w-full">
<div class="flex flex-wrap flex-col w-full tabs">
<div class="flex lg:flex-wrap flex-row lg:space-x-2 justify-center">
@ -287,7 +290,8 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
<div>
<label for="sponsorvorname"
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('vorname_des_sponsors') }}</label>
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
$t('vorname_des_sponsors') }}</label>
<input v-bind="newsponsor_vorname" type="text" name="sponsorvorname" id="sponsorvorname"
placeholder="Vorname des Sponsors"
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
@ -295,7 +299,8 @@
<div>
<label for="sponsornachname"
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('nachname_des_sponsors') }}</label>
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
$t('nachname_des_sponsors') }}</label>
<input v-bind="newsponsor_nachname" type="text" name="sponsornachname" id="sponsornachname"
placeholder="Nachname des Sponsors"
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
@ -305,23 +310,23 @@
<!-- End Grid -->
<div>
<label for="sponsortel"
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('telefonnummer_des_sponsors') }}</label>
<label for="sponsortel" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
$t('telefonnummer_des_sponsors') }}</label>
<input v-bind="newsponsor_tel" type="tel" name="sponsortel" id="sponsortel" autocomplete="tel"
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
</div>
<div>
<label for="sponsormail"
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('e_mail_des_sponsors') }}</label>
<label for="sponsormail" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
$t('e_mail_des_sponsors') }}</label>
<input v-bind="newsponsor_mail" type="email" name="sponsormail" id="sponsormail"
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
</div>
</div>
<div>
<label for="eurokilometer"
class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('sponsoring_pro_kilometer_in_eur') }}</label>
<label for="eurokilometer" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
$t('sponsoring_pro_kilometer_in_eur') }}</label>
<input v-bind="newsponsor_value" type="number" name="eurokilometer" id="eurokilometer"
placeholder="z.B. 1€ ODER 0,50€"
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
@ -337,7 +342,8 @@
class="shrink-0 mt-1.5 border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
</div>
<div class="ms-3">
<label for="sponsor_agree" class="text-sm text-gray-600 dark:text-neutral-400">{{ $t('sponsor_add_agree') }}</label>
<label for="sponsor_agree" class="text-sm text-gray-600 dark:text-neutral-400">{{
$t('sponsor_add_agree') }}</label>
</div>
</div>
<!-- End Checkbox -->
@ -491,6 +497,7 @@ import { toCanvas } from "bwip-js";
import Footer from "@/components/Footer.vue";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const loadstate = ref("loading")
const mode = ref("")
//
const newsponsor_check = ref(false)
@ -566,6 +573,7 @@ function getReadableDistance(distance) {
axios
.get(`${config.baseurl}api/runners/me/${accesstoken}`)
.then(({ data }) => {
loadstate.value = "loaded"
state.phone = data.phone;
state.email = data.email;
state.firstname = data.firstname;
@ -577,6 +585,7 @@ axios
state.barcode = textToBase64Barcode(data.id ?? "???");
})
.catch((error) => {
loadstate = "error"
toast.clear();
toast.error(t('profil_konnte_nicht_geladen_werden'));
});