CHANGELOG.md

@@ -2,17 +2,8 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [1.4.2](https://git.odit.services/lfk/selfservice/compare/1.4.1...1.4.2)
-
-- refactor(Profile): drop sponsor selfservice create from this branch [`2d761cc`](https://git.odit.services/lfk/selfservice/commit/2d761ccd6da7d9515fc0c2b65dc2ca0cff61e3bd)
-- feat(Profile/sponsoring): show note for on-day cash donations [`59cb42c`](https://git.odit.services/lfk/selfservice/commit/59cb42c3364777f7b8aed1e90f48f5da015db118)
-- fix(profile): Format total distance [`480fe3e`](https://git.odit.services/lfk/selfservice/commit/480fe3e0e568939507e5cc21c48e98634614d4e6)
-
 #### [1.4.1](https://git.odit.services/lfk/selfservice/compare/1.4.0...1.4.1)
 
-> 25 April 2025
-
-- chore(release): 1.4.1 [`128c6ab`](https://git.odit.services/lfk/selfservice/commit/128c6abd737654087100cfca8e72af9b14dd770c)
 - fix(laptimes): Filter out invalid scans [`094e731`](https://git.odit.services/lfk/selfservice/commit/094e7319476bc571949a70b6f4c27539616f3634)
 - fix(certificate): Provide selfservice url on certificate [`8d6f290`](https://git.odit.services/lfk/selfservice/commit/8d6f290fd5bad54094ba1228fa6d854ad77a561d)
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-selfservice",
-	"version": "1.4.2",
+	"version": "1.4.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

src/locales/de.json

@@ -13,7 +13,6 @@
     "current_total_amount_in_eur": "Aktueller Gesamtbetrag (in €)",
     "delete_my_data": "Meine Daten löschen",
     "distance": "Distanz",
-    "donation_on_event_day": "Am Lauftag kann Bargeld in unsere Spendenbox gespendet werden 💶",
     "download_certificate": "Urkunde herunterladen",
     "download_registrationcode": "Registrierungscode herunterladen",
     "e_mail_adress": "E-Mail Adresse",
@@ -67,7 +66,6 @@
     "registrierungscode_generiert": "Registrierungscode generiert!",
     "registrierungscode_wird_generiert": "Registrierungscode wird generiert...",
     "resend_the_registration_mail": "Login-Link anfordern",
-    "spenden_info": "Spenden-Info",
     "sponsor_add_agree": "Mit dem Absenden bestätige ich, dass der Sponsor mit der Übermittlung seiner Daten einverstanden ist und ich dessen Berechtigung habe",
     "sponsoring": "Sponsoring",
     "sponsoring_pro_kilometer_in_eur": "Sponsoring pro Kilometer (in €)",

src/locales/en.json

@@ -13,7 +13,6 @@
     "current_total_amount_in_eur": "Current total amount (in €)",
     "delete_my_data": "Delete my data",
     "distance": "Distance",
-    "donation_on_event_day": "On race day, cash can be donated to our donation box 💶",
     "download_certificate": "Download certificate",
     "download_registrationcode": "Download registrationcode",
     "e_mail_adress": "mail address",
@@ -67,7 +66,6 @@
     "registrierungscode_generiert": "created registration code!",
     "registrierungscode_wird_generiert": "creating registration code...",
     "resend_the_registration_mail": "Send me a login link",
-    "spenden_info": "info for donations",
     "sponsor_add_agree": "By submitting, I confirm that the sponsor agrees to the transmission of his data and that I have his authorization",
     "sponsoring": "Sponsoring",
     "sponsoring_pro_kilometer_in_eur": "Sponsoring per Kilometer (in €)",

src/views/Profile.vue

@@ -156,7 +156,7 @@
                   <div class="w-full mx-auto">
                     <div v-if="state.scans.length > 0">
                       <p class="mb-2">
-                      {{ $t('total_distance') }}: {{ getTotalReadableDistance() }}
+                        {{ $t('total_distance') }}: {{ getReadableDistanceForUI() }}
                       </p>
 
                       <table class="table-auto w-full text-left whitespace-no-wrap">
@@ -215,29 +215,78 @@
             </div>
           </div>
           <div v-if="state.activetab === 'sponsorings'" class="tab-content block">
-          <div
-            class="bg-white border border-gray-200 rounded-lg shadow-lg p-4 dark:bg-neutral-800 dark:border-neutral-700 mt-2 font-medium"
-            role="alert" tabindex="-1" aria-labelledby="hs-discovery-label">
+            <div v-if="mode === 'add_sponsoring'">
+              <h1 class="text-3xl">{{ $t('add_sponsoring') }}</h1>
+              <form>
+                <div class="mt-6 grid gap-4 lg:gap-6">
+                  <!-- Grid -->
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
+                    <div>
+                      <label for="sponsorvorname"
+                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                          $t('vorname_des_sponsors') }}</label>
+                      <input v-bind="newsponsor_vorname" type="text" name="sponsorvorname" id="sponsorvorname"
+                        placeholder="Vorname des Sponsors"
+                        class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
+                    </div>
+
+                    <div>
+                      <label for="sponsornachname"
+                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                          $t('nachname_des_sponsors') }}</label>
+                      <input v-bind="newsponsor_nachname" type="text" name="sponsornachname" id="sponsornachname"
+                        placeholder="Nachname des Sponsors"
+                        class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
+                    <!-- End Grid -->
+
+                    <div>
+                      <label for="sponsortel" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                        $t('telefonnummer_des_sponsors') }}</label>
+                      <input v-bind="newsponsor_tel" type="tel" name="sponsortel" id="sponsortel" autocomplete="tel"
+                        class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
+                    </div>
+
+                    <div>
+                      <label for="sponsormail" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                        $t('e_mail_des_sponsors') }}</label>
+                      <input v-bind="newsponsor_mail" type="email" name="sponsormail" id="sponsormail"
+                        class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
+                    </div>
+
+                  </div>
+                  <div>
+                    <label for="eurokilometer" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                      $t('sponsoring_pro_kilometer_in_eur') }}</label>
+                    <input v-bind="newsponsor_value" type="number" name="eurokilometer" id="eurokilometer"
+                      placeholder="z.B. 1€ ODER 0,50€"
+                      class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
+                  </div>
+                </div>
+              </form>
+              <!-- End Grid -->
+
+              <!-- Checkbox -->
+              <div class="mt-3 flex">
                 <div class="flex">
-              <div class="shrink-0">
-                <svg class="shrink-0 size-4 text-blue-600 mt-1" 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">
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <path d="M12 16v-4"></path>
-                  <path d="M12 8h.01"></path>
-                </svg>
+                  <input v-model="newsponsor_check" id="sponsor_agree" name="sponsor_agree" type="checkbox"
+                    class="shrink-0 mt-1.5 border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
                 </div>
                 <div class="ms-3">
-                <h3 id="hs-discovery-label" class="text-gray-800 font-semibold dark:text-white">
-                  {{ $t('spenden_info') }}
-                </h3>
-                <p class="mt-2 text-sm text-gray-700 dark:text-neutral-400">
-                  {{ $t('donation_on_event_day') }}
-                </p>
+                  <label for="sponsor_agree" class="text-sm text-gray-600 dark:text-neutral-400">{{
+                    $t('sponsor_add_agree') }}</label>
                 </div>
               </div>
+              <!-- End Checkbox -->
+
+              <button :disabled="!newsponsor_check" @click="addSponsoring" type="button"
+                class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-teal-100 text-teal-800 hover:bg-teal-200 focus:outline-hidden focus:bg-teal-200 disabled:opacity-50 disabled:pointer-events-none dark:text-teal-500 dark:bg-teal-800/30 dark:hover:bg-teal-800/20 dark:focus:bg-teal-800/20 mt-2 cursor-pointer">
+                {{ $t('add_sponsoring') }}
+              </button>
             </div>
+            <div v-else>
               <div class="py-4 w-full">
                 <section class="dark:bg-gray-900 body-font">
                   <div class="mx-auto">
@@ -356,6 +405,9 @@
                         ]" />
                         {{ $t("no_sponsorings_for_you_were_recorded_yet") }}
                       </div>
+                      <!-- <button
+                        class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-teal-100 text-teal-800 hover:bg-teal-200 focus:outline-hidden focus:bg-teal-200 disabled:opacity-50 disabled:pointer-events-none dark:text-teal-500 dark:bg-teal-800/30 dark:hover:bg-teal-800/20 dark:focus:bg-teal-800/20 mt-2"
+                        @click="mode = 'add_sponsoring'">{{ $t('add_sponsoring') }}</button> -->
                     </div>
                   </div>
                 </section>
@@ -366,6 +418,7 @@
       </div>
     <!--  -->
     <Footer />
+  </div>
 </template>
 
 <script setup>
@@ -378,6 +431,22 @@ import { useI18n } from 'vue-i18n';
 import { TYPE, useToast } from "vue-toastification";
 const { t } = useI18n()
 const loadstate = ref("loading")
+const mode = ref("")
+// 
+const newsponsor_check = ref(false)
+const newsponsor_value = ref("")
+const newsponsor_mail = ref("")
+const newsponsor_tel = ref("")
+const newsponsor_vorname = ref("")
+const newsponsor_nachname = ref("")
+
+function shareSponsorLink() {
+  navigator.share({
+    title: state.firstname,
+    text: "Am 23.05.2025 findet der Lauf für Kaya! statt 🏃‍♂️🏃‍♀️\nWerde mein Sponsor beim Lauf für Kaya! 2025 und unterstütze mich pro gelaufenem Kilometer: https://lauf-fuer-kaya.de",
+    // url: "https://lauf-fuer-kaya.de",
+  })
+}
 
 function textToBase64Barcode(text) {
   const canvas = document.createElement("canvas");
@@ -420,8 +489,8 @@ const props = defineProps({
 });
 const accesstoken = props.token;
 
-function getTotalReadableDistance() {
-  return getReadableDistance(state.scans.reduce((accumulator, currentValue) => accumulator + currentValue.distance, 0));
+function getReadableDistanceForUI() {
+  return state.scans.reduce((accumulator, currentValue) => accumulator + currentValue.distance, 0)
 }
 
 function getReadableDistance(distance) {
@@ -473,6 +542,19 @@ runnerSelfServiceControllerGetScans({ path: { jwt: accesstoken } }).then(({ data
   .catch((error) => {
     toast.error(t('profil_konnte_nicht_geladen_werden'));
   });
+function addSponsoring() {
+  const postdata = {
+    "receiptNeeded": false,
+    "firstname": newsponsor_vorname.value,
+    "middlename": "",
+    "lastname": newsponsor_nachname.value,
+    "phone": newsponsor_tel.value,
+    "email": newsponsor_mail.value,
+    "address": {}
+  }
+  console.log(postdata);
+  // TODO: implement: donationControllerPostDistance({body:{}})
+}
 function delete_me() {
   toast.clear();
   toast(t('profil_wird_geloescht'));