migrated new vue component system to vue native translations

cookbook/templates/import_response.html

@@ -17,8 +17,6 @@
 
 
 {% block script %}
-    <script src="{% url 'javascript-catalog' %}"></script>
-
     {% if debug %}
         <script src="{% url 'js_reverse' %}"></script>
     {% else %}

cookbook/templates/offline.html

@@ -32,9 +32,6 @@
 {% endblock %}
 
 {% block script %}
-
-    <script src="{% url 'javascript-catalog' %}"></script>
-
     {% if debug %}
         <script src="{% url 'js_reverse' %}"></script>
     {% else %}

cookbook/templates/recipe_view.html

@@ -53,8 +53,6 @@
 
 
 {% block script %}
-    <script src="{% url 'javascript-catalog' %}"></script>
-
     {% if debug %}
         <script src="{% url 'js_reverse' %}"></script>
     {% else %}

vue/src/apps/OfflineView/OfflineView.vue

@@ -2,7 +2,7 @@
   <div id="app">
 
     <label>
-      {{ _('Search') }}
+      {{ $t('Search') }}
       <input type="text" v-model="filter" class="form-control">
     </label>
 
@@ -13,9 +13,7 @@
             <span class="text-muted">{{ formatDateTime(r.updated_at) }}</span>
             {{ r.description }}
           </b-card-text>
-
+          <b-button :href="resolveDjangoUrl('view_recipe', r.id)" variant="primary">{{ $t('Open') }}</b-button>
-
-          <b-button :href="resolveDjangoUrl('view_recipe', r.id)" variant="primary">{{ _('Open') }}</b-button>
         </b-card>
       </div>
     </div>
@@ -27,7 +25,7 @@ import Vue from 'vue'
 import {BootstrapVue} from 'bootstrap-vue'
 
 import 'bootstrap-vue/dist/bootstrap-vue.css'
-import {GettextMixin, ResolveUrlMixin} from "@/utils/utils";
+import {ResolveUrlMixin} from "@/utils/utils";
 import moment from "moment";
 
 Vue.use(BootstrapVue)
@@ -37,7 +35,6 @@ export default {
   name: 'OfflineView',
   mixins: [
     ResolveUrlMixin,
-    GettextMixin
   ],
   computed: {
     filtered_recipes: function () {

vue/src/apps/RecipeView/RecipeView.vue

@@ -29,8 +29,8 @@
               <i class="fas fa-user-clock fa-2x text-primary"></i>
             </div>
             <div class="my-auto" style="padding-right: 4px">
-              <span class="text-primary"><b>{{ _('Preparation') }}</b></span><br/>
+              <span class="text-primary"><b>{{ $t('Preparation') }}</b></span><br/>
-              {{ recipe.working_time }} {{ _('min') }}
+              {{ recipe.working_time }} {{ $t('min') }}
             </div>
           </div>
         </div>
@@ -41,8 +41,8 @@
               <i class="far fa-clock fa-2x text-primary"></i>
             </div>
             <div class="my-auto" style="padding-right: 4px">
-              <span class="text-primary"><b>{{ _('Waiting') }}</b></span><br/>
+              <span class="text-primary"><b>{{ $t('Waiting') }}</b></span><br/>
-              {{ recipe.waiting_time }} {{ _('min') }}
+              {{ recipe.waiting_time }} {{ $t('min') }}
             </div>
           </div>
         </div>
@@ -59,7 +59,7 @@
                      type="number" class="form-control form-control-lg" v-model.number="servings"/>
             </div>
             <div class="my-auto">
-              <b><template v-if="recipe.servings_text === ''">{{ _('Servings') }}</template><template v-else>{{recipe.servings_text}}</template></b>
+              <b><template v-if="recipe.servings_text === ''">{{ $t('Servings') }}</template><template v-else>{{recipe.servings_text}}</template></b>
             </div>
           </div>
         </div>
@@ -76,7 +76,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col col-md-8">
-                  <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ _('Ingredients') }}</h4>
+                  <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t('Ingredients') }}</h4>
                 </div>
               </div>
               <br/>
@@ -103,7 +103,7 @@
             <div class="col-12">
 
               <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
-                   :alt="_( 'Recipe Image')" v-if="recipe.image !== null">
+                   :alt="$t( 'Recipe_Image')" v-if="recipe.image !== null">
             </div>
           </div>
 
@@ -148,7 +148,7 @@ import {apiLoadRecipe} from "@/utils/api";
 
 import Step from "@/components/Step";
 import RecipeContextMenu from "@/components/RecipeContextMenu";
-import {GettextMixin, ResolveUrlMixin, ToastMixin} from "@/utils/utils";
+import {ResolveUrlMixin, ToastMixin} from "@/utils/utils";
 import Ingredient from "@/components/Ingredient";
 
 import PdfViewer from "@/components/PdfViewer";
@@ -167,7 +167,6 @@ Vue.use(BootstrapVue)
 export default {
   name: 'RecipeView',
   mixins: [
-    GettextMixin,
     ResolveUrlMixin,
     ToastMixin,
   ],

vue/src/components/AddRecipeToBook.vue

@@ -1,15 +1,15 @@
 <template>
 
   <div>
-    <b-modal class="modal" id="id_modal_add_book" :title="_('Add to Book')" :ok-title="_('Add')"
+    <b-modal class="modal" id="id_modal_add_book" :title="$t('Add_to_Book')" :ok-title="$t('Add')"
-             :cancel-title="_('Close')" @ok="addToBook()">
+             :cancel-title="$t('Close')" @ok="addToBook()">
 
       <multiselect
           v-model="selected_book"
           :options="books"
 
           :preserve-search="true"
-          :placeholder="_('Select Book')"
+          :placeholder="$t('Select_Book')"
           label="name"
           track-by="id"
           id="id_books"
@@ -23,7 +23,6 @@
 
 <script>
 
-import {GettextMixin} from "@/utils/utils";
 import Multiselect from 'vue-multiselect'
 
 import moment from 'moment'
@@ -38,9 +37,6 @@ Vue.use(BootstrapVue)
 
 export default {
   name: 'AddRecipeToBook',
-  mixins: [
-    GettextMixin,
-  ],
   components: {
     Multiselect
   },

vue/src/components/CookLog.vue

@@ -1,21 +1,21 @@
 <template>
 
   <div>
-    <b-modal class="modal" id="id_modal_cook_log" :title="_('Log Recipe Cooking')" :ok-title="_('Save')"
+    <b-modal class="modal" id="id_modal_cook_log" :title="$t('Log_Recipe_Cooking')" :ok-title="$t('Save')"
-             :cancel-title="_('Close')" @ok="logCook()">
+             :cancel-title="$t('Close')" @ok="logCook()">
 
-      <p>{{ _('All fields are optional and can be left empty.') }}</p>
+      <p>{{ $t('all_fields_optional') }}</p>
       <form>
 
-        <label for="id_log_servings">{{ _('Servings') }}</label>
+        <label for="id_log_servings">{{ $t('Servings') }}</label>
         <input class="form-control" type="number" id="id_log_servings" v-model="logObject.servings">
 
-        <label style="margin-top: 2vh">{{ _('Rating') }} - <span
+        <label style="margin-top: 2vh">{{ $t('Rating') }} - <span
             id="id_rating_show">{{ logObject.rating }}/5</span></label>
 
         <b-form-rating v-model="logObject.rating"></b-form-rating>
 
-        <label for="id_date" style="margin-top: 2vh">{{ _('Date') }}</label>
+        <label for="id_date" style="margin-top: 2vh">{{ $t('Date') }}</label>
         <input type="datetime-local" id="id_date" class="form-control" v-model="logObject.created_at">
       </form>
     </b-modal>
@@ -24,8 +24,6 @@
 
 <script>
 
-import {GettextMixin} from "@/utils/utils";
-
 import moment from 'moment'
 
 Vue.prototype.moment = moment
@@ -38,9 +36,6 @@ Vue.use(BootstrapVue)
 
 export default {
   name: 'CookLog',
-  mixins: [
-    GettextMixin,
-  ],
   props: {
     recipe: Object,
   },

vue/src/components/ImageViewer.vue

@@ -1,21 +1,18 @@
 <template>
 
   <div style="text-align: center">
-    <b-img :src="pdfUrl"  :alt="_('External Recipe Image')"></b-img>
+    <b-img :src="pdfUrl"  :alt="$t('External_Recipe_Image')"></b-img>
   </div>
 
 </template>
 
 <script>
 
-import {GettextMixin, resolveDjangoUrl} from "@/utils/utils";
+import {resolveDjangoUrl} from "@/utils/utils";
 
 
 export default {
   name: 'ImageViewer',
-  mixins: [
-    GettextMixin,
-  ],
   props: {
     recipe: Object,
   },

vue/src/components/Nutrition.vue

@@ -6,13 +6,13 @@
       <div class="card-body">
         <div class="row">
           <div class="col-12">
-            <h4 class="card-title"><i class="fas fa-carrot"></i> {{ _('Nutrition') }}</h4>
+            <h4 class="card-title"><i class="fas fa-carrot"></i> {{ $t('Nutrition') }}</h4>
           </div>
         </div>
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-fire fa-fw text-primary"></i> {{ _('Calories') }}
+            <i class="fas fa-fire fa-fw text-primary"></i> {{ $t('Calories') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.calories)"></span> kcal
@@ -21,7 +21,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-bread-slice fa-fw text-primary"></i> {{ _('Carbohydrates') }}
+            <i class="fas fa-bread-slice fa-fw text-primary"></i> {{ $t('Carbohydrates') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.carbohydrates)"></span>  g
@@ -30,7 +30,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-cheese fa-fw text-primary"></i> {{ _('Fats') }}
+            <i class="fas fa-cheese fa-fw text-primary"></i> {{ $t('Fats') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.fats)"></span> g
@@ -39,7 +39,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-drumstick-bite fa-fw text-primary"></i> {{ _('Proteins') }}
+            <i class="fas fa-drumstick-bite fa-fw text-primary"></i> {{ $t('Proteins') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.proteins)"></span> g
@@ -54,14 +54,10 @@
 
 <script>
 
-import {GettextMixin} from "@/utils/utils";
 import {calculateAmount} from "@/utils/utils";
 
 export default {
   name: 'Nutrition',
-  mixins: [
-    GettextMixin,
-  ],
   props: {
     recipe: Object,
     ingredient_factor: Number,

vue/src/components/RecipeContextMenu.vue

@@ -10,39 +10,39 @@
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
 
         <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)"><i
-            class="fas fa-pencil-alt fa-fw"></i> {{ _('Edit') }}</a>
+            class="fas fa-pencil-alt fa-fw"></i> {{ $t('Edit') }}</a>
 
         <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal"><i
-            class="fas fa-exchange-alt fa-fw"></i> {{ _('Convert to internal recipe') }}</a>
+            class="fas fa-exchange-alt fa-fw"></i> {{ $t('convert_internal') }}</a>
 
         <button class="dropdown-item" @click="$bvModal.show('id_modal_add_book')">
-          <i class="fas fa-bookmark fa-fw"></i> {{ _('Add to Book') }}
+          <i class="fas fa-bookmark fa-fw"></i> {{ $t('Add_to_Book') }}
         </button>
 
         <a class="dropdown-item" :href="`${resolveDjangoUrl('view_shopping') }?r=[${recipe.id},${servings_value}]`"
            v-if="recipe.internal" target="_blank" rel="noopener noreferrer">
-          <i class="fas fa-shopping-cart fa-fw"></i> {{ _('Add to Shopping') }}
+          <i class="fas fa-shopping-cart fa-fw"></i> {{ $t('Add_to_Shopping') }}
         </a>
 
         <a class="dropdown-item" :href="`${resolveDjangoUrl('new_meal_plan') }?recipe=${recipe.id}`"
            target="_blank" rel="noopener noreferrer"><i
-            class="fas fa-calendar fa-fw"></i> {{ _('Add to Plan') }}
+            class="fas fa-calendar fa-fw"></i> {{ $t('Add_to_Plan') }}
         </a>
 
 
         <button class="dropdown-item" @click="$bvModal.show('id_modal_cook_log')"><i
-            class="fas fa-clipboard-list fa-fw"></i> {{ _('Log Cooking') }}
+            class="fas fa-clipboard-list fa-fw"></i> {{ $t('Log_Cooking') }}
         </button>
 
         <button class="dropdown-item" onclick="window.print()"><i
-            class="fas fa-print fa-fw"></i> {{ _('Print') }}
+            class="fas fa-print fa-fw"></i> {{ $t('Print') }}
         </button>
 
         <a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank"
-           rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ _('Export') }}</a>
+           rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ $t('Export') }}</a>
 
         <a class="dropdown-item" :href="resolveDjangoUrl('new_share_link', recipe.id)" target="_blank"
-           rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{ _('Share') }}</a>
+           rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{ $t('Share') }}</a>
       </div>
 
 
@@ -54,14 +54,13 @@
 
 <script>
 
-import {GettextMixin, ResolveUrlMixin} from "@/utils/utils";
+import {ResolveUrlMixin} from "@/utils/utils";
 import CookLog from "@/components/CookLog";
 
 export default {
   name: 'RecipeContextMenu',
   mixins: [
-    ResolveUrlMixin,
+    ResolveUrlMixin
-    GettextMixin
   ],
   components: {
     CookLog

vue/src/components/Step.vue

@@ -8,9 +8,9 @@
         <div class="col col-md-8">
           <h5 class="text-primary">
             <template v-if="step.name">{{ step.name }}</template>
-            <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
+            <template v-else>{{ $t('Step') }} {{ index + 1 }}</template>
             <small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i>
-              {{ step.time }} {{ _('min') }}
+              {{ step.time }} {{ $t('min') }}
 
             </small>
             <small v-if="start_time !== ''" class="d-print-none">
@@ -51,10 +51,10 @@
         <div class="col-md-8 offset-md-2" style="text-align: center">
           <h4 class="text-primary">
             <template v-if="step.name">{{ step.name }}</template>
-            <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
+            <template v-else>{{ $t('Step') }} {{ index + 1 }}</template>
           </h4>
           <span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i>
-              {{ step.time }} {{ _('min') }}</span>
+              {{ step.time }} {{ $t('min') }}</span>
           <b-link class="d-print-none" :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#" v-if="start_time !== ''">
             {{ moment(start_time).add(step.time_offset, 'minutes').format('HH:mm') }}
           </b-link>
@@ -83,7 +83,7 @@
           triggers="click"
           placement="bottom"
           :ref="`id_reactive_popover_${step.id}`"
-          :title="_('Step start time')">
+          :title="$t('Step start time')">
         <div>
           <b-form-group
               label="Time"

vue/src/locales/de.json

@@ -1,6 +1,6 @@
 {
     "Import": "Import",
-    "import-running": "Import läuft, bitte warten!",
+    "import_running": "Import läuft, bitte warten!",
     "Import_finished": "Import fertig",
     "View_Recipes": "Rezepte Ansehen",
     "Information": "Information"

vue/src/locales/en.json

@@ -1,7 +1,44 @@
 {
-  "Import": "Import",
+  "import_running": "Import running, please wait!",
-  "import-running": "Import running, please wait!",
+  "all_fields_optional": "All fields are optional and can be left empty.",
+  "convert_internal": "Convert to internal recipe",
+
+  "Log_Recipe_Cooking": "Log Recipe Cooking",
+  "External_Recipe_Image": "External Recipe Image",
+  "Add_to_Book": "Add to Book",
+  "Add_to_Shopping": "Add to Shopping",
+  "Add_to_Plan": "Add to Plan",
+  "Step_start_time": "Step start time",
+
+  "Select_Book": "Select Book",
+  "Recipe_Image": "Recipe Image",
   "Import_finished": "Import finished",
   "View_Recipes": "View Recipes",
+  "Log_Cooking": "Log Cooking",
+
+
+  "Proteins": "Proteins",
+  "Fats": "Fats",
+  "Carbohydrates": "Carbohydrates",
+  "Calories": "Calories",
+  "Nutrition": "Nutrition",
+  "Date": "Date",
+  "Share": "Share",
+  "Export": "Export",
+  "Rating": "Rating",
+  "Close": "Close",
+  "Add": "Add",
+  "Ingredients": "Ingredients",
+  "min": "min",
+  "Servings": "Servings",
+  "Waiting": "Waiting",
+  "Preparation": "Preparation",
+  "Edit": "Edit",
+  "Open": "Open",
+  "Save": "Save",
+  "Step": "Step",
+  "Search": "Search",
+  "Import": "Import",
+  "Print": "Print",
   "Information": "Information"
 }