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

Zero is a valid id

Browse source
This commit is contained in:
jableader 2024-05-20 22:16:39 +10:00
parent f2a2daca6f
commit 313e4dd5be
11 changed files with 204 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/LoginPage.vue
View file

@ -33,7 +33,7 @@ export default {
methods: {
async login() {
const person = await data.login(this.username);
if (person?.id) {
if (person?.id >= 0) {
this.$router.push(this.redirect);
return;
}

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

@ -55,7 +55,7 @@ export default {
data() {
return {
meal: {
id: 0,
id: -1,
meal_date: new Date(),
recipes: [],
extra_ingredients: [],
@ -66,7 +66,7 @@ export default {
};
},
async beforeMount() {
if (this.id) {
if (this.id >= 0) {
this.meal = await data.getMeal(this.id);
}
},
@ -109,7 +109,7 @@ export default {
},
async saveMeal() {
const meal = await data.saveMeal(this.meal);
if (meal?.id) {
if (meal?.id >= 0) {
this.$router.push(`/meals/${meal.id}`);
return;
}

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 && this.searchResults.length > 0)
if (!person?.id >= 0 && this.searchResults.length > 0)
{
person = this.searchResults[0];
}
if (person?.id && !this.people.find(p => p.id === person.id))
if (person?.id >= 0 && !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) {
if (this.id >= 0) {
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) {
if (recipe?.id >= 0) {
this.$router.push(`/recipes/${recipe.id}`);
return;
}
@ -129,8 +129,9 @@ export default {
},
async createFromScratch() {
this.recipe = {
id: 0,
id: -1,
name: 'My new recipe',
created_by_id: -1,
link: '',
ingredients: [],
image_urls: []

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

@ -16,6 +16,8 @@
</span>
</li>
</ul>
<button @click="markPurchased">Purchased, archive this list!</button>
</template>
<style scoped>
@ -45,9 +47,6 @@ import ShoppingListItem from './ShoppingListItem.vue'
export default {
name: 'FullShoppingListPage',
components: { MealSelectionList, ShoppingListItem },
props: {
id: [String, Number]
},
data() {
const from = new Date();
from.setTime(0);
@ -58,7 +57,8 @@ export default {
return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], stockTaking: false, productsToShow: []}
},
async beforeMount() {
this.availableMeals = await data.getMeals(this.from, this.to);
const allMeals = await data.getMeals(this.from, this.to);
this.availableMeals = allMeals.filter(m => !m.purchase_date);
this.shoppingList = await data.getCurrentShoppingList();
},
watch: {
@ -95,6 +95,10 @@ 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 } });
}
}
}

11
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" />
<input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
<label :for="meal.id" :style="getImageStyling(meal)">
{{ formatDate(meal.meal_date) }}
</label>
@ -45,15 +45,20 @@ label {
margin: 0;
font-weight: normal;
cursor: pointer;
color: #777;
color: #3d5447;
}
input[type="checkbox"]:checked + label {
border: 3px solid #3d5447;
color: #3d5447;
text-shadow: #ccc 0 0 0.1em;
}
input[type="checkbox"]:disabled + label {
background-color: rgba(255, 255, 255, 0.5);
color: #ccc;
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: 0 }, ...this.ingredients];
this.ingredients = [{ id: -1 }, ...this.ingredients];
},
deleteIngredient(ingredient) {
this.ingredients = this.ingredients.filter(i => i !== ingredient);

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

@ -0,0 +1,59 @@
<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>

2
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: 0, line: `${total.quantity} ${total.unit} of ${product.name}`, preparation: '', name: product.name, product, ...total });
totals.push({ id: -1, line: `${total.quantity} ${total.unit} of ${product.name}`, preparation: '', name: product.name, product, ...total });
}
return totals;
}

152
src/data.js
View file

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

6
src/main.js
View file

@ -7,7 +7,8 @@ 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 FullShoppingListPage from './components/shopping/FullShoppingListPage.vue'
import PurchasedShoppingListPage from './components/shopping/PurchasedShoppingListPage.vue'
import CurrentShoppingListPage from './components/shopping/CurrentShoppingListPage.vue'
import EditMealPage from './components/meals/EditMealPage.vue'
import EditRecipePage from './components/recipes/EditRecipePage.vue'
@ -19,7 +20,8 @@ const routes = [
{ path: '/mealplan', component: MealPlanPage },
{ path: '/login', component: LoginPage },
{ path: '/shopping', component: MyShoppingPage },
{ path: '/shopping/:id', component: FullShoppingListPage, props : true },
{ path: '/shopping/current', component: CurrentShoppingListPage },
{ path: '/shopping/:id', component: PurchasedShoppingListPage, props : true },
{ path: '/recipes', component: RecipesPage },
{ path: '/recipes/add', component: EditRecipePage },
{ path: '/recipes/:id', component: EditRecipePage, props: true },