cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

recipes and notes basically working

Browse Source
This commit is contained in:
vabene1111
2020-06-09 17:26:50 +02:00
parent 8cb6ed2f60
commit ffa7513f9e
2 changed files with 114 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/serializer.py
View File

@ -9,7 +9,7 @@ class MealPlanSerializer(serializers.ModelSerializer):
class Meta: class Meta:
model = MealPlan model = MealPlan
fields = ('id', 'title', 'recipe', 'date', 'meal_type', 'recipe_name', 'meal_type_name') fields = ('id', 'title', 'recipe', 'date', 'meal_type', 'created_by', 'recipe_name', 'meal_type_name')
class MealTypeSerializer(serializers.ModelSerializer): class MealTypeSerializer(serializers.ModelSerializer):

173
cookbook/templates/meal_plan.html
View File

@ -46,45 +46,6 @@
</h3> </h3>
<div id="app"> <div id="app">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes">
<!-- TODO remove recipes by backdropping them -->
</div>
</div>
<draggable class="row" :list="recipes" group="plan" @change="" :empty-insert-threshold="10">
<div class="col-3" v-for="(element, index) in recipes" :key="element.id">
<div class="card">
<div class="card-body">
<a href="#">[[element.name]]</a>
</div>
</div>
</div>
<!-- new note type entry -->
<div :key="-1">
<div class="card">
<div class="card-body">
New Note
<input type="text" class="form-control" v-model="new_note_text">
</div>
</div>
</div>
</draggable>
</div>
</div>
</div>
<table class="table table-sm table-striped"> <table class="table table-sm table-striped">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
@ -103,27 +64,72 @@
@change="log(d.date, mp.meal_type, $event)" @change="log(d.date, mp.meal_type, $event)"
:empty-insert-threshold="10"> :empty-insert-threshold="10">
<div class="list-group-item" v-for="(element, index) in d.items" :key="element.id"> <div class="list-group-item" v-for="(element, index) in d.items" :key="element.id">
<a href="#" v-if="element.title !== ''" <a href="#" v-if="element.title !== ''" @click="plan_detail = element">[[element.title]]</a>
@click="plan_detail = element">[[element.title]]</a> <a href="#" v-if="element.recipe_name !== ''" @click="plan_detail = element">[[element.recipe_name]]</a>
<a href="#" v-if="element.title === ''" @click="plan_detail = element">[[element.recipe_name]]</a> <a href="#" v-if="element.name !== ''" @click="plan_detail = element">[[element.name]]</a>
<button class="btn btn-sm" @click="deleteEntry(element)">Delete</button>
</div> </div>
</draggable> </draggable>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<hr/>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
{% trans 'Recipes' %}
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
placeholder="{% trans 'Search Recipe' %}">
<!-- TODO remove recipes by backdropping them -->
</div>
</div>
<div class="row" v-if="plan_detail !== undefined"> <draggable class="list-group" :list="recipes"
<h2>[[plan_detail.meal_type_name]] - [[plan_detail.date]]</h2> :group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneRecipe">
<br/> <div class="list-group-item" v-for="(element, index) in recipes" :key="element.id">
[[plan_detail.note]] <a href="#">[[element.name]]</a>
</div>
</draggable>
</div>
</div>
</div>
<div class="col-6">
<!-- new note type entry -->
<div :key="-1">
<div class="card">
<div class="card-header">
{% trans 'New Note' %}
</div>
<div class="card-body">
<input type="text" class="form-control" v-model="new_note_title"
placeholder="{% trans 'Title' %}">
<textarea class="form-control" v-model="new_note_text"
placeholder="{% trans 'Note (optional)' %}"></textarea>
<draggable :list="pseudo_note_list"
:group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneNote">
<div class="list-group-item" v-for="(element, index) in pseudo_note_list" :key="element.id">
<button class="btn">{% trans 'Drag me' %}</button>
</div>
</draggable>
</div>
</div>
</div>
</div>
</div> </div>
<br/> <br/>
<hr/> <hr/>
<br/> <br/>
[[plan_entries]] [[meal_plan]]
</div> </div>
@ -146,7 +152,11 @@
plan_detail: undefined, plan_detail: undefined,
recipes: [], recipes: [],
recipe_query: '', recipe_query: '',
pseudo_note_list: [
{id: 0, title: '', text: ''}
],
new_note_title: '',
new_note_text: '',
}, },
mounted: function () { mounted: function () {
console.log("MOUNTED") console.log("MOUNTED")
@ -166,11 +176,9 @@
getPlanTypes: function () { getPlanTypes: function () {
this.$http.get("{% url 'api:mealtype-list' %}").then((response) => { this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
this.meal_types = response.data; this.meal_types = response.data;
this.loading = false;
this.buildGrid(); this.buildGrid();
}) })
.catch((err) => { .catch((err) => {
this.loading = false;
console.log(err); console.log(err);
}) })
}, },
@ -204,29 +212,74 @@
this.$http.get(url).then((response) => { this.$http.get(url).then((response) => {
this.recipes = response.data; this.recipes = response.data;
}).catch((err) => {
console.log(err);
}) })
.catch((err) => {
console.log(err);
})
}, },
log: function (date, meal_type, evt) { log: function (date, meal_type, evt) {
console.log("log")
if (evt.added !== undefined) { if (evt.added !== undefined) {
var plan_entry = evt.added.element console.log("added")
let plan_entry = evt.added.element
plan_entry.date = date plan_entry.date = date
plan_entry.meal_type = meal_type plan_entry.meal_type = meal_type
this.$http.put(`{% url 'api:mealplan-list' %}${plan_entry.id}/`, plan_entry) if (plan_entry.is_recipe || plan_entry.is_note) { // its not a meal plan object
.then((response) => { console.log("undef")
plan_entry.created_by = {{ request.user.id }};
this.$http.post(`{% url 'api:mealplan-list' %}`, plan_entry).then((response) => {
console.log("Update success", response) console.log("Update success", response)
}) // TODO update meal plan array with id
.catch((err) => { }).catch((err) => {
console.log("update error", err); console.log("update error", err);
}) })
} else {
this.$http.put(`{% url 'api:mealplan-list' %}${plan_entry.id}/`, plan_entry).then((response) => {
console.log("Update success", response)
}).catch((err) => {
console.log("update error", err);
})
}
} }
},
deleteEntry: function (entry) {
this.$http.delete(`{% url 'api:mealplan-list' %}${entry.id}/`, entry).then((response) => {
console.log("delete success", response)
this.meal_plan[entry.meal_type].days[entry.date].items = this.meal_plan[entry.meal_type].days[entry.date].items.filter(item => item !== entry)
}).catch((err) => {
console.log("update error", err);
})
},
cloneRecipe: function (recipe) {
console.log("clone recipe")
return {
id: Math.round(Math.random() * 1000) + 10000,
recipe: recipe.id,
recipe_name: recipe.name,
is_recipe: true
}
},
cloneNote: function () {
console.log("clone note")
let new_entry = {
id: Math.round(Math.random() * 1000) + 10000,
title: this.new_note_title,
text: this.new_note_text,
is_note: true,
}
if (new_entry.title === '') {
new_entry.title = '{% trans 'Title' %}'
}
this.new_note_title = ''
this.new_note_text = ''
return new_entry
} }
} }
}); });
</script> </script>
{% endblock %} {% endblock %}