adding items to plan

This commit is contained in:
vabene1111
2020-06-09 13:11:01 +02:00
parent 2e255aba0d
commit 8cb6ed2f60
4 changed files with 105 additions and 8 deletions

View File

@@ -46,6 +46,45 @@
</h3>
<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">
<thead class="thead-dark">
<tr>
@@ -58,13 +97,14 @@
[[mp.name]]
</td>
</tr>
<tr >
<tr>
<td v-for="d in mp.days">
<draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
@change="log(d.date, mp.meal_type, $event)"
:empty-insert-threshold="10">
<div class="list-group-item" v-for="(element, index) in d.items" :key="element.id">
<a href="#" v-if="element.title !== ''" @click="plan_detail = element">[[element.title]]</a>
<a href="#" v-if="element.title !== ''"
@click="plan_detail = element">[[element.title]]</a>
<a href="#" v-if="element.title === ''" @click="plan_detail = element">[[element.recipe_name]]</a>
</div>
</draggable>
@@ -104,15 +144,16 @@
meal_types: [],
meal_plan: {},
plan_detail: undefined,
recipes: [],
recipe_query: '',
},
mounted: function () {
console.log("MOUNTED")
this.getPlanEntries();
},
methods: {
methods: { // TODO stop chain loading and do async
getPlanEntries: function () {
this.loading = true;
this.$http.get("{% url 'api:mealplan-list' %}?week=" + week).then((response) => {
this.plan_entries = response.data;
this.getPlanTypes();
@@ -123,7 +164,6 @@
})
},
getPlanTypes: function () {
this.loading = true;
this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
this.meal_types = response.data;
this.loading = false;
@@ -154,6 +194,20 @@
for (e of this.plan_entries) {
this.meal_plan[e.meal_type].days[e.date].items.push(e)
}
this.getRecipes();
},
getRecipes: function () {
let url = "{% url 'api:recipe-list' %}?limit=5"
if (this.recipe_query !== '') {
url += '&query=' + this.recipe_query;
}
this.$http.get(url).then((response) => {
this.recipes = response.data;
})
.catch((err) => {
console.log(err);
})
},
log: function (date, meal_type, evt) {
if (evt.added !== undefined) {