Localize more dates and texts (#341)

* Localize more dates and texts

* Adapt source language to 4-letter code for VS code

* Make page titles more reactive to language change

* Translate missing text + fix missed refactoring

* Fix missed page titles refactoring

* Translate nutrition view

* Translate Image upload vue

* Fix default text being defined twice in upload btn

frontend/src/components/Recipe/RecipeEditor/ImageUploadBtn.vue

@@ -3,13 +3,13 @@
     <v-menu offset-y top nudge-top="6" :close-on-content-click="false">
       <template v-slot:activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
-          Image
+          {{$t('recipe.image')}}
         </v-btn>
       </template>
       <v-card width="400">
         <v-card-title class="headline flex mb-0">
           <div>
-            Recipe Image
+           {{$t('recipe.recipe-image')}}
           </div>
           <TheUploadBtn
             class="ml-auto"
@@ -22,7 +22,7 @@
         </v-card-title>
         <v-card-text class="mt-n5">
           <div>
-            <v-text-field label="URL" class="pt-5" clearable v-model="url">
+            <v-text-field :label="$t('general.url')" class="pt-5" clearable v-model="url">
               <template v-slot:append-outer>
                 <v-btn
                   class="ml-2"
@@ -30,7 +30,7 @@
                   @click="getImageFromURL"
                   :loading="loading"
                 >
-                  Get
+                  {{$t('general.get')}}
                 </v-btn>
               </template>
             </v-text-field>
@@ -46,7 +46,6 @@ const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import { api } from "@/api";
-// import axios from "axios";
 export default {
   components: {
     TheUploadBtn,
@@ -55,7 +54,6 @@ export default {
     slug: String,
   },
   data: () => ({
-    items: [{ title: "Upload Image" }, { title: "From URL" }],
     url: "",
     loading: false,
   }),

frontend/src/components/Recipe/RecipeEditor/NutritionEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="valueNotNull || edit">
-    <h2 class="my-4">Nutrition</h2>
+    <h2 class="my-4">{{$t('recipe.nutrition')}}</h2>
     <div v-if="edit">
       <div v-for="(item, key, index) in value" :key="index">
         <v-text-field
@@ -45,14 +45,14 @@ export default {
     return {
       labels: {
         calories: {
-          label: "Calories",
-          suffix: "calories",
+          label: this.$t('recipe.calories'),
+          suffix:this.$t('recipe.calories-suffix'),
         },
-        fatContent: { label: "Fat Content", suffix: "grams" },
-        fiberContent: { label: "Fiber Content", suffix: "grams" },
-        proteinContent: { label: "Protein Content", suffix: "grams" },
-        sodiumContent: { label: "Sodium Content", suffix: "milligrams" },
-        sugarContent: { label: "Sugar Content", suffix: "grams" },
+        fatContent: { label: this.$t('recipe.fat-content'), suffix: this.$t('recipe.grams') },
+        fiberContent: { label: this.$t('recipe.fiber-content'), suffix: this.$t('recipe.grams') },
+        proteinContent: { label: this.$t('recipe.protein-content'), suffix: this.$t('recipe.grams') },
+        sodiumContent: { label: this.$t('recipe.sodium-content'), suffix: this.$t('recipe.milligrams') },
+        sugarContent: { label: this.$t('recipe.sugar-content'), suffix: this.$t('recipe.grams') },
       },
     };
   },