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).

.eslintrc.js

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

cuizin/db.py

@@ -56,21 +56,21 @@ class Recipe(Model):
     class Meta:
         database = database
 
-    @staticmethod
+    def update_from_weboob(self, weboob_obj):
-    def from_weboob(obj):
+        """
-        recipe = Recipe()
+        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
+        self.picture = requests.get(weboob_obj.picture_url).content
-        return recipe
 
     def to_dict(self):
         """

cuizin/js_src/App.vue

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

cuizin/js_src/components/Home.vue

@@ -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
+                xs12 sm6 md3 lg2>
-        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,

cuizin/js_src/components/Loader.vue

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

cuizin/js_src/components/Recipe.vue

@@ -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) => {
+                .then(this.handleRecipesResponse);
-          this.recipe = response.recipes[0];
-          this.isLoading = false;
-        });
         },
         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>

cuizin/js_src/constants.js

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

cuizin/js_src/main.js

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

cuizin/scraping.py

@@ -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())
+            recipe.update_from_weboob(browser.page.get_recipe())
-            # Ensure URL is set
-            recipe.url = url
             break
 
-    # If we could not scrape anything, simply create an empty recipe storing
+    # Ensure URL is set
-    # the URL.
-    if not recipe:
-        recipe = db.Recipe()
     recipe.url = url
 
     recipe.save()

cuizin/web.py

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

package.json

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