From 626500efb1247309e42c96057c82eccc8c15ea93 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Tue, 21 May 2024 09:57:49 +1000
Subject: [PATCH] Show purchased date

---
 src/components/meals/EditMealPage.vue         |  2 +-
 src/components/meals/MealCard.vue             | 22 +++++++++++++++++++
 src/components/shopping/MealSelectionList.vue |  2 --
 src/data.js                                   |  4 ++--
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/meals/EditMealPage.vue b/src/components/meals/EditMealPage.vue
index bf00c5a..b526776 100644
--- a/src/components/meals/EditMealPage.vue
+++ b/src/components/meals/EditMealPage.vue
@@ -31,7 +31,7 @@
             <h2>Sides & Additional Ingredients</h2>
             <editable-ingredients-panel :ingredients="meal.extra_ingredients" @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" />
         </div>
-        <button @click="saveMeal">Save</button>
+        <button @click="saveMeal" v-if="!meal.purchase_date">Save</button>
     </div>
 </template>
 
diff --git a/src/components/meals/MealCard.vue b/src/components/meals/MealCard.vue
index 117e3cd..e016b12 100644
--- a/src/components/meals/MealCard.vue
+++ b/src/components/meals/MealCard.vue
@@ -39,6 +39,9 @@
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
+        <p v-if="meal.purchase_date">
+            Purchased {{ formatDate(meal.purchase_date) }}
+        </p>
     </div>
 </template>
 
@@ -67,6 +70,25 @@ export default {
                 default:
                     return ', ';
             }
+        },
+        formatDate(datetime) {
+            // 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' })}`;
         }
     }
 }
diff --git a/src/components/shopping/MealSelectionList.vue b/src/components/shopping/MealSelectionList.vue
index d45202e..5fd4ad3 100644
--- a/src/components/shopping/MealSelectionList.vue
+++ b/src/components/shopping/MealSelectionList.vue
@@ -54,8 +54,6 @@ input[type="checkbox"]:checked + label {
 }
 
 input[type="checkbox"]:disabled + label {
-    background-color: rgba(255, 255, 255, 0.5);
-    color: #ccc;
     cursor: not-allowed;
 }
 
diff --git a/src/data.js b/src/data.js
index f36dd2b..47e63f3 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,7 +1,7 @@
 const BASE_URL = window.location.href.replace(/^(http:\/\/[^/:]+).*/, "$1:8000")    
 
 const datesToFix = {
-    Meal: { fields: [ "meal_date" ] },
+    Meal: { fields: [ "meal_date", "purchase_date" ] },
     ShoppingList: { fields: [ "created_date", "purchased_date" ], dependants: l => ({ ShoppingListResult: l.results, ShoppingListRequest: l.requests }) },
     ShoppingListResult: { fields: [ "found_date", "created_date" ], },
     ShoppingListRequest: { fields: [ "created_date" ], dependants: r => ({ Meal: r.meal }) },
@@ -10,7 +10,7 @@ const datesToFix = {
 
 const fixDates = (obj, type) => {
     if (!obj) return;
-    
+
     if (Array.isArray(obj)) {
         for (const item of obj) {
             fixDates(item, type);