Merge branch 'dev' into feature/4-component-interpolation
This commit is contained in:
commit
9da54d15bf
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -5,8 +5,11 @@
|
|||
<div
|
||||
class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
|
||||
>
|
||||
<p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
|
||||
<p class="text-md whitespace-nowrap">Musterfirma > PR</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 space-x-4">
|
||||
<button
|
||||
|
|
@ -45,77 +48,67 @@
|
|||
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
|
||||
<div class="flex-none">
|
||||
<button
|
||||
@click="() => { activetab = 'profile' }"
|
||||
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
|
||||
@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"
|
||||
>{{ $t('profile') }}</button>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button
|
||||
@click="() => { activetab = 'laptimes' }"
|
||||
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
|
||||
@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"
|
||||
>{{ $t('lap_times') }}</button>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button
|
||||
@click="() => { activetab = 'sponsorings' }"
|
||||
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
|
||||
@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"
|
||||
>{{ $t('sponsoring') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="(activetab === 'profile')" class="tab-content block">
|
||||
<div v-if="(state.activetab === 'profile')" class="tab-content block">
|
||||
<div class="py-4 w-full">
|
||||
<div class="flex flex-col">
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">{{ $t('vorname') }}</div>
|
||||
<input
|
||||
name="first-name"
|
||||
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
type="text"
|
||||
:placeholder="[[$t('vorname')]]"
|
||||
<div class="text-lg">{{ $t('vorname') }}</div>
|
||||
<p
|
||||
class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
v-text="state.firstname"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">{{ $t('mittelname') }}</div>
|
||||
<input
|
||||
name="middle-name"
|
||||
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
type="text"
|
||||
:placeholder="[[$t('mittelname')]]"
|
||||
<div class="text-lg">{{ $t('mittelname') }}</div>
|
||||
<p
|
||||
class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
v-text="state.middlename"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">{{ $t('nachname') }}</div>
|
||||
<input
|
||||
name="last-name"
|
||||
type="text"
|
||||
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
:placeholder="[[$t('nachname')]]"
|
||||
<div class="text-lg">{{ $t('nachname') }}</div>
|
||||
<p
|
||||
class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
v-text="state.lastname"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">{{ $t('e_mail_adress') }}</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
:placeholder="[[$t('e_mail_adress')]]"
|
||||
<div class="text-lg">{{ $t('e_mail_adress') }}</div>
|
||||
<p
|
||||
class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
v-text="state.email"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">{{ $t('phone_number') }}</div>
|
||||
<input
|
||||
name="tel"
|
||||
type="tel"
|
||||
class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
:placeholder="[[$t('phone_number')]]"
|
||||
<div class="text-lg">{{ $t('phone_number') }}</div>
|
||||
<p
|
||||
class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||||
v-text="state.phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,12 +116,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="(activetab === 'laptimes')" class="tab-content block">
|
||||
<div v-if="(state.activetab === 'laptimes')" 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 class="table-auto w-full text-left whitespace-no-wrap">
|
||||
<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"
|
||||
>
|
||||
|
|
@ -142,30 +138,28 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-900 dark:text-gray-50">
|
||||
<tr class="border-t-2 border-gray-800">
|
||||
<td class="px-4 py-3">400m</td>
|
||||
<td class="px-4 py-3">0min 57s</td>
|
||||
</tr>
|
||||
<tr class="border-t-2 border-gray-800">
|
||||
<td class="px-4 py-3">400m</td>
|
||||
<td class="px-4 py-3">1min 15s</td>
|
||||
</tr>
|
||||
<tr class="border-t-2 border-gray-800">
|
||||
<td class="px-4 py-3">1km</td>
|
||||
<td class="px-4 py-3">2min 50s</td>
|
||||
</tr>
|
||||
<tr class="border-t-2 border-gray-800">
|
||||
<td class="px-4 py-3">1km</td>
|
||||
<td class="px-4 py-3">3min 00s</td>
|
||||
<tr v-for="s in state.scans" :key="s.id">
|
||||
<td class="px-4 py-3">
|
||||
<span v-text="s.distance"></span>m
|
||||
</td>
|
||||
<td class="px-4 py-3" v-text="s.lapTime"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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')]]"
|
||||
/>
|
||||
{{ $t('no_laps_scans_were_recorded_yet') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="(activetab === 'sponsorings')" class="tab-content block">
|
||||
<div v-if="(state.activetab === 'sponsorings')" class="tab-content block">
|
||||
<div class="py-4 w-full">coming soon...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,12 +169,45 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, watch } from "vue";
|
||||
import axios from "redaxios";
|
||||
import isEmail from 'validator/es/lib/isEmail';
|
||||
import isMobilePhone from 'validator/es/lib/isMobilePhone';
|
||||
import isPostalCode from 'validator/es/lib/isPostalCode';
|
||||
import { ref, reactive } from "vue";
|
||||
import { useToast } from "vue-toastification";
|
||||
import axios from "redaxios";
|
||||
// import isEmail from 'validator/es/lib/isEmail';
|
||||
// import isMobilePhone from 'validator/es/lib/isMobilePhone';
|
||||
// import isPostalCode from 'validator/es/lib/isPostalCode';
|
||||
//
|
||||
let activetab = ref("profile");
|
||||
const state = reactive({
|
||||
phone: "",
|
||||
email: "",
|
||||
firstname: "",
|
||||
middlename: "",
|
||||
lastname: "",
|
||||
scans: [],
|
||||
group: "",
|
||||
activetab: "profile",
|
||||
})
|
||||
const toast = useToast();
|
||||
const token = location.hash.substr(1).split('&')[0].split('=')[1];
|
||||
axios.get(`${config.baseurl}api/runners/me/${token}`)
|
||||
.then(({ data }) => {
|
||||
state.phone = data.phone;
|
||||
state.email = data.email;
|
||||
state.firstname = data.firstname;
|
||||
state.middlename = data.middlename;
|
||||
state.lastname = data.lastname;
|
||||
state.group = data.group;
|
||||
}).catch((error) => {
|
||||
toast.error("An error occured while loading your profile data");
|
||||
})
|
||||
axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
|
||||
.then(({ data }) => {
|
||||
data.map(function(s) {
|
||||
s.lapTime = Math.floor(s.lapTime / 60) + 'min ' + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + "s"
|
||||
return s;
|
||||
})
|
||||
data.filter(s => s.valid === true);
|
||||
state.scans = data;
|
||||
}).catch((error) => {
|
||||
toast.error("An error occured while loading your profile data");
|
||||
})
|
||||
</script>
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
"main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
|
||||
"mittelname": "Mittelname",
|
||||
"nachname": "Nachname",
|
||||
"no_laps_scans_were_recorded_yet": "Es wurden noch keine Runden / Scans aufgezeichnet ...",
|
||||
"ort": "Ort",
|
||||
"phone_number": "Telefonnummer",
|
||||
"please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
|
||||
"mittelname": "Middlename",
|
||||
"nachname": "Lastname",
|
||||
"no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet...",
|
||||
"ort": "City",
|
||||
"phone_number": "Phone Number",
|
||||
"please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ const Home = import('./components/Home.vue');
|
|||
const Imprint = import('./components/Imprint.vue');
|
||||
const Privacy = import('./components/Privacy.vue');
|
||||
const Register = import('./components/Register.vue');
|
||||
const Profile = import('./components/Profile.vue');
|
||||
const Profile = () => import('./components/Profile.vue');
|
||||
//
|
||||
let routes = [ { path: '/', component: EnvError } ];
|
||||
let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];
|
||||
if (typeof config !== 'undefined') {
|
||||
if (config.baseurl && config.documentserver_key) {
|
||||
routes = [
|
||||
|
|
|
|||
Loading…
Reference in New Issue