Added translation keys

ref #79

src/components/dashboard/Dashboard.svelte

@@ -135,7 +135,7 @@
       height="24"><path fill="none" d="M0 0h24v24H0z" />
       <path
         d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
-    <span>Donations</span>
+    <span>{$_('donations')}</span>
   </a>
 {/if}
 {#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}

src/components/donations/AddDonationModal.svelte

@@ -178,33 +178,32 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
+                <!-- TODO: -->
                 Create a new
-                {#if is_fixed}fixed{:else}distance{/if}
+                {#if is_fixed}{$_('fixed-donation')}{:else}{$_('distance-donation')}{/if}
-                donation
               </h3>
               <label class="content-center align-middle object-center">
                 <span
                   class="ml-2 text-base"
-                  class:text-gray-300={is_fixed}>Distance</span>
+                  class:text-gray-300={is_fixed}>{$_('distance-donation')}</span>
                 <input
                   class="relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
                   type="checkbox"
                   bind:checked={is_fixed} />
                 <span
                   class="ml-2 text-base	"
-                  class:text-gray-300={!is_fixed}>Fixed</span>
+                  class:text-gray-300={!is_fixed}>{$_('distance-donation')}</span>
               </label>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the nessecary information to create a new
+                  {$_('please-provide-the-nessecary-information-to-create-a-new-donation')}
-                  donation
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="donor"
-                    class="block text-sm font-medium text-gray-700">Donor</label>
+                    class="block text-sm font-medium text-gray-700">{$_('donor')}</label>
                   <select
                     bind:value={donor}
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
@@ -221,7 +220,7 @@
                   <div class="col-span-6">
                     <label
                       for="donor"
-                      class="block text-sm font-medium text-gray-700">Runner</label>
+                      class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
                     <select
                       bind:value={runner}
                       class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
@@ -238,9 +237,8 @@
                 <div class="col-span-6">
                   <label
                     for="donation_amount_eur"
-                    class="block text-sm font-medium text-gray-700">Donation
+                    class="block text-sm font-medium text-gray-700">{$_('donation-amount')}
-                    amount
+                    {#if !is_fixed}{$_('per-kilometer')}{/if}</label>
-                    {#if !is_fixed}per Kilometer{/if}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       autocomplete="off"
@@ -259,7 +257,7 @@
                   {#if !is_amount_valid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Donation amount must be greater that 0.00€
+                      {$_('donation-amount-must-be-greater-that-0-00eur')}
                     </span>
                   {/if}
                 </div>

src/components/donations/DonationDetail.svelte

@@ -104,7 +104,7 @@
 </script>
 
 {#await donor_promise && runner_promise && promise}
-  Loading donation details
+  {$_('loading-donation-details')}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -122,7 +122,7 @@
                   d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
             </li>
             <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">Donations</a><svg
+              <a class="mr-2" href="./">{$_('donations')}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -156,7 +156,7 @@
         {original_data.runner.middlename || ''}
         {original_data.runner.lastname}
       {:else}
-        Fixed:
+        {$_('fixed-donation')}:
         {amount_input.toFixed(2).toLocaleString('de-DE', { valute: 'EUR' })}€
       {/if}
       <span data-id="donation_actions_${original_data.id}">
@@ -177,7 +177,7 @@
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-donor')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-donation')}</button>
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -192,7 +192,7 @@
     </div>
     <!--  -->
     <div style="displ">
-      <span class="font-medium text-gray-700">Total amount:</span>
+      <span class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
       <span>{(editable.amount / 100)
           .toFixed(2)
           .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
@@ -200,7 +200,7 @@
     <div class="text-sm w-full">
       <label
         for="donor"
-        class="block text-sm font-medium text-gray-700">Donor</label>
+        class="block text-sm font-medium text-gray-700">{$_('donor')}</label>
       <select
         bind:value={editable.donor}
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
@@ -217,7 +217,7 @@
       <div class="text-sm w-full">
         <label
           for="donor"
-          class="block text-sm font-medium text-gray-700">Runner</label>
+          class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
         <select
           bind:value={editable.runner}
           class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
@@ -234,8 +234,8 @@
     <div class="text-sm w-full">
       <label for="lastname" class="font-medium text-gray-700">
         {#if original_data.responseType == 'DISTANCEDONATION'}
-          Amount per kilometer
+          {$_('amount-per-kilometer')}
-        {:else}Amount{/if}
+        {:else}{$_('donation-amount')}{/if}
       </label>
       <div class="mt-1 flex rounded-md shadow-sm">
         <input
@@ -255,7 +255,7 @@
       {#if !is_amount_valid}
         <span
           class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          Donation amount must be greater that 0.00€
+          {$_('donation-amount-must-be-greater-that-0-00eur')}
         </span>
       {/if}
     </div>

src/components/donations/Donations.svelte

@@ -9,7 +9,7 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Donations
+    {$_('donations')}
     {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
       <button
         on:click={() => {
@@ -17,7 +17,7 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Add donation
+        {$_('add-donation')}
       </button>
     {/if}
   </span>

src/locales/en.json

@@ -268,5 +268,17 @@
   "verfuegbare": "availdable",
   "welcome_wavinghand": "Welcome 👋",
   "you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
-    "zip-postal-code": "ZIP/ postal code"
+  "zip-postal-code": "ZIP/ postal code",
+  "add-donation": "Add donation",
+  "fixed-donation": "fixed donation",
+  "distance-donation": "distance donation",
+  "please-provide-the-nessecary-information-to-create-a-new-donation": "Please provide the nessecary information to create a new donation",
+  "donor": "Donor",
+  "runner": "Runner",
+  "donation-amount": "Donation amount",
+  "per-kilometer": "per Kilometer",
+  "donation-amount-must-be-greater-that-0-00eur": "Donation amount must be greater that 0.00€",
+  "loading-donation-details": "Loading donation details",
+  "amount-per-kilometer": "Amount per kilometer",
+  "delete-donation": "Delete Donation"
 }