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

improved url import [WIP]

Browse Source
This commit is contained in:
vabene1111 2020-06-23 18:13:16 +02:00
parent 73f2240763
commit 6197cab1ed
1 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
cookbook/templates/url_import.html
View File

@ -81,48 +81,69 @@
<input class="form-control" v-model="i.amount"> <input class="form-control" v-model="i.amount">
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<multiselect
<table style="width: 100%">
<tr>
<td>
<multiselect v-tabindex
ref="unit"
style="width: 100%;"
v-model="i.unit" v-model="i.unit"
:options="units" :options="units"
:close-on-select="true" :close-on-select="true"
:clear-on-select="true" :clear-on-select="true"
:allow-empty="true"
:preserve-search="true" :preserve-search="true"
placeholder="{% trans 'Select one' %}" placeholder="{% trans 'Select one' %}"
tag-placeholder="{% trans 'Create new' %}" tag-placeholder="{% trans 'Select' %}"
label="text" label="text"
:taggable="true" :taggable="true"
@tag="addUnitType"
@open="openUnitSelect"
:id="'unit_' + index"
track-by="id" track-by="id"
:multiple="false" :multiple="false"
:loading="units_loading" :loading="units_loading"
@search-change="searchUnits">> @search-change="searchUnits">
</multiselect> </multiselect>
</td>
<td>
<button class="btn btn-outline-success btn-lg" type="button"
@click="i.unit = ''" tabindex="-1">
<i class="fas fa-eraser"></i></button>
</td>
</tr>
</table>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<multiselect <multiselect v-tabindex
ref="ingredient"
v-model="i.ingredient" v-model="i.ingredient"
:options="ingredients" :options="ingredients"
:taggable="true" :taggable="true"
@tag="addIngredientType" @tag="addIngredientType"
placeholder="{% trans 'Select one' %}" placeholder="{% trans 'Select one' %}"
tag-placeholder="{% trans 'Create new' %}" tag-placeholder="{% trans 'Select' %}"
:close-on-select="true" :close-on-select="true"
:clear-on-select="true" :clear-on-select="true"
:allow-empty="false"
:preserve-search="true" :preserve-search="true"
label="text" label="text"
:id="index" :id="'ingredient_' + index"
track-by="id" track-by="id"
:multiple="false" :multiple="false"
:loading="ingredients_loading" :loading="ingredients_loading"
@search-change="searchIngredients">> @search-change="searchIngredients"
@open="openIngredientSelect">
</multiselect> </multiselect>
</div> </div>
<div class="col-md-1"> <div class="col-md-1">
<button class="btn btn-outline-danger btn-lg" type="button" <button class="btn btn-outline-danger btn-lg" type="button"
@click="deleteIngredient(i)"><i @click="deleteIngredient(i)" tabindex="-1"><i
class="fas fa-trash-alt"></i></button> class="fas fa-trash-alt"></i></button>
</div> </div>
</div> </div>
@ -233,7 +254,7 @@
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
el: '#app', el: '#app',
data: { data: {
remote_url: '', remote_url: 'https://www.chefkoch.de/rezepte/639111164874609/Ziegenkaese-im-Speckmantel-auf-buntem-Linsensalat.html',
keywords: [], keywords: [],
keywords_loading: false, keywords_loading: false,
units: [], units: [],
@ -245,8 +266,18 @@
loading: false, loading: false,
all_keywords: false, all_keywords: false,
}, },
directives: {
tabindex: {
inserted(el) {
el.setAttribute('tabindex', 0);
}
}
},
mounted: function () { mounted: function () {
this.loadRecipe()
this.searchKeywords('')
this.searchUnits('')
this.searchIngredients('')
}, },
methods: { methods: {
loadRecipe: function () { loadRecipe: function () {
@ -283,22 +314,38 @@
}, },
addIngredient: function (i) { addIngredient: function (i) {
this.recipe_data.recipeIngredient.push({ this.recipe_data.recipeIngredient.push({
unit: {id: 'null', text: '{{ request.user.userpreference.default_unit }}'}, unit: {id: Math.random() * 100, text: '{{ request.user.userpreference.default_unit }}'},
amount: 0, amount: 0,
ingredient: {id: 'null', text: ''} ingredient: {id: Math.random() * 100, text: ''}
}) })
}, },
addIngredientType: function (tag, index) { addIngredientType: function (tag, index) {
index = index.replace('ingredient_', '')
let new_ingredient = this.recipe_data.recipeIngredient[index] let new_ingredient = this.recipe_data.recipeIngredient[index]
new_ingredient.ingredient = {'id': 'null', 'text': tag} new_ingredient.ingredient = {'id': Math.random() * 100, 'text': tag}
this.ingredients.push(new_ingredient.ingredient) this.ingredients.push(new_ingredient.ingredient)
this.recipe_data.recipeIngredient[index] = new_ingredient this.recipe_data.recipeIngredient[index] = new_ingredient
}, },
addUnitType: function (tag, index) {
index = index.replace('unit_', '')
let new_unit = this.recipe_data.recipeIngredient[index]
new_unit.unit = {'id': Math.random() * 100, 'text': tag}
this.units.push(new_unit.unit)
this.recipe_data.recipeIngredient[index] = new_unit
},
openUnitSelect: function (id) {
let index = id.replace('unit_', '')
this.$set(app.$refs.unit[index].$data, 'search', this.recipe_data.recipeIngredient[index].unit.text)
},
openIngredientSelect: function (id) {
let index = id.replace('ingredient_', '')
this.$set(this.$refs.ingredient[index].$data, 'search', this.recipe_data.recipeIngredient[index].ingredient.text)
},
searchKeywords: function (query) { searchKeywords: function (query) {
this.keywords_loading = true this.keywords_loading = true
this.$http.get("{% url 'dal_keyword' %}" + '?q=' + query).then((response) => { this.$http.get("{% url 'dal_keyword' %}" + '?q=' + query).then((response) => {
this.keywords_loading = false
this.keywords = response.data.results; this.keywords = response.data.results;
this.keywords_loading = false
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })
@ -306,8 +353,15 @@
searchUnits: function (query) { searchUnits: function (query) {
this.units_loading = true this.units_loading = true
this.$http.get("{% url 'dal_unit' %}" + '?q=' + query).then((response) => { this.$http.get("{% url 'dal_unit' %}" + '?q=' + query).then((response) => {
this.units_loading = false
this.units = response.data.results; this.units = response.data.results;
if (this.recipe_data !== undefined) {
for (let x of Array.from(this.recipe_data.recipeIngredient)) {
if (x.ingredient.text !== '') {
this.units.push(x.unit)
}
}
}
this.units_loading = false
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })
@ -315,8 +369,8 @@
searchIngredients: function (query) { searchIngredients: function (query) {
this.ingredients_loading = true this.ingredients_loading = true
this.$http.get("{% url 'dal_ingredient' %}" + '?q=' + query).then((response) => { this.$http.get("{% url 'dal_ingredient' %}" + '?q=' + query).then((response) => {
this.ingredients = this.ingredients.concat(response.data.results);
this.ingredients_loading = false this.ingredients_loading = false
this.ingredients = response.data.results;
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })