Adds Planner component

web/src/main.rs

@@ -76,8 +76,19 @@ mod api {
         Json( recipes::delete(&conn, id) )
     }
 
+    #[derive(Serialize)]
+    pub struct TemplateItems {
+        key: (String, String),
+        value: Option<RecipeObject>,
+    }
+
+    #[derive(Serialize)]
+    pub struct TemplateObject {
+        items: Vec<TemplateItems>
+    }
+
     #[get("/solver/one")]
-    pub fn one_solution(conn: CookbookDbConn) -> Json<String> {
+    pub fn one_solution(conn: CookbookDbConn) -> Json<TemplateObject> {
         use planner::{
             template,
             solver::{Domain, Problem}
@@ -93,8 +104,18 @@ mod api {
             .add_constraint(|_| true)
             .finish();
         let results = problem.solve_all();
+        let one_result = results.first().unwrap();
 
-        Json(format!("{:?}", results.first().unwrap()))
+        Json(TemplateObject {
+            items: one_result
+                    .into_iter()
+                    .map(|(k,v)| {
+                        TemplateItems {
+                            key: (format!("{}", k.0), format!("{:?}", k.1)),
+                            value: v.map(|r| RecipeObject::from(&conn, r.clone())),
+                    }})
+                    .collect(),
+        })
     }
 }
 

web/vue/src/components/Planner.vue

@@ -2,16 +2,52 @@
   <div class="box">
     <h2 class="subtitle">Week</h2>
     <button @click="fetchSolution" class="button is-primary">FetchSolution</button>
-    <p>{{ template }}</p>
+    <hr />
+    <div v-if="template">
+      <div class="columns">
+        <div v-for="day_meals in itemsGroupedByDay"
+             class="column">
+          <strong> {{ day_meals[0] }}</strong>
+          <p v-for="meal in day_meals[1]">
+            <span class="tag is-light">{{ meal.value.title }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+
+const groupBy = function(items, keyGetter) {
+  const map = new Map();
+  items.forEach((item) => {
+    const key = keyGetter(item);
+    const collection = map.get(key);
+    if (!collection) {
+      map.set(key, [item]);
+    } else {
+      collection.push(item);
+    }
+  });
+  return map;
+};
+
+const DAYS = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
+const compareWeekDay = function(a, b) {
+  return DAYS.indexOf(a[0]) - DAYS.indexOf(b[0]);
+}
+
+const MEALS = ["Breakfast", "Lunch", "Dinner"];
+const compareMealType = function(mealA, mealB) {
+  return MEALS.indexOf(mealA.key[1]) - MEALS.indexOf(mealB.key[1]);
+}
+
 export default {
   name: 'Planner',
   data () {
     return {
-    template: "",
+    template: null,
   };},
   methods: {
     fetchSolution: function() {
@@ -20,6 +56,16 @@ export default {
         .then((data) => this.template = data)
         .catch((err) => console.log(err));
     }
+  },
+  computed: {
+    itemsGroupedByDay: function() {
+      let grouped = groupBy(this.template.items, item => item.key[0]);
+      console.log(grouped);
+      let sorted = new Map([...grouped.entries()].sort(compareWeekDay));
+      console.log(sorted);
+      sorted.forEach((meals) => meals.sort(compareMealType));
+      return sorted;
+    }
   }
 }
 </script>