phyks/cuizin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Few UI improvements + add refetch ability

Browse Source 
* 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:
Lucas Verney 2018-03-03 15:56:18 +01:00
parent c873021500
commit b5946ccc84
13 changed files with 406 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -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
View File

@ -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):
"""

2
cuizin/js_src/App.vue
View File

@ -12,7 +12,7 @@
</router-link>
</v-toolbar>
<v-content>
<router-view/>
<router-view></router-view>
</v-content>
</v-app>
</template>

16
cuizin/js_src/components/Home.vue
View File

@ -1,14 +1,14 @@
<template>
<v-container fluid grid-list-md>
<v-layout row wrap>
<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
v-for="recipe in recipes"
:key="recipe.title"
xs12
sm6
md3
lg2
>
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>
@ -33,8 +33,12 @@
<script>
import * as constants from '@/constants';
import Loader from '@/components/Loader';
export default {
components: {
Loader,
},
data() {
return {
isLoading: false,

7
cuizin/js_src/components/Loader.vue Normal file
View 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>

66
cuizin/js_src/components/Recipe.vue
View File

@ -1,6 +1,33 @@
<template>
<v-container grid-list-md class="panel">
<v-layout row>
<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 }}
@ -27,14 +54,19 @@
</li>
</ul>
<h2 class="mt-3">Instructions</h2>
<nl2br tag="p" :text="recipe.instructions"></nl2br>
<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="handleDelete">
<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-layout>
@ -43,12 +75,18 @@
<script>
import * as constants from '@/constants';
import Loader from '@/components/Loader';
export default {
components: {
Loader,
},
data() {
return {
isLoading: false,
recipe: null,
deleteConfirm: false,
refetchConfirm: false,
};
},
created() {
@ -59,22 +97,36 @@ export default {
$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;
});
.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);
},
},
};
</script>

2
cuizin/js_src/constants.js
View File

@ -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

2
cuizin/js_src/main.js
View File

@ -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,7 +14,6 @@ import router from './router';
require('es6-promise').polyfill();
require('isomorphic-fetch');
Vue.component('nl2br', Nl2br);
Vue.use(Vuetify);
Vue.config.productionTip = false;

17
cuizin/scraping.py
View File

@ -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,21 +37,19 @@ 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()
# Ensure URL is set
recipe.url = url
recipe.save()

32
cuizin/web.py
View File

@ -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):
"""

1
package.json
View File

@ -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"
},