Localize more dates and texts

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -3,7 +3,7 @@
     <v-card-title class=" headline">
       {{ $t("meal-plan.create-a-new-meal-plan") }}
       <v-btn color="info" class="ml-auto" @click="setQuickWeek()">
-        <v-icon left>mdi-calendar-minus</v-icon> Quick Week
+        <v-icon left>mdi-calendar-minus</v-icon> {{$t('meal-plan.quick-week')}}
       </v-btn>
     </v-card-title>
 
@@ -110,7 +110,6 @@ export default {
         this.meals.push({
           slug: "empty",
           date: this.getDate(i),
-          dateText: this.getDayText(i),
         });
       }
     },
@@ -193,10 +192,6 @@ export default {
       );
       return dateText;
     },
-    getDayText(index) {
-      const dateObj = this.processTime(index);
-      return utils.getDateAsText(dateObj);
-    },
     getDate(index) {
       const dateObj = this.processTime(index);
       return utils.getDateAsPythonDate(dateObj);

frontend/src/components/MealPlan/ShoppingListDialog.vue

@@ -3,10 +3,10 @@
     <v-dialog v-model="dialog" width="650">
       <v-card>
         <v-card-title class="headline">
-          Shopping List
+          {{$t('meal-plan.shopping-list')}}
           <v-spacer></v-spacer>
           <v-btn text color="accent" @click="group = !group">
-            Group (Beta)
+            {{$t('meal-plan.group')}}
           </v-btn>
         </v-card-title>
         <v-divider></v-divider>

frontend/src/locales/dateTimeFormats/en-US.json

@@ -3,5 +3,11 @@
     "month": "short",
     "day": "numeric",
     "weekday": "long"
+  },
+  "medium": { 
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "year": "numeric"
   }
 }

frontend/src/locales/messages/en-US.json

@@ -122,7 +122,9 @@
     "create-a-new-meal-plan": "Create a New Meal Plan",
     "start-date": "Start Date",
     "end-date": "End Date",
-    "only-recipes-with-these-categories-will-be-used-in-meal-plans": "Only recipes with these categories will be used in Meal Plans"
+    "only-recipes-with-these-categories-will-be-used-in-meal-plans": "Only recipes with these categories will be used in Meal Plans",
+    "quick-week": "Quick Week",
+    "group": "Group (Beta)"
   },
   "recipe": {
     "description": "Description",

frontend/src/pages/Admin/Backup/AvailableBackupCard.vue

@@ -27,7 +27,7 @@
                 <div class="text-truncate">
                   <strong>{{ backup.name }}</strong>
                 </div>
-                <div class="text-truncate">{{ readableTime(backup.date) }}</div>
+                <div class="text-truncate">{{ $d(new Date(backup.date), "medium") }}</div>
               </v-col>
             </v-row>
           </v-card-text>
@@ -40,7 +40,6 @@
 <script>
 import ImportDialog from "./ImportDialog";
 import { api } from "@/api";
-import utils from "@/utils";
 export default {
   props: {
     backups: Array,
@@ -61,10 +60,6 @@ export default {
       this.selectedName = backup.name;
       this.$refs.import_dialog.open();
     },
-    readableTime(timestamp) {
-      let date = new Date(timestamp);
-      return utils.getDateAsText(date);
-    },
     async importBackup(data) {
       this.$emit("loading");
       let response = await api.backups.import(data.name, data);

frontend/src/pages/Admin/Backup/BackupCard.vue

@@ -26,7 +26,7 @@
                 <div>
                   <strong>{{ backup.name }}</strong>
                 </div>
-                <div>{{ readableTime(backup.date) }}</div>
+                <div>{{ $d(new Date(backup.date), "medium") }}</div>
               </v-col>
             </v-row>
           </v-card-text>
@@ -39,7 +39,6 @@
 <script>
 import ImportDialog from "./ImportDialog";
 import { api } from "@/api";
-import utils from "@/utils";
 export default {
   props: {
     backups: Array,
@@ -60,10 +59,6 @@ export default {
       this.selectedName = backup.name;
       this.$refs.import_dialog.open();
     },
-    readableTime(timestamp) {
-      let date = new Date(timestamp);
-      return utils.getDateAsText(date);
-    },
     async importBackup(data) {
       this.$emit("loading");
       let response = await api.backups.import(data.name, data);

frontend/src/pages/Admin/Migration/MigrationCard.vue

@@ -32,7 +32,7 @@
                 <strong>{{ migration.name }}</strong>
               </div>
               <div class="text-truncate">
-                {{ readableTime(migration.date) }}
+                {{ $d(new Date(migration.date), "medium") }}
               </div>
             </v-col>
           </v-row>
@@ -67,7 +67,6 @@
 
 <script>
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
-import utils from "@/utils";
 import { api } from "@/api";
 import MigrationDialog from "./MigrationDialog";
 export default {
@@ -98,10 +97,6 @@ export default {
       // this.$emit("imported", response.successful, response.failed);
       this.loading = false;
     },
-    readableTime(timestamp) {
-      let date = new Date(timestamp);
-      return utils.getDateAsText(date);
-    },
   },
 };
 </script>

frontend/src/pages/MealPlan/Planner.vue

@@ -112,10 +112,6 @@ export default {
     generateKey(name, index) {
       return utils.generateUniqueKey(name, index);
     },
-    formatDate(timestamp) {
-      let dateObject = new Date(timestamp);
-      return utils.getDateAsTextAlt(dateObject);
-    },
     getImage(image) {
       return api.recipes.recipeTinyImage(image);
     },

frontend/src/utils/index.js

@@ -9,45 +9,6 @@ const notifyHelpers = {
   info: "notify-info-color",
 };
 
-const days = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday",
-];
-const months = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
-
-const monthsShort = [
-  "Jan",
-  "Feb",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "Aug",
-  "Sept",
-  "Oct",
-  "Nov",
-  "Dec",
-];
-
 export default {
   getImageURL(image) {
     return `/api/recipes/${image}/image?image_type=small`;
@@ -56,22 +17,6 @@ export default {
     const uniqueKey = `${item}-${index}`;
     return uniqueKey;
   },
-  getDateAsText(dateObject) {
-    const dow = days[dateObject.getUTCDay()];
-    const month = months[dateObject.getUTCMonth()];
-    const day = dateObject.getUTCDate();
-    // const year = dateObject.getFullYear();
-
-    return `${dow}, ${month} ${day}`;
-  },
-  getDateAsTextAlt(dateObject) {
-    const dow = days[dateObject.getUTCDay()];
-    const month = monthsShort[dateObject.getUTCMonth()];
-    const day = dateObject.getUTCDate();
-    // const year = dateObject.getFullYear();
-
-    return `${dow}, ${month} ${day}`;
-  },
   getDateAsPythonDate(dateObject) {
     const month = dateObject.getUTCMonth() + 1;
     const day = dateObject.getUTCDate();