Merge pull request 'feature/5_basic_ui_lap_times' (#8) from feature/5_basic_ui_lap_times into dev
Reviewed-on: #8 close #5
This commit is contained in:
commit
faf19d9e43
@ -29,12 +29,13 @@
|
|||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
<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" />
|
<polyline points="7 10 12 15 17 10" />
|
||||||
<line x1="12" y1="15" x2="12" y2="3" />
|
<line x1="12" y1="15" x2="12" y2="3" />
|
||||||
</svg> Urkunde herunterladen
|
</svg>
|
||||||
|
{{ $t('download_certificate') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="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"
|
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"
|
||||||
>Änderungen speichern</button>
|
>{{ $t('save_changes') }}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -44,65 +45,77 @@
|
|||||||
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
|
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<button
|
<button
|
||||||
class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
|
@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"
|
type="button"
|
||||||
>Profil</button>
|
>{{ $t('profile') }}</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<button class="tab tab-underline py-4 px-6 block" type="button">Rundenzeiten</button>
|
<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>
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<button class="tab tab-underline py-4 px-6 block" type="button">Spender</button>
|
<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>
|
</div>
|
||||||
<div class="tab-content block">
|
<div v-if="(activetab === 'profile')" class="tab-content block">
|
||||||
<div class="py-4 w-full">
|
<div class="py-4 w-full">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<form class="form flex flex-wrap w-full">
|
<form class="form flex flex-wrap w-full">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">First name</div>
|
<div class="form-label">{{ $t('vorname') }}</div>
|
||||||
<input
|
<input
|
||||||
name="first-name"
|
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"
|
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"
|
type="text"
|
||||||
placeholder="first name"
|
:placeholder="[[$t('vorname')]]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">middle name</div>
|
<div class="form-label">{{ $t('mittelname') }}</div>
|
||||||
<input
|
<input
|
||||||
name="middle-name"
|
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"
|
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"
|
type="text"
|
||||||
placeholder="middle name"
|
:placeholder="[[$t('mittelname')]]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Last name</div>
|
<div class="form-label">{{ $t('nachname') }}</div>
|
||||||
<input
|
<input
|
||||||
name="last-name"
|
name="last-name"
|
||||||
type="text"
|
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"
|
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="last name"
|
:placeholder="[[$t('nachname')]]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Email address</div>
|
<div class="form-label">{{ $t('e_mail_adress') }}</div>
|
||||||
<input
|
<input
|
||||||
name="email"
|
name="email"
|
||||||
type="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"
|
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="email address"
|
:placeholder="[[$t('e_mail_adress')]]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">phone number</div>
|
<div class="form-label">{{ $t('phone_number') }}</div>
|
||||||
<input
|
<input
|
||||||
name="tel"
|
name="tel"
|
||||||
type="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"
|
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="phone number"
|
:placeholder="[[$t('phone_number')]]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -110,124 +123,51 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-content hidden">
|
<div v-if="(activetab === 'laptimes')" class="tab-content block">
|
||||||
<div class="py-4 w-full lg:w-1/2">
|
<div class="py-4 w-full">
|
||||||
<div class="flex flex-col">
|
<section class="text-gray-400 bg-gray-900 body-font">
|
||||||
<form class="form flex flex-wrap w-full">
|
<div class="container mx-auto">
|
||||||
<div class="w-full">
|
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
|
||||||
<div class="form-element">
|
<table class="table-auto w-full text-left whitespace-no-wrap">
|
||||||
<div class="form-label">Current email</div>
|
<thead>
|
||||||
<input
|
<tr>
|
||||||
name="email"
|
<th
|
||||||
type="email"
|
class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
|
||||||
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"
|
>{{ $t('distance') }}</th>
|
||||||
placeholder="current email address"
|
<th
|
||||||
/>
|
class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
|
||||||
</div>
|
>{{ $t('lap_time') }}</th>
|
||||||
<div class="form-element">
|
<th
|
||||||
<div class="form-label">New email</div>
|
class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
|
||||||
<input
|
></th>
|
||||||
name="email"
|
</tr>
|
||||||
type="email"
|
</thead>
|
||||||
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"
|
<tbody>
|
||||||
placeholder="new email address"
|
<tr>
|
||||||
/>
|
<td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
|
||||||
</div>
|
<td class="border-t-2 border-gray-800 px-4 py-3">0min 57s</td>
|
||||||
<div class="form-element">
|
</tr>
|
||||||
<div class="form-label">Daily updates</div>
|
<tr>
|
||||||
<div class="flex items-center justify-start space-x-2">
|
<td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
|
||||||
<label class="flex items-center justify-start space-x-2">
|
<td class="border-t-2 border-gray-800 px-4 py-3">1min 15s</td>
|
||||||
<input
|
</tr>
|
||||||
type="radio"
|
<tr>
|
||||||
name="daily-updates"
|
<td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
|
||||||
class="form-radio h-4 w-4"
|
<td class="border-t-2 border-gray-800 px-4 py-3">2min 50s</td>
|
||||||
value="yes"
|
</tr>
|
||||||
/>
|
<tr>
|
||||||
<span class>Yes</span>
|
<td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
|
||||||
</label>
|
<td class="border-t-2 border-gray-800 px-4 py-3">3min 00s</td>
|
||||||
<label class="flex items-center justify-start space-x-2">
|
</tr>
|
||||||
<input
|
</tbody>
|
||||||
type="radio"
|
</table>
|
||||||
name="daily-updates"
|
|
||||||
class="form-radio h-4 w-4"
|
|
||||||
value="no"
|
|
||||||
/>
|
|
||||||
<span class>No</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
</section>
|
||||||
<div class="form-label">Weekly updates</div>
|
|
||||||
<div class="flex items-center justify-start space-x-2">
|
|
||||||
<label class="flex items-center justify-start space-x-2">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="weekle-updates"
|
|
||||||
class="form-radio h-4 w-4"
|
|
||||||
value="yes"
|
|
||||||
/>
|
|
||||||
<span class>Yes</span>
|
|
||||||
</label>
|
|
||||||
<label class="flex items-center justify-start space-x-2">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="weekle-updates"
|
|
||||||
class="form-radio h-4 w-4"
|
|
||||||
value="no"
|
|
||||||
/>
|
|
||||||
<span class>No</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tab-content hidden">
|
|
||||||
<div class="py-4 w-full lg:w-1/2">
|
|
||||||
<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">Current password</div>
|
|
||||||
<input
|
|
||||||
name="current-password"
|
|
||||||
type="password"
|
|
||||||
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="Enter your current password"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-element">
|
|
||||||
<div class="form-label">New password</div>
|
|
||||||
<input
|
|
||||||
name="new-password"
|
|
||||||
type="password"
|
|
||||||
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="Enter your new password"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-element">
|
|
||||||
<div class="form-label">Confirm new password</div>
|
|
||||||
<input
|
|
||||||
name="confirm-new-password"
|
|
||||||
type="password"
|
|
||||||
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="Enter your new password confirmation"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
@ -236,7 +176,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { computed, ref, reactive, watch } from "vue";
|
||||||
import axios from "redaxios";
|
import axios from "redaxios";
|
||||||
import Toastify from "toastify-js";
|
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>
|
</script>
|
||||||
@ -1,8 +1,12 @@
|
|||||||
{
|
{
|
||||||
"already_have_an_account": "Sie haben bereits einen Account?",
|
"already_have_an_account": "Sie haben bereits einen Account?",
|
||||||
"apartment_suite_etc": "Addresszeile 2",
|
"apartment_suite_etc": "Addresszeile 2",
|
||||||
|
"distance": "Distanz",
|
||||||
|
"download_certificate": "Urkunde herunterladen",
|
||||||
"e_mail_adress": "E-Mail Adresse",
|
"e_mail_adress": "E-Mail Adresse",
|
||||||
"go_to_login": "Zum Login",
|
"go_to_login": "Zum Login",
|
||||||
|
"lap_time": "Rundenzeit",
|
||||||
|
"lap_times": "Rundenzeiten",
|
||||||
"main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
|
"main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
|
||||||
"mittelname": "Mittelname",
|
"mittelname": "Mittelname",
|
||||||
"nachname": "Nachname",
|
"nachname": "Nachname",
|
||||||
@ -11,12 +15,15 @@
|
|||||||
"please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
|
"please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
|
||||||
"please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
|
"please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
|
||||||
"plz": "PLZ",
|
"plz": "PLZ",
|
||||||
|
"profile": "Profil",
|
||||||
"provide_address": "Adresse angeben?",
|
"provide_address": "Adresse angeben?",
|
||||||
"register": {
|
"register": {
|
||||||
"register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
|
"register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
|
||||||
},
|
},
|
||||||
"register_now": "Jetzt registrieren!",
|
"register_now": "Jetzt registrieren!",
|
||||||
"registrieren": "Registrieren",
|
"registrieren": "Registrieren",
|
||||||
|
"save_changes": "Änderungen speichern",
|
||||||
|
"sponsoring": "Sponsoring",
|
||||||
"strasse": "Straße",
|
"strasse": "Straße",
|
||||||
"this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
|
"this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
|
||||||
"view_my_data": "Meine Läuferdaten einsehen",
|
"view_my_data": "Meine Läuferdaten einsehen",
|
||||||
|
|||||||
@ -1,8 +1,12 @@
|
|||||||
{
|
{
|
||||||
"already_have_an_account": "Already have an account?",
|
"already_have_an_account": "Already have an account?",
|
||||||
"apartment_suite_etc": "Apartment, suite, etc.",
|
"apartment_suite_etc": "Apartment, suite, etc.",
|
||||||
|
"distance": "Distance",
|
||||||
|
"download_certificate": "Download certificate",
|
||||||
"e_mail_adress": "mail address",
|
"e_mail_adress": "mail address",
|
||||||
"go_to_login": "Go To Login",
|
"go_to_login": "Go To Login",
|
||||||
|
"lap_time": "Lap time",
|
||||||
|
"lap_times": "Lap times",
|
||||||
"main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
|
"main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
|
||||||
"mittelname": "Middlename",
|
"mittelname": "Middlename",
|
||||||
"nachname": "Lastname",
|
"nachname": "Lastname",
|
||||||
@ -11,12 +15,15 @@
|
|||||||
"please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
|
"please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
|
||||||
"please_provide_valid_mail": "Please provide a valid mail address.",
|
"please_provide_valid_mail": "Please provide a valid mail address.",
|
||||||
"plz": "zipcode",
|
"plz": "zipcode",
|
||||||
|
"profile": "Profile",
|
||||||
"provide_address": "Provide a postal address?",
|
"provide_address": "Provide a postal address?",
|
||||||
"register": {
|
"register": {
|
||||||
"register_now": "Register now for Lauf für Kaya! 2021."
|
"register_now": "Register now for Lauf für Kaya! 2021."
|
||||||
},
|
},
|
||||||
"register_now": "Register now!",
|
"register_now": "Register now!",
|
||||||
"registrieren": "Register Now",
|
"registrieren": "Register Now",
|
||||||
|
"save_changes": "Save changes",
|
||||||
|
"sponsoring": "Sponsoring",
|
||||||
"strasse": "Street/ Block",
|
"strasse": "Street/ Block",
|
||||||
"this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
|
"this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
|
||||||
"view_my_data": "View my data",
|
"view_my_data": "View my data",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user