changed source import to match field structure of recipe model
first imports working
This commit is contained in:
vabene1111
@ -32,218 +32,21 @@
|
||||
<h6>Options</h6>
|
||||
<!-- preview column -->
|
||||
<div class="row">
|
||||
<div class="col col-md-6" v-if="recipe_json !== undefined">
|
||||
<div >
|
||||
<!-- start of preview card -->
|
||||
<div class="card card-border-primary">
|
||||
<div class="card-header">
|
||||
<h3>Recipe Preview</h3> <!-- TODO localize -->
|
||||
<div class='small text-muted'>Drag recipe attributes from the
|
||||
right into the appropriate box below.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" v-b-toggle.collapse-name>
|
||||
<div class="row px-3" style="justify-content:space-between;">
|
||||
Name
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.name=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">Text dragged here will
|
||||
be appended to the name.
|
||||
</div>
|
||||
</div>
|
||||
<b-collapse id="collapse-name" visible class="mt-2">
|
||||
<div class="card-body drop-zone"
|
||||
@drop="replacePreview('name', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div class="card-text">{{recipe_json.name}}</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" v-b-toggle.collapse-description>
|
||||
<div class="row px-3" style="justify-content:space-between;">
|
||||
{% trans 'Description' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.description=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">{% trans 'Text dragged here will
|
||||
be appended to the description.' %}
|
||||
</div>
|
||||
</div>
|
||||
<b-collapse id="collapse-description" visible class="mt-2">
|
||||
<div class="card-body drop-zone"
|
||||
@drop="replacePreview('description', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div class="card-text">{{recipe_json.description}}</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" v-b-toggle.collapse-kw>
|
||||
<div class="row px-3" style="justify-content:space-between;">
|
||||
{% trans 'Keywords' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.keywords=[]"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">{% trans 'Keywords dragged here
|
||||
will be appended to current list' %}
|
||||
</div>
|
||||
</div>
|
||||
<b-collapse id="collapse-kw" visible class="mt-2">
|
||||
<div class="card-body drop-zone"
|
||||
@drop="replacePreview('keywords', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div v-for="kw in recipe_json.keywords" v-bind:key="kw.id">
|
||||
<div class="card-text">{{ kw.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" v-b-toggle.collapse-image
|
||||
style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Image' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.image=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<b-collapse id="collapse-image" visible class="mt-2">
|
||||
<div class="card-body m-0 p-0 drop-zone"
|
||||
@drop="replacePreview('image', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<img class="card-img" v-bind:src="recipe_json.image"
|
||||
alt="Recipe Image">
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header p-1"
|
||||
style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Servings' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.servings=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="card-body p-2 drop-zone"
|
||||
@drop="replacePreview('servings', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div class="card-text">{{recipe_json.servings}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header p-1"
|
||||
style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Prep Time' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.prepTime=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="card-body p-2 drop-zone"
|
||||
@drop="replacePreview('prepTime', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div class="card-text">{{recipe_json.prepTime}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header p-1"
|
||||
style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Cook Time' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.cookTime=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="card-body p-2 drop-zone"
|
||||
@drop="replacePreview('cookTime', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div class="card-text">{{recipe_json.cookTime}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" v-b-toggle.collapse-ing>
|
||||
<div class="row px-3"
|
||||
style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Ingredients' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.recipeIngredient=[]"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">{% trans 'Ingredients dragged here
|
||||
will be appended to current list.' %}
|
||||
</div>
|
||||
</div>
|
||||
<b-collapse id="collapse-ing" visible class="mt-2">
|
||||
<div class="card-body drop-zone"
|
||||
@drop="replacePreview('ingredients', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<ul class="list-group list-group">
|
||||
<div v-for="i in recipe_json.recipeIngredient" v-bind:key="i.id">
|
||||
<li class="row border-light">
|
||||
<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>
|
||||
</b-collapse>
|
||||
</div>
|
||||
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" v-b-toggle.collapse-instructions>
|
||||
<div class="row px-3" style="justify-content:space-between;">
|
||||
{% trans 'Instructions' %}
|
||||
<i class="fas fa-eraser" style="cursor:pointer;"
|
||||
@click="recipe_json.recipeInstructions=''"
|
||||
title="{% trans 'Clear Contents' %}"></i>
|
||||
</div>
|
||||
<div class="small text-muted">{% trans 'Recipe instructions
|
||||
dragged here will be appended to current instructions.' %}
|
||||
</div>
|
||||
</div>
|
||||
<b-collapse id="collapse-instructions" visible class="mt-2">
|
||||
<div class="card-body drop-zone"
|
||||
@drop="replacePreview('instructions', $event)"
|
||||
@dragover.prevent @dragenter.prevent>
|
||||
<div class="card-text">{{recipe_json.recipeInstructions}}
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<!-- end of preview card -->
|
||||
<button @click="showRecipe()" class="btn btn-primary shadow-none" type="button"
|
||||
style="margin-bottom: 2vh"
|
||||
id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col col-md-12" v-if="recipe_json !== undefined">
|
||||
Images
|
||||
Keywords
|
||||
<ul>
|
||||
<li v-for="k in recipe_json.keywords" v-bind:key="k">{{k}}</li>
|
||||
</ul>
|
||||
Steps
|
||||
<ul>
|
||||
<li v-for="s in recipe_json.steps" v-bind:key="s">{{s}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h6>Import</h6>
|
||||
<b-button @click="importRecipe()">Import</b-button>
|
||||
|
||||
</b-tab>
|
||||
<b-tab v-bind:title="$t('App')">
|
||||
@ -277,6 +80,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
import {resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils";
|
||||
import axios from "axios";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
@ -293,8 +97,8 @@ export default {
|
||||
website_url: '',
|
||||
recent_urls: [],
|
||||
source_data: '',
|
||||
recipe_data: undefined,
|
||||
recipe_json: undefined,
|
||||
recipe_data: undefined,
|
||||
recipe_tree: undefined,
|
||||
recipe_images: [],
|
||||
automatic: true,
|
||||
@ -309,6 +113,18 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Import recipe based on the data configured by the client
|
||||
*/
|
||||
importRecipe: function () {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
apiFactory.createRecipe(this.recipe_json).then(response => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
window.location = resolveDjangoUrl('edit_recipe', response.data.id)
|
||||
}).catch(err => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Requests the recipe to be loaded form the source (url/data) from the server
|
||||
* Updates all variables to contain what they need to render either simple preview or manual mapping mode
|
||||
@ -340,7 +156,7 @@ export default {
|
||||
this.recipe_json = response.data['recipe_json'];
|
||||
this.recipe_tree = response.data['recipe_tree'];
|
||||
this.recipe_html = response.data['recipe_html'];
|
||||
this.recipe_images = response.data['images']; //todo change on backend as well after old view is deprecated
|
||||
this.recipe_images = response.data['recipe_images']; //todo change on backend as well after old view is deprecated
|
||||
if (this.automatic) {
|
||||
this.recipe_data = this.recipe_json;
|
||||
this.preview = false
|
||||
|
||||
@ -308,6 +308,8 @@
|
||||
<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" />
|
||||
<!-- TODO improve rendering/add switch to toggle on/off -->
|
||||
<div class="small text-muted" v-if="ingredient.original_text">{{ingredient.original_text}}</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-0 handle align-self-start">
|
||||
<button type="button" class="btn btn-lg shadow-none pr-0 pl-1 pr-md-2 pl-md-2"><i class="fas fa-arrows-alt-v"></i></button>
|
||||
|
||||
@ -746,6 +746,12 @@ export interface Ingredient {
|
||||
* @memberof Ingredient
|
||||
*/
|
||||
no_amount?: boolean;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof Ingredient
|
||||
*/
|
||||
original_text?: string | null;
|
||||
}
|
||||
/**
|
||||
*
|
||||
@ -1905,6 +1911,12 @@ export interface RecipeIngredients {
|
||||
* @memberof RecipeIngredients
|
||||
*/
|
||||
no_amount?: boolean;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof RecipeIngredients
|
||||
*/
|
||||
original_text?: string | null;
|
||||
}
|
||||
/**
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user