187 lines
9.1 KiB
Vue
187 lines
9.1 KiB
Vue
<template>
|
|
<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="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
|
|
>
|
|
<p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
|
|
<p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
|
|
</div>
|
|
<div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
|
|
<button
|
|
type="button"
|
|
class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
|
|
>
|
|
<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="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
|
|
>{{ $t('save_changes') }}</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="flex flex-wrap">
|
|
<div class="w-full p-4">
|
|
<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="() => { activetab = 'profile' }"
|
|
:class="{ 'tab-active border-b-2 font-medium border-blue-500': (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') }"
|
|
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') }"
|
|
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 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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="(activetab === 'laptimes')" class="tab-content block">
|
|
<div class="py-4 w-full">
|
|
<section class="text-gray-400 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">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
|
|
>{{ $t('distance') }}</th>
|
|
<th
|
|
class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
|
|
>{{ $t('lap_time') }}</th>
|
|
<th
|
|
class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
|
|
></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">0min 57s</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">1min 15s</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">2min 50s</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
|
|
<td class="border-t-2 border-gray-800 px-4 py-3">3min 00s</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div v-if="(activetab === 'sponsorings')" class="tab-content block">
|
|
<div class="py-4 w-full">coming soon...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 { useToast } from "vue-toastification";
|
|
//
|
|
let activetab = ref("profile");
|
|
</script> |