mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
combined json import and source import
This commit is contained in:
smilerz
@@ -25,72 +25,54 @@
|
||||
<h2> {% trans 'Import' %} </h2>
|
||||
<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">URL</a>
|
||||
<a class="nav-link" href="#nav-ldjson" data-toggle="tab" role="tab" aria-controls="nav-ldjson">ld+json</a>
|
||||
<a class="nav-link" href="#nav-json" data-toggle="tab" role="tab" aria-controls="nav-json">json</a>
|
||||
<a class="nav-link disabled" href="#nav-html" data-toggle="tab" role="tab" aria-controls="nav-html">HTML</a>
|
||||
<a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text">text</a>
|
||||
<a class="nav-link disabled" href="#nav-pdf" data-toggle="tab" role="tab" aria-controls="nav-pdf">PDF</a>
|
||||
<a class="nav-link" href="#nav-source" data-toggle="tab" role="tab" aria-controls="nav-source">Source</a>
|
||||
<a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text">Text</a>
|
||||
<a class="nav-link disabled" href="#nav-file" data-toggle="tab" role="tab" aria-controls="nav-file">File</a>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<!-- Import URL -->
|
||||
<div class="row tab-pane fade show active" id="nav-url" role="tabpanel">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group mb-3">
|
||||
<input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
|
||||
<div class="input-group-append">
|
||||
<button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_search"><i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade show active" id="nav-url" role="tabpanel">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-outline-info btn-sm active" @click="automatic=true">
|
||||
<input type="radio" name="auto" id="auto" autocomplete="off" checked> Automatic
|
||||
</label>
|
||||
|
||||
<!-- Automatically import LD+JSON -->
|
||||
<div class="row tab-pane fade show" id="nav-ldjson" role="tabpanel">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group input-group-lg">
|
||||
<textarea class="form-control input-group-append" v-model="raw_data" rows=10 placeholder="{% trans 'Paste ld+json here to parse recipe automatically.' %}" style="font-size: 12px">
|
||||
</textarea>
|
||||
</div>
|
||||
<br>
|
||||
<button @click="loadRecipeJson()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %}
|
||||
<label class="btn btn-outline-info btn-sm disabled" @click="automatic=false">
|
||||
<input type="radio" name="auto" id="manual" autocomplete="off"> Manual
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
|
||||
<div class="input-group-append">
|
||||
<button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_search"><i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manually import from JSON -->
|
||||
<div class="row tab-pane fade show" id="nav-json" role="tabpanel">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group input-group-lg">
|
||||
<textarea class="form-control input-group-append" v-model="raw_data" rows=10
|
||||
placeholder="{% trans 'To parse recipe manually: Paste JSON document here or a web page source that contains one or more JSON elements here.' %}" style="font-size: 12px">
|
||||
</textarea>
|
||||
</div>
|
||||
<br>
|
||||
<button @click="loadPreviewRaw()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_raw"><i class="fas fa-code"></i> {% trans 'Preview Import' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manually import from HTML -->
|
||||
<div class="row tab-pane fade show" id="nav-html" role="tabpanel">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group input-group-lg">
|
||||
<textarea class="form-control input-group-append" v-model="raw_data" rows=10 placeholder="{% trans 'Paste html source here to parse recipe manually.' %}" style="font-size: 12px">
|
||||
</textarea>
|
||||
</div>
|
||||
<br>
|
||||
<button @click="loadPreviewRaw()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_HTML"><i class="fas fa-code"></i> {% trans 'Preview Import' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Import JSON or HTML -->
|
||||
<div class=" tab-pane fade show" id="nav-source" role="tabpanel">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-outline-info btn-sm active" @click="automatic=true">
|
||||
<input type="radio" name="auto" id="auto" autocomplete="off" checked> Automatic
|
||||
</label>
|
||||
|
||||
<label class="btn btn-outline-info btn-sm" @click="automatic=false">
|
||||
<input type="radio" name="auto" id="manual" autocomplete="off"> Manual
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<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>
|
||||
</div>
|
||||
<br>
|
||||
<button @click="loadSource()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@@ -101,9 +83,7 @@
|
||||
</div>
|
||||
|
||||
<!-- recipe preview before Import -->
|
||||
<div class="container-fluid" v-if="parsed" id="manage_tree">
|
||||
|
||||
<h2></h2>
|
||||
<div class="container-fluid" v-if="preview" id="manage_tree">
|
||||
<div class="row">
|
||||
<div class="col" style="max-width:50%">
|
||||
<div class="card card-border-primary" >
|
||||
@@ -116,6 +96,7 @@
|
||||
<div class="card mb-2">
|
||||
<div class="card-header" style="display:flex; justify-content:space-between;">
|
||||
{% trans 'Name' %}
|
||||
<!-- this and subsequent delete commands should be fixed to identify which model attribute the element is referring to -->
|
||||
<i class="fas fa-eraser" style="cursor:pointer;" @click="deletePreview('name')" title="{% trans 'Clear Contents'%}"></i>
|
||||
</div>
|
||||
|
||||
@@ -232,11 +213,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<button @click="loadRecipeRaw()" class="btn btn-primary shadow-none" type="button"
|
||||
<!-- end of preview card -->
|
||||
<button @click="loadRecipeManual()" class="btn btn-primary shadow-none" type="button"
|
||||
id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- start of json tree -->
|
||||
<div class="col" style="max-width:50%">
|
||||
<div class="card card-border-primary">
|
||||
<div class="card-header">
|
||||
@@ -274,9 +257,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of json tree -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- end of recipe preview before Import -->
|
||||
|
||||
<template v-if="recipe_data !== undefined">
|
||||
@@ -518,7 +501,7 @@
|
||||
el: '#app',
|
||||
data: {
|
||||
remote_url: '',
|
||||
raw_data: undefined,
|
||||
source_data: undefined,
|
||||
keywords: [],
|
||||
keywords_loading: false,
|
||||
units: [],
|
||||
@@ -528,11 +511,12 @@
|
||||
recipe_data: undefined,
|
||||
error: undefined,
|
||||
loading: false,
|
||||
parsed: false,
|
||||
preview: false,
|
||||
all_keywords: false,
|
||||
importing_recipe: false,
|
||||
recipe_json: undefined,
|
||||
recipe_tree: undefined,
|
||||
automatic: true
|
||||
},
|
||||
directives: {
|
||||
tabindex: {
|
||||
@@ -564,12 +548,10 @@
|
||||
this.images = []
|
||||
this.error = undefined
|
||||
this.loading = true
|
||||
this.preview = false
|
||||
this.$http.post("{% url 'api_recipe_from_source' %}", {
|
||||
'url': this.remote_url,
|
||||
'data': this.source_data,
|
||||
'auto':this.automatic,
|
||||
'mode':this.mode}, {emulateJSON: true}).then((response) => {
|
||||
if (this.automatic) {
|
||||
console.log('true')
|
||||
}
|
||||
this.$http.post("{% url 'api_recipe_from_url' %}", {'url': this.remote_url}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response.data)
|
||||
this.recipe_json = response.data['recipe_json'];
|
||||
this.recipe_tree = response.data['recipe_tree'];
|
||||
@@ -595,53 +577,43 @@
|
||||
this.makeToast(gettext('Error'), msg, 'danger')
|
||||
})
|
||||
},
|
||||
loadRecipeJson: function () {
|
||||
loadSource: function() {
|
||||
this.recipe_data = undefined
|
||||
this.error = undefined
|
||||
this.loading = true
|
||||
this.$http.post("{% url 'api_recipe_from_json' %}", {'json': this.raw_data}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response.data)
|
||||
this.recipe_data = response.data;
|
||||
this.loading = false
|
||||
}).catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
||||
})
|
||||
},
|
||||
loadRecipeRaw: function () {
|
||||
this.error = undefined
|
||||
this.loading = true
|
||||
this.parsed = false
|
||||
this.recipe_json['@type'] = "Recipe"
|
||||
this.$http.post("{% url 'api_recipe_from_json' %}", {'json': JSON.stringify(this.recipe_json)}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response.data)
|
||||
this.recipe_data = response.data;
|
||||
this.loading = false
|
||||
}).catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
||||
})
|
||||
},
|
||||
loadPreviewRaw: function () {
|
||||
this.recipe_json = undefined
|
||||
this.recipe_tree = undefined
|
||||
this.error = undefined
|
||||
|
||||
this.loading = true
|
||||
this.$http.post("{% url 'api_manual_recipe_from_json' %}", {'data': this.raw_data}, {emulateJSON: true}).then((response) => {
|
||||
this.$http.post("{% url 'api_recipe_from_source' %}", {'data': this.source_data, 'auto':this.automatic}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response.data)
|
||||
this.recipe_json = response.data['recipe_json'];
|
||||
this.recipe_tree = response.data['recipe_tree'];
|
||||
if (this.automatic) {
|
||||
this.recipe_data = response.data['recipe_json'];
|
||||
this.preview = false
|
||||
} else {
|
||||
this.recipe_json = response.data['recipe_json'];
|
||||
this.recipe_tree = response.data['recipe_tree'];
|
||||
this.preview = true
|
||||
}
|
||||
this.loading = false
|
||||
this.parsed = true
|
||||
}).catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
this.parsed = false
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
||||
})
|
||||
},
|
||||
loadRecipeManual: function () {
|
||||
this.error = undefined
|
||||
this.preview = false
|
||||
this.loading = true
|
||||
this.recipe_json['@type'] = "Recipe"
|
||||
this.$http.post("{% url 'api_recipe_from_source' %}", {'data': JSON.stringify(this.recipe_json), 'auto':'true'}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response.data)
|
||||
this.recipe_data = response.data['recipe_json'];
|
||||
this.loading = false
|
||||
this.preview = false
|
||||
}).catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
||||
})
|
||||
@@ -869,16 +841,6 @@
|
||||
break;
|
||||
}
|
||||
},
|
||||
parseIngredient: function(txt) {
|
||||
this.$http.post('{% url 'api_ingredient_from_string' %}', {text: txt}, {emulateJSON: true}).then((response) => {
|
||||
console.log(response)
|
||||
let ing = [response.body.amount, response.body.unit, response.body.food, response.body.note]
|
||||
return ing
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('Something went wrong.'), 'danger')
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user