Few UI improvements + add refetch ability
* Order by decreasing ids on the home page. * Confirmation modals when deleting / refetching items. * Spinners when loading. * Getting started message when there is no recipe. * Add the ability to refetch a recipe from the website (when a Weboob module has been improved for instance).
This commit is contained in:
parent
c873021500
commit
b5946ccc84
@ -24,6 +24,11 @@ module.exports = {
|
||||
},
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// Use 4 spaces indent
|
||||
'indent': ['error', 4],
|
||||
'import/prefer-default-export': 'off',
|
||||
'no-console': 'off',
|
||||
'no-underscore-dangle': 'off',
|
||||
// don't require .vue extension when importing
|
||||
'import/extensions': ['error', 'always', {
|
||||
js: 'never',
|
||||
|
||||
16
cuizin/db.py
16
cuizin/db.py
@ -56,21 +56,21 @@ class Recipe(Model):
|
||||
class Meta:
|
||||
database = database
|
||||
|
||||
@staticmethod
|
||||
def from_weboob(obj):
|
||||
recipe = Recipe()
|
||||
def update_from_weboob(self, weboob_obj):
|
||||
"""
|
||||
Update fields taking values from the Weboob object.
|
||||
"""
|
||||
# Set fields
|
||||
for field in ['title', 'url', 'author', 'picture_url',
|
||||
'short_description', 'preparation_time', 'cooking_time',
|
||||
'ingredients', 'instructions']:
|
||||
value = getattr(obj, field)
|
||||
value = getattr(weboob_obj, field)
|
||||
if value:
|
||||
setattr(recipe, field, value)
|
||||
setattr(self, field, value)
|
||||
# Serialize number of person
|
||||
recipe.nb_person = '-'.join(str(num) for num in obj.nb_person)
|
||||
self.nb_person = '-'.join(str(num) for num in weboob_obj.nb_person)
|
||||
# Download picture and save it as a blob
|
||||
recipe.picture = requests.get(obj.picture_url).content
|
||||
return recipe
|
||||
self.picture = requests.get(weboob_obj.picture_url).content
|
||||
|
||||
def to_dict(self):
|
||||
"""
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-toolbar app>
|
||||
<v-toolbar-title class="toolbar-title">
|
||||
<router-link to="/">Cuizin</router-link>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<router-link to="/new">
|
||||
<v-btn icon>
|
||||
<v-icon>add</v-icon>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-toolbar>
|
||||
<v-content>
|
||||
<router-view/>
|
||||
</v-content>
|
||||
</v-app>
|
||||
<v-app>
|
||||
<v-toolbar app>
|
||||
<v-toolbar-title class="toolbar-title">
|
||||
<router-link to="/">Cuizin</router-link>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<router-link to="/new">
|
||||
<v-btn icon>
|
||||
<v-icon>add</v-icon>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-toolbar>
|
||||
<v-content>
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
name: 'App',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.toolbar-title a {
|
||||
color: rgba(0,0,0,.87);
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,.87);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,64 +1,68 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-md>
|
||||
<v-layout row wrap>
|
||||
<v-flex
|
||||
v-for="recipe in recipes"
|
||||
:key="recipe.title"
|
||||
xs12
|
||||
sm6
|
||||
md3
|
||||
lg2
|
||||
>
|
||||
<v-card :to="{name: 'Recipe', params: { recipeId: recipe.id }}">
|
||||
<v-card-media :src="recipe.picture" height="200px"></v-card-media>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="headline mb-0">{{ recipe.title }}</h3>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<p>{{ recipe.short_description }}</p>
|
||||
<v-layout row text-xs-center>
|
||||
<v-flex xs6>
|
||||
<p><v-icon>timelapse</v-icon> {{ recipe.preparation_time }} mins</p>
|
||||
<v-container fluid grid-list-md>
|
||||
<Loader v-if="isLoading"></Loader>
|
||||
<v-layout row wrap v-else>
|
||||
<v-flex xs12 v-if="!recipes.length" class="text-xs-center">
|
||||
<p>Start by adding a recipe with the "+" button on the top right corner!</p>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<p><v-icon>whatshot</v-icon> {{ recipe.cooking_time }} mins</p>
|
||||
<v-flex
|
||||
v-for="recipe in recipes"
|
||||
:key="recipe.title"
|
||||
xs12 sm6 md3 lg2>
|
||||
<v-card :to="{name: 'Recipe', params: { recipeId: recipe.id }}">
|
||||
<v-card-media :src="recipe.picture" height="200px"></v-card-media>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="headline mb-0">{{ recipe.title }}</h3>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<p>{{ recipe.short_description }}</p>
|
||||
<v-layout row text-xs-center>
|
||||
<v-flex xs6>
|
||||
<p><v-icon>timelapse</v-icon> {{ recipe.preparation_time }} mins</p>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<p><v-icon>whatshot</v-icon> {{ recipe.cooking_time }} mins</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as constants from '@/constants';
|
||||
import Loader from '@/components/Loader';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
recipes: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchRecipes();
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
$route: 'fetchRecipes',
|
||||
},
|
||||
methods: {
|
||||
fetchRecipes() {
|
||||
this.isLoading = true;
|
||||
|
||||
fetch(`${constants.API_URL}api/v1/recipes`)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.recipes = response.recipes;
|
||||
this.isLoading = false;
|
||||
});
|
||||
components: {
|
||||
Loader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
recipes: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchRecipes();
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
$route: 'fetchRecipes',
|
||||
},
|
||||
methods: {
|
||||
fetchRecipes() {
|
||||
this.isLoading = true;
|
||||
|
||||
fetch(`${constants.API_URL}api/v1/recipes`)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.recipes = response.recipes;
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
7
cuizin/js_src/components/Loader.vue
Normal file
7
cuizin/js_src/components/Loader.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<v-layout row>
|
||||
<v-flex xs12 class="text-xs-center">
|
||||
<v-progress-circular indeterminate :size="70" :width="7"></v-progress-circular>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
@ -1,89 +1,89 @@
|
||||
<template>
|
||||
<v-container text-xs-center>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<h2>Import from URL</h2>
|
||||
<v-form v-model="validImport">
|
||||
<v-text-field
|
||||
label="URL"
|
||||
v-model="url"
|
||||
required
|
||||
:rules="urlRules"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
@click="submitImport"
|
||||
:disabled="!validImport || disabledImport"
|
||||
>
|
||||
Import
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap mt-5 v-if="featureAddManually">
|
||||
<v-flex xs12>
|
||||
<h2>Add manually</h2>
|
||||
<v-form v-model="validAdd">
|
||||
<v-text-field
|
||||
label="Title"
|
||||
v-model="title"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Picture"
|
||||
v-model="picture"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Short description"
|
||||
v-model="short_description"
|
||||
textarea
|
||||
></v-text-field>
|
||||
<v-layout row>
|
||||
<v-flex xs4 mr-3>
|
||||
<v-text-field
|
||||
label="Number of persons"
|
||||
v-model="nb_person"
|
||||
type="number"
|
||||
></v-text-field>
|
||||
<v-container text-xs-center>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<h2>Import from URL</h2>
|
||||
<v-form v-model="validImport">
|
||||
<v-text-field
|
||||
label="URL"
|
||||
v-model="url"
|
||||
required
|
||||
:rules="urlRules"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
@click="submitImport"
|
||||
:disabled="!validImport || disabledImport"
|
||||
>
|
||||
Import
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-flex>
|
||||
<v-flex xs4 mx-3>
|
||||
<v-text-field
|
||||
label="Preparation time"
|
||||
v-model="preparation_time"
|
||||
type="number"
|
||||
suffix="mins"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4 ml-3>
|
||||
<v-text-field
|
||||
label="Cooking time"
|
||||
v-model="cooking_time"
|
||||
type="number"
|
||||
suffix="mins"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-text-field
|
||||
label="Ingredients"
|
||||
v-model="ingredients"
|
||||
textarea
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Instructions"
|
||||
v-model="instructions"
|
||||
textarea
|
||||
required
|
||||
></v-text-field>
|
||||
</v-layout>
|
||||
<v-layout row wrap mt-5 v-if="featureAddManually">
|
||||
<v-flex xs12>
|
||||
<h2>Add manually</h2>
|
||||
<v-form v-model="validAdd">
|
||||
<v-text-field
|
||||
label="Title"
|
||||
v-model="title"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Picture"
|
||||
v-model="picture"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Short description"
|
||||
v-model="short_description"
|
||||
textarea
|
||||
></v-text-field>
|
||||
<v-layout row>
|
||||
<v-flex xs4 mr-3>
|
||||
<v-text-field
|
||||
label="Number of persons"
|
||||
v-model="nb_person"
|
||||
type="number"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4 mx-3>
|
||||
<v-text-field
|
||||
label="Preparation time"
|
||||
v-model="preparation_time"
|
||||
type="number"
|
||||
suffix="mins"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4 ml-3>
|
||||
<v-text-field
|
||||
label="Cooking time"
|
||||
v-model="cooking_time"
|
||||
type="number"
|
||||
suffix="mins"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-text-field
|
||||
label="Ingredients"
|
||||
v-model="ingredients"
|
||||
textarea
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Instructions"
|
||||
v-model="instructions"
|
||||
textarea
|
||||
required
|
||||
></v-text-field>
|
||||
|
||||
<v-btn
|
||||
@click="submitAdd"
|
||||
:disabled="!validAdd"
|
||||
>
|
||||
Add
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-btn
|
||||
@click="submitAdd"
|
||||
:disabled="!validAdd"
|
||||
>
|
||||
Add
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -91,55 +91,55 @@ import * as constants from '@/constants';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: null,
|
||||
validImport: false,
|
||||
disabledImport: false,
|
||||
validAdd: false,
|
||||
title: null,
|
||||
picture: null,
|
||||
short_description: null,
|
||||
nb_person: null,
|
||||
preparation_time: null,
|
||||
cooking_time: null,
|
||||
ingredients: null,
|
||||
instructions: null,
|
||||
urlRules: [
|
||||
v => !!v || 'URL is required',
|
||||
(v) => {
|
||||
try {
|
||||
new URL(v); // eslint-disable-line no-new
|
||||
return true;
|
||||
} catch (e) {
|
||||
return 'URL must be valid';
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
url: null,
|
||||
validImport: false,
|
||||
disabledImport: false,
|
||||
validAdd: false,
|
||||
title: null,
|
||||
picture: null,
|
||||
short_description: null,
|
||||
nb_person: null,
|
||||
preparation_time: null,
|
||||
cooking_time: null,
|
||||
ingredients: null,
|
||||
instructions: null,
|
||||
urlRules: [
|
||||
v => !!v || 'URL is required',
|
||||
(v) => {
|
||||
try {
|
||||
new URL(v); // eslint-disable-line no-new
|
||||
return true;
|
||||
} catch (e) {
|
||||
return 'URL must be valid';
|
||||
}
|
||||
},
|
||||
],
|
||||
featureAddManually: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitImport() {
|
||||
this.disabledImport = true;
|
||||
fetch(`${constants.API_URL}api/v1/recipes`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
url: this.url,
|
||||
}),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => response.recipes[0])
|
||||
.then(recipe => this.$router.push({
|
||||
name: 'Recipe',
|
||||
params: {
|
||||
recipeId: recipe.id,
|
||||
},
|
||||
}));
|
||||
},
|
||||
submitAdd() {
|
||||
// TODO
|
||||
},
|
||||
],
|
||||
featureAddManually: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitImport() {
|
||||
this.disabledImport = true;
|
||||
fetch(`${constants.API_URL}api/v1/recipes`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
url: this.url,
|
||||
}),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => response.recipes[0])
|
||||
.then(recipe => this.$router.push({
|
||||
name: 'Recipe',
|
||||
params: {
|
||||
recipeId: recipe.id,
|
||||
},
|
||||
}));
|
||||
},
|
||||
submitAdd() {
|
||||
// TODO
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,81 +1,133 @@
|
||||
<template>
|
||||
<v-container grid-list-md class="panel">
|
||||
<v-layout row>
|
||||
<v-flex xs12 v-if="recipe">
|
||||
<h1 class="text-xs-center mt-3 mb-3">
|
||||
{{ recipe.title }}
|
||||
</h1>
|
||||
<p>
|
||||
</p>
|
||||
<p class="text-xs-center">
|
||||
<img :src="recipe.picture" />
|
||||
</p>
|
||||
<v-layout row class="text-xs-center">
|
||||
<v-flex xs6>
|
||||
<p>{{ recipe.nb_person }}</p>
|
||||
<v-container grid-list-md class="panel">
|
||||
<Loader v-if="isLoading"></Loader>
|
||||
<v-layout row v-else>
|
||||
<v-dialog v-model="refetchConfirm" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Refetch recipe</v-card-title>
|
||||
<v-card-text>
|
||||
This will refetch the recipe from the website and replace all current data with newly fetched ones. Are you sure?
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="secondary" flat @click.stop="refetchConfirm=false">Cancel</v-btn>
|
||||
<v-btn color="error" flat @click.stop="handleRefetch">Refetch</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="deleteConfirm" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Delete recipe</v-card-title>
|
||||
<v-card-text>This will delete this recipe. Are you sure?</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="secondary" flat @click.stop="deleteConfirm=false">Cancel</v-btn>
|
||||
<v-btn color="error" flat @click.stop="handleDelete">Delete</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-flex xs12 v-if="recipe">
|
||||
<h1 class="text-xs-center mt-3 mb-3">
|
||||
{{ recipe.title }}
|
||||
</h1>
|
||||
<p>
|
||||
</p>
|
||||
<p class="text-xs-center">
|
||||
<img :src="recipe.picture" />
|
||||
</p>
|
||||
<v-layout row class="text-xs-center">
|
||||
<v-flex xs6>
|
||||
<p>{{ recipe.nb_person }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<p><v-icon>timelapse</v-icon> Preparation: {{ recipe.preparation_time }} mins</p>
|
||||
<p><v-icon>whatshot</v-icon> Cooking: {{ recipe.cooking_time }} mins</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<p>{{ recipe.short_description }}</p>
|
||||
<h2>Ingredients</h2>
|
||||
<ul class="ml-5">
|
||||
<li v-for="ingredient in recipe.ingredients">
|
||||
{{ ingredient }}
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="mt-3">Instructions</h2>
|
||||
<p v-for="item in recipe.instructions">
|
||||
{{ item }}
|
||||
</p>
|
||||
<p v-if="recipe.url" class="text-xs-center">
|
||||
<v-btn :href="recipe.url">
|
||||
<v-icon class="fa-icon">fa-external-link</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click.stop="deleteConfirm = true">
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click.stop="refetchConfirm = true">
|
||||
<v-icon>autorenew</v-icon>
|
||||
</v-btn>
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<p><v-icon>timelapse</v-icon> Preparation: {{ recipe.preparation_time }} mins</p>
|
||||
<p><v-icon>whatshot</v-icon> Cooking: {{ recipe.cooking_time }} mins</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<p>{{ recipe.short_description }}</p>
|
||||
<h2>Ingredients</h2>
|
||||
<ul class="ml-5">
|
||||
<li v-for="ingredient in recipe.ingredients">
|
||||
{{ ingredient }}
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="mt-3">Instructions</h2>
|
||||
<nl2br tag="p" :text="recipe.instructions"></nl2br>
|
||||
<p v-if="recipe.url" class="text-xs-center">
|
||||
<v-btn :href="recipe.url">
|
||||
<v-icon class="fa-icon">fa-external-link</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click="handleDelete">
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as constants from '@/constants';
|
||||
import Loader from '@/components/Loader';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
recipe: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchRecipe();
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
$route: 'fetchRecipe',
|
||||
},
|
||||
methods: {
|
||||
fetchRecipe() {
|
||||
this.isLoading = true;
|
||||
components: {
|
||||
Loader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
recipe: null,
|
||||
deleteConfirm: false,
|
||||
refetchConfirm: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchRecipe();
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
$route: 'fetchRecipe',
|
||||
},
|
||||
methods: {
|
||||
handleRecipesResponse(response) {
|
||||
this.recipe = response.recipes[0];
|
||||
this.recipe.instructions = this.recipe.instructions.split(/\r\n/).map(item => item.trim());
|
||||
this.isLoading = false;
|
||||
},
|
||||
fetchRecipe() {
|
||||
this.isLoading = true;
|
||||
|
||||
fetch(`${constants.API_URL}api/v1/recipe/${this.$route.params.recipeId}`)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.recipe = response.recipes[0];
|
||||
this.isLoading = false;
|
||||
});
|
||||
fetch(`${constants.API_URL}api/v1/recipe/${this.$route.params.recipeId}`)
|
||||
.then(response => response.json())
|
||||
.then(this.handleRecipesResponse);
|
||||
},
|
||||
handleDelete() {
|
||||
this.isLoading = true;
|
||||
this.deleteConfirm = false;
|
||||
fetch(`${constants.API_URL}api/v1/recipe/${this.$route.params.recipeId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(() => this.$router.replace('/'));
|
||||
},
|
||||
handleRefetch() {
|
||||
this.isLoading = true;
|
||||
this.refetchConfirm = false;
|
||||
|
||||
fetch(`${constants.API_URL}api/v1/recipe/${this.$route.params.recipeId}/refetch`, {
|
||||
method: 'GET',
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(this.handleRecipesResponse);
|
||||
},
|
||||
},
|
||||
handleDelete() {
|
||||
fetch(`${constants.API_URL}api/v1/recipe/${this.$route.params.recipeId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(() => this.$router.replace('/'));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
export const API_URL = process.env.API_URL || '/'; // eslint-disable-line import/prefer-default-export,no-use-before-define
|
||||
export const API_URL = process.env.API_URL || '/'; // eslint-disable-line no-use-before-define
|
||||
|
||||
@ -6,7 +6,6 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css';
|
||||
import 'font-awesome/css/font-awesome.css';
|
||||
import 'material-design-icons/iconfont/material-icons.css';
|
||||
import 'vuetify/dist/vuetify.min.css';
|
||||
import Nl2br from 'vue-nl2br';
|
||||
|
||||
import App from './App';
|
||||
import router from './router';
|
||||
@ -15,15 +14,14 @@ import router from './router';
|
||||
require('es6-promise').polyfill();
|
||||
require('isomorphic-fetch');
|
||||
|
||||
Vue.component('nl2br', Nl2br);
|
||||
Vue.use(Vuetify);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
components: { App },
|
||||
template: '<App/>',
|
||||
el: '#app',
|
||||
router,
|
||||
components: { App },
|
||||
template: '<App/>',
|
||||
});
|
||||
|
||||
@ -7,21 +7,21 @@ import Recipe from '@/components/Recipe';
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/new',
|
||||
name: 'New',
|
||||
component: New,
|
||||
},
|
||||
{
|
||||
path: '/recipe/:recipeId',
|
||||
name: 'Recipe',
|
||||
component: Recipe,
|
||||
},
|
||||
],
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/new',
|
||||
name: 'New',
|
||||
component: New,
|
||||
},
|
||||
{
|
||||
path: '/recipe/:recipeId',
|
||||
name: 'Recipe',
|
||||
component: Recipe,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -15,11 +15,12 @@ from cuizin import db
|
||||
BACKENDS = ['750g', 'allrecipes', 'cuisineaz', 'marmiton', 'supertoinette']
|
||||
|
||||
|
||||
def add_recipe(url):
|
||||
def fetch_recipe(url, recipe=None):
|
||||
"""
|
||||
Add a recipe, trying to scrape from a given URL.
|
||||
|
||||
:param url: URL of the recipe.
|
||||
:param recipe: An optional recipe object to update.
|
||||
:return: A ``cuizin.db.Recipe`` model.
|
||||
"""
|
||||
# Eventually load modules from a local clone
|
||||
@ -36,22 +37,20 @@ def add_recipe(url):
|
||||
for module in BACKENDS
|
||||
]
|
||||
|
||||
# Create a new Recipe object if none is given
|
||||
if not recipe:
|
||||
recipe = db.Recipe()
|
||||
|
||||
# Try to fetch the recipe with a Weboob backend
|
||||
recipe = None
|
||||
for backend in backends:
|
||||
browser = backend.browser
|
||||
if url.startswith(browser.BASEURL):
|
||||
browser.location(url)
|
||||
recipe = db.Recipe.from_weboob(browser.page.get_recipe())
|
||||
# Ensure URL is set
|
||||
recipe.url = url
|
||||
recipe.update_from_weboob(browser.page.get_recipe())
|
||||
break
|
||||
|
||||
# If we could not scrape anything, simply create an empty recipe storing
|
||||
# the URL.
|
||||
if not recipe:
|
||||
recipe = db.Recipe()
|
||||
recipe.url = url
|
||||
# Ensure URL is set
|
||||
recipe.url = url
|
||||
|
||||
recipe.save()
|
||||
return recipe
|
||||
|
||||
@ -4,7 +4,7 @@ import os
|
||||
import bottle
|
||||
|
||||
from cuizin import db
|
||||
from cuizin.scraping import add_recipe
|
||||
from cuizin.scraping import fetch_recipe
|
||||
|
||||
MODULE_DIR = os.path.dirname(os.path.realpath(__file__))
|
||||
|
||||
@ -49,7 +49,8 @@ def api_v1_recipes():
|
||||
|
||||
return {
|
||||
'recipes': [
|
||||
recipe.to_dict() for recipe in db.Recipe.select()
|
||||
recipe.to_dict()
|
||||
for recipe in db.Recipe.select().order_by(db.Recipe.id.desc())
|
||||
]
|
||||
}
|
||||
|
||||
@ -73,7 +74,7 @@ def api_v1_recipes_post():
|
||||
assert recipe
|
||||
recipes = [recipe.to_dict()]
|
||||
except AssertionError:
|
||||
recipes = [add_recipe(data['url']).to_dict()]
|
||||
recipes = [fetch_recipe(data['url']).to_dict()]
|
||||
|
||||
return {
|
||||
'recipes': recipes
|
||||
@ -98,6 +99,31 @@ def api_v1_recipe(id):
|
||||
}
|
||||
|
||||
|
||||
@app.route('/api/v1/recipe/:id/refetch', ['GET', 'OPTIONS'])
|
||||
def api_v1_recipe_refetch(id):
|
||||
"""
|
||||
Refetch a given recipe.
|
||||
"""
|
||||
# CORS
|
||||
if bottle.request.method == 'OPTIONS':
|
||||
return ''
|
||||
|
||||
recipe = db.Recipe.select().where(
|
||||
db.Recipe.id == id
|
||||
).first()
|
||||
if not recipe:
|
||||
# TODO: Error
|
||||
pass
|
||||
|
||||
recipe = fetch_recipe(recipe.url, recipe=recipe)
|
||||
|
||||
return {
|
||||
'recipes': [
|
||||
recipe.to_dict()
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@app.delete('/api/v1/recipe/:id', ['DELETE', 'OPTIONS'])
|
||||
def api_v1_recipe_delete(id):
|
||||
"""
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
"material-design-icons": "^3.0.1",
|
||||
"roboto-fontface": "^0.9.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-nl2br": "^0.0.5",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuetify": "^1.0.0"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user