Translations (#72)

* Translations + danish

* changed back proxy target to use ENV

* Resolved more merge conflicts

* Removed test in translation

* Documentation of translations

* Updated translations

* removed old packages

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/src/components/UI/AddRecipeFab.vue

@@ -2,16 +2,15 @@
   <div class="text-center">
     <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
       <v-card :loading="processing">
-        <v-card-title class="headline"> From URL </v-card-title>
+        <v-card-title class="headline">{{ $t('new-recipe.from-url') }} </v-card-title>
 
         <v-card-text>
           <v-form>
-            <v-text-field v-model="recipeURL" label="Recipe URL"></v-text-field>
+            <v-text-field v-model="recipeURL" :label="$t('new-recipe.recipe-url')"></v-text-field>
           </v-form>
 
           <v-alert v-if="error" color="red" outlined type="success">
-            Looks like there was an error parsing the URL. Check the log and
-            debug/last_recipe.json to see what went wrong.
+            {{ $t('new-recipe.error-message') }}
           </v-alert>
         </v-card-text>
 
@@ -19,8 +18,8 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="grey" text @click="reset"> Close </v-btn>
-          <v-btn color="success" text @click="createRecipe"> Submit </v-btn>
+          <v-btn color="grey" text @click="reset"> {{$t('general.close')}} </v-btn>
+          <v-btn color="success" text @click="createRecipe"> {{ $t('general.submit') }} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

frontend/src/components/UI/Login.vue

@@ -13,20 +13,20 @@
                 v-model="user.name"
                 light="light"
                 prepend-icon="person"
-                label="Name"
+                :label="$t('general.name')"
               ></v-text-field>
               <v-text-field
                 v-model="user.email"
                 light="light"
                 prepend-icon="mdi-email"
-                label="Email"
+                :label="$t('login.email')"
                 type="email"
               ></v-text-field>
               <v-text-field
                 v-model="user.password"
                 light="light"
                 prepend-icon="mdi-lock"
-                label="Password"
+                :label="$t('login.password')"
                 type="password"
               ></v-text-field>
               <v-checkbox
@@ -34,7 +34,7 @@
                 v-if="options.isLoggingIn"
                 v-model="options.shouldStayLoggedIn"
                 light="light"
-                label="Stay logged in?"
+                :label="$t('login.stay-logged-in')"
                 hide-details="hide-details"
               ></v-checkbox>
               <v-btn
@@ -44,14 +44,14 @@
                 color="primary"
                 block="block"
                 type="submit"
-                >Sign in</v-btn
+                >{{$t('login.sign-in')}}</v-btn
               >
               <v-btn
                 v-else
                 block="block"
                 type="submit"
                 @click.prevent="options.isLoggingIn = true"
-                >Sign up</v-btn
+                >{{$t('login.sign-up')}}</v-btn
               >
             </v-form>
           </v-card-text>

frontend/src/components/UI/Menu.vue

@@ -32,26 +32,32 @@
 
 <script>
 export default {
-  data: () => ({
-    items: [
-      {
-        icon: "mdi-calendar-week",
-        title: "Dinner This Week",
-        nav: "/meal-plan/this-week",
-      },
-      {
-        icon: "mdi-calendar-today",
-        title: "Dinner Today",
-        nav: "/meal-plan/today",
-      },
-      {
-        icon: "mdi-calendar-multiselect",
-        title: "Planner",
-        nav: "/meal-plan/planner",
-      },
-      { icon: "mdi-cog", title: "Settings", nav: "/settings/site" },
-    ],
-  }),
+  data: function () {
+    return {
+      items: [
+        {
+          icon: "mdi-calendar-week",
+          title: this.$i18n.t("meal-plan.dinner-this-week"),
+          nav: "/meal-plan/this-week",
+        },
+        {
+          icon: "mdi-calendar-today",
+          title: this.$i18n.t("meal-plan.dinner-today"),
+          nav: "/meal-plan/today",
+        },
+        {
+          icon: "mdi-calendar-multiselect",
+          title: this.$i18n.t("meal-plan.planner"),
+          nav: "/meal-plan/planner",
+        },
+        {
+          icon: "mdi-cog",
+          title: this.$i18n.t("general.settings"),
+          nav: "/settings/site",
+        },
+      ],
+    };
+  },
   methods: {
     navRouter(route) {
       this.$router.push(route);

frontend/src/components/UI/RecipeCard.vue

@@ -26,7 +26,7 @@
             <v-tooltip top color="secondary" max-width="400" open-delay="50">
               <template v-slot:activator="{ on, attrs }">
                 <v-btn color="secondary" v-on="on" v-bind="attrs" text
-                  >Description</v-btn
+                  >{{$t('recipe.description')}}</v-btn
                 >
               </template>
               <span>{{ description }}</span>

frontend/src/components/UI/Search.vue

@@ -9,15 +9,13 @@
     hide-details
     hide-selected
     item-text="slug"
-    label="Search for a Recipe"
+    :label="$t('search.search-for-a-recipe')"
     single-line
     @keyup.enter.native="moreInfo(selected)"
   >
     <template v-slot:no-data>
       <v-list-item>
-        <v-list-item-title>
-          Search for your Favorite
-          <strong>Recipe</strong>
+        <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
         </v-list-item-title>
       </v-list-item>
     </template>

frontend/src/components/UI/SnackBar.vue

@@ -5,7 +5,7 @@
 
       <template v-slot:action="{ attrs }">
         <v-btn color="white" text v-bind="attrs" @click="close(false)">
-          Close
+          {{$t('general.close')}}
         </v-btn>
       </template>
     </v-snackbar>