mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-07 15:18:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

added ignore duplication option in import again

Browse Source
This commit is contained in:
vabene1111
2021-05-20 17:03:47 +02:00
parent 3340ef9ca4
commit be225d2b8c
1 changed files with 196 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
cookbook/templates/url_import.html
View File

@@ -14,7 +14,7 @@
<link rel="stylesheet" href="{% static 'css/vue-multiselect.min.css' %}"> <link rel="stylesheet" href="{% static 'css/vue-multiselect.min.css' %}">
<style> <style>
.tree-anchor { .tree-anchor {
width:90%; width: 90%;
} }
</style> </style>
@@ -25,40 +25,45 @@
<div id="app"> <div id="app">
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
<h2> {% trans 'Import' %}</h2> <h2> {% trans 'Import' %}</h2>
<a class="btn btn-outline-info btn-sm" <a class="btn btn-outline-info btn-sm"
style="height:50%" style="height:50%"
href="{% bookmarklet request %}" href="{% bookmarklet request %}"
title="{% trans 'Drag me to your bookmarks to import recipes from anywhere' %}"> title="{% trans 'Drag me to your bookmarks to import recipes from anywhere' %}">
<img src="{% static 'assets/favicon-16x16.png' %}">{% trans 'Bookmark Me!' %} </a> <img src="{% static 'assets/favicon-16x16.png' %}">{% trans 'Bookmark Me!' %} </a>
</div> </div>
<nav class="nav nav-pills flex-sm-row" style="margin-bottom:10px"> <nav class="nav nav-pills flex-sm-row" style="margin-bottom:10px">
<a class="nav-link active" href="#nav-url" data-toggle="tab" role="tab" aria-controls="nav-url" aria-selected="true" @click="mode='url'">URL</a> <a class="nav-link active" href="#nav-url" data-toggle="tab" role="tab" aria-controls="nav-url"
<a class="nav-link" href="#nav-app" data-toggle="tab" role="tab" aria-controls="nav-app" @click="mode='app'">App</a> aria-selected="true" @click="mode='url'">URL</a>
<a class="nav-link" href="#nav-source" data-toggle="tab" role="tab" aria-controls="nav-source" @click="mode='source'">Source</a> <a class="nav-link" href="#nav-app" data-toggle="tab" role="tab" aria-controls="nav-app"
<a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text" @click="mode='text'">Text</a> @click="mode='app'">App</a>
<a class="nav-link disabled" href="#nav-file" data-toggle="tab" role="tab" aria-controls="nav-file" @click="mode='file'">File</a> <a class="nav-link" href="#nav-source" data-toggle="tab" role="tab" aria-controls="nav-source"
@click="mode='source'">Source</a>
<a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text"
@click="mode='text'">Text</a>
<a class="nav-link disabled" href="#nav-file" data-toggle="tab" role="tab" aria-controls="nav-file"
@click="mode='file'">File</a>
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">
<!-- Import URL --> <!-- Import URL -->
<div class="tab-pane fade show active" id="nav-url" role="tabpanel"> <div class="tab-pane fade show active" id="nav-url" role="tabpanel">
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-info btn-sm active" @click="automatic=true"> <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
<input type="radio" autocomplete="off" checked> Automatic <input type="radio" autocomplete="off" checked> Automatic
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="automatic=false"> <label class="btn btn-outline-info btn-sm" @click="automatic=false">
<input type="radio" autocomplete="off"> Manual <input type="radio" autocomplete="off"> Manual
</label> </label>
</div> </div>
<div class="input-group my-2"> <div class="input-group my-2">
<input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}"> <input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
<div class="input-group-append"> <div class="input-group-append">
<button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button" <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
id="id_btn_search"><i class="fas fa-search"></i> id="id_btn_search"><i class="fas fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
@@ -66,56 +71,61 @@
<div class=" tab-pane fade show" id="nav-app" role="tabpanel"> <div class=" tab-pane fade show" id="nav-app" role="tabpanel">
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-info btn-sm active" @click="recipe_app='DEFAULT'"> <label class="btn btn-outline-info btn-sm active" @click="recipe_app='DEFAULT'">
<input type="radio" autocomplete="off" checked> Tandoor <input type="radio" autocomplete="off" checked> Tandoor
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='PAPRIKA'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='PAPRIKA'">
<input type="radio" autocomplete="off"> Paprika <input type="radio" autocomplete="off"> Paprika
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='NEXTCLOUD'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='NEXTCLOUD'">
<input type="radio" autocomplete="off"> Nextcloud Cookbook <input type="radio" autocomplete="off"> Nextcloud Cookbook
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALIE'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALIE'">
<input type="radio" autocomplete="off"> Mealie <input type="radio" autocomplete="off"> Mealie
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='CHOWDOWN'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='CHOWDOWN'">
<input type="radio" autocomplete="off"> Chowdown <input type="radio" autocomplete="off"> Chowdown
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='SAFRON'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='SAFRON'">
<input type="radio" autocomplete="off"> Safron <input type="radio" autocomplete="off"> Safron
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='CHEFTAP'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='CHEFTAP'">
<input type="radio" autocomplete="off"> Cheftap <input type="radio" autocomplete="off"> Cheftap
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='PEPPERPLATE'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='PEPPERPLATE'">
<input type="radio" autocomplete="off"> Pepperplate <input type="radio" autocomplete="off"> Pepperplate
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='RECIPESAGE'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='RECIPESAGE'">
<input type="radio" autocomplete="off"> Recipesage <input type="radio" autocomplete="off"> Recipesage
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='DOMESTICA'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='DOMESTICA'">
<input type="radio" autocomplete="off"> Domestica <input type="radio" autocomplete="off"> Domestica
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALMASTER'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALMASTER'">
<input type="radio" autocomplete="off"> Mealmaster <input type="radio" autocomplete="off"> Mealmaster
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='REZKONV'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='REZKONV'">
<input type="radio" autocomplete="off"> Rezkonv <input type="radio" autocomplete="off"> Rezkonv
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="recipe_app='RECETTETEK'"> <label class="btn btn-outline-info btn-sm" @click="recipe_app='RECETTETEK'">
<input type="radio" autocomplete="off"> RecetteTek <input type="radio" autocomplete="off"> RecetteTek
</label> </label>
</div> </div>
<b-form-checkbox v-model="import_duplicates" name="check-button" switch style="margin-top: 1vh">
{% trans 'To prevent duplicates recipes with the same name as existing ones are ignored. Check this box to import everything.' %}
</b-form-checkbox>
<b-form-file <b-form-file
class="my-2" class="my-2"
accept=".zip" accept=".zip"
multiple multiple
v-model="recipe_files" v-model="recipe_files"
placeholder="{% trans 'Select recipe files to import or drop them here...' %}" placeholder="{% trans 'Select recipe files to import or drop them here...' %}"
drop-placeholder="Drop recipe files here..."> drop-placeholder="Drop recipe files here...">
</b-form-file> </b-form-file>
<button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button" <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
id="id_btn_app"><i class="fas fa-file-archive"></i> {% trans 'Import' %} id="id_btn_app"><i class="fas fa-file-archive"></i> {% trans 'Import' %}
</button> </button>
</div> </div>
@@ -123,36 +133,38 @@
<div class=" tab-pane fade show" id="nav-source" role="tabpanel"> <div class=" tab-pane fade show" id="nav-source" role="tabpanel">
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-info btn-sm active" @click="automatic=true"> <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
<input type="radio" autocomplete="off" checked> Automatic <input type="radio" autocomplete="off" checked> Automatic
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="automatic=false"> <label class="btn btn-outline-info btn-sm" @click="automatic=false">
<input type="radio" autocomplete="off"> Manual <input type="radio" autocomplete="off"> Manual
</label> </label>
</div> </div>
<div class="input-group my-2"> <div class="input-group my-2">
<textarea class="form-control input-group-append" v-model="source_data" rows=10 placeholder="{% trans 'Paste json or html source here to load recipe.' %}" style="font-size: 12px"> <textarea class="form-control input-group-append" v-model="source_data" rows=10
placeholder="{% trans 'Paste json or html source here to load recipe.' %}"
style="font-size: 12px">
</textarea> </textarea>
</div> </div>
<button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button" <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %} id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %}
</button> </button>
</div> </div>
</div> </div>
<br/> <br/>
<div v-if="loading" class="text-center"> <div v-if="loading" class="text-center">
<br/> <br/>
<i class="fas fa-spinner fa-spin fa-8x"></i> <i class="fas fa-spinner fa-spin fa-8x"></i>
</div> </div>
<!-- recipe preview before Import --> <!-- recipe preview before Import -->
<div class="container-fluid" v-if="preview" id="manage_tree"> <div class="container-fluid" v-if="preview" id="manage_tree">
<div class="row"> <div class="row">
<div class="col" style="max-width:50%"> <div class="col" style="max-width:50%">
<!-- start of preview card --> <!-- start of preview card -->
<div class="card card-border-primary" > <div class="card card-border-primary">
<div class="card-header"> <div class="card-header">
<h3>{% trans 'Preview Recipe Data' %}</h3> <h3>{% trans 'Preview Recipe Data' %}</h3>
<div class='small text-muted'>{% trans 'Drag recipe attributes from the right into the appropriate box below.' %} </div> <div class='small text-muted'>{% trans 'Drag recipe attributes from the right into the appropriate box below.' %} </div>
@@ -163,12 +175,14 @@
<div class="card-header" v-b-toggle.collapse-name> <div class="card-header" v-b-toggle.collapse-name>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Name' %} {% trans 'Name' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.name=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.name=''"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Text dragged here will be appended to the name.'%}</div> <div class="small text-muted">{% trans 'Text dragged here will be appended to the name.' %}</div>
</div> </div>
<b-collapse id="collapse-name" visible class="mt-2"> <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-body drop-zone" @drop="replacePreview('name', $event)"
@dragover.prevent @dragenter.prevent>
<div class="card-text">[[recipe_json.name]]</div> <div class="card-text">[[recipe_json.name]]</div>
</div> </div>
</b-collapse> </b-collapse>
@@ -178,12 +192,14 @@
<div class="card-header" v-b-toggle.collapse-description> <div class="card-header" v-b-toggle.collapse-description>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Description' %} {% trans 'Description' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.description=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.description=''" title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Text dragged here will be appended to the description.'%}</div> <div class="small text-muted">{% trans 'Text dragged here will be appended to the description.' %}</div>
</div> </div>
<b-collapse id="collapse-description" visible class="mt-2"> <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-body drop-zone" @drop="replacePreview('description', $event)"
@dragover.prevent @dragenter.prevent>
<div class="card-text">[[recipe_json.description]]</div> <div class="card-text">[[recipe_json.description]]</div>
</div> </div>
</b-collapse> </b-collapse>
@@ -193,61 +209,78 @@
<div class="card-header" v-b-toggle.collapse-kw> <div class="card-header" v-b-toggle.collapse-kw>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Keywords' %} {% trans 'Keywords' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.keywords=[]" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.keywords=[]" title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Keywords dragged here will be appended to current list'%}</div> <div class="small text-muted">{% trans 'Keywords dragged here will be appended to current list' %}</div>
</div> </div>
<b-collapse id="collapse-kw" visible class="mt-2"> <b-collapse id="collapse-kw" visible class="mt-2">
<div class="card-body drop-zone" @drop="replacePreview('keywords', $event)" @dragover.prevent @dragenter.prevent> <div class="card-body drop-zone" @drop="replacePreview('keywords', $event)"
@dragover.prevent @dragenter.prevent>
<div v-for="kw in recipe_json.keywords"> <div v-for="kw in recipe_json.keywords">
<div class="card-text">[[kw.text]] </div> <div class="card-text">[[kw.text]]</div>
</div> </div>
</div> </div>
</b-collapse> </b-collapse>
</div> </div>
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header" v-b-toggle.collapse-image style="display:flex; justify-content:space-between;"> <div class="card-header" v-b-toggle.collapse-image
style="display:flex; justify-content:space-between;">
{% trans 'Image' %} {% trans 'Image' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.image=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.image=''"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<b-collapse id="collapse-image" visible class="mt-2"> <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> <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"> <img class="card-img" v-bind:src="[[recipe_json.image]]" alt="Recipe Image">
</div> </div>
</b-collapse> </b-collapse>
</div> </div>
<div class = "row mb-2"> <div class="row mb-2">
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header p-1" style="display:flex; justify-content:space-between;"> <div class="card-header p-1"
style="display:flex; justify-content:space-between;">
{% trans 'Servings' %} {% trans 'Servings' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.servings=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.servings=''"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="card-body p-2 drop-zone" @drop="replacePreview('servings', $event)" @dragover.prevent @dragenter.prevent> <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 class="card-text">[[recipe_json.servings]]</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header p-1" style="display:flex; justify-content:space-between;"> <div class="card-header p-1"
style="display:flex; justify-content:space-between;">
{% trans 'Prep Time' %} {% trans 'Prep Time' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.prepTime=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.prepTime=''"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="card-body p-2 drop-zone" @drop="replacePreview('prepTime', $event)" @dragover.prevent @dragenter.prevent> <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 class="card-text">[[recipe_json.prepTime]]</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header p-1" style="display:flex; justify-content:space-between;"> <div class="card-header p-1"
style="display:flex; justify-content:space-between;">
{% trans 'Cook Time' %} {% trans 'Cook Time' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.cookTime=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.cookTime=''"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="card-body p-2 drop-zone" @drop="replacePreview('cookTime', $event)" @dragover.prevent @dragenter.prevent> <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 class="card-text">[[recipe_json.cookTime]]</div>
</div> </div>
</div> </div>
@@ -258,15 +291,18 @@
<div class="card-header" v-b-toggle.collapse-ing> <div class="card-header" v-b-toggle.collapse-ing>
<div class="row px-3" style="display:flex; justify-content:space-between;"> <div class="row px-3" style="display:flex; justify-content:space-between;">
{% trans 'Ingredients' %} {% trans 'Ingredients' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.recipeIngredient=[]" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.recipeIngredient=[]"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Ingredients dragged here will be appended to current list.'%}</div> <div class="small text-muted">{% trans 'Ingredients dragged here will be appended to current list.' %}</div>
</div> </div>
<b-collapse id="collapse-ing" visible class="mt-2"> <b-collapse id="collapse-ing" visible class="mt-2">
<div class="card-body drop-zone" @drop="replacePreview('ingredients', $event)" @dragover.prevent @dragenter.prevent> <div class="card-body drop-zone" @drop="replacePreview('ingredients', $event)"
@dragover.prevent @dragenter.prevent>
<ul class="list-group list-group"> <ul class="list-group list-group">
<div v-for="i in recipe_json.recipeIngredient"> <div v-for="i in recipe_json.recipeIngredient">
<li class="row border-light" > <li class="row border-light">
<div class="col-sm-1 border">[[i.amount]]</div> <div class="col-sm-1 border">[[i.amount]]</div>
<div class="col-sm border">[[i.unit.text]]</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.ingredient.text]]</div>
@@ -280,14 +316,17 @@
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header" v-b-toggle.collapse-instructions> <div class="card-header" v-b-toggle.collapse-instructions>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Instructions' %} {% trans 'Instructions' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.recipeInstructions=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;"
@click="recipe_json.recipeInstructions=''"
title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Recipe instructions dragged here will be appended to current instructions.'%}</div> <div class="small text-muted">{% trans 'Recipe instructions dragged here will be appended to current instructions.' %}</div>
</div> </div>
<b-collapse id="collapse-instructions" visible class="mt-2"> <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-body drop-zone" @drop="replacePreview('instructions', $event)"
@dragover.prevent @dragenter.prevent>
<div class="card-text">[[recipe_json.recipeInstructions]]</div> <div class="card-text">[[recipe_json.recipeInstructions]]</div>
</div> </div>
</b-collapse> </b-collapse>
@@ -296,11 +335,12 @@
</div> </div>
<br/> <br/>
<!-- end of preview card --> <!-- end of preview card -->
<button @click="showRecipe()" class="btn btn-primary shadow-none" type="button" style="margin-bottom: 2vh" <button @click="showRecipe()" class="btn btn-primary shadow-none" type="button"
id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %} style="margin-bottom: 2vh"
id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %}
</button> </button>
</div> </div>
<!-- start of source data --> <!-- start of source data -->
<div class="col" style="max-width:50%;"> <div class="col" style="max-width:50%;">
<div class="card card-border-primary sticky-top" style="z-index: 100;"> <div class="card card-border-primary sticky-top" style="z-index: 100;">
@@ -312,55 +352,58 @@
</div> </div>
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-info btn-sm active" @click="preview_type='json'"> <label class="btn btn-outline-info btn-sm active" @click="preview_type='json'">
<input type="radio" autocomplete="off" checked> json <input type="radio" autocomplete="off" checked> json
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="preview_type='html'"> <label class="btn btn-outline-info btn-sm" @click="preview_type='html'">
<input type="radio" autocomplete="off"> html <input type="radio" autocomplete="off"> html
</label> </label>
<label class="btn btn-outline-info btn-sm" @click="preview_type='image'"> <label class="btn btn-outline-info btn-sm" @click="preview_type='image'">
<input type="radio" autocomplete="off"> images <input type="radio" autocomplete="off"> images
</label> </label>
</div> </div>
<i :class="[show_blank ? 'fa-chevron-up' : 'fa-chevron-down', 'fas']" <i :class="[show_blank ? 'fa-chevron-up' : 'fa-chevron-down', 'fas']"
style="cursor:pointer;" style="cursor:pointer;"
@click="show_blank=!show_blank" @click="show_blank=!show_blank"
title="{% trans 'Show Blank Field' %}"></i> title="{% trans 'Show Blank Field' %}"></i>
<div class="card-body p-1"> <div class="card-body p-1">
<div class="card card-border-primary" v-if="show_blank"> <div class="card card-border-primary" v-if="show_blank">
<div class="card-header"> <div class="card-header">
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Blank Field' %} {% trans 'Blank Field' %}
<i class="fas fa-eraser justify-content-end" style="cursor:pointer;" @click="blank_field=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser justify-content-end" style="cursor:pointer;"
@click="blank_field=''" title="{% trans 'Clear Contents' %}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Items dragged to Blank Field will be appended.'%}</div> <div class="small text-muted">{% trans 'Items dragged to Blank Field will be appended.' %}</div>
</div> </div>
<div class="card-body drop-zone" <div class="card-body drop-zone"
@drop="replacePreview('blank', $event)" @drop="replacePreview('blank', $event)"
@dragover.prevent @dragover.prevent
@dragenter.prevent @dragenter.prevent
draggable draggable
@dragstart="htmlDragStart($event)"> @dragstart="htmlDragStart($event)">
[[blank_field]] [[blank_field]]
</div> </div>
</div> </div>
<!-- start of json data --> <!-- start of json data -->
<v-jstree v-if="preview_type=='json'" :data="recipe_tree" <v-jstree v-if="preview_type=='json'" :data="recipe_tree"
text-field-name="name" text-field-name="name"
collapse:true collapse:true
draggable draggable
@item-drag-start="itemDragStart" @item-drag-start="itemDragStart"
@item-click="itemClick"> @item-click="itemClick">
<template scope="_"> <template scope="_">
<div class="col" @click.ctrl="customItemClickWithCtrl"> <div class="col" @click.ctrl="customItemClickWithCtrl">
<div class="row clearfix" style="width:100%" > <div class="row clearfix" style="width:100%">
<div class="col-es" style="align-right"> <div class="col-es" style="align-right">
<button style="border: 0px; background-color: transparent; cursor: pointer;" <button style="border: 0px; background-color: transparent; cursor: pointer;"
@click="deleteNode(_.vm, _.model, $event)"><i class="fas fa-minus-square" style="color:red"></i></button> @click="deleteNode(_.vm, _.model, $event)"><i
class="fas fa-minus-square" style="color:red"></i></button>
</div> </div>
<div class="col overflow-hidden"> <div class="col overflow-hidden">
<i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i> <i :class="_.vm.themeIconClasses" role="presentation"
v-if="!_.model.loading"></i>
{% verbatim %} {% verbatim %}
[[_.model.name]] [[_.model.name]]
{% endverbatim %} {% endverbatim %}
</div> </div>
</div> </div>
@@ -371,25 +414,27 @@
<!-- start of html data --> <!-- start of html data -->
<div v-if="preview_type=='html'"> <div v-if="preview_type=='html'">
<ul class="list-group list-group-flush" v-for="(txt, key) in recipe_html"> <ul class="list-group list-group-flush" v-for="(txt, key) in recipe_html">
<div class="list-group-item bg-light m-0 small" <div class="list-group-item bg-light m-0 small"
draggable draggable
@dragstart="htmlDragStart($event)" @dragstart="htmlDragStart($event)"
style="display:flex; justify-content:space-between;"> style="display:flex; justify-content:space-between;">
[[txt]] [[txt]]
<i class="fas fa-minus-square" style="cursor:pointer; color:red" @click="$delete(recipe_html, key)" title="{% trans 'Delete Text'%}"></i> <i class="fas fa-minus-square" style="cursor:pointer; color:red"
</div> @click="$delete(recipe_html, key)" title="{% trans 'Delete Text' %}"></i>
</div>
</ul> </ul>
</div> </div>
<!-- start of images --> <!-- start of images -->
<div v-if="preview_type=='image'"> <div v-if="preview_type=='image'">
<ul class="list-group list-group-flush" v-for="(img, key) in images"> <ul class="list-group list-group-flush" v-for="(img, key) in images">
<div class="list-group-item bg-light m-0 small" <div class="list-group-item bg-light m-0 small"
draggable draggable
@dragstart="imageDragStart($event)" @dragstart="imageDragStart($event)"
style="display:flex; justify-content:space-between;"> style="display:flex; justify-content:space-between;">
<img class="card-img" v-bind:src=[[img]] alt="Image"> <img class="card-img" v-bind:src=[[img]] alt="Image">
<i class="fas fa-minus-square" style="cursor:pointer; color:red" @click="$delete(images, key)" title="{% trans 'Delete image'%}"></i> <i class="fas fa-minus-square" style="cursor:pointer; color:red"
</div> @click="$delete(images, key)" title="{% trans 'Delete image' %}"></i>
</div>
</ul> </ul>
</div> </div>
</div> </div>
@@ -409,7 +454,8 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="id_description">{% trans 'Recipe Description' %}</label> <label for="id_description">{% trans 'Recipe Description' %}</label>
<textarea id="id_description" class="form-control" rows="3" v-model="recipe_data.description"></textarea> <textarea id="id_description" class="form-control" rows="3"
v-model="recipe_data.description"></textarea>
</div> </div>
<div class="row"> <div class="row">
@@ -660,6 +706,7 @@
show_blank: false, show_blank: false,
blank_field: '', blank_field: '',
recipe_app: 'DEFAULT', recipe_app: 'DEFAULT',
import_duplicates: false,
recipe_files: [], recipe_files: [],
images: [], images: [],
mode: 'url' mode: 'url'
@@ -675,7 +722,7 @@
this.searchKeywords('') this.searchKeywords('')
this.searchUnits('') this.searchUnits('')
this.searchIngredients('') this.searchIngredients('')
let uri = window.location.search.substring(1); let uri = window.location.search.substring(1);
let params = new URLSearchParams(uri); let params = new URLSearchParams(uri);
q = params.get("id") q = params.get("id")
if (q) { if (q) {
@@ -701,10 +748,11 @@
this.loading = true this.loading = true
this.preview = false this.preview = false
this.$http.post("{% url 'api_recipe_from_source' %}", { this.$http.post("{% url 'api_recipe_from_source' %}", {
'url': this.remote_url, 'url': this.remote_url,
'data': this.source_data, 'data': this.source_data,
'auto':this.automatic, 'auto': this.automatic,
'mode':this.mode}, {emulateJSON: true}).then((response) => { 'mode': this.mode
}, {emulateJSON: true}).then((response) => {
this.recipe_json = response.data['recipe_json']; this.recipe_json = response.data['recipe_json'];
this.recipe_tree = response.data['recipe_tree']; this.recipe_tree = response.data['recipe_tree'];
this.recipe_html = response.data['recipe_html']; this.recipe_html = response.data['recipe_html'];
@@ -730,7 +778,7 @@
this.makeToast(gettext('Error'), msg, 'danger') this.makeToast(gettext('Error'), msg, 'danger')
}) })
}, },
loadBookmarklet: function(id_bkmk) { loadBookmarklet: function (id_bkmk) {
this.error = undefined this.error = undefined
this.loading = true this.loading = true
this.$http.get("{% url 'api:bookmarkletimport-detail' 1237654 %}".replace('1237654', id_bkmk)).then((response) => { this.$http.get("{% url 'api:bookmarkletimport-detail' 1237654 %}".replace('1237654', id_bkmk)).then((response) => {
@@ -745,16 +793,16 @@
this.makeToast(gettext('Error'), gettext('There was an error loading bookmarklet!') + err.bodyText, 'danger') this.makeToast(gettext('Error'), gettext('There was an error loading bookmarklet!') + err.bodyText, 'danger')
}) })
}, },
deleteBookmarklet: function(id_bkmk) { deleteBookmarklet: function (id_bkmk) {
this.error = undefined this.error = undefined
this.$http.delete("{% url 'api:bookmarkletimport-list' %}" + id_bkmk +"/").then((response) => { this.$http.delete("{% url 'api:bookmarkletimport-list' %}" + id_bkmk + "/").then((response) => {
}).catch((err) => { }).catch((err) => {
this.error = err.data this.error = err.data
console.log(err) console.log(err)
this.makeToast(gettext('Error'), gettext('There was an error deleting bookmarklet!') + err.bodyText, 'danger') this.makeToast(gettext('Error'), gettext('There was an error deleting bookmarklet!') + err.bodyText, 'danger')
}) })
}, },
showRecipe: function() { showRecipe: function () {
this.preview = false this.preview = false
this.recipe_data = this.recipe_json this.recipe_data = this.recipe_json
}, },
@@ -774,7 +822,7 @@
this.importing_recipe = true this.importing_recipe = true
this.$set(this.recipe_data, 'all_keywords', this.all_keywords) this.$set(this.recipe_data, 'all_keywords', this.all_keywords)
this.$http.post(`{% url 'data_import_url' %}`, this.recipe_data).then((response) => { this.$http.post(`{% url 'data_import_url' %}`, this.recipe_data).then((response) => {
let uri = window.location.search.substring(1); let uri = window.location.search.substring(1);
let params = new URLSearchParams(uri); let params = new URLSearchParams(uri);
q = params.get("id") q = params.get("id")
if (q) { if (q) {
@@ -787,16 +835,17 @@
this.makeToast(gettext('Error'), gettext('An error occurred while trying to import this recipe!') + err.bodyText, 'danger') this.makeToast(gettext('Error'), gettext('An error occurred while trying to import this recipe!') + err.bodyText, 'danger')
}) })
}, },
importAppRecipe: function() { importAppRecipe: function () {
this.error = undefined this.error = undefined
this.preview = false this.preview = false
this.loading = true this.loading = true
let formData = new FormData(); let formData = new FormData();
let files = [] let files = []
formData.append('type', this.recipe_app); formData.append('type', this.recipe_app);
for( var i = 0; i < this.recipe_files.length; i++ ){ formData.append('duplicates', this.import_duplicates)
for (var i = 0; i < this.recipe_files.length; i++) {
formData.append('files', this.recipe_files[i]); formData.append('files', this.recipe_files[i]);
} }
this.$http.post("{% url 'view_import' %}", formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => { this.$http.post("{% url 'view_import' %}", formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
window.location.href = "{% url 'view_import_response' 1237654 %}".replace('1237654', response.data['import_id']) window.location.href = "{% url 'view_import_response' 1237654 %}".replace('1237654', response.data['import_id'])
}).catch((err) => { }).catch((err) => {
@@ -891,7 +940,7 @@
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger') this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
}) })
}, },
deleteNode: function (node ,item, e) { deleteNode: function (node, item, e) {
e.stopPropagation() e.stopPropagation()
var index = node.parentItem.indexOf(item) var index = node.parentItem.indexOf(item)
node.parentItem.splice(index, 1) node.parentItem.splice(index, 1)
@@ -899,12 +948,12 @@
itemClick: function (node, item, e) { itemClick: function (node, item, e) {
this.makeToast(gettext('Details'), node.model.value, 'info') this.makeToast(gettext('Details'), node.model.value, 'info')
}, },
itemDragStart (node,item,e) { itemDragStart(node, item, e) {
if (node.model.children.length > 0) { if (node.model.children.length > 0) {
e.dataTransfer.setData('hasChildren', true) e.dataTransfer.setData('hasChildren', true)
} }
e.dataTransfer.setData('value', node.model.value) e.dataTransfer.setData('value', node.model.value)
}, },
htmlDragStart: function (e) { htmlDragStart: function (e) {
e.dataTransfer.setData('value', e.target.innerText) e.dataTransfer.setData('value', e.target.innerText)
@@ -912,10 +961,10 @@
imageDragStart: function (e) { imageDragStart: function (e) {
e.dataTransfer.setData('value', e.target.src) e.dataTransfer.setData('value', e.target.src)
}, },
replacePreview: function(field, e) { replacePreview: function (field, e) {
v = e.dataTransfer.getData('value') v = e.dataTransfer.getData('value')
if (e.dataTransfer.getData('hasChildren')) { if (e.dataTransfer.getData('hasChildren')) {
this.makeToast(gettext('Error'), gettext('Items with children cannot be dropped here!') , 'danger') this.makeToast(gettext('Error'), gettext('Items with children cannot be dropped here!'), 'danger')
return return
} }
switch (field) { switch (field) {
@@ -926,31 +975,31 @@
this.recipe_json.description = [this.recipe_json.description, v].filter(Boolean).join(" "); this.recipe_json.description = [this.recipe_json.description, v].filter(Boolean).join(" ");
break; break;
case 'image': case 'image':
this.recipe_json.image=v this.recipe_json.image = v
break; break;
case 'keywords': case 'keywords':
let new_keyword = {'text': v, 'id': null} let new_keyword = {'text': v, 'id': null}
this.recipe_json.keywords.push(new_keyword) this.recipe_json.keywords.push(new_keyword)
break; break;
case 'servings': case 'servings':
this.recipe_json.servings=parseInt(v.match(/\b\d+\b/)[0]) this.recipe_json.servings = parseInt(v.match(/\b\d+\b/)[0])
break; break;
case 'prepTime': case 'prepTime':
this.recipe_json.prepTime=v this.recipe_json.prepTime = v
break; break;
case 'cookTime': case 'cookTime':
this.recipe_json.cookTime=v this.recipe_json.cookTime = v
break; break;
case 'ingredients': case 'ingredients':
this.$http.post('{% url 'api_ingredient_from_string' %}', {text: v}, {emulateJSON: true}).then((response) => { this.$http.post('{% url 'api_ingredient_from_string' %}', {text: v}, {emulateJSON: true}).then((response) => {
let new_ingredient={ let new_ingredient = {
unit: {id: Math.random() * 1000, text: response.body.unit}, unit: {id: Math.random() * 1000, text: response.body.unit},
amount: String(response.body.amount), amount: String(response.body.amount),
ingredient: {id: Math.random() * 1000, text: response.body.food}, ingredient: {id: Math.random() * 1000, text: response.body.food},
note: response.body.note, note: response.body.note,
original: v original: v
} }
this.recipe_json.recipeIngredient.push(new_ingredient) this.recipe_json.recipeIngredient.push(new_ingredient)
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
this.makeToast(gettext('Error'), gettext('Something went wrong.'), 'danger') this.makeToast(gettext('Error'), gettext('Something went wrong.'), 'danger')