From 13543c3cd2792b3f7829a2e0d5d64e73852d7feb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:18:29 +0100
Subject: [PATCH] Profile - basic ui reactivity logic

ref #5
---
 src/components/Profile.vue | 175 +++++++++++--------------------------
 1 file changed, 52 insertions(+), 123 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index d5d0718..a80c71c 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -45,24 +45,37 @@
         >Änderungen speichern</button>
       </div>
     </div>
+    {{ activetab }}
     <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
-                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"
               >Mein Profil</button>
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline py-4 px-6 block" type="button">Meine 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"
+              >Meine Rundenzeiten</button>
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline py-4 px-6 block" type="button">Meine 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"
+              >Meine Spender</button>
             </div>
           </div>
-          <div class="tab-content block">
+          <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">
@@ -117,134 +130,50 @@
               </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 email</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="current email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New email</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="new email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Daily 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="daily-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="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          />
-                          <span class>No</span>
-                        </label>
-                      </div>
-                    </div>
-                    <div class="form-element">
-                      <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 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 px-5 mx-auto">
+                  <div class="lg:w-2/3 w-screen 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"
+                          >Distanz</th>
+                          <th
+                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
+                          >Rundenzeit</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">1000m</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">2min / 120s</td>
+                        </tr>
+                      </tbody>
+                    </table>
                   </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>
+              </section>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <!-- </div> -->
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref, reactive, watch } from "vue";
 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>
\ No newline at end of file