step functions
This commit is contained in:
@ -44,7 +44,8 @@
|
||||
<!-- OPTIONS -->
|
||||
<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" :disabled="recipe_json === undefined">Options
|
||||
<b-button block v-b-toggle.id_accordion_add_options variant="info"
|
||||
:disabled="recipe_json === undefined">Options
|
||||
</b-button>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_add_options" accordion="url_import_accordion"
|
||||
@ -107,19 +108,48 @@
|
||||
Steps
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<b-button @click="splitSteps('\n')">Split</b-button>
|
||||
<b-button @click="mergeSteps()">Merge all</b-button>
|
||||
|
||||
<b-list-group>
|
||||
<b-list-group-item v-for="s in recipe_json.steps"
|
||||
v-bind:key="s.instruction"><b-textarea
|
||||
style="white-space: pre-wrap" v-model="s.instruction" max-rows="10"> </b-textarea>
|
||||
<b-button disabled>Delete</b-button>
|
||||
<b-button disabled>Merge</b-button>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
<b-button @click="splitAllSteps('\n')" variant="secondary"><i class="far fa-object-ungroup"></i> All</b-button>
|
||||
<b-button @click="mergeAllSteps()" variant="primary"><i class="far fa-object-group"></i> all</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2" v-for="(s, index) in recipe_json.steps"
|
||||
v-bind:key="index">
|
||||
<div class="col col-md-4">
|
||||
<draggable :list="s.ingredients" group="ingredients"
|
||||
:empty-insert-threshold="10">
|
||||
<b-list-group-item v-for="i in s.ingredients"
|
||||
v-bind:key="i.original_text"><i
|
||||
class="far fa-arrows"></i> {{ i.original_text }}
|
||||
</b-list-group-item>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="col col-md-8">
|
||||
<b-input-group>
|
||||
<b-textarea
|
||||
style="white-space: pre-wrap" v-model="s.instruction"
|
||||
max-rows="10"></b-textarea>
|
||||
<b-input-group-append>
|
||||
<b-button variant="secondary" @click="splitStep(s,'\n')"><i class="far fa-object-ungroup"></i></b-button>
|
||||
<b-button variant="danger"
|
||||
@click="recipe_json.steps.splice(recipe_json.steps.findIndex(x => x === s),1)">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</b-button>
|
||||
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
|
||||
|
||||
<b-button @click="mergeStep(s)" variant="primary"
|
||||
v-if="index + 1 < recipe_json.steps.length"><i class="far fa-object-group"></i>
|
||||
</b-button>
|
||||
|
||||
<b-button variant="success"
|
||||
@click="recipe_json.steps.splice(recipe_json.steps.findIndex(x => x === s) +1,0,{ingredients:[], instruction: ''})">
|
||||
<i class="fas fa-plus"></i>
|
||||
</b-button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</b-card-body>
|
||||
@ -129,14 +159,15 @@
|
||||
<!-- ADVANCED OPTIONS -->
|
||||
<b-card no-body>
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-button block v-b-toggle.id_accordion_advanced_options variant="info" :disabled="recipe_json === undefined">Advanced Options</b-button>
|
||||
<b-button block v-b-toggle.id_accordion_advanced_options variant="info"
|
||||
:disabled="recipe_json === undefined">Advanced Options
|
||||
</b-button>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_advanced_options" visible accordion="url_import_accordion"
|
||||
role="tabpanel" v-model="collapse_visible.advanced_options">
|
||||
<b-card-body>
|
||||
|
||||
|
||||
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
@ -144,16 +175,18 @@
|
||||
<!-- IMPORT -->
|
||||
<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" :disabled="recipe_json === undefined">Import</b-button>
|
||||
<b-button block v-b-toggle.id_accordion_import variant="info"
|
||||
:disabled="recipe_json === undefined">Import
|
||||
</b-button>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_import" visible accordion="url_import_accordion"
|
||||
role="tabpanel" v-model="collapse_visible.import">
|
||||
<b-card-body>
|
||||
|
||||
<b-button-group>
|
||||
<b-button @click="importRecipe()">Import & View</b-button>
|
||||
<b-button disabled>Import & View</b-button>
|
||||
<b-button @click="importRecipe()">Import & Edit</b-button>
|
||||
<b-button @click="importRecipe()">Import & start new import</b-button>
|
||||
<b-button disabled>Import & start new import</b-button>
|
||||
</b-button-group>
|
||||
|
||||
</b-card-body>
|
||||
@ -189,10 +222,12 @@
|
||||
|
||||
<div class="input-group mt-4">
|
||||
<b-textarea class="form-control input-group-append" v-model="source_data" rows=10
|
||||
:placeholder="$t('paste_json')" style="font-size: 12px">
|
||||
:placeholder="$t('paste_json')" style="font-size: 12px">
|
||||
</b-textarea>
|
||||
</div>
|
||||
<b-button @click="loadRecipe()" variant="primary"><i class="fas fa-code"></i> {{ $t('Import') }} </b-button>
|
||||
<b-button @click="loadRecipe()" variant="primary"><i class="fas fa-code"></i>
|
||||
{{ $t('Import') }}
|
||||
</b-button>
|
||||
|
||||
</b-tab>
|
||||
<!-- Bookmarklet Tab -->
|
||||
@ -244,7 +279,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
tab_index: 0,
|
||||
collapse_visible : {
|
||||
collapse_visible: {
|
||||
url: true,
|
||||
options: false,
|
||||
advanced_options: false,
|
||||
@ -350,30 +385,46 @@ export default {
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Splits the steps of a given recipe at the split character (e.g. \n or \n\n)
|
||||
* utility function used by splitAllSteps and splitStep to split a single step object into multiple step objects
|
||||
* @param step: single step
|
||||
* @param split_character: character to split steps at
|
||||
* @return array of step objects
|
||||
*/
|
||||
splitStepObject: function (step, split_character) {
|
||||
let steps = []
|
||||
step.instruction.split(split_character).forEach(part => {
|
||||
if (part.trim() !== '') {
|
||||
steps.push({'instruction': part, 'ingredients': []})
|
||||
}
|
||||
})
|
||||
steps[0].ingredients = step.ingredients // put all ingredients from the original step in the ingredients of the first step of the split step list
|
||||
return steps
|
||||
},
|
||||
/**
|
||||
* Splits all 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) {
|
||||
splitAllSteps: function (split_character) {
|
||||
let steps = []
|
||||
this.recipe_json.steps.forEach(step => {
|
||||
step.instruction.split(split_character).forEach(part => {
|
||||
if (part.trim() !== ''){
|
||||
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)
|
||||
}
|
||||
steps = steps.concat(this.splitStepObject(step, split_character))
|
||||
})
|
||||
this.recipe_json.steps = steps
|
||||
},
|
||||
/**
|
||||
* Merge steps of a given recipe into one
|
||||
* Splits the given step at the split character (e.g. \n or \n\n)
|
||||
* @param step: step ingredients to split
|
||||
* @param split_character: character to split steps at
|
||||
*/
|
||||
mergeSteps: function (){
|
||||
splitStep: function (step, split_character) {
|
||||
let old_index = this.recipe_json.steps.findIndex(x => x === step)
|
||||
let new_steps = this.splitStepObject(step, split_character)
|
||||
this.recipe_json.steps.splice(old_index, 1, ...new_steps)
|
||||
},
|
||||
/**
|
||||
* Merge all steps of a given recipe into one
|
||||
*/
|
||||
mergeAllSteps: function () {
|
||||
let step = {'instruction': '', 'ingredients': []}
|
||||
this.recipe_json.steps.forEach(s => {
|
||||
step.instruction += s.instruction + '\n'
|
||||
@ -381,6 +432,18 @@ export default {
|
||||
})
|
||||
this.recipe_json.steps = [step]
|
||||
},
|
||||
/**
|
||||
* Merge two steps (the given and next one)
|
||||
*/
|
||||
mergeStep: function (step) {
|
||||
let step_index = this.recipe_json.steps.findIndex(x => x === step)
|
||||
let removed_steps = this.recipe_json.steps.splice(step_index, 2)
|
||||
|
||||
this.recipe_json.steps.splice(step_index, 0, {
|
||||
'instruction': removed_steps.flatMap(x => x.instruction).join('\n'),
|
||||
'ingredients': removed_steps.flatMap(x => x.ingredients)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Clear list of recently imported recipe urls
|
||||
*/
|
||||
|
Reference in New Issue
Block a user