Consolodated date formatting

src/components/meals/EditMealPage.vue

@@ -53,8 +53,7 @@
         </div>
         
         <button @click="saveMeal">Save</button>
-        <p v-if="meal.purchase_date"><em>Purchased {{ formatDate(meal.purchase_date) }}</em></p>
+        <p v-if="meal.purchase_date"><em>Purchased {{ ago(meal.purchase_date) }}</em></p>
-
     </div>
 </template>
 
@@ -63,6 +62,8 @@
 import data from '@/data.js';
 import alert from '@/alert.js';
 
+import { ago } from '@/dateformats.js';
+
 import RecipeSearchBox from '@/components/recipes/RecipeSearchBox.vue';
 import RecipeCard from '@/components/recipes/RecipeCard.vue';
 import DatePicker from './DatePicker.vue';
@@ -103,6 +104,7 @@ export default {
         }
     },
     methods: {
+        ago,
         async selectRecipe(recipe) {
             // Refetch to get additional details
             recipe = await data.getRecipe(recipe.id);
@@ -121,29 +123,6 @@ export default {
         selectDate(date) {
             this.meal.suggested_date = date;
         },
-        formatDate(date) {
-            // If it's today, show 'x hours ago'
-            // If it's within the last week, show 'x days ago'
-            // If it's within the last month weeks, show 'x weeks ago'
-            // Otherwise, show the date as dd/mm
-            const now = new Date();
-            const diff = now - date;
-            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-            if (days === 0) {
-                const hours = Math.floor(diff / (1000 * 60 * 60));
-                return `${hours} hour${hours === 1 ? '' : 's'} ago`;
-            }
-
-            if (days < 7) {
-                return `${days} day${days === 1 ? '' : 's'} ago`;
-            }
-
-            if (days < 30) {
-                return `${Math.floor(days / 7)} week${days === 7 ? '' : 's'} ago`;
-            }
-
-            return date.toLocaleDateString('en-au', { day: 'numeric', month: 'numeric' });
-        },
         removeRecipe(mealRecipe) {
             if (confirm(`Are you sure you want to remove ${mealRecipe.servings} servings of ${mealRecipe.recipe.name} from this meal?`)) {
                 this.meal.recipes = this.meal.recipes.filter(r => r != mealRecipe);

src/components/meals/MealCard.vue

@@ -40,7 +40,7 @@
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
         <p v-if="meal.purchase_date">
-            Purchased {{ formatDate(meal.purchase_date) }}
+            Purchased {{ ago(meal.purchase_date) }}
         </p>
     </div>
 </template>
@@ -49,6 +49,9 @@
 </style>
 
 <script>
+
+import { ago } from '@/dateformats.js'
+
 export default {
     name: 'MealCard',
     props: ['meal'],
@@ -71,25 +74,7 @@ export default {
                     return ', ';
             }
         },
-        formatDate(datetime) {
+        ago
-            // If its less than a week, use "2 minutes ago" style
-            const diff = new Date() - datetime;
-            if (diff < 1000 * 60 * 60 * 24 * 7) {
-                const minutes = Math.floor(diff / 1000 / 60);
-                if (minutes < 60) {
-                    return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
-                }
-                const hours = Math.floor(minutes / 60);
-                if (hours < 24) {
-                    return `${hours} hour${hours === 1 ? '' : 's'} ago`;
-                }
-                const days = Math.floor(hours / 24);
-                return `${days} day${days === 1 ? '' : 's'} ago`;
-            }
-
-            // Otherwise, use a date format with the day of week prepended
-            return `${datetime.toLocaleDateString('en-au', { weekday: 'long' })} ${datetime.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })}`;
-        }
     }
 }
 </script>

src/components/shopping/PurchasedShoppingListPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h3>Purchased {{ shoppingList?.purchased_date?.toLocaleDateString({ year: 'numeric', month: '2-digit', day: '2-digit' }) || '' }}</h3>
+    <h3>Purchased {{ shoppingList ? ago(shoppingList.created_date) : '' }}</h3>
     
     <h4>Included Meals</h4>
     <meal-selection-list :checked="includedMeals" :meals="includedMeals" />
@@ -29,6 +29,8 @@
 
 <script>
 
+import { ago } from '@/dateformats.js'
+
 import data from '@/data.js'
 import { purchasedToProductModel } from './shopping.js'
 
@@ -53,6 +55,9 @@ export default {
         this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
         this.listByProduct = purchasedToProductModel(this.shoppingList);
     },
+    methods: {
+        ago
+    }
 }
 
 </script>

src/components/shopping/ShoppingListItem.vue

@@ -108,6 +108,7 @@
 
 <script>
 
+import { ago } from '@/dateformats.js';
 import { calculateTotals } from '@/units.js';
 
 export default {
@@ -136,35 +137,7 @@ export default {
             if (!date)
                 return '';
 
-            // Eg 30 seconds ago, 5 minutes ago, 1 hour ago, 2 days ago, 3 weeks ago, 4 months ago, 5 years ago
+            return ago(date);
-            const seconds = Math.floor((new Date() - date) / 1000);
-            let interval = Math.floor(seconds / 31536000);
-
-            if (interval > 1) {
-                return interval + " years ago";
-            }
-
-            interval = Math.floor(seconds / 2592000);
-            if (interval > 1) {
-                return interval + " months ago";
-            }
-
-            interval = Math.floor(seconds / 86400);
-            if (interval > 1) {
-                return interval + " days ago";
-            }
-
-            interval = Math.floor(seconds / 3600);
-            if (interval > 1) {
-                return interval + " hours ago";
-            }
-
-            interval = Math.floor(seconds / 60);
-            if (interval > 1) {
-                return interval + " minutes ago";
-            }
-
-            return "moments ago";
         },
         formatQuantity(quantity) {
             const log10 = Math.log10(quantity);

src/dateformats.js

@@ -0,0 +1,20 @@
+export function ago(date) {
+    const now = new Date();
+    const diff = now - date;
+    if (diff < 1000) {
+        return "just now";
+    }
+    if (diff < 60 * 1000) {
+        return Math.floor(diff / 1000) + " seconds ago";
+    }
+    if (diff < 60 * 60 * 1000) {
+        return Math.floor(diff / (60 * 1000)) + " minutes ago";
+    }
+    if (diff < 24 * 60 * 60 * 1000) {
+        return Math.floor(diff / (60 * 60 * 1000)) + " hours ago";
+    }
+    if (diff < 7 * 24 * 60 * 60 * 1000) {
+        return Math.floor(diff / (24 * 60 * 60 * 1000)) + " days ago";
+    }
+    return date.toLocaleDateString();
+}