jacob/munch-ease-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Consolodated date formatting

Browse source
This commit is contained in:
jableader 2024-10-15 19:40:06 +11:00
parent ee6b4e9754
commit c1b7d4210e
5 changed files with 37 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/meals/EditMealPage.vue
View file

@ -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);

25
src/components/meals/MealCard.vue
View file

@ -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) {
// 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' })}`;
}
ago
}
}
</script>

7
src/components/shopping/PurchasedShoppingListPage.vue
View file

@ -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>

31
src/components/shopping/ShoppingListItem.vue
View file

@ -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
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";
return ago(date);
},
formatQuantity(quantity) {
const log10 = Math.log10(quantity);

20
src/dateformats.js Normal file
View file

@ -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();
}