cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some small ui stuff

Browse Source
This commit is contained in:
vabene1111
2022-02-21 18:29:23 +01:00
parent e04d672750
commit 0d98c77301
2 changed files with 136 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/helper/recipe_url_import.py
View File

@ -33,7 +33,7 @@ def get_from_scraper(scrape, request):
except Exception: except Exception:
description = '' description = ''
recipe_json['description'] = parse_description(description) recipe_json['description'] = parse_description(description)[:512]
recipe_json['internal'] = True recipe_json['internal'] = True
try: try:

191
vue/src/apps/ImportView/ImportView.vue
View File

@ -11,70 +11,127 @@
<div class="col col-md-12"> <div class="col col-md-12">
<b-tabs content-class="mt-3"> <b-tabs content-class="mt-3">
<b-tab v-bind:title="$t('Website')" active> <b-tab v-bind:title="$t('Website')" active>
<h6>Website</h6>
<b-input-group> <b-card no-body>
<b-input v-model="website_url" placeholder="Website URL" <b-card-header header-tag="header" class="p-1" role="tab">
@paste="loadRecipe()"></b-input> <b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
<b-input-group-append> </b-card-header>
<b-button variant="primary" @click="loadRecipe()"><i class="fas fa-search"></i> <b-collapse id="id_accordion_url" visible accordion="url_import_accordion" role="tabpanel">
</b-button> <b-card-body>
</b-input-group-append> <b-input-group>
</b-input-group> <b-input v-model="website_url" placeholder="Website URL"
@paste="loadRecipe()"></b-input>
<b-input-group-append>
<b-button variant="primary" @click="loadRecipe()"><i
class="fas fa-search"></i>
</b-button>
</b-input-group-append>
</b-input-group>
<a href="#" @click="clearRecentImports()">Clear recent imports</a> <a href="#" @click="clearRecentImports()">Clear recent imports</a>
<ul> <ul>
<li v-for="x in recent_urls" v-bind:key="x"> <li v-for="x in recent_urls" v-bind:key="x">
<a href="#" @click="website_url=x; loadRecipe()">{{ x }}</a> <a href="#" @click="website_url=x; loadRecipe()">{{ x }}</a>
</li> </li>
</ul> </ul>
</b-card-body>
</b-collapse>
</b-card>
<h6>Options</h6> <b-card no-body>
<!-- preview column --> <b-card-header header-tag="header" class="p-1" role="tab">
<div class="row"> <b-button block v-b-toggle.id_accordion_add_options variant="info">Additional Options</b-button>
<div class="col col-md-12" v-if="recipe_json !== undefined"> </b-card-header>
Images <b-collapse id="id_accordion_add_options" accordion="url_import_accordion" role="tabpanel">
<b-card-body v-if="recipe_json !== undefined"> <!-- TODO disable/show message if not imported yet -->
<div class="row"> <div class="row">
<div class="col col-md-12 text-center"> <div class="col col-md-12 text-center">
<b-img rounded fluid :src="recipe_json.image" <b-img rounded fluid :src="recipe_json.image"
style="max-height: 30vh"></b-img> style="max-height: 30vh"></b-img>
</div>
</div> </div>
</div>
<div class="row mt-1"> <div class="row mt-1">
<div class="col col-md-12 text-center"> <div class="col col-md-12 text-center">
<small class="text-muted">Click the image you want to import for this <small class="text-muted">Click the image you want to import for this
recipe</small> <!-- TODO localize --> recipe</small> <!-- TODO localize -->
</div>
<div class="col col-md-12 text-center">
<b-img v-for="i in recipe_images" rounded thumbnail fluid :src="i"
style="max-height: 10vh" v-bind:key="i"
@click="recipe_json.image = i"></b-img>
</div>
</div> </div>
<div class="col col-md-12 text-center">
<b-img v-for="i in recipe_images" rounded thumbnail fluid :src="i" <div class="row mt-2">
style="max-height: 10vh" v-bind:key="i" <div class="col col-6">
@click="recipe_json.image = i"></b-img> <b-card title="Used Keywords">
<b-list-group>
<draggable :list="recipe_json.keywords" group="keywords"
:empty-insert-threshold="10">
<b-list-group-item v-for="k in recipe_json.keywords"
v-bind:key="k.name">{{
k.label
}}
</b-list-group-item>
</draggable>
</b-list-group>
</b-card>
</div>
<div class="col col-6">
<b-card title="Unused Keywords">
<b-list-group>
<draggable :list="recipe_json.unused_keywords" group="keywords"
:empty-insert-threshold="10">
<b-list-group-item v-for="k in recipe_json.unused_keywords"
v-bind:key="k.name">{{
k.label
}}
</b-list-group-item>
</draggable>
</b-list-group>
</b-card>
</div>
</div> </div>
</div>
Steps
<div class="row">
<div class="col col-md-12">
<b-button @click="splitSteps('\n')">Split</b-button>
<b-list-group>
<b-list-group-item v-for="s in recipe_json.steps"
v-bind:key="s.instruction"><span
style="white-space: pre-wrap">{{ s.instruction }}</span>
</b-list-group-item>
</b-list-group>
</div>
Keywords </div>
<ul>
<li v-for="k in recipe_json.keywords" v-bind:key="k.name">{{ k.label }}</li> </b-card-body>
</ul> </b-collapse>
unused </b-card>
<ul>
<li v-for="k in recipe_json.unused_keywords" v-bind:key="k.name">{{ <b-card no-body>
k.label <b-card-header header-tag="header" class="p-1" role="tab">
}} <b-button block v-b-toggle.id_accordion_import variant="info">Import</b-button>
</li> </b-card-header>
</ul> <b-collapse id="id_accordion_import" visible accordion="url_import_accordion" role="tabpanel">
Steps <b-card-body>
<ul>
<li v-for="s in recipe_json.steps" v-bind:key="s">{{ s }}</li> <b-button-group>
</ul> <b-button @click="importRecipe()">Import & View</b-button>
</div> <b-button @click="importRecipe()">Import & Edit</b-button>
</div> <b-button @click="importRecipe()">Import & start new import</b-button>
</b-button-group>
</b-card-body>
</b-collapse>
</b-card>
<h6>Import</h6>
<b-button @click="importRecipe()">Import</b-button>
</b-tab> </b-tab>
<b-tab v-bind:title="$t('App')"> <b-tab v-bind:title="$t('App')">
@ -109,6 +166,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
import {resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils"; import {resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils";
import axios from "axios"; import axios from "axios";
import {ApiApiFactory} from "@/utils/openapi/api"; import {ApiApiFactory} from "@/utils/openapi/api";
import draggable from "vuedraggable";
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
@ -118,7 +176,9 @@ export default {
ResolveUrlMixin, ResolveUrlMixin,
ToastMixin, ToastMixin,
], ],
components: {}, components: {
draggable
},
data() { data() {
return { return {
LS_IMPORT_RECENT: 'import_recent_urls', //TODO use central helper to manage all local storage keys (and maybe even access) LS_IMPORT_RECENT: 'import_recent_urls', //TODO use central helper to manage all local storage keys (and maybe even access)
@ -146,9 +206,9 @@ export default {
*/ */
importRecipe: function () { importRecipe: function () {
let apiFactory = new ApiApiFactory() let apiFactory = new ApiApiFactory()
apiFactory.createRecipe(this.recipe_json).then(response => { apiFactory.createRecipe(this.recipe_json).then(response => { // save recipe
let recipe = response.data let recipe = response.data
apiFactory.imageRecipe(response.data.id, undefined, this.recipe_json.image).then(response => { apiFactory.imageRecipe(response.data.id, undefined, this.recipe_json.image).then(response => { // save recipe image
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
window.location = resolveDjangoUrl('edit_recipe', recipe.id) window.location = resolveDjangoUrl('edit_recipe', recipe.id)
}).catch(e => { }).catch(e => {
@ -209,6 +269,25 @@ export default {
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH, err.response.data.msg) StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH, err.response.data.msg)
}) })
}, },
/**
* Splits the steps of a given recipe at the split character (e.g. \n or \n\n)
* @param split_character: character to split steps at
*/
splitSteps: function (split_character) {
let steps = []
this.recipe_json.steps.forEach(step => {
step.instruction.split(split_character).forEach(part => {
steps.push({'instruction': part, 'ingredients': []})
})
})
this.recipe_json.steps.forEach(step => {
if (step.ingredients.length > 0) {
console.log('found ingredients', step.ingredients)
steps[0].ingredients = steps[0].ingredients.concat(step.ingredients)
}
})
this.recipe_json.steps = steps
},
/** /**
* Clear list of recently imported recipe urls * Clear list of recently imported recipe urls
*/ */