mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
testing around
This commit is contained in:
vabene1111
@@ -28,309 +28,314 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<h3>{% trans 'Edit Recipe' %}</h3>
|
<h3>{% trans 'Edit Recipe' %}</h3>
|
||||||
|
|
||||||
<div id="app">
|
|
||||||
<div v-if="recipe">
|
<div v-if="recipe">
|
||||||
|
|
||||||
<div class="row">
|
<div v-if="!recipe" class="text-center">
|
||||||
<div class="col-md-12">
|
<br/>
|
||||||
<label for="id_name"> {% trans 'Name' %}</label>
|
<i class="fas fa-spinner fa-spin fa-8x"></i>
|
||||||
<input class="form-control" id="id_name" v-model="recipe.name">
|
</div>
|
||||||
</div>
|
<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>
|
||||||
|
<br/>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<img src="{% if recipe.image %}{{ recipe.image.url }}{% endif %}" id="id_image"
|
<img src="{% if recipe.image %}{{ recipe.image.url }}{% endif %}" id="id_image"
|
||||||
class="img img-fluid img-responsive"
|
class="img img-fluid img-responsive"
|
||||||
style="max-height: 20vh">
|
style="max-height: 20vh">
|
||||||
<input type="file" @change="imageChanged">
|
<input type="file" @change="imageChanged">
|
||||||
</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">
|
|
||||||
<br/>
|
|
||||||
<label for="id_name"> {% trans 'Waiting Time' %}</label>
|
|
||||||
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">
|
|
||||||
<br/>
|
|
||||||
<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 Keywords' %}"
|
|
||||||
label="label"
|
|
||||||
track-by="id"
|
|
||||||
id="id_keywords"
|
|
||||||
:multiple="true"
|
|
||||||
:loading="keywords_loading"
|
|
||||||
@search-change="searchKeywords">
|
|
||||||
</multiselect>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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">
|
||||||
|
<br/>
|
||||||
|
<label for="id_name"> {% trans 'Waiting Time' %}</label>
|
||||||
|
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">
|
||||||
|
<br/>
|
||||||
|
<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 Keywords' %}"
|
||||||
|
label="label"
|
||||||
|
track-by="id"
|
||||||
|
id="id_keywords"
|
||||||
|
:multiple="true"
|
||||||
|
:loading="keywords_loading"
|
||||||
|
@search-change="searchKeywords">
|
||||||
|
</multiselect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<draggable :list="recipe.steps" group="steps"
|
<draggable :list="recipe.steps" group="steps"
|
||||||
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
|
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
|
||||||
|
|
||||||
<div v-for="step, step_index in recipe.steps" style="margin-top: 1vh" class="card">
|
<div v-for="step, step_index in recipe.steps" style="margin-top: 1vh" class="card">
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-11">
|
<div class="col-11">
|
||||||
<h4 class="handle">
|
<h4 class="handle">
|
||||||
<i class="fas fa-paragraph" v-if="step.type == 'TEXT'"></i>
|
<i class="fas fa-paragraph" v-if="step.type == 'TEXT'"></i>
|
||||||
<i class="fas fa-clock" v-if="step.type == 'TIME'"></i>
|
<i class="fas fa-clock" v-if="step.type == 'TIME'"></i>
|
||||||
<template v-if="step.name !== ''">[[step.name]]</template>
|
<template v-if="step.name !== ''">[[step.name]]</template>
|
||||||
<template v-else>{% trans 'Step' %} [[step_index+1]]</template>
|
<template v-else>{% trans 'Step' %} [[step_index+1]]</template>
|
||||||
|
|
||||||
</h4>
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col-1" style="text-align: right">
|
||||||
|
<a class="btn shadow-none btn-lg" href="#" role="button"
|
||||||
|
id="dropdownMenuLink"
|
||||||
|
data-toggle="dropdown" aria-haspopup="true"
|
||||||
|
aria-expanded="false">
|
||||||
|
<i class="fas fa-ellipsis-v text-muted"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-right"
|
||||||
|
aria-labelledby="dropdownMenuLink">
|
||||||
|
<button class="dropdown-item" @click="removeStep(step)"><i
|
||||||
|
class="fa fa-trash fa-fw"></i> {% trans 'Delete Step' %}</button>
|
||||||
|
|
||||||
|
<button class="dropdown-item" @click="moveStep(step, (step_index - 1))"
|
||||||
|
v-if="step_index > 0">
|
||||||
|
<i class="fa fa-arrow-up fa-fw"></i> {% trans 'Move Up' %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="dropdown-item"
|
||||||
|
@click="moveStep(step, (step_index + 1))"
|
||||||
|
v-if="step_index != (recipe.steps.length - 1)">
|
||||||
|
<i class="fa fa-arrow-down fa-fw"></i> {% trans 'Move Down' %}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1" style="text-align: right">
|
|
||||||
<a class="btn shadow-none btn-lg" href="#" role="button"
|
</div>
|
||||||
id="dropdownMenuLink"
|
</div>
|
||||||
data-toggle="dropdown" aria-haspopup="true"
|
|
||||||
aria-expanded="false">
|
<div class="row">
|
||||||
<i class="fas fa-ellipsis-v text-muted"></i>
|
<div class="col-md-8">
|
||||||
</a>
|
<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 class="col-md-4">
|
||||||
|
<label for="id_type"> {% trans 'Step Type' %}</label>
|
||||||
|
<select class="form-control" id="id_type" v-model="step.type">
|
||||||
|
<option value="TEXT">{% trans 'Text' %}</option>
|
||||||
|
<option value="TIME">{% trans 'Time' %}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right"
|
<template v-if="step.type == 'TIME'">
|
||||||
aria-labelledby="dropdownMenuLink">
|
<div class="row" style="margin-top: 12px">
|
||||||
<button class="dropdown-item" @click="removeStep(step)"><i
|
<div class="col-md-12">
|
||||||
class="fa fa-trash fa-fw"></i> {% trans 'Delete Step' %}</button>
|
<label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label>
|
||||||
|
<input class="form-control" v-model="step.time"
|
||||||
<button class="dropdown-item" @click="moveStep(step, (step_index - 1))"
|
:id="'id_step_' + step.id + '_time'">
|
||||||
v-if="step_index > 0">
|
|
||||||
<i class="fa fa-arrow-up fa-fw"></i> {% trans 'Move Up' %}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="dropdown-item"
|
|
||||||
@click="moveStep(step, (step_index + 1))"
|
|
||||||
v-if="step_index != (recipe.steps.length - 1)">
|
|
||||||
<i class="fa fa-arrow-down fa-fw"></i> {% trans 'Move Down' %}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row" style="margin-top: 1vh">
|
||||||
<div class="row">
|
<div class="col-md-12">
|
||||||
<div class="col-md-8">
|
<label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
|
||||||
<label :for="'id_step_' + step.id + 'name'">{% trans 'Step Name' %}</label>
|
<textarea class="form-control" rows="2" v-model="step.instruction"
|
||||||
<input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
|
:id="'id_instruction_' + step.id"></textarea>
|
||||||
</div>
|
<small class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/">docs here</a>' %}</small>
|
||||||
<div class="col-md-4">
|
|
||||||
<label for="id_type"> {% trans 'Step Type' %}</label>
|
|
||||||
<select class="form-control" id="id_type" v-model="step.type">
|
|
||||||
<option value="TEXT">{% trans 'Text' %}</option>
|
|
||||||
<option value="TIME">{% trans 'Time' %}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="step.type == 'TEXT'">
|
||||||
<template v-if="step.type == 'TIME'">
|
<div class="row" style="margin-top: 12px">
|
||||||
<div class="row" style="margin-top: 12px">
|
<div class="col-md-12">
|
||||||
<div class="col-md-12">
|
<div class="jumbotron" style="padding: 16px">
|
||||||
<label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label>
|
<div class="row">
|
||||||
<input class="form-control" v-model="step.time"
|
<div class="col-md-12">
|
||||||
:id="'id_step_' + step.id + '_time'">
|
<h4>{% trans 'Ingredients' %}</h4>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row" style="margin-top: 1vh">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
|
|
||||||
<textarea class="form-control" rows="2" v-model="step.instruction"
|
|
||||||
:id="'id_instruction_' + step.id"></textarea>
|
|
||||||
<small class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/">docs here</a>' %}</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="step.type == 'TEXT'">
|
|
||||||
<div class="row" style="margin-top: 12px">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="jumbotron" style="padding: 16px">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<h4>{% trans 'Ingredients' %}</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12" style="margin-top: 8px">
|
|
||||||
<draggable :list="step.ingredients" group="ingredients"
|
|
||||||
:empty-insert-threshold="10" handle=".handle"
|
|
||||||
@sort="sortIngredients(step)">
|
|
||||||
<div v-for="ingredient, index in step.ingredients"
|
|
||||||
:key="ingredient.id">
|
|
||||||
|
|
||||||
<hr class="d-md-none"/>
|
</div>
|
||||||
<div class="d-flex">
|
<div class="row">
|
||||||
<div class="flex-grow-0 handle align-self-start">
|
<div class="col-md-12" style="margin-top: 8px">
|
||||||
<button type="button" class="btn btn-lg shadow-none"><i
|
<draggable :list="step.ingredients" group="ingredients"
|
||||||
class="fas fa-arrows-alt-v "></i></button>
|
:empty-insert-threshold="10" handle=".handle"
|
||||||
|
@sort="sortIngredients(step)">
|
||||||
|
<div v-for="ingredient, index in step.ingredients"
|
||||||
|
:key="ingredient.id">
|
||||||
|
|
||||||
|
<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: 4px; margin-right: 4px">
|
||||||
|
<div class="col-lg-2 col-md-6 small-padding"
|
||||||
|
v-if="!ingredient.is_header">
|
||||||
|
<input class="form-control"
|
||||||
|
v-model="ingredient.amount"
|
||||||
|
type="number"
|
||||||
|
v-if="!ingredient.no_amount">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-fill row"
|
<div class="col-lg-2 col-md-6 small-padding"
|
||||||
style="margin-left: 4px; margin-right: 4px">
|
v-if="!ingredient.is_header">
|
||||||
<div class="col-lg-2 col-md-6 small-padding"
|
<multiselect
|
||||||
v-if="!ingredient.is_header">
|
v-tabindex
|
||||||
<input class="form-control"
|
ref="unit"
|
||||||
v-model="ingredient.amount"
|
v-model="ingredient.unit"
|
||||||
type="number"
|
:options="units"
|
||||||
v-if="!ingredient.no_amount">
|
:close-on-select="true"
|
||||||
</div>
|
:clear-on-select="true"
|
||||||
|
:allow-empty="true"
|
||||||
<div class="col-lg-2 col-md-6 small-padding"
|
:preserve-search="true"
|
||||||
v-if="!ingredient.is_header">
|
placeholder="{% trans 'Select Unit' %}"
|
||||||
<multiselect
|
tag-placeholder="{% trans 'Select' %}"
|
||||||
v-tabindex
|
:taggable="true"
|
||||||
ref="unit"
|
@tag="addUnitType"
|
||||||
v-model="ingredient.unit"
|
:id="`unit_${step_index}_${index}`"
|
||||||
:options="units"
|
label="name"
|
||||||
:close-on-select="true"
|
track-by="name"
|
||||||
:clear-on-select="true"
|
:multiple="false"
|
||||||
:allow-empty="true"
|
:loading="units_loading"
|
||||||
:preserve-search="true"
|
@search-change="searchUnits">
|
||||||
placeholder="{% trans 'Select Unit' %}"
|
</multiselect>
|
||||||
tag-placeholder="{% trans 'Select' %}"
|
|
||||||
:taggable="true"
|
|
||||||
@tag="addUnitType"
|
|
||||||
:id="`unit_${step_index}_${index}`"
|
|
||||||
label="name"
|
|
||||||
track-by="name"
|
|
||||||
:multiple="false"
|
|
||||||
:loading="units_loading"
|
|
||||||
@search-change="searchUnits">
|
|
||||||
</multiselect>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-md-6 small-padding"
|
|
||||||
v-if="!ingredient.is_header">
|
|
||||||
<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' %}"
|
|
||||||
:taggable="true"
|
|
||||||
@tag="addFoodType"
|
|
||||||
:id="`ingredient_${step_index}_${index}`"
|
|
||||||
label="name"
|
|
||||||
track-by="name"
|
|
||||||
:multiple="false"
|
|
||||||
:loading="foods_loading"
|
|
||||||
@search-change="searchFoods">
|
|
||||||
</multiselect>
|
|
||||||
</div>
|
|
||||||
<div class="small-padding"
|
|
||||||
v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
|
|
||||||
<input class="form-control"
|
|
||||||
v-model="ingredient.note"
|
|
||||||
placeholder="{% trans 'Note' %}">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 small-padding"
|
||||||
<div class="flex-grow-0 small-padding">
|
v-if="!ingredient.is_header">
|
||||||
<a class="btn shadow-none btn-lg" href="#" role="button"
|
<multiselect
|
||||||
id="dropdownMenuLink"
|
v-tabindex
|
||||||
data-toggle="dropdown" aria-haspopup="true"
|
ref="food"
|
||||||
aria-expanded="false">
|
v-model="ingredient.food"
|
||||||
<i class="fas fa-ellipsis-v text-muted"></i>
|
:options="foods"
|
||||||
</a>
|
:close-on-select="true"
|
||||||
|
:clear-on-select="true"
|
||||||
<div class="dropdown-menu dropdown-menu-right"
|
:allow-empty="true"
|
||||||
aria-labelledby="dropdownMenuLink">
|
:preserve-search="true"
|
||||||
<button type="button" class="dropdown-item"
|
placeholder="{% trans 'Select Food' %}"
|
||||||
@click="removeIngredient(step, ingredient)">
|
tag-placeholder="{% trans 'Select' %}"
|
||||||
<i
|
:taggable="true"
|
||||||
class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
|
@tag="addFoodType"
|
||||||
</button>
|
:id="`ingredient_${step_index}_${index}`"
|
||||||
|
label="name"
|
||||||
<button type="button" class="dropdown-item"
|
track-by="name"
|
||||||
v-if="!ingredient.is_header "
|
:multiple="false"
|
||||||
@click="ingredient.is_header = true"><i
|
:loading="foods_loading"
|
||||||
class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
|
@search-change="searchFoods">
|
||||||
</button>
|
</multiselect>
|
||||||
|
</div>
|
||||||
<button type="button" class="dropdown-item"
|
<div class="small-padding"
|
||||||
v-if="ingredient.is_header "
|
v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
|
||||||
@click="ingredient.is_header = false"><i
|
<input class="form-control"
|
||||||
class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
|
v-model="ingredient.note"
|
||||||
</button>
|
placeholder="{% trans 'Note' %}">
|
||||||
|
|
||||||
<button type="button" class="dropdown-item"
|
|
||||||
v-if="!ingredient.no_amount "
|
|
||||||
@click="ingredient.no_amount = true"><i
|
|
||||||
class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" class="dropdown-item"
|
|
||||||
v-if="ingredient.no_amount "
|
|
||||||
@click="ingredient.no_amount = false"><i
|
|
||||||
class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</draggable>
|
<div class="flex-grow-0 small-padding">
|
||||||
</div>
|
<a class="btn shadow-none btn-lg" href="#" role="button"
|
||||||
|
id="dropdownMenuLink"
|
||||||
|
data-toggle="dropdown" aria-haspopup="true"
|
||||||
|
aria-expanded="false">
|
||||||
|
<i class="fas fa-ellipsis-v text-muted"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-right"
|
||||||
|
aria-labelledby="dropdownMenuLink">
|
||||||
|
<button type="button" class="dropdown-item"
|
||||||
|
@click="removeIngredient(step, ingredient)">
|
||||||
|
<i
|
||||||
|
class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="dropdown-item"
|
||||||
|
v-if="!ingredient.is_header "
|
||||||
|
@click="ingredient.is_header = true"><i
|
||||||
|
class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="dropdown-item"
|
||||||
|
v-if="ingredient.is_header "
|
||||||
|
@click="ingredient.is_header = false"><i
|
||||||
|
class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="dropdown-item"
|
||||||
|
v-if="!ingredient.no_amount "
|
||||||
|
@click="ingredient.no_amount = true"><i
|
||||||
|
class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="dropdown-item"
|
||||||
|
v-if="ingredient.no_amount "
|
||||||
|
@click="ingredient.no_amount = false"><i
|
||||||
|
class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</draggable>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="col-md-2 offset-md-5"
|
<div class="row">
|
||||||
style="text-align: center; margin-top: 8px;">
|
<div class="col-md-2 offset-md-5"
|
||||||
<button class="btn btn-dark btn-block" @click="addIngredient(step)"><i
|
style="text-align: center; margin-top: 8px;">
|
||||||
class="fa fa-plus"></i>
|
<button class="btn btn-dark btn-block" @click="addIngredient(step)"><i
|
||||||
</button>
|
class="fa fa-plus"></i>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="col-md-12">
|
<div class="row">
|
||||||
<label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
|
<div class="col-md-12">
|
||||||
<textarea class="form-control" rows="8" v-model="step.instruction"
|
<label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
|
||||||
:id="'id_instruction_' + step.id"></textarea>
|
<textarea class="form-control" rows="8" v-model="step.instruction"
|
||||||
<small class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/">docs here</a>' %}</small>
|
:id="'id_instruction_' + step.id"></textarea>
|
||||||
</div>
|
<small class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/">docs here</a>' %}</small>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
|
||||||
</draggable>
|
|
||||||
|
|
||||||
<div class="row" style="margin-top: 1vh; margin-bottom: 2vh">
|
|
||||||
<div class="col-12">
|
|
||||||
<button type="button" @click="updateRecipe(true)"
|
|
||||||
class="btn btn-success shadow-none">{% trans 'Save & View' %}</button>
|
|
||||||
<button type="button" @click="updateRecipe(false)"
|
|
||||||
class="btn btn-info shadow-none">{% trans 'Save' %}</button>
|
|
||||||
<button type="button" @click="addStep()"
|
|
||||||
class="btn btn-primary shadow-none">{% trans 'Add Step' %}</button>
|
|
||||||
<a href="{% url 'view_recipe' recipe.pk %}" @click="addStep()"
|
|
||||||
class="btn btn-secondary shadow-none">{% trans 'View Recipe' %}</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</draggable>
|
||||||
|
|
||||||
|
<div class="row" style="margin-top: 1vh; margin-bottom: 2vh">
|
||||||
|
<div class="col-12">
|
||||||
|
<button type="button" @click="updateRecipe(true)"
|
||||||
|
class="btn btn-success shadow-none">{% trans 'Save & View' %}</button>
|
||||||
|
<button type="button" @click="updateRecipe(false)"
|
||||||
|
class="btn btn-info shadow-none">{% trans 'Save' %}</button>
|
||||||
|
<button type="button" @click="addStep()"
|
||||||
|
class="btn btn-primary shadow-none">{% trans 'Add Step' %}</button>
|
||||||
|
<a href="{% url 'view_recipe' recipe.pk %}" @click="addStep()"
|
||||||
|
class="btn btn-secondary shadow-none">{% trans 'View Recipe' %}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content_xl_right %}
|
{% block content_xl_right %}
|
||||||
@@ -355,7 +360,8 @@
|
|||||||
<div class="col-md-11">
|
<div class="col-md-11">
|
||||||
<h5><i class="fas fa-sort-amount-down-alt"></i> {% trans 'Steps' %}</h5>
|
<h5><i class="fas fa-sort-amount-down-alt"></i> {% trans 'Steps' %}</h5>
|
||||||
<draggable :list="recipe.steps" group="steps_sorter"
|
<draggable :list="recipe.steps" group="steps_sorter"
|
||||||
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()" class="list-group" style="margin-top: 1vh">
|
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()" class="list-group"
|
||||||
|
style="margin-top: 1vh">
|
||||||
<div v-for="step, step_index in recipe.steps" class="list-group-item">
|
<div v-for="step, step_index in recipe.steps" class="list-group-item">
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
<div class="flex-grow-0 text-muted">
|
<div class="flex-grow-0 text-muted">
|
||||||
@@ -397,6 +403,7 @@
|
|||||||
foods_loading: false,
|
foods_loading: false,
|
||||||
units: [],
|
units: [],
|
||||||
units_loading: false,
|
units_loading: false,
|
||||||
|
message: '',
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
tabindex: {
|
tabindex: {
|
||||||
|
|||||||
@@ -215,7 +215,19 @@
|
|||||||
{% if recipe.steps.all|length > 1 %}
|
{% if recipe.steps.all|length > 1 %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12 text-muted">
|
<div class="col-md-12 text-muted">
|
||||||
<small>{% trans 'Step' %} {{ forloop.counter }}{% if s.name %} - {{ s.name }}{% endif %}</small>
|
<small>
|
||||||
|
{% if s.type == 'TEXT' %}
|
||||||
|
<i class="fas fa-paragraph fa-fw"></i>
|
||||||
|
{% elif s.type == 'TIME' %}
|
||||||
|
<i class="fas fa-clock fa-fw"></i>
|
||||||
|
{% endif %}
|
||||||
|
{% if s.name %}{{ s.name }}{% else %}{% trans 'Step' %}
|
||||||
|
{{ forloop.counter }}{% endif %}
|
||||||
|
{% if s.type == 'TIME' %}
|
||||||
|
- {{ s.time }} {% trans 'Minutes' %}
|
||||||
|
{% endif %}
|
||||||
|
</small>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@@ -246,7 +258,6 @@
|
|||||||
width="100%"
|
width="100%"
|
||||||
height="700px"
|
height="700px"
|
||||||
style="border: none;"></iframe>
|
style="border: none;"></iframe>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if '.jpg' in recipe.file_path or '.png' in recipe.file_path or '.jpeg' in recipe.file_path %}
|
{% if '.jpg' in recipe.file_path or '.png' in recipe.file_path or '.jpeg' in recipe.file_path %}
|
||||||
|
|||||||
Reference in New Issue
Block a user