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

Compare commits

base: jacob:f0d7701151c941a536c5439a2a3c3e2d94fac7f4
Branches Tags
jacob:master
jacob:multitenant
jacob:pruning
jacob:nullproduct
..
compare: jacob:a9b18051f73275bb9ef4660fcb13f791eb02d565
Branches Tags
jacob:multitenant
jacob:master
jacob:pruning
jacob:nullproduct

No commits in common. "f0d7701151c941a536c5439a2a3c3e2d94fac7f4" and "a9b18051f73275bb9ef4660fcb13f791eb02d565" have entirely different histories.
f0d7701151 ... a9b18051f7

13 changed files with 88 additions and 343 deletions
Show stats Expand all files Collapse all files

94
src/components/LoginPage.vue
View file

@ -1,77 +1,19 @@
<template>
<div class="login">
<h1>Login Page</h1>
<ul class="button-group">
<li v-for="person in persons" :key="person.id">
<button type="button" class="btn btn-primary" @click="login(person)">
{{ person.name }}
</button>
</li>
</ul>
<h1>Login</h1>
<form>
<div class="form-group">
<label for="username">Username</label>
<input v-model="username" type="text" class="form-control" id="username" placeholder="Username">
</div>
<button type="button" class="btn btn-primary" @click="login">Login</button>
</form>
</div>
</template>
<style scoped>
/* Remove the default list styling */
ul {
list-style-type: none;
padding: 0;
}
/* Center the buttons in the middle of the page, and let them wrap */
.button-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Display each button as a large round circle */
button {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 10px;
font-size: 1.5em;
/* Center the text in the middle of the button */
display: flex;
justify-content: center;
align-items: center;
/* Add a shadow to make the buttons look like they are floating */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Some nice flat nuetral shades for the user buttons */
li:nth-child(1) > button {
background-color: #3939ff;
color: white;
}
li:nth-child(2) > button {
background-color: #156a14;
color: white;
}
li:nth-child(3) > button {
background-color: #325293;
color: white;
}
li:nth-child(4) > button {
background-color: #9a1f1f;
color: white;
}
</style>
<script>
import data from '@/data';
@ -81,20 +23,17 @@ export default {
redirect: {
type: String,
default: '/'
},
}
},
data() {
return {
persons: [],
username: '',
}
},
async beforeMount() {
this.persons = await data.getPersonsInHome();
},
methods: {
async login(selectedPerson) {
const person = await data.login(selectedPerson.name);
if (person?.id >= 0) {
async login() {
const person = await data.login(this.username);
if (person?.id) {
this.$router.push(this.redirect);
return;
}
@ -104,4 +43,7 @@ export default {
}
}
</script>
</script>
<style>
</style>

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

@ -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" v-if="!meal.purchase_date">Save</button>
<button @click="saveMeal">Save</button>
</div>
</template>
@ -43,19 +43,13 @@ import DatePicker from './DatePicker.vue';
import EditableIngredientsPanel from '../ingredients/EditableIngredientsPanel.vue';
import PersonList from './PersonList.vue';
function addPersonIfNotExists(list, person) {
if (!list.find(p => p.id === person.id)) {
list.push(person);
}
}
export default {
props: ['id'],
components: { RecipeSearchBox, DatePicker, RecipeCard, EditableIngredientsPanel, PersonList },
data() {
return {
meal: {
id: -1,
id: 0,
meal_date: new Date(),
recipes: [],
extra_ingredients: [],
@ -66,7 +60,7 @@ export default {
};
},
async beforeMount() {
if (this.id >= 0) {
if (this.id) {
this.meal = await data.getMeal(this.id);
}
},
@ -76,11 +70,11 @@ export default {
recipe = await data.getRecipe(recipe.id);
if (recipe.created_by) {
addPersonIfNotExists(this.meal.chefs, recipe.created_by);
addPersonIfNotExists(this.meal.consumers, recipe.created_by);
this.meal.chefs.push(recipe.created_by);
this.meal.consumers.push(recipe.created_by);
if (this.meal.cleanup.length === 0) {
addPersonIfNotExists(this.meal.cleanup, recipe.created_by);
this.meal.cleanup.push(recipe.created_by);
}
}
@ -105,11 +99,11 @@ export default {
this.meal[list] = this.meal[list].filter(p => p.id !== person.id);
},
addPerson(list, person) {
addPersonIfNotExists(this.meal[list], person);
this.meal[list].push(person);
},
async saveMeal() {
const meal = await data.saveMeal(this.meal);
if (meal?.id >= 0) {
if (meal?.id) {
this.$router.push(`/meals/${meal.id}`);
return;
}

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

@ -39,9 +39,6 @@
</span>
<span v-if="!meal.consumers.length">somebody?</span>
</p>
<p v-if="meal.purchase_date">
Purchased {{ formatDate(meal.purchase_date) }}
</p>
</div>
</template>
@ -70,25 +67,6 @@ 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' })}`;
}
}
}

4
src/components/meals/PersonList.vue
View file

@ -148,12 +148,12 @@ export default {
this.searchResults = results.filter(p => !idSet.has(p.id));
},
addPerson(person) {
if (!person?.id >= 0 && this.searchResults.length > 0)
if (!person?.id && this.searchResults.length > 0)
{
person = this.searchResults[0];
}
if (person?.id >= 0 && !this.people.find(p => p.id === person.id))
if (person?.id && !this.people.find(p => p.id === person.id))
{
this.$emit('add-person', person);
}

7
src/components/recipes/EditRecipePage.vue
View file

@ -99,7 +99,7 @@ export default {
this.refreshRecipe();
},
async refreshRecipe() {
if (this.id >= 0) {
if (this.id) {
this.recipe = await data.getRecipe(this.id);
this.link = this.recipe.link;
return;
@ -120,7 +120,7 @@ export default {
},
async saveRecipe() {
const recipe = await data.saveRecipe(this.recipe);
if (recipe?.id >= 0) {
if (recipe?.id) {
this.$router.push(`/recipes/${recipe.id}`);
return;
}
@ -129,9 +129,8 @@ export default {
},
async createFromScratch() {
this.recipe = {
id: -1,
id: 0,
name: 'My new recipe',
created_by_id: -1,
link: '',
ingredients: [],
image_urls: []

30
src/components/shopping/CurrentShoppingListPage.vue → src/components/shopping/FullShoppingListPage.vue
View file

@ -1,23 +1,15 @@
<template>
<h3>Full shopping list</h3>
<input type="checkbox" id="show-found" v-model="stockTaking" />
<label for="show-found">Show Stocktaking</label>
<h4>Included Meals</h4>
<meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="availableMeals" />
<ul class="full-shopping-list">
<li v-for="item in productsToShow" :key="item.id">
<li v-for="item in listByProduct" :key="item.id" >
<shopping-list-item :product="item.product" :sources="item.sources" :totals="item.totals" :fully-found="item.fullyFound" :found-date="item.foundDate" />
<span v-if="stockTaking">
<button v-if="item.fullyFound" @click="markNotFound(item)">Mark Not Found</button>
<button v-else @click="markFound(item)">Mark Found</button>
</span>
<button v-if="item.fullyFound" @click="markNotFound(item)">Mark Not Found</button>
<button v-else @click="markFound(item)">Mark Found</button>
</li>
</ul>
<button @click="markPurchased">Purchased, archive this list!</button>
</template>
<style scoped>
@ -47,6 +39,9 @@ import ShoppingListItem from './ShoppingListItem.vue'
export default {
name: 'FullShoppingListPage',
components: { MealSelectionList, ShoppingListItem },
props: {
id: [String, Number]
},
data() {
const from = new Date();
from.setTime(0);
@ -54,19 +49,17 @@ export default {
const to = new Date();
to.setDate(to.getDate() + 7);
return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], stockTaking: false, productsToShow: []}
return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [] }
},
async beforeMount() {
const allMeals = await data.getMeals(this.from, this.to);
this.availableMeals = allMeals.filter(m => !m.purchase_date);
this.availableMeals = await data.getMeals(this.from, this.to);
this.shoppingList = await data.getCurrentShoppingList();
},
watch: {
shoppingList: {
handler: 'updateLists',
deep: true
},
stockTaking: 'updateLists'
}
},
methods: {
async updateLists() {
@ -75,7 +68,6 @@ export default {
this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
this.listByProduct = toProductsModel(this.shoppingList);
this.productsToShow = this.stockTaking ? this.listByProduct : this.listByProduct.filter(p => !p.fullyFound);
},
async mealSelected(meal) {
const request = await data.requestMeal(meal.id);
@ -95,10 +87,6 @@ export default {
async markNotFound(item) {
const deletedRequests = await data.markNotFound(item.product.id);
this.shoppingList.results = this.shoppingList.results.filter(r => !deletedRequests.some(deleted => deleted.id === r.id));
},
async markPurchased() {
const result = await data.markCurrentShoppingListPurchased();
this.$router.push({ name: 'PurchasedShoppingListPage', params: { id: result.id } });
}
}
}

9
src/components/shopping/MealSelectionList.vue
View file

@ -4,7 +4,7 @@
<li v-for="meal in meals" :key="meal.id">
<!-- Have a checkbox and card for each meal, show the image and name -->
<!-- Emit meal-selected event on checked and meal-unselected on unchecked -->
<input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
<input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" />
<label :for="meal.id" :style="getImageStyling(meal)">
{{ formatDate(meal.meal_date) }}
</label>
@ -45,18 +45,15 @@ label {
margin: 0;
font-weight: normal;
cursor: pointer;
color: #3d5447;
color: #777;
}
input[type="checkbox"]:checked + label {
border: 3px solid #3d5447;
color: #3d5447;
text-shadow: #ccc 0 0 0.1em;
}
input[type="checkbox"]:disabled + label {
cursor: not-allowed;
}
/* Show the image as the background image of the card */
.meal-image {
width: 100%;

2
src/components/shopping/MyShoppingPage.vue
View file

@ -63,7 +63,7 @@ export default {
this.ingredients = requests.map(r => r.ingredient);
},
addIngredient() {
this.ingredients = [{ id: -1 }, ...this.ingredients];
this.ingredients = [{ id: 0 }, ...this.ingredients];
},
deleteIngredient(ingredient) {
this.ingredients = this.ingredients.filter(i => i !== ingredient);

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

@ -1,59 +0,0 @@
<template>
<h3>Purchased {{ shoppingList?.purchased_date?.toLocaleDateString({ year: 'numeric', month: '2-digit', day: '2-digit' }) || 'Loading...' }}</h3>
<h4>Included Meals</h4>
<meal-selection-list :checked="includedMeals" :meals="includedMeals" />
<ul class="full-shopping-list">
<li v-for="item in productsToShow" :key="item.id">
<shopping-list-item :product="item.product" :sources="item.sources" :totals="item.totals" :fully-found="item.fullyFound" :found-date="item.foundDate" />
</li>
</ul>
</template>
<style scoped>
.full-shopping-list li {
list-style-type: none;
border: 1px solid #ccc;
border-radius: 0.5em;
margin-bottom: 1em;
}
.full-shopping-list {
padding: 0;
}
</style>
<script>
import data from '@/data.js'
import { toProductsModel } from './shopping.js'
import MealSelectionList from './MealSelectionList.vue'
import ShoppingListItem from './ShoppingListItem.vue'
export default {
name: 'FullShoppingListPage',
components: { MealSelectionList, ShoppingListItem },
props: {
id: [String, Number]
},
data() {
return {
shoppingList: null,
includedMeals: [],
listByProduct: [],
}
},
async beforeMount() {
this.shoppingList = await data.getShoppingList(this.id);
this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
this.listByProduct = toProductsModel(this.shoppingList);
this.productsToShow = this.stockTaking ? this.listByProduct : this.listByProduct.filter(p => !p.fullyFound);
},
}
</script>

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

@ -77,6 +77,7 @@
color: white;
font-weight: bold;
z-index: 1000;
opacity: 0.6;
}
.found-marker.found {

15
src/components/shopping/shopping.js
View file

@ -46,7 +46,7 @@ export function groupingToIngredients(grouping) {
const product = grouping.product;
const totals = [];
for (const total of grouping.totals) {
totals.push({ id: -1, line: `${total.quantity} ${total.unit} of ${product.name}`, preparation: '', name: product.name, product, ...total });
totals.push({ id: 0, line: `${total.quantity} ${total.unit} of ${product.name}`, preparation: '', name: product.name, product, ...total });
}
return totals;
}
@ -103,20 +103,7 @@ function groupBy(groups, keyFn) {
return grouped;
}
function convertToBaseUnits(total) {
const baseUnits = {};
for (const unit in total) {
const conversion = units.getConversionFactor(unit) ?? { unit, factor: 1 };
baseUnits[conversion.unit] = (baseUnits[conversion.unit] ?? 0) + total[unit] / conversion.factor;
}
return baseUnits;
}
function getRemainingIngredients(requiredTotals, foundTotals) {
requiredTotals = convertToBaseUnits(requiredTotals);
foundTotals = convertToBaseUnits(foundTotals);
const remaining = {};
for (const unit in requiredTotals) {
const required = requiredTotals[unit];

156
src/data.js
View file

@ -1,89 +1,46 @@
const BASE_URL = window.location.href.replace(/^(http:\/\/[^/:]+).*/, "$1:8000")
const datesToFix = {
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 }) },
Recipe: { fields: [ "date_created", "date_hidden" ], },
};
const fixDates = (obj, type) => {
if (!obj) return;
if (Array.isArray(obj)) {
for (const item of obj) {
fixDates(item, type);
}
}
const toFix = datesToFix[type];
if (!toFix) return;
for (const field of toFix.fields) {
function fixDates(obj, ...fields) {
for (const field of fields) {
if (obj[field]) {
obj[field] = new Date(obj[field]);
}
}
if (toFix.dependants) {
for (const [key, value] of Object.entries(toFix.dependants(obj))) {
if (Array.isArray(value)) {
for (const item of value) {
fixDates(item, key);
}
}
else {
fixDates(value, key);
}
}
}
}
const fixMealDates = meals => meals.forEach(meal => fixDates(meal, "meal_date"));
const fixResultDates = results => results.forEach(result => fixDates(result, "found_date"));
let user = null;
export default {
async getMeals(from, to) {
const response = await fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString());
const meals = await response.json();
fixDates(meals, "Meal");
fixMealDates(meals);
return meals.sort((a, b) => a.meal_date - b.meal_date);
},
async getMeal(id) {
var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`);
const meal = await response.json();
fixDates(meal, "Meal");
return meal;
return await response.json();
},
async deleteMeal(id) {
var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`, {
method: "DELETE",
});
return await response.json();
},
async searchRecipes(query) {
const response = await fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query));
const recipes = await response.json();
fixDates(recipes, "Recipe");
return recipes;
return await response.json();
},
async parseRecipe(url) {
const response = await fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`, { credentials: "include" });
const recipe = await response.json();
fixDates(recipe, "Recipe");
return recipe;
return await response.json();
},
async getRecipe(id) {
const response = await fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`);
const recipe = await response.json();
fixDates(recipe, "Recipe");
return recipe;
return await response.json();
},
async parseProduct(ingredient, url) {
const body = {
@ -116,15 +73,11 @@ export default {
body: JSON.stringify(recipe),
});
const saved = await response.json();
fixDates(saved, "Recipe");
return saved;
return await response.json();
},
async saveMeal(meal) {
let response = null;
if (meal.id >= 0) {
response = await fetch(BASE_URL + `/meals/${encodeURIComponent(meal.id)}`, {
if (meal.id) {
const response = await fetch(BASE_URL + `/meals/${encodeURIComponent(meal.id)}`, {
method: "PUT",
credentials: "include",
headers: {
@ -132,21 +85,19 @@ export default {
},
body: JSON.stringify(meal),
});
} else {
response = await fetch(BASE_URL + "/meals", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(meal),
});
return await response.json();
}
const saved = await response.json();
fixDates(saved, "Meal");
return saved;
const response = await fetch(BASE_URL + "/meals", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(meal),
});
return await response.json();
},
async currentUser() {
if (user) {
@ -188,10 +139,7 @@ export default {
method: "DELETE",
credentials: "include",
});
const recipe = await response.json();
fixDates(recipe, "Recipe");
return recipe;
return await response.json();
},
async searchPerson(name) {
const response = await fetch(BASE_URL + "/persons?q=" + encodeURIComponent(name));
@ -199,10 +147,7 @@ export default {
},
async getMyShoppingList() {
const response = await fetch(BASE_URL + "/shopping/current/me/ingredients", { credentials: "include" });
const requests = await response.json();
fixDates(requests, "ShoppingListRequest");
return requests;
return await response.json();
},
async saveMyShoppingList(list) {
const response = await fetch(BASE_URL + "/shopping/current/me/ingredients", {
@ -214,22 +159,18 @@ export default {
body: JSON.stringify(list),
});
const requests = await response.json();
fixDates(requests, "ShoppingListRequest");
return requests;
return await response.json();
},
async getShoppingList(id) {
const response = await fetch(BASE_URL + `/shopping/${encodeURIComponent(id)}`);
const lst = await response.json();
fixDates(lst, "ShoppingList");
return lst;
return await response.json();
},
async getCurrentShoppingList() {
const response = await fetch(BASE_URL + "/shopping/current");
const lst = await response.json();
fixDates(lst, "ShoppingList");
fixMealDates(lst.requests.map(request => request.meal).filter(meal => meal));
fixResultDates(lst.results);
fixDates(lst, "created_date");
return lst;
},
@ -243,10 +184,9 @@ export default {
body: JSON.stringify({ meal_id }),
});
const requests = await response.json();
fixDates(requests, "ShoppingListRequest");
return requests;
const result = await response.json();
fixMealDates([result.meal]);
return result;
},
async unrequestMeal(meal_id) {
const response = await fetch(BASE_URL + `/shopping/current/meals/${encodeURIComponent(meal_id)}`, {
@ -254,8 +194,7 @@ export default {
credentials: "include",
});
const requests = await response.json();
fixDates(requests, "ShoppingListRequest");
return await response.json();
},
async markFound(ingredients) {
const response = await fetch(BASE_URL + "/shopping/current/found", {
@ -268,9 +207,8 @@ export default {
});
const results = await response.json();
fixDates(results.created, "ShoppingListResult");
fixDates(results.removed, "ShoppingListResult");
fixResultDates(results.created);
fixResultDates(results.removed);
return results;
},
async markNotFound(product_id) {
@ -279,24 +217,8 @@ export default {
credentials: "include",
});
const removedResults = await response.json();
fixDates(removedResults, "ShoppingListResult");
return removedResults;
},
async markCurrentShoppingListPurchased() {
const response = await fetch(BASE_URL + "/shopping/current/purchased", {
method: "POST",
credentials: "include",
});
const lst = await response.json();
fixDates(lst, "ShoppingList");
return lst;
},
async getPersonsInHome() {
const response = await fetch(BASE_URL + "/persons");
return await response.json();
const results = await response.json();
fixResultDates(results);
return results;
}
}

10
src/main.js
View file

@ -7,23 +7,19 @@ import LoginPage from './components/LoginPage.vue'
import RecipesPage from './components/recipes/RecipesPage.vue'
import MealPlanPage from './components/meals/MealPlanPage.vue'
import MyShoppingPage from './components/shopping/MyShoppingPage.vue'
import PurchasedShoppingListPage from './components/shopping/PurchasedShoppingListPage.vue'
import CurrentShoppingListPage from './components/shopping/CurrentShoppingListPage.vue'
import FullShoppingListPage from './components/shopping/FullShoppingListPage.vue'
import EditMealPage from './components/meals/EditMealPage.vue'
import EditRecipePage from './components/recipes/EditRecipePage.vue'
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
// Redirect index to mealplan
{ path: '/', redirect: '/mealplan' },
{ path: '/', component: MealPlanPage },
{ path: '/mealplan', component: MealPlanPage },
{ path: '/login', component: LoginPage },
{ path: '/shopping', component: MyShoppingPage },
{ path: '/shopping/current', component: CurrentShoppingListPage },
{ path: '/shopping/:id', component: PurchasedShoppingListPage, props : true },
{ path: '/shopping/:id', component: FullShoppingListPage, props : true },
{ path: '/recipes', component: RecipesPage },
{ path: '/recipes/add', component: EditRecipePage },
{ path: '/recipes/:id', component: EditRecipePage, props: true },