Add translation for birthday mode

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..."}
     }
   }
 }

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 />
+        {{ $t("public_wishlist_subtitle1") }}<br />
-        Nutze den orangenen Knopf um einen Wunsch zu reservieren.
+        {{ $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,

components/wishlist.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
-    <v-card-title>Deine Wünsche</v-card-title>
+    <v-card-title>{{ $t("wishlist_own_wishes_title") }}</v-card-title>
-    <v-card-subtitle>Sollte ein Wunsch abgeschnitten sein, versuch mal dein Gerät zu kippen.</v-card-subtitle>
+    <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?',
+        title: this.$t("confirm_delete_wish_header"),
-        text: 'Wunsch wirklich löschen?',
+        text: this.$t("confirm_delete_wish_body"),
         type: 'warning',
         showCancelButton: true,
-        cancelButtonText: "Abbrechen",
+        cancelButtonText: this.$t("confirm_delete_wish_cancel_button"),
-        confirmButtonText: 'Löschen',
+        confirmButtonText: this.$t("confirm_delete_wish_button"),
       }).then((result) => {
         if (result.value) {
           this.$store.dispatch('wishes/deleteWish', id)

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>

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',

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",

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>

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>