Adds Planner component

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>