added ingredient auto sort feature
This commit is contained in:
vabene1111
parent
12a1f261db
commit
8307828528
1
.gitignore
vendored
1
.gitignore
vendored
@ -84,3 +84,4 @@ cookbook/static/vue
|
|||||||
vue/webpack-stats.json
|
vue/webpack-stats.json
|
||||||
cookbook/templates/sw.js
|
cookbook/templates/sw.js
|
||||||
.prettierignore
|
.prettierignore
|
||||||
|
vue/.yarn
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
<excludeFolder url="file://$MODULE_DIR$/staticfiles" />
|
<excludeFolder url="file://$MODULE_DIR$/staticfiles" />
|
||||||
<excludeFolder url="file://$MODULE_DIR$/venv" />
|
<excludeFolder url="file://$MODULE_DIR$/venv" />
|
||||||
</content>
|
</content>
|
||||||
<orderEntry type="jdk" jdkName="Python 3.9 (recipes)" jdkType="Python SDK" />
|
<orderEntry type="jdk" jdkName="Python 3.11 (recipes)" jdkType="Python SDK" />
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
</component>
|
</component>
|
||||||
<component name="TemplatesService">
|
<component name="TemplatesService">
|
||||||
|
|||||||
1
vue/.yarnrc.yml
Normal file
1
vue/.yarnrc.yml
Normal file
@ -0,0 +1 @@
|
|||||||
|
nodeLinker: node-modules
|
||||||
@ -24,6 +24,7 @@
|
|||||||
"mavon-editor": "^2.10.4",
|
"mavon-editor": "^2.10.4",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"prismjs": "^1.29.0",
|
"prismjs": "^1.29.0",
|
||||||
|
"string-similarity": "^4.0.4",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
"vue-class-component": "^7.2.3",
|
"vue-class-component": "^7.2.3",
|
||||||
"vue-click-outside": "^1.1.0",
|
"vue-click-outside": "^1.1.0",
|
||||||
@ -36,10 +37,10 @@
|
|||||||
"vue-property-decorator": "^9.1.2",
|
"vue-property-decorator": "^9.1.2",
|
||||||
"vue-sanitize": "^0.2.2",
|
"vue-sanitize": "^0.2.2",
|
||||||
"vue-simple-calendar": "^5.0.0",
|
"vue-simple-calendar": "^5.0.0",
|
||||||
|
"vue-template-compiler": "2.6.14",
|
||||||
"vue2-touch-events": "^3.2.2",
|
"vue2-touch-events": "^3.2.2",
|
||||||
"vuedraggable": "^2.24.3",
|
"vuedraggable": "^2.24.3",
|
||||||
"vuex": "^3.6.0",
|
"vuex": "^3.6.0",
|
||||||
"vue-template-compiler": "2.6.14",
|
|
||||||
"workbox-webpack-plugin": "^6.5.4"
|
"workbox-webpack-plugin": "^6.5.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -1,148 +1,182 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="recipe_json !== undefined" class="mt-2 mt-md-0">
|
<div v-if="recipe_json !== undefined" class="mt-2 mt-md-0">
|
||||||
<h5>Steps</h5>
|
<h5>Steps</h5>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col col-md-12 text-center">
|
<div class="col col-md-12 text-center">
|
||||||
<b-button @click="splitAllSteps('\n')" variant="secondary" v-b-tooltip.hover :title="$t('Split_All_Steps')"><i
|
<b-button @click="autoSortIngredients()" variant="secondary" v-b-tooltip.hover v-if="recipe_json.steps.length > 1"
|
||||||
class="fas fa-expand-arrows-alt"></i> {{ $t('All') }}
|
:title="$t('Auto_Sort_Help')"><i class="fas fa-random"></i> {{ $t('Auto_Sort') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
<b-button @click="mergeAllSteps()" variant="primary" class="ml-1" v-b-tooltip.hover :title="$t('Combine_All_Steps')"><i
|
<b-button @click="splitAllSteps('\n')" variant="secondary" class="ml-1" v-b-tooltip.hover
|
||||||
class="fas fa-compress-arrows-alt"></i> {{ $t('All') }}
|
:title="$t('Split_All_Steps')"><i
|
||||||
</b-button>
|
class="fas fa-expand-arrows-alt"></i> {{ $t('All') }}
|
||||||
</div>
|
</b-button>
|
||||||
</div>
|
<b-button @click="mergeAllSteps()" variant="primary" class="ml-1" v-b-tooltip.hover
|
||||||
<div class="row mt-2" v-for="(s, index) in recipe_json.steps"
|
:title="$t('Combine_All_Steps')"><i
|
||||||
v-bind:key="index">
|
class="fas fa-compress-arrows-alt"></i> {{ $t('All') }}
|
||||||
<div class="col col-md-4 d-none d-md-block">
|
</b-button>
|
||||||
<draggable :list="s.ingredients" group="ingredients"
|
</div>
|
||||||
:empty-insert-threshold="10">
|
|
||||||
<b-list-group-item v-for="i in s.ingredients"
|
|
||||||
v-bind:key="i.original_text"><i
|
|
||||||
class="fas fa-arrows-alt"></i> {{ i.original_text }}
|
|
||||||
</b-list-group-item>
|
|
||||||
</draggable>
|
|
||||||
</div>
|
|
||||||
<div class="col col-md-8 col-12">
|
|
||||||
<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="fas fa-expand-arrows-alt"></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>
|
|
||||||
|
|
||||||
<div class="text-center mt-1">
|
|
||||||
<b-button @click="mergeStep(s)" variant="primary"
|
|
||||||
v-if="index + 1 < recipe_json.steps.length"><i
|
|
||||||
class="fas fa-compress-arrows-alt"></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>
|
|
||||||
</div>
|
|
||||||
</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 d-none d-md-block">
|
||||||
|
<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="fas fa-arrows-alt"></i> {{ i.original_text }}
|
||||||
|
</b-list-group-item>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
<div class="col col-md-8 col-12">
|
||||||
|
<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="fas fa-expand-arrows-alt"></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>
|
||||||
|
|
||||||
|
<div class="text-center mt-1">
|
||||||
|
<b-button @click="mergeStep(s)" variant="primary"
|
||||||
|
v-if="index + 1 < recipe_json.steps.length"><i
|
||||||
|
class="fas fa-compress-arrows-alt"></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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
import draggable from "vuedraggable";
|
import draggable from "vuedraggable";
|
||||||
|
import stringSimilarity from "string-similarity"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ImportViewStepEditor",
|
name: "ImportViewStepEditor",
|
||||||
components: {
|
components: {
|
||||||
draggable
|
draggable
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
recipe: undefined
|
recipe: undefined
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
recipe_json: undefined
|
recipe_json: undefined
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
recipe_json: function () {
|
|
||||||
this.$emit('change', this.recipe_json)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.recipe_json = this.recipe
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 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_json at the split character (e.g. \n or \n\n)
|
|
||||||
* @param split_character: character to split steps at
|
|
||||||
*/
|
|
||||||
splitAllSteps: function (split_character) {
|
|
||||||
let steps = []
|
|
||||||
this.recipe_json.steps.forEach(step => {
|
|
||||||
steps = steps.concat(this.splitStepObject(step, split_character))
|
|
||||||
})
|
|
||||||
this.recipe_json.steps = steps
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
*/
|
|
||||||
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_json into one
|
|
||||||
*/
|
|
||||||
mergeAllSteps: function () {
|
|
||||||
let step = {'instruction': '', 'ingredients': []}
|
|
||||||
this.recipe_json.steps.forEach(s => {
|
|
||||||
step.instruction += s.instruction + '\n'
|
|
||||||
step.ingredients = step.ingredients.concat(s.ingredients)
|
|
||||||
})
|
|
||||||
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)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
recipe_json: function () {
|
||||||
|
this.$emit('change', this.recipe_json)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.recipe_json = this.recipe
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 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_json at the split character (e.g. \n or \n\n)
|
||||||
|
* @param split_character: character to split steps at
|
||||||
|
*/
|
||||||
|
splitAllSteps: function (split_character) {
|
||||||
|
let steps = []
|
||||||
|
this.recipe_json.steps.forEach(step => {
|
||||||
|
steps = steps.concat(this.splitStepObject(step, split_character))
|
||||||
|
})
|
||||||
|
this.recipe_json.steps = steps
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
*/
|
||||||
|
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_json into one
|
||||||
|
*/
|
||||||
|
mergeAllSteps: function () {
|
||||||
|
let step = {'instruction': '', 'ingredients': []}
|
||||||
|
this.recipe_json.steps.forEach(s => {
|
||||||
|
step.instruction += s.instruction + '\n'
|
||||||
|
step.ingredients = step.ingredients.concat(s.ingredients)
|
||||||
|
})
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* automatically assign ingredients to steps based on text matching
|
||||||
|
*/
|
||||||
|
autoSortIngredients: function () {
|
||||||
|
let ingredients = this.recipe_json.steps.flatMap(s => s.ingredients)
|
||||||
|
this.recipe_json.steps.forEach(s => s.ingredients = [])
|
||||||
|
|
||||||
|
ingredients.forEach(i => {
|
||||||
|
let found = false
|
||||||
|
this.recipe_json.steps.forEach(s => {
|
||||||
|
if (s.instruction.includes(i.food.name.trim()) && !found) {
|
||||||
|
found = true
|
||||||
|
s.ingredients.push(i)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (!found) {
|
||||||
|
let best_match = {rating: 0, step: this.recipe_json.steps[0]}
|
||||||
|
this.recipe_json.steps.forEach(s => {
|
||||||
|
let match = stringSimilarity.findBestMatch(i.food.name.trim(), s.instruction.split(' '))
|
||||||
|
if (match.bestMatch.rating > best_match.rating) {
|
||||||
|
best_match = {rating: match.bestMatch.rating, step: s}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
best_match.step.ingredients.push(i)
|
||||||
|
found = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -68,7 +68,8 @@
|
|||||||
"Enable_Amount": "Enable Amount",
|
"Enable_Amount": "Enable Amount",
|
||||||
"Disable_Amount": "Disable Amount",
|
"Disable_Amount": "Disable Amount",
|
||||||
"Ingredient Editor": "Ingredient Editor",
|
"Ingredient Editor": "Ingredient Editor",
|
||||||
|
"Auto_Sort": "Auto Sort",
|
||||||
|
"Auto_Sort_Help": "Move all ingredients to the best fitting step.",
|
||||||
"Private_Recipe": "Private Recipe",
|
"Private_Recipe": "Private Recipe",
|
||||||
"Private_Recipe_Help": "Recipe is only shown to you and people its shared with.",
|
"Private_Recipe_Help": "Recipe is only shown to you and people its shared with.",
|
||||||
"reusable_help_text": "Should the invite link be usable for more than one user.",
|
"reusable_help_text": "Should the invite link be usable for more than one user.",
|
||||||
|
|||||||
28536
vue/yarn.lock
28536
vue/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user