adds mdi icons, improves recipe design

planner/src/bin/weekly.rs

@@ -3,6 +3,7 @@
 extern crate planner;
 extern crate cookbook;
 
+use std::time;
 use std::fmt::Debug;
 use std::fmt::Display;
 use std::hash::Hash;
@@ -30,6 +31,7 @@ fn pretty_output<K: Eq + Hash + Debug>(res: &Variables<Value, K>) -> String {
 }
 
 fn main() {
+    let start_time = time::Instant::now();
     let conn = establish_connection();
     let possible_values = recipes::load_all(&conn);
     let domain = Domain::new(possible_values);
@@ -39,5 +41,6 @@ fn main() {
     }
     let mut problem = problem.finish();
     let results = problem.solve_all();
-    println!("{:?}", pretty_output(results.first().unwrap()));
+    println!("Took {:?}", start_time.elapsed());
+    println!("{}", pretty_output(results.first().unwrap()));
 }

planner/src/solver.rs

@@ -77,9 +77,10 @@ impl<'a,V, K: Eq + Hash + Clone> Problem<'a, V, K> {
         ProblemBuilder::new()
     }
 
-    pub fn from_template(_template: i32) -> Problem<'a, V, K> {
+    pub fn from_template() -> Problem<'a, V, K> {
-        Self::build()
+        let mut builder = Self::build();
-            .finish()
+
+        builder.finish()
     }
 
     /// Returns all possible Updates for next assignements, prepended with

planner/src/template.rs

@@ -6,7 +6,6 @@ const DAYS: &[&str] = &[
     "Dimanche"];
 
 /// An enum to discriminate every meals
-#[allow(dead_code)]
 #[derive(Debug, PartialEq, Eq, Clone, Hash)]
 pub enum Meal {
     Breakfast,
@@ -16,7 +15,6 @@ pub enum Meal {
 
 type Key<'a> = (&'a str, &'a Meal);
 
-
 /// Options set on a meal
 #[derive(Debug, Default)]
 struct MealOpts<V> {
@@ -50,11 +48,17 @@ impl<'a> Template {
         -> Vec<(Key, DomainValues<Value>, Option<&Value>)>
     {
         use cookbook::recipes::RecipeCategory;
-        let mut vars_opts = Vec::new();
+        Self::keys()
-        for key in Self::keys().into_iter() {
+            .into_iter()
+            .filter(|key| {
+                match *key {
+                    ("Samedi", _) | ("Dimanche", _) => true,
+                    (_, Meal::Breakfast) => false,
+                    (_,_) => true,
+                }
+            })
+            .map(|key| {
                 //TODO: is key used ? MealOpts.is_used
-
-            //TODO: Initial values
                 let category_filter: fn(&Value) -> bool = match key {
                     (_, Meal::Breakfast) => |r: &Value| {
                         r.category == RecipeCategory::Breakfast // Breakfast
@@ -66,12 +70,10 @@ impl<'a> Template {
                         r.category == RecipeCategory::Starter // Starter
                     }
                 };
-
                 // TODO: has initial ?
-            //let key_name = format!("{}_{:?}", key.0, key.1);
                 let initial = None;
-            vars_opts.push((key, domain.filter(category_filter), initial));
+                (key, domain.filter(category_filter), initial)
-        }
+            })
-        vars_opts
+            .collect()
     }
 }

web/vue/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "^3.4.93",
     "bulma": "^0.7.2",
     "vue": "^2.5.22"
   },

web/vue/src/App.vue

@@ -25,6 +25,7 @@
 
 <script>
 import 'bulma/css/bulma.css'
+import '@mdi/font/css/materialdesignicons.min.css'
 import Heading from './components/Heading.vue'
 import RecipeDetails from './components/RecipeDetails.vue'
 import RecipeList from './components/RecipeList.vue'

web/vue/src/components/Planner.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="box">
-    <button @click="fetchSolution" class="button is-primary">FetchSolution</button>
+    <button @click="fetchSolution"
+            class="button is-primary"
+            v-bind:class="{'is-loading': is_loading }">
+    FetchSolution</button>
     <hr />
     <div v-if="template">
-      <div class="columns is-desktop is-vcentered">
+      <div class="columns is-desktop is-vcentered is-multiline">
         <div v-for="day_meals in itemsGroupedByDay"
-             class="column">
+             class="column is-one-quarter">
           <strong> {{ day_meals[0] }}</strong>
           <div v-for="meal in day_meals[1]">
             <div v-if="meal.value" class="tags has-addons">
-              <span class="tag is-info">{{ meal.value.title }}</span>
+              <span class="tag is-info">{{ meal.key[1] }}</span>
+              <span class="tag is-light">{{ meal.value.title }}</span>
               <a @click="unsetMeal(meal.key)"
                  class="tag is-delete"></a>
             </div>
@@ -52,11 +56,16 @@ export default {
   data () {
     return {
     template: null,
+    is_loading: false,
   };},
   methods: {
     fetchSolution: function() {
+      this.is_loading = true;
       fetch("http://localhost:8000/api/solver/one")
-        .then((res) => res.json())
+        .then((res) => {
+          this.is_loading = false;
+          return res.json();}
+        )
         .then((data) => this.template = data)
         .catch((err) => console.log(err));
     },

web/vue/src/components/RecipeDetails.vue

@@ -1,16 +1,27 @@
 <template>
-  <div class="container box">
+  <div class="columns">
-  <button @click="$emit('close')" class="button is-pulled-left">Return to list</button>
+    <div class="column is-narrow">
+      <a @click="$emit('close')" class="has-text-dark">
+        <span class="icon is-large">
+          <i class="mdi mdi-48px mdi-view-list"></i>
+        </span>
+      </a>
+    </div>
+    <div class="column">
       <h4 class="title">{{ item.title }}</h4>
       <h6 class="subtitle">{{ categories[item.category].name }}</h6>
-    <p><strong>Ingredients : </strong></p>
+      <p><strong>Ingredients</strong></p>
       <ul>
         <li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
       </ul>
-    <button @click="$emit('delete', item.id)"
+    </div>
-            class="button is-danger is-pulled-right">
+    <div class="column is-narrow">
-      DELETE !
+      <a @click="$emit('delete', item.id)">
-    </button>
+        <span class="icon is-large has-text-danger">
+          <i class="mdi mdi-48px mdi-delete-forever"></i>
+        </span>
+      </a>
+    </div>
   </div>
 </template>
 

web/vue/src/components/RecipeList.vue

@@ -3,14 +3,25 @@
     <div v-if="active_category == -1" class="columns is-multiline is-mobile">
       <div v-for="c in categories" :key="c.id" class="column is-one-quarter-desktop is-half-tablet">
         <button @click="setActiveCategory(c.id)"
-          class="button is-large is-primary has-text-dark button-block">
+          class="button is-large is-info is-fullwidth button-block">
-        {{ c.name }}</button>
+          <span class="icon is-large">
+            <i class="mdi mdi-24px" v-bind:class="c.icon"></i>
+          </span>
+          <br />
+          <p>{{ c.name }}</p></button>
       </div>
     </div>
-    <div v-else class="box">
+    <div v-else class="columns">
-      <button @click="setActiveCategory(-1)" class="button is-pulled-left">Categories</button>
+      <div class="column is-narrow">
+        <a @click="setActiveCategory(-1)" class="has-text-dark">
+          <span class="icon is-large" >
+            <i class="mdi mdi-48px mdi-view-grid"></i>
+          </span>
+        </a>
+      </div>
+      <div class="column">
         <h2 class="subtitle">{{ categories[active_category].name }}</h2>
-      <ul>
+        <ul class="content">
           <li v-for="item in displayed" :key="item.id" class="has-text-left">
             <a href=""
                @click.prevent="$emit(
@@ -21,16 +32,18 @@
         </ul>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 export const categories = [
-  {id: 0, name: "Petit-déjeuner"},
+  {id: 0, name: "Petit-déjeuner", icon: "mdi-food-croissant"},
-  {id: 1, name: "Entrée"},
+  {id: 1, name: "Entrée", icon: "mdi-bowl"},
-  {id: 2, name: "Plat principal"},
+  {id: 2, name: "Plat principal", icon: "mdi-food"},
-  {id: 3, name: "Dessert"}
+  {id: 3, name: "Dessert", icon: "mdi-cupcake"}
 ];
 
+
 export default {
   name: 'RecipeList',
   props: ["items"],
@@ -57,8 +70,7 @@ export default {
 
 <style scoped>
   .button-block {
-    width: 200px;
+    min-height: 150px;
-    height: 200px;
   }
 
   .li {