From 641e7a0d8ff75ce5756d11f39b583f55731b821c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 9 Mar 2021 17:27:48 +0100
Subject: [PATCH] Profile - display group

ref #10
---
 src/components/Profile.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 7d60dcf..2dc30c7 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -9,7 +9,7 @@
             class="text-3xl font-bold whitespace-nowrap"
             v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')"
           ></p>
-          <p class="text-md whitespace-nowrap">Musterfirma > PR</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
@@ -48,30 +48,30 @@
           <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">
@@ -116,7 +116,7 @@
               </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">
@@ -158,7 +158,7 @@
               </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>
@@ -181,8 +181,9 @@ const state = reactive({
   firstname: "",
   middlename: "",
   lastname: "",
+  group: "",
+  activetab: "profile",
 })
-let activetab = ref("profile");
 const toast = useToast();
 const token = location.hash.substr(1).split('&')[0].split('=')[1];
 axios.get(`${config.baseurl}api/runners/me/${token}`)
@@ -192,6 +193,7 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
     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");
   })