some small ui stuff
This commit is contained in:
vabene1111
@ -11,70 +11,127 @@
|
||||
<div class="col col-md-12">
|
||||
<b-tabs content-class="mt-3">
|
||||
<b-tab v-bind:title="$t('Website')" active>
|
||||
<h6>Website</h6>
|
||||
|
||||
<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>
|
||||
<b-card no-body>
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_url" visible accordion="url_import_accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<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>
|
||||
<ul>
|
||||
<li v-for="x in recent_urls" v-bind:key="x">
|
||||
<a href="#" @click="website_url=x; loadRecipe()">{{ x }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" @click="clearRecentImports()">Clear recent imports</a>
|
||||
<ul>
|
||||
<li v-for="x in recent_urls" v-bind:key="x">
|
||||
<a href="#" @click="website_url=x; loadRecipe()">{{ x }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<h6>Options</h6>
|
||||
<!-- preview column -->
|
||||
<div class="row">
|
||||
<div class="col col-md-12" v-if="recipe_json !== undefined">
|
||||
Images
|
||||
<b-card no-body>
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-button block v-b-toggle.id_accordion_add_options variant="info">Additional Options</b-button>
|
||||
</b-card-header>
|
||||
<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="col col-md-12 text-center">
|
||||
<b-img rounded fluid :src="recipe_json.image"
|
||||
style="max-height: 30vh"></b-img>
|
||||
<div class="row">
|
||||
<div class="col col-md-12 text-center">
|
||||
<b-img rounded fluid :src="recipe_json.image"
|
||||
style="max-height: 30vh"></b-img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-1">
|
||||
<div class="col col-md-12 text-center">
|
||||
<small class="text-muted">Click the image you want to import for this
|
||||
recipe</small> <!-- TODO localize -->
|
||||
<div class="row mt-1">
|
||||
<div class="col col-md-12 text-center">
|
||||
<small class="text-muted">Click the image you want to import for this
|
||||
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 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 class="row mt-2">
|
||||
<div class="col col-6">
|
||||
<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>
|
||||
|
||||
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
|
||||
<ul>
|
||||
<li v-for="k in recipe_json.keywords" v-bind:key="k.name">{{ k.label }}</li>
|
||||
</ul>
|
||||
unused
|
||||
<ul>
|
||||
<li v-for="k in recipe_json.unused_keywords" v-bind:key="k.name">{{
|
||||
k.label
|
||||
}}
|
||||
</li>
|
||||
</ul>
|
||||
Steps
|
||||
<ul>
|
||||
<li v-for="s in recipe_json.steps" v-bind:key="s">{{ s }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<b-card no-body>
|
||||
<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>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_import" visible accordion="url_import_accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
|
||||
<b-button-group>
|
||||
<b-button @click="importRecipe()">Import & View</b-button>
|
||||
<b-button @click="importRecipe()">Import & Edit</b-button>
|
||||
<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 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 axios from "axios";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
import draggable from "vuedraggable";
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
@ -118,7 +176,9 @@ export default {
|
||||
ResolveUrlMixin,
|
||||
ToastMixin,
|
||||
],
|
||||
components: {},
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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 () {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
apiFactory.createRecipe(this.recipe_json).then(response => {
|
||||
apiFactory.createRecipe(this.recipe_json).then(response => { // save recipe
|
||||
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)
|
||||
window.location = resolveDjangoUrl('edit_recipe', recipe.id)
|
||||
}).catch(e => {
|
||||
@ -209,6 +269,25 @@ export default {
|
||||
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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user