mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2025-12-24 02:39:20 -05:00
330 lines
14 KiB
HTML
330 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load custom_tags %}
|
|
{% load theming_tags %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans 'Edit Recipe' %}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
|
|
{% include 'include/vue_base.html' %}
|
|
|
|
<script src="{% static 'js/vue-multiselect.min.js' %}"></script>
|
|
<link rel="stylesheet" href="{% static 'css/vue-multiselect-bs4.min.css' %}">
|
|
|
|
<script src="{% static 'js/Sortable.min.js' %}"></script>
|
|
<script src="{% static 'js/vuedraggable.umd.min.js' %}"></script>
|
|
|
|
<style>
|
|
.small-padding {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.break-column {
|
|
flex-basis: 100%;
|
|
width: 0;
|
|
}
|
|
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<h3>{% trans 'Edit Recipe' %}</h3>
|
|
|
|
<div id="app">
|
|
<div v-if="recipe">
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<label for="id_name"> {% trans 'Name' %}</label>
|
|
<input class="form-control" id="id_name" v-model="recipe.name">
|
|
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
Image Edit Placeholder
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="id_name"> {% trans 'Preperation Time' %}</label>
|
|
<input class="form-control" id="id_prep_time" v-model="recipe.working_time">
|
|
|
|
<label for="id_name"> {% trans 'Waiting Time' %}</label>
|
|
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">
|
|
|
|
<label for="id_name"> {% trans 'Keywords' %}</label>
|
|
<multiselect
|
|
v-model="recipe.keywords"
|
|
:options="keywords"
|
|
:close-on-select="false"
|
|
:clear-on-select="true"
|
|
:hide-selected="true"
|
|
:preserve-search="true"
|
|
placeholder="{% trans 'Select one' %}"
|
|
label="name"
|
|
track-by="id"
|
|
id="id_keywords"
|
|
:multiple="true"
|
|
:loading="keywords_loading"
|
|
@search-change="searchKeywords">
|
|
</multiselect>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="step in recipe.steps">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3>Step</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<label :for="'id_step_' + step.id + 'name'">{% trans 'Step Name' %}</label>
|
|
<input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-12" style="margin-top: 12px">
|
|
<!--<div class="row" style="text-align: center">
|
|
<div class="col-md-1 no-gutters">
|
|
<b><i class="fas fa-arrows-alt-v"></i></b>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<b>{% trans 'Amount' %}</b>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<b>{% trans 'Unit' %}</b>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<b>{% trans 'Food' %}</b>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<b>{% trans 'Note' %}</b>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<i class="fa fa-trash"></i>
|
|
</div>
|
|
</div>-->
|
|
|
|
<draggable :list="step.ingredients" group="ingredients"
|
|
:empty-insert-threshold="10" handle=".handle" @sort="sortStep(step)">
|
|
<div class="col-md-12" v-for="ingredient, index in step.ingredients" :key="ingredient.id"
|
|
style="margin-top: 8px">
|
|
|
|
<hr class="d-md-none"/>
|
|
<div class="d-flex">
|
|
<div class="flex-grow-0 handle align-self-start">
|
|
<button type="button" class="btn btn-lg shadow-none"><i
|
|
class="fas fa-arrows-alt-v "></i></button>
|
|
</div>
|
|
|
|
<div class="flex-fill row" style="margin-left: 8px; margin-right: 8px">
|
|
<div class="col-lg-2 col-md-6 small-padding">
|
|
<input class="form-control" v-model="ingredient.amount" type="number">
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-6 small-padding">
|
|
<multiselect
|
|
v-tabindex
|
|
ref="unit"
|
|
v-model="ingredient.unit"
|
|
:options="units"
|
|
:close-on-select="true"
|
|
:clear-on-select="true"
|
|
:allow-empty="true"
|
|
:preserve-search="true"
|
|
placeholder="{% trans 'Select Unit' %}"
|
|
tag-placeholder="{% trans 'Select' %}"
|
|
label="name"
|
|
track-by="id"
|
|
:multiple="false"
|
|
:loading="units_loading"
|
|
@search-change="searchUnits">
|
|
</multiselect>
|
|
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 small-padding">
|
|
<multiselect
|
|
v-tabindex
|
|
ref="food"
|
|
v-model="ingredient.food"
|
|
:options="foods"
|
|
:close-on-select="true"
|
|
:clear-on-select="true"
|
|
:allow-empty="true"
|
|
:preserve-search="true"
|
|
placeholder="{% trans 'Select Food' %}"
|
|
tag-placeholder="{% trans 'Select' %}"
|
|
label="name"
|
|
track-by="id"
|
|
:multiple="false"
|
|
:loading="foods_loading"
|
|
@search-change="searchFoods">
|
|
</multiselect>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 small-padding">
|
|
<input class="form-control" v-model="ingredient.note"
|
|
placeholder="{% trans 'Note' %}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-0 small-padding">
|
|
<button type="button" class="btn btn-outline-warning btn-lg"
|
|
@click="removeIngredient(step, ingredient)"><i
|
|
class="fa fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12" style="text-align: center; margin-top: 8px; margin-bottom: 8px">
|
|
<button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<textarea class="form-control" rows="8" v-model="step.instruction"
|
|
:id="'id_instruction_' + step.id"></textarea>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
</div>
|
|
|
|
<button type="button" @click="updateRecipe(true)" class="btn btn-success">{% trans 'Save & View' %}</button>
|
|
<button type="button" @click="updateRecipe(false)" class="btn btn-info">{% trans 'Save' %}</button>
|
|
<button type="button" @click="addStep()" class="btn btn-primary">{% trans 'Add Step' %}</button>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="application/javascript">
|
|
let csrftoken = Cookies.get('csrftoken');
|
|
Vue.http.headers.common['X-CSRFToken'] = csrftoken;
|
|
|
|
Vue.component('vue-multiselect', window.VueMultiselect.default)
|
|
|
|
let app = new Vue({
|
|
components: {
|
|
Multiselect: window.VueMultiselect.default
|
|
},
|
|
delimiters: ['[[', ']]'],
|
|
el: '#app',
|
|
data: {
|
|
recipe: undefined,
|
|
keywords: [],
|
|
keywords_loading: false,
|
|
foods: [],
|
|
foods_loading: false,
|
|
units: [],
|
|
units_loading: false,
|
|
},
|
|
directives: {
|
|
tabindex: {
|
|
inserted(el) {
|
|
el.setAttribute('tabindex', 0);
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.loadRecipe()
|
|
this.searchUnits('')
|
|
this.searchFoods('')
|
|
this.searchKeywords('')
|
|
},
|
|
methods: {
|
|
loadRecipe: function () {
|
|
this.$http.get("{% url 'api:recipe-detail' recipe.pk %}").then((response) => {
|
|
this.recipe = response.data;
|
|
this.loading = false
|
|
}).catch((err) => {
|
|
this.error = err.data
|
|
this.loading = false
|
|
console.log(err)
|
|
})
|
|
},
|
|
updateRecipe: function (view_after) {
|
|
this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe).then((response) => {
|
|
console.log(view_after)
|
|
console.log(response)
|
|
if (view_after) {
|
|
location.href = "{% url 'view_recipe' 12345 %}".replace(/12345/, this.recipe.id);
|
|
}
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
addStep: function () { //TODO see if default can be generated from options request
|
|
this.recipe.steps.push(
|
|
{'instruction': '', ingredients: []}
|
|
)
|
|
},
|
|
sortStep: function (step) {
|
|
step.ingredients.forEach(function (element, index) {
|
|
element.order = index
|
|
});
|
|
},
|
|
addIngredient: function (step) { //TODO see if default can be generated from options request
|
|
step.ingredients.push({
|
|
'food': undefined,
|
|
'unit': undefined,
|
|
'amount': 0,
|
|
'note': '',
|
|
})
|
|
this.sortStep(step)
|
|
},
|
|
removeIngredient: function (step, ingredient) {
|
|
if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) {
|
|
step.ingredients = step.ingredients.filter(item => item !== ingredient)
|
|
}
|
|
|
|
},
|
|
searchKeywords: function (query) {
|
|
this.keywords_loading = true
|
|
this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {
|
|
this.keywords = response.data;
|
|
this.keywords_loading = false
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
searchUnits: function (query) {
|
|
this.units_loading = true
|
|
this.$http.get("{% url 'api:unit-list' %}" + '?query=' + query + '&limit=10').then((response) => {
|
|
this.units = response.data;
|
|
//TODO add back code to include custom created ingredients
|
|
this.units_loading = false
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
searchFoods: function (query) {
|
|
this.foods_loading = true
|
|
this.$http.get("{% url 'api:food-list' %}" + '?query=' + query + '&limit=10').then((response) => {
|
|
this.foods = response.data
|
|
//TODO add back code to include custom created ingredients
|
|
|
|
this.foods_loading = false
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock %} |