Localized meal date (#182)

* first step towards localized meal date

* Refactor datetimeFormats to dedicated locale files

* localized date in 'Dinner this week'

frontend/src/components/MealPlan/MealPlanCard.vue

@@ -17,7 +17,7 @@
             :src="getImage(meal.slug)"
             @click="openSearch(index)"
           ></v-img>
-          <v-card-title class="my-n3 mb-n6">{{ meal.dateText }}</v-card-title>
+          <v-card-title class="my-n3 mb-n6">{{ $d( new Date(meal.date), 'short' ) }}</v-card-title>
           <v-card-subtitle> {{ meal.name }}</v-card-subtitle>
         </v-card>
       </v-hover>

frontend/src/i18n.js

@@ -3,12 +3,8 @@ import VueI18n from "vue-i18n";
 
 Vue.use(VueI18n);
 
-function loadLocaleMessages() {
-  const locales = require.context(
-    "./locales",
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  );
+
+function parseLocaleFiles(locales) {
   const messages = {};
   locales.keys().forEach(key => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i);
@@ -20,8 +16,28 @@ function loadLocaleMessages() {
   return messages;
 }
 
+function loadLocaleMessages() {
+  const locales = require.context(
+    "./locales/messages",
+    true,
+    /[A-Za-z0-9-_,\s]+\.json$/i
+  );
+  return parseLocaleFiles(locales);
+}
+
+function loadDateTimeFormats() {
+  const locales = require.context(
+    "./locales/dateTimeFormats",
+    true,
+    /[A-Za-z0-9-_,\s]+\.json$/i
+  );
+  return parseLocaleFiles(locales);
+}
+
+
 export default new VueI18n({
   locale: "en",
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
   messages: loadLocaleMessages(),
+  dateTimeFormats: loadDateTimeFormats() 
 });

frontend/src/locales/dateTimeFormats/da.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/de.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/en.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/fr.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/pl.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/sv.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/zh-CN.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/dateTimeFormats/zh-TW.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}

frontend/src/locales/messages/en.json

@@ -1,4 +1,12 @@
 {
+
+  "dateTimeFormats": {
+    "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+    }
+  },
   "404": {
     "page-not-found": "404 Page Not Found",
     "take-me-home": "Take me Home"

frontend/src/pages/MealPlanPage.vue

@@ -25,8 +25,8 @@
       >
         <v-card class="mt-1">
           <v-card-title>
-            {{ formatDate(mealplan.startDate) }} -
-            {{ formatDate(mealplan.endDate) }}
+            {{ $d( new Date(mealplan.startDate), 'short' ) }} -
+            {{ $d( new Date(mealplan.endDate), 'short' ) }}
           </v-card-title>
           <v-list nav>
             <v-list-item-group color="primary">
@@ -43,7 +43,7 @@
                 </v-list-item-avatar>
                 <v-list-item-content>
                   <v-list-item-title v-text="meal.name"></v-list-item-title>
-                  <v-list-item-subtitle v-text="meal.dateText">
+                  <v-list-item-subtitle v-text="$d( new Date(meal.date), 'short' )" >
                   </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>

frontend/src/pages/MealPlanThisWeekPage.vue

@@ -18,7 +18,7 @@
                 <v-card-title class="justify-center">
                   {{ meal.name }}
                 </v-card-title>
-                <v-card-subtitle> {{ meal.dateText }}</v-card-subtitle>
+                <v-card-subtitle> {{ $d(new Date(meal.date), 'short' ) }}</v-card-subtitle>
 
                 <v-card-text> {{ meal.description }} </v-card-text>