From 48571c7e1889a80d0d793658b06709db7fc7cfa3 Mon Sep 17 00:00:00 2001
From: PrivateGER <privateger@privateger.me>
Date: Mon, 27 Dec 2021 21:14:08 +0100
Subject: [PATCH] Add translation for birthday mode

---
 components/claimedwishes.vue  |  6 +--
 components/publicwishlist.vue | 12 +++---
 components/wishlist.vue       | 16 ++++----
 layouts/default.vue           |  2 +
 nuxt.config.js                | 77 +++++++++++++++++++++++++++++++++++
 package.json                  |  1 +
 pages/addwish.vue             |  8 ++--
 pages/index.vue               |  4 +-
 8 files changed, 103 insertions(+), 23 deletions(-)

diff --git a/components/claimedwishes.vue b/components/claimedwishes.vue
index 965b106..500a393 100644
--- a/components/claimedwishes.vue
+++ b/components/claimedwishes.vue
@@ -1,12 +1,12 @@
 <template>
   <v-card>
-    <v-card-title>Von dir reservierte Wünsche</v-card-title>
+    <v-card-title>{{ $t("claimed_wish_table_header") }}</v-card-title>
 
     <v-list three-line>
       <v-list-item v-for='item in this.$store.state.wishes.claimed' v-bind:key='item.id'>
         <v-list-item-content>
           <v-list-item-title>
-            Wunsch von {{ getUser(item.owner_id).name }}
+            {{ $t("claimed_wish_row_wish_by") }} {{ getUser(item.owner_id).name }}
           </v-list-item-title>
           <v-list-item-subtitle>
             {{ item.wish }}
@@ -25,7 +25,7 @@ export default {
       let searchedUser = this.$store.state.users.users
         .find(user => user.id === id)
       console.log(searchedUser)
-      return searchedUser !== undefined ? searchedUser : {"id": 45, "name": "Lädt..."}
+      return searchedUser !== undefined ? searchedUser : {"id": 999, "name": "Lädt..."}
     }
   }
 }
diff --git a/components/publicwishlist.vue b/components/publicwishlist.vue
index 2bd5043..3c94d84 100644
--- a/components/publicwishlist.vue
+++ b/components/publicwishlist.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <v-card>
-      <v-card-title>Öffentliche Wunschliste</v-card-title>
+      <v-card-title>{{ $t("public_wishlist_title") }}</v-card-title>
       <v-card-text>
-        Alle hier sichtbaren Wünsche sind noch frei.<br />
-        Nutze den orangenen Knopf um einen Wunsch zu reservieren.
+        {{ $t("public_wishlist_subtitle1") }}<br />
+        {{ $t("public_wishlist_subtitle2") }}
       </v-card-text>
     </v-card>
 
@@ -20,7 +20,7 @@
               <template v-slot:activator="{ on }">
                 <v-btn v-on:click='claimWish(wish.id)' outlined color='secondary'><v-icon>mdi-playlist-check</v-icon></v-btn>
               </template>
-              <span>Reservieren</span>
+              <span>{{ $t("public_wishlist_reserve_wish") }}</span>
             </v-tooltip>
           </v-list-item>
         </v-list>
@@ -42,7 +42,7 @@ export default {
     async claimWish(id) {
       let response = await this.$swal({
         title: 'Wunsch reservieren?',
-        html: 'Du kannst Wünsche <b>NICHT</b> wieder freigeben!<br />Bitte sei dir sicher <b>bevor</b> du reservierst!',
+        html: this.$t("public_wishlist_claim_warning"),
         type: 'warning',
         showCancelButton: true,
         cancelButtonText: "Abbrechen",
@@ -55,7 +55,7 @@ export default {
 
       this.$store.dispatch("wishes/claimWish", id).then(() => {
         this.$swal({
-          title: 'Erfolgreich reserviert',
+          title: this.$t("public_wishlist_claim_success"),
           type: 'success',
           showConfirmButton: false,
           timerProgressBar: true,
diff --git a/components/wishlist.vue b/components/wishlist.vue
index 10e6681..49146b5 100644
--- a/components/wishlist.vue
+++ b/components/wishlist.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
-    <v-card-title>Deine Wünsche</v-card-title>
-    <v-card-subtitle>Sollte ein Wunsch abgeschnitten sein, versuch mal dein Gerät zu kippen.</v-card-subtitle>
+    <v-card-title>{{ $t("wishlist_own_wishes_title") }}</v-card-title>
+    <v-card-subtitle>{{ $t("wishlist_own_wishes_subtitle") }}</v-card-subtitle>
 
     <div class='pa-4'>
       <v-list-item v-for='item in this.$store.state.wishes.personal' :key='item.wish+item.id'>
@@ -9,12 +9,12 @@
           <v-list-item-title>{{ item.wish }}</v-list-item-title>
         </v-list-item-content>
         <v-list-item-action>
-          <v-btn style='float: right' v-on:click='deleteWish(item.id)' outlined color='primary'><v-icon>mdi-delete</v-icon>Löschen</v-btn>
+          <v-btn style='float: right' v-on:click='deleteWish(item.id)' outlined color='primary'><v-icon>mdi-delete</v-icon>{{ $t("delete_wish_button") }}</v-btn>
         </v-list-item-action>
       </v-list-item>
       <hr />
       <NuxtLink to='/addwish'>
-        <v-btn class='mt-4' block color='primary'><v-icon>mdi-plus</v-icon> Wunsch hinzufügen</v-btn>
+        <v-btn class='mt-4' block color='primary'><v-icon>mdi-plus</v-icon> {{ $t("add_wish_button") }}</v-btn>
       </NuxtLink>
     </div>
   </v-card>
@@ -26,12 +26,12 @@ export default {
   methods: {
     deleteWish(id) {
       this.$swal({
-        title: 'Wunsch löschen?',
-        text: 'Wunsch wirklich löschen?',
+        title: this.$t("confirm_delete_wish_header"),
+        text: this.$t("confirm_delete_wish_body"),
         type: 'warning',
         showCancelButton: true,
-        cancelButtonText: "Abbrechen",
-        confirmButtonText: 'Löschen',
+        cancelButtonText: this.$t("confirm_delete_wish_cancel_button"),
+        confirmButtonText: this.$t("confirm_delete_wish_button"),
       }).then((result) => {
         if (result.value) {
           this.$store.dispatch('wishes/deleteWish', id)
diff --git a/layouts/default.vue b/layouts/default.vue
index 54b2fa2..68ec148 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -102,6 +102,8 @@ export default {
       this.$store.dispatch("wishes/fetchPublic")
       this.$store.dispatch("users/fetchUsers")
     }, 15000)
+
+    this.$i18n.setLocale('de_geburtstag')
   }
 }
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index d6793b3..9493ff2 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -41,8 +41,85 @@ export default {
     '@nuxtjs/pwa',
     'nuxt-sweetalert2',
     'nuxt-logrocket',
+    '@nuxtjs/i18n'
   ],
 
+  i18n: {
+    locales: ["de_weihnachten", "de_geburtstag"],
+    defaultLocale: "de_weihnachten",
+    strategy: "no_prefix",
+    vueI18n: {
+      fallbackLocale: "de_geburtstag",
+      messages: {
+        de_weihnachten: {
+          // index.vue
+          "main_card_header": "Willkommen bei der Wunschliste 2021.",
+          "main_card_subheader": "Hier ist dein persönlicher Bereich. Um die Wünsche anderer zu sehen, musst du die Sektion wechseln (oben links).",
+
+          // wishlist.vue
+          "wishlist_own_wishes_title": "Deine Wünsche",
+          "wishlist_own_wishes_subtitle": "Sollte ein Wunsch abgeschnitten sein, versuch mal dein Gerät zu kippen.",
+          "delete_wish_button": "Löschen",
+          "add_wish_button": "Wunsch hinzufügen",
+          "confirm_delete_wish_header": "Wunsch löschen?",
+          "confirm_delete_wish_body": "Wunsch wirklich löschen?",
+          "confirm_delete_wish_button": "Löschen",
+          "confirm_delete_wish_cancel_button": "Abbrechen",
+
+          // claimedwishes.vue
+          "claimed_wish_table_header": "Von dir reservierte Wünsche",
+          "claimed_wish_row_wish_by": "Wunsch von",
+
+          // publicwishlist.vue
+          "public_wishlist_title": "Öffentliche Wunschliste",
+          "public_wishlist_subtitle1": "Alle hier sichtbaren Wünsche sind noch frei.",
+          "public_wishlist_subtitle2": "Nutze den orangenen Knopf um einen Wunsch zu reservieren.",
+          "public_wishlist_reserve_wish": "Reservieren",
+          "public_wishlist_claim_warning": "Du kannst Wünsche <b>NICHT</b> wieder freigeben!<br />Bitte sei dir sicher <b>bevor</b> du diesen Wunsch reservierst!",
+          "public_wishlist_claim_success": "Erfolgreich reserviert",
+
+          // addwish.vue
+          "add_wish_header": "Wunsch hinzufügen",
+          "add_wish_back": "Oder zurück",
+          "add_wish_placeholder": "Wunsch hier eingeben...",
+
+        },
+        de_geburtstag: {
+          // index.vue
+          "main_card_header": "Willkommen bei der Geburtstags-Wunschliste.",
+          "main_card_subheader": "Hier ist dein persönlicher Bereich. Um die Wünsche anderer zu sehen, musst du die Sektion wechseln (oben links).",
+
+          // wishlist.vue
+          "wishlist_own_wishes_title": "Deine Geburtstagswünsche",
+          "wishlist_own_wishes_subtitle": "Sollte ein Wunsch abgeschnitten sein, versuch mal dein Gerät zu kippen.",
+          "delete_wish_button": "Löschen",
+          "add_wish_button": "Wunsch hinzufügen",
+          "confirm_delete_wish_header": "Wunsch löschen?",
+          "confirm_delete_wish_body": "Wunsch wirklich löschen?",
+          "confirm_delete_wish_button": "Löschen",
+          "confirm_delete_wish_cancel_button": "Abbrechen",
+
+          // claimedwishes.vue
+          "claimed_wish_table_header": "Von dir reservierte Geburtstagswünsche",
+          "claimed_wish_row_wish_by": "Wunsch von",
+
+          // publicwishlist.vue
+          "public_wishlist_title": "Öffentliche Wunschliste",
+          "public_wishlist_subtitle1": "Alle hier sichtbaren Wünsche sind noch frei.",
+          "public_wishlist_subtitle2": "Nutze den orangenen Knopf um einen Wunsch zu reservieren.",
+          "public_wishlist_reserve_wish": "Reservieren",
+          "public_wishlist_claim_warning": "Du kannst Wünsche <b>NICHT</b> wieder freigeben!<br />Bitte sei dir sicher <b>bevor</b> du diesen Wunsch reservierst!",
+          "public_wishlist_claim_success": "Erfolgreich reserviert",
+
+          // addwish.vue
+          "add_wish_header": "Wunsch hinzufügen",
+          "add_wish_back": "Oder zurück",
+          "add_wish_placeholder": "Wunsch hier eingeben...",
+        }
+      }
+    }
+  },
+
   logRocket: {
     // configure LogRocket
     logRocketId: 'privateger/weihnachten',
diff --git a/package.json b/package.json
index dbb9ab4..6fbc54f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/i18n": "^7.2.0",
     "@nuxtjs/pwa": "^3.3.5",
     "core-js": "^3.15.1",
     "firebase": "^9.4.1",
diff --git a/pages/addwish.vue b/pages/addwish.vue
index 78ddf8c..0c163d8 100644
--- a/pages/addwish.vue
+++ b/pages/addwish.vue
@@ -1,22 +1,22 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      Wunsch hinzufügen
+      {{ $t('add_wish_header') }}
     </v-card-title>
     <v-card-subtitle>
-      <NuxtLink to='/'>Oder zurück</NuxtLink>
+      <NuxtLink to='/'>{{ $t("add_wish_back") }}</NuxtLink>
     </v-card-subtitle>
     <v-card-text>
       <v-form ref='addform'>
         <v-text-field
           v-model="wish"
-          label="Wunsch hier eingeben..."
+          :label="$t('add_wish_placeholder')"
           required
           :rules="[rules.required]"
         ></v-text-field>
 
         <v-btn class='mt-4' v-on:click='submitWish' color='primary'>
-          <v-icon>mdi-plus</v-icon> Hinzufügen
+          <v-icon>mdi-plus</v-icon> {{ $t("add_wish_button") }}
         </v-btn>
       </v-form>
     </v-card-text>
diff --git a/pages/index.vue b/pages/index.vue
index de5c845..19d67bd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,10 +3,10 @@
     <v-col cols="12" sm="8" md="6">
         <v-card>
         <v-card-title class="headline">
-          Willkommen bei der Wunschliste 2021.
+          {{ $t('main_card_header') }}
         </v-card-title>
         <v-card-text>
-          Hier ist dein persönlicher Bereich. Um die Wünsche anderer zu sehen, musst du die Sektion wechseln (oben links).
+          {{ $t('main_card_subheader') }}
         </v-card-text>
       </v-card>
     </v-col>