286 lines
13 KiB
HTML
286 lines
13 KiB
HTML
<!--I PROBLABLY DON'T NEED THIS??-->
|
|
{% extends "base.html" %}
|
|
{% load crispy_forms_filters %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans 'Import Recipe' %}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
{% include 'include/vue_base.html' %}
|
|
|
|
<script src="{% static 'js/vue-multiselect.min.js' %}"></script>
|
|
<link rel="stylesheet" href="{% static 'css/vue-multiselect.min.css' %}">
|
|
<script src="{% static 'js/vue-jstree.js' %}"></script>
|
|
<style>
|
|
.tree-anchor {
|
|
width:95%;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
<div id="app">
|
|
<div v-if="!parsed">
|
|
<h2>{% trans 'Import From Source' %}</h2>
|
|
<div class="input-group input-group-lg">
|
|
<textarea class="form-control" v-model="html_recipe" rows="12" style="font-size: 12px"></textarea>
|
|
</div>
|
|
<small class="text-muted">Simply paste a web page source or JSON document into this textarea and click import.</small>
|
|
<br>
|
|
<button @click="loadRecipe()" class="btn btn-success" type="button"
|
|
id="id_btn_import"><i class="fas fa-code"></i>{% trans 'Import' %}
|
|
</button>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div v-if="loading" class="text-center">
|
|
<br/>
|
|
<i class="fas fa-spinner fa-spin fa-8x"></i>
|
|
</div>
|
|
|
|
<template v-if="recipe_data !== undefined">
|
|
<p>this is the recipe form
|
|
</template>
|
|
<div class="col" v-if="recipe_tree !== undefined" id="manage_tree">
|
|
<v-jstree :data="recipe_tree"
|
|
text-field-name="name"
|
|
collapse:true
|
|
draggable>
|
|
|
|
<template scope="_">
|
|
<div class="container-fluid" >
|
|
<div class="col-md-12" >
|
|
<div class="row clearfix" style="width:95%" >
|
|
<div class="col">
|
|
<i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
|
|
{% verbatim %}
|
|
[[_.model.name]]
|
|
{% endverbatim %}
|
|
</div>
|
|
<div class="col-es-auto" style="align-right">
|
|
<button style="border: 0px; background-color: transparent; cursor: pointer;"
|
|
@click="deleteNode(_.vm, _.model, $event)"><i class="fas fa-minus-square" style="color:red"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</v-jstree>
|
|
</div>
|
|
<template v-if="error !== undefined">
|
|
<p>something terrible happened
|
|
</template>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
|
|
<script src="{% url 'javascript-catalog' %}"></script>
|
|
<script type="application/javascript">
|
|
let csrftoken = Cookies.get('csrftoken');
|
|
Vue.http.headers.common['X-CSRFToken'] = csrftoken;
|
|
|
|
//Vue.component('vue-multiselect', window.VueMultiselect.default)
|
|
|
|
let app = new Vue({
|
|
components: {
|
|
Multiselect: window.VueMultiselect.default
|
|
},
|
|
delimiters: ['[[', ']]'],
|
|
el: '#app',
|
|
data: {
|
|
html_recipe: '',
|
|
keywords: [],
|
|
keywords_loading: false,
|
|
units: [],
|
|
units_loading: false,
|
|
ingredients: [],
|
|
ingredients_loading: false,
|
|
recipe_data: undefined,
|
|
recipe_tree: [],
|
|
error: undefined,
|
|
loading: false,
|
|
all_keywords: false,
|
|
importing_recipe: false,
|
|
parsed: false,
|
|
},
|
|
directives: {
|
|
tabindex: {
|
|
inserted(el) {
|
|
el.setAttribute('tabindex', 0);
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.searchKeywords('')
|
|
this.searchUnits('')
|
|
this.searchIngredients('')
|
|
|
|
},
|
|
methods: {
|
|
makeToast: function (title, message, variant = null) {
|
|
//TODO remove duplicate function in favor of central one
|
|
this.$bvToast.toast(message, {
|
|
title: title,
|
|
variant: variant,
|
|
toaster: 'b-toaster-top-center',
|
|
solid: true
|
|
})
|
|
},
|
|
loadRecipe: function () {
|
|
this.recipe_data = undefined
|
|
this.recipe_tree = undefined
|
|
this.error = undefined
|
|
this.parsed = true
|
|
this.loading = true
|
|
this.$http.post("{% url 'api_recipe_from_html' %}", {'html_text': this.html_recipe}, {emulateJSON: true}).then((response) => {
|
|
console.log(response.data)
|
|
this.recipe_data = response.data['recipe_data'];
|
|
this.recipe_tree = response.data['recipe_tree'];
|
|
this.loading = false
|
|
}).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')
|
|
})
|
|
},
|
|
importRecipe: function () {
|
|
if (this.importing_recipe) {
|
|
this.makeToast(gettext('Error'), gettext('Already importing the selected recipe, please wait!'), 'danger')
|
|
return;
|
|
}
|
|
this.importing_recipe = true
|
|
this.$set(this.recipe_data, 'all_keywords', this.all_keywords)
|
|
this.$http.post(`{% url 'data_import_url' %}`, this.recipe_data).then((response) => {
|
|
window.location.href = response.data
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
this.makeToast(gettext('Error'), gettext('An error occurred while trying to import this recipe!') + err.bodyText, 'danger')
|
|
})
|
|
},
|
|
deleteIngredient: function (i) {
|
|
this.recipe_data.recipeIngredient = this.recipe_data.recipeIngredient.filter(item => item !== i)
|
|
},
|
|
addIngredient: function (i) {
|
|
this.recipe_data.recipeIngredient.push({
|
|
unit: {id: Math.random() * 1000, text: '{{ request.user.userpreference.default_unit }}'},
|
|
amount: 0,
|
|
ingredient: {id: Math.random() * 1000, text: ''}
|
|
})
|
|
},
|
|
addIngredientType: function (tag, index) {
|
|
index = index.replace('ingredient_', '')
|
|
let new_ingredient = this.recipe_data.recipeIngredient[index]
|
|
new_ingredient.ingredient = {'id': Math.random() * 1000, 'text': tag}
|
|
this.ingredients.push(new_ingredient.ingredient)
|
|
this.recipe_data.recipeIngredient[index] = new_ingredient
|
|
},
|
|
addUnitType: function (tag, index) {
|
|
index = index.replace('unit_', '')
|
|
let new_unit = this.recipe_data.recipeIngredient[index]
|
|
new_unit.unit = {'id': Math.random() * 1000, 'text': tag}
|
|
this.units.push(new_unit.unit)
|
|
this.recipe_data.recipeIngredient[index] = new_unit
|
|
},
|
|
addKeyword: function (tag) {
|
|
let new_keyword = {'text':tag,'id':null}
|
|
this.recipe_data.keywords.push(new_keyword)
|
|
},
|
|
openUnitSelect: function (id) {
|
|
let index = id.replace('unit_', '')
|
|
if (this.recipe_data.recipeIngredient[index].unit !== null) {
|
|
this.$set(app.$refs.unit[index].$data, 'search', this.recipe_data.recipeIngredient[index].unit.text)
|
|
}
|
|
},
|
|
openIngredientSelect: function (id) {
|
|
let index = id.replace('ingredient_', '')
|
|
this.$set(this.$refs.ingredient[index].$data, 'search', this.recipe_data.recipeIngredient[index].ingredient.text)
|
|
},
|
|
searchKeywords: function (query) {
|
|
this.keywords_loading = true
|
|
this.$http.get("{% url 'dal_keyword' %}" + '?q=' + query).then((response) => {
|
|
this.keywords = response.data.results;
|
|
this.keywords_loading = false
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
|
})
|
|
},
|
|
searchUnits: function (query) {
|
|
this.units_loading = true
|
|
this.$http.get("{% url 'dal_unit' %}" + '?q=' + query).then((response) => {
|
|
this.units = response.data.results;
|
|
if (this.recipe_data !== undefined) {
|
|
for (let x of Array.from(this.recipe_data.recipeIngredient)) {
|
|
if (x.unit !== null && x.unit.text !== '') {
|
|
this.units = this.units.filter(item => item.text !== x.unit.text)
|
|
this.units.push(x.unit)
|
|
}
|
|
}
|
|
}
|
|
this.units_loading = false
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
|
})
|
|
},
|
|
searchIngredients: function (query) {
|
|
this.ingredients_loading = true
|
|
this.$http.get("{% url 'dal_food' %}" + '?q=' + query).then((response) => {
|
|
this.ingredients = response.data.results
|
|
if (this.recipe_data !== undefined) {
|
|
for (let x of Array.from(this.recipe_data.recipeIngredient)) {
|
|
if (x.ingredient.text !== '') {
|
|
this.ingredients = this.ingredients.filter(item => item.text !== x.ingredient.text)
|
|
this.ingredients.push(x.ingredient)
|
|
}
|
|
}
|
|
}
|
|
|
|
this.ingredients_loading = false
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
|
})
|
|
},
|
|
itemDrop (node, item, draggedItem , e) {
|
|
var sortBy = function(attr,rev) {
|
|
if (rev == undefined) {
|
|
rev = 1;
|
|
} else {
|
|
rev = (rev) ? 1 : -1;
|
|
}
|
|
return function (a, b) {
|
|
a = a[attr];
|
|
b = b[attr];
|
|
if (a < b) {
|
|
return rev * -1;
|
|
}
|
|
if (a > b) {
|
|
return rev * 1;
|
|
}
|
|
return 0;
|
|
}
|
|
}
|
|
item.children.sort(sortBy('text', true))
|
|
this.$refs.tree.handleRecursionNodeChildren(draggedItem, function (childrenItem) {
|
|
childrenItem.selected = item.selected
|
|
})
|
|
console.log(node.model.text + ' drop !')
|
|
},
|
|
deleteNode: function (node ,item, e) {
|
|
e.stopPropagation()
|
|
var index = node.parentItem.indexOf(item)
|
|
node.parentItem.splice(index, 1)
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |