added drag and drop to ingredients
This commit is contained in:
parent
44dee16e0a
commit
647c1678f1
@ -135,9 +135,12 @@
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Keywords' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;" @click="deletePreview('keywords')" title="{% trans 'Clear Contents'%}"></i>
|
||||
<div class="card-header">
|
||||
<div class="row" style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Keywords' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;" @click="deletePreview('keywords')" title="{% trans 'Clear Contents'%}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">{% trans 'Keywords dragged here will be appended to current list'%}</div>
|
||||
</div>
|
||||
<div class="card-body drop-zone" @drop="replacePreview('keywords', $event)" @dragover.prevent @dragenter.prevent>
|
||||
<div v-for="kw in recipe_json.keywords">
|
||||
@ -193,14 +196,24 @@
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Ingredients' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;" @click="deletePreview('ingredients')" title="{% trans 'Clear Contents'%}"></i>
|
||||
<div class="card-header">
|
||||
<div class="row" style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Ingredients' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;" @click="deletePreview('ingredients')" title="{% trans 'Clear Contents'%}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">{% trans 'Ingredients dragged here will be appended to current list.'%}</div>
|
||||
</div>
|
||||
<div class="card-body drop-zone" @drop="replacePreview('ingredients', $event)" @dragover.prevent @dragenter.prevent>
|
||||
<div v-for="i in recipe_json.recipeIngredient">
|
||||
<div class="card-text">[[i.amount]] [[i.unit.text]] [[i.ingredient.text]] [[i.note]]</div>
|
||||
</div>
|
||||
<ul class="list-group list-group">
|
||||
<div v-for="i in recipe_json.recipeIngredient">
|
||||
<li class="row border" style="border:1px">
|
||||
<div class="col-sm-1 border">[[i.amount]]</div>
|
||||
<div class="col-sm border">[[i.unit.text]]</div>
|
||||
<div class="col-sm border">[[i.ingredient.text]]</div>
|
||||
<div class="col-sm border">[[i.note]]</div>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -643,6 +656,7 @@
|
||||
})
|
||||
},
|
||||
loadRecipeHTML: function () {
|
||||
// TODO this needs refactored to get HTML elements
|
||||
this.error = undefined
|
||||
this.loading = true
|
||||
this.parsed = false
|
||||
@ -840,17 +854,35 @@
|
||||
this.recipe_json.cookTime=v
|
||||
break;
|
||||
case 'ingredients':
|
||||
let new_ingredient={
|
||||
unit: {id: Math.random() * 1000, text: ""},
|
||||
amount: "",
|
||||
ingredient: {id: Math.random() * 1000, text: v}
|
||||
this.$http.post('{% url 'api_ingredient_from_string' %}', {text: v}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response)
|
||||
let new_ingredient={
|
||||
unit: {id: Math.random() * 1000, text: response.body.unit},
|
||||
amount: response.body.amount,
|
||||
ingredient: {id: Math.random() * 1000, text: response.body.food},
|
||||
note: response.body.note
|
||||
}
|
||||
this.recipe_json.recipeIngredient=[new_ingredient]
|
||||
this.recipe_json.recipeIngredient.push(new_ingredient)
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('Something went wrong.'), 'danger')
|
||||
})
|
||||
|
||||
break;
|
||||
case 'instructions':
|
||||
this.recipe_json.recipeInstructions=this.recipe_json.recipeInstructions.concat(v)
|
||||
break;
|
||||
}
|
||||
},
|
||||
parseIngredient: function(txt) {
|
||||
this.$http.post('{% url 'api_ingredient_from_string' %}', {text: txt}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response)
|
||||
let ing = [response.body.amount, response.body.unit, response.body.food, response.body.note]
|
||||
return ing
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('Something went wrong.'), 'danger')
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -662,6 +662,7 @@ def ingredient_from_string(request):
|
||||
'amount': amount,
|
||||
'unit': unit,
|
||||
'food': food,
|
||||
'note': note
|
||||
},
|
||||
status=200
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user