mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-06 14:48:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

basic shopping list ui cleanup

Browse Source
This commit is contained in:
vabene1111
2020-09-21 22:05:53 +02:00
parent f5117abcfb
commit da958faf33
1 changed files with 101 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
cookbook/templates/shopping_list.html
View File

@@ -22,32 +22,78 @@
<div class="col col-9"> <div class="col col-9">
<h2>{% trans 'Shopping List' %}</h2> <h2>{% trans 'Shopping List' %}</h2>
</div> </div>
<div class="col col-3"> <!--TODO proper alignment -->
<div class="col col-3 text-right">
<b-form-checkbox switch size="lg" v-model="edit_mode">{% trans 'Edit' %}</b-form-checkbox> <b-form-checkbox switch size="lg" v-model="edit_mode">{% trans 'Edit' %}</b-form-checkbox>
</div> </div>
</div> </div>
<template v-if="shopping_list !== undefined"> <template v-if="shopping_list !== undefined">
<div class="text-center" v-if="loading">
<div v-if="edit_mode"> <i class="fas fa-spinner fa-spin fa-8x"></i>
</div>
<div v-else-if="edit_mode">
<div class="row"> <div class="row">
<div class="col col-md-6"> <div class="col col-md-6">
<div class="card">
<div class="card-header">
<i class="fa fa-search"></i> {% trans 'Search' %}
</div>
<div class="card-body">
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes" <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
placeholder="{% trans 'Search Recipe' %}"> placeholder="{% trans 'Search Recipe' %}">
<ul class="list-group" style="margin-top: 8px"> <ul class="list-group" style="margin-top: 8px">
<li class="list-group-item" v-for="x in recipes">[[x.name]] <li class="list-group-item" v-for="x in recipes">
<button @click="addRecipeToList(x)"><i class="fa fa-plus"></i></button> <div class="flex-row">
<div class="flex-column">[[x.name]]</div>
<div class="flex-column align-self-end">
<button class="btn btn-outline-primary shadow-none" @click="addRecipeToList(x)"><i
class="fa fa-plus"></i></button>
</div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
</div>
<div class="col col-md-6"> <div class="col col-md-6">
<ul class="list-group" style="margin-top: 8px"> <div class="card">
<li class="list-group-item" v-for="x in shopping_list.recipes">[[x.recipe_name]] <div class="card-header">
<input type="number" v-model="x.multiplier"> <i class="fa fa-shopping-cart"></i> {% trans 'Shopping Recipes' %}
</li> </div>
</ul> <div class="card-body" style="padding-left: 2vw; padding-right: 2vw">
<template v-if="shopping_list.recipes.length < 1">
{% trans 'No recipes selected' %}
</template>
<template v-else>
<div class="row flex-row my-auto" v-for="x in shopping_list.recipes"
style="margin-top: 0.5vh!important;">
<div class="flex-grow-1 flex-column my-auto">[[x.recipe_name]]</div>
<div class="flex-column align-self-end ">
<div class="input-group input-group-sm my-auto">
<div class="input-group-prepend">
<button class="text-muted btn btn-outline-primary shadow-none"
@click="((x.multiplier - 1) > 0) ? x.multiplier -= 1 : 1">-
</button>
</div>
<input class="form-control" type="number" v-model="x.multiplier">
<div class="input-group-append">
<button class="text-muted btn btn-outline-primary shadow-none"
@click="x.multiplier += 1">
+
</button>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div> </div>
</div> </div>
@@ -112,12 +158,22 @@
</table> </table>
</div> </div>
</div> </div>
<div class="row">
<div class="col col-12 text-right">
<button class="btn btn-success" @click="updateShoppingList()"><i
class="fas fa-save"></i> {% trans 'Save' %}
</button>
</div> </div>
<div v-else> </div>
</div>
<div v-else="">
Non Edit Non Edit
</div> </div>
<button @click="updateShoppingList()">Save</button>
</template> </template>
@@ -136,12 +192,12 @@
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
el: '#id_base_container', el: '#id_base_container',
data: { data: {
shopping_list_id: {{ shopping_list_id }}, shopping_list_id: {% if shopping_list_id %}{{ shopping_list_id }}{% else %}null{% endif %},
loading: true,
edit_mode: true, edit_mode: true,
recipe_query: '', recipe_query: '',
recipes: [], recipes: [],
shopping_list: undefined, shopping_list: undefined,
//multiplier_cache: {},
new_entry: { new_entry: {
unit: undefined, unit: undefined,
amount: undefined, amount: undefined,
@@ -199,8 +255,6 @@
}, },
*/ */
mounted: function () { mounted: function () {
if (this.shopping_list_id) { if (this.shopping_list_id) {
this.loadShoppingList() this.loadShoppingList()
} else { } else {
@@ -212,9 +266,8 @@
"shared": [], "shared": [],
"created_by": 1 "created_by": 1
} }
this.loading = false
} }
}, },
methods: { methods: {
@@ -239,12 +292,14 @@
this.$http.get("{% url 'api:shoppinglist-detail' shopping_list_id %}").then((response) => { this.$http.get("{% url 'api:shoppinglist-detail' shopping_list_id %}").then((response) => {
this.shopping_list = response.body this.shopping_list = response.body
this.loading = false
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger') this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
}) })
}, },
updateShoppingList: function () { updateShoppingList: function () {
this.loading = true
let recipe_promises = [] let recipe_promises = []
for (let i in this.shopping_list.recipes) { for (let i in this.shopping_list.recipes) {
@@ -268,14 +323,30 @@
Promise.allSettled(recipe_promises).then(() => { Promise.allSettled(recipe_promises).then(() => {
console.log("proceeding to update shopping list", this.shopping_list) console.log("proceeding to update shopping list", this.shopping_list)
if (this.shopping_list_id === null) {
this.$http.post("{% url 'api:shoppinglist-list' %}", this.shopping_list, {}).then((response) => {
console.log(response)
this.makeToast('{% trans 'Updated' %}', '{% trans 'Object created successfully!' %}', 'success')
this.loading = false
this.shopping_list = response.body
}).catch((err) => {
console.log(err)
this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error creating a resource!' %}' + err.bodyText, 'danger')
this.loading = false
})
} else {
this.$http.put("{% url 'api:shoppinglist-detail' shopping_list_id %}", this.shopping_list, {}).then((response) => { this.$http.put("{% url 'api:shoppinglist-detail' shopping_list_id %}", this.shopping_list, {}).then((response) => {
console.log(response) console.log(response)
this.makeToast('{% trans 'Updated' %}', '{% trans 'Changes saved successfully!' %}', 'success') this.makeToast('{% trans 'Updated' %}', '{% trans 'Changes saved successfully!' %}', 'success')
this.loading = false
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error updating a resource!' %}' + err.bodyText, 'danger') this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error updating a resource!' %}' + err.bodyText, 'danger')
this.loading = false
}) })
}
}) })
}, },
addEntry: function () { addEntry: function () {