adds Template custom object, starts SlotSelect component

web/vue/src/App.vue

@@ -31,7 +31,6 @@ import RecipeDetails from './components/RecipeDetails.vue'
 import RecipeList from './components/RecipeList.vue'
 import Planner from './components/Planner.vue'
 
-
 export default {
   name: 'app',
   components: {
@@ -99,8 +98,10 @@ export default {
   },
   mounted () {
     this.fetchRecipesList();
-    this.initWeekPlanning();
+
+    console.log("MOUNTED !");
   }
+
 }
 </script>
 

web/vue/src/components/Planner.vue

@@ -6,10 +6,10 @@
     FetchSolution</button>
     <div v-if="template">
       <div class="columns is-mobile is-vcentered is-multiline">
-        <div v-for="day_meals in itemsGroupedByDay"
+        <div v-for="[day, meals] in itemsGroupedByDay"
              class="column is-one-quarter-desktop is-half-mobile">
-          <p class="subtitle"><strong> {{ day_meals[0] }}</strong></p>
-          <div v-for="meal in day_meals[1]">
+          <p class="subtitle"><strong> {{ day }}</strong></p>
+          <div v-for="meal in meals">
             <p v-if="meal.value" class="tags has-addons">
               <span class="tag is-info">{{ meal.key[1] }}</span>
               <span class="tag is-light">{{ meal.value.title }}</span>
@@ -26,20 +26,6 @@
 
 <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(entryA, entryB) {
   return DAYS.indexOf(entryA[0]) - DAYS.indexOf(entryB[0]);
@@ -50,13 +36,61 @@ const compareMealType = function(mealA, mealB) {
   return MEALS.indexOf(mealA.key[1]) - MEALS.indexOf(mealB.key[1]);
 }
 
+function TemplateSlot(key, value) {
+  this.key = key;
+  this.value = value;
+}
+
+function Template() {
+  this.items = [];
+  var day;
+  for (day in DAYS) {
+    var meal;
+    for (meal in MEALS) {
+      this.items.push(
+        new TemplateSlot(
+              [DAYS[day], MEALS[meal]], //slotKey
+              null)                     //value
+        );
+    }
+  }
+}
+
+/// Given that Template.items are kept in order, we can
+/// use a very simple solution (yields slices of 3, with name)
+Template.prototype.groupedByDays = function() {
+  var i;
+  var grouped = [];
+  for (i = 0; i < this.items.length / 3; i++) {
+    let start = i * 3;
+    let end = (i + 1) * 3;
+    let day = this.items[start].key[0];
+    let slice = this.items.slice(start, end);
+    console.log(day, slice);
+    grouped.push([day, slice]);
+  }
+  return grouped;
+}
+
+Template.prototype.findIndexByKey = function(slotKey) {
+  console.log("Search index of key: " + slotKey);
+  var day_idx = DAYS.indexOf(slotKey[0]);
+  var meal_idx = MEALS.indexOf(slotKey[1]);
+  if (day_idx == -1 || meal_idx == -1) {
+    console.error("Index not found");
+  };
+  return day_idx * 3 + meal_idx;
+}
+
 export default {
   name: 'Planner',
   data () {
+    var template = new Template();
     return {
-    template: null,
+      template,
       is_loading: false,
-  };},
+    };
+  },
   methods: {
     fetchSolution: function() {
       this.is_loading = true;
@@ -65,32 +99,23 @@ export default {
           this.is_loading = false;
           return res.json();}
         )
-        .then((data) => this.template = data)
+        .then((data) => this.template = data) //TODO: update
         .catch((err) => console.log(err));
     },
     unsetMeal: function(mealKey) {
-      console.log("Try unsetting " + mealKey);
-      let idx = this.template.items.findIndex((item) => {
-        return item.key == mealKey;
-      });
+      let idx = this.template.findIndexByKey(mealKey);
+      // console.log("Unset " + idx);
       this.template.items[idx].value = null;
-      //console.log("vm" + this.vm.items);
     },
     setMeal: function(mealKey, mealData) {
-      let idx = this.template.items.findIndex((item) => {
-        return (item.key[0] == mealKey[0]
-             && item.key[1] == mealKey[1]);
-      });
-      console.log(idx)
+      let idx = this.template.findIndexByKey(mealKey);
+      // console.log("Set " + idx);
       this.template.items[idx].value = mealData;
     }
   },
   computed: {
     itemsGroupedByDay: function() {
-      let grouped = groupBy(this.template.items, item => item.key[0]);
-      let sorted = new Map([...grouped.entries()].sort(compareWeekDay));
-      sorted.forEach((meals) => meals.sort(compareMealType));
-      return sorted;
+      return this.template.groupedByDays();
     }
   }
 }

web/vue/src/components/RecipeDetails.vue

@@ -8,12 +8,7 @@
         </span>
       </a>
       <br class="is-hidden-mobile"/>
-      <a @click="$emit('add', item.id)"
-         class="has-text-success">
-        <span class="icon is-large">
-          <i class="mdi mdi-36px mdi-table-plus"></i>
-        </span>
-      </a>
+      <SlotSelect />
     </div>
     <div class="column">
       <h4 class="title">{{ item.title }}</h4>
@@ -35,9 +30,14 @@
 
 <script>
 import _, {categories} from './RecipeList.vue'
+import SlotSelect from './planner/SlotSelect.vue'
+
 
 export default {
   name: 'RecipeDetails',
+  components: {
+    SlotSelect,
+  },
   props: {
     item: {
       type: Object,

web/vue/src/components/planner/SlotSelect.vue

@@ -0,0 +1,29 @@
+<template>
+<div>
+<a @click="$emit('add', item.id)"
+     class="has-text-success">
+    <span class="icon is-large">
+      <i class="mdi mdi-36px mdi-table-plus"></i>
+    </span>
+</a>
+<div class="select">
+  <select>
+    <option>Lundi</option>
+    <option>Mardi</option>
+  </select>
+</div>
+<div class="select">
+  <select>
+    <option>Breakfast</option>
+    <option>Lunch</option>
+  </select>
+</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'SlotSelect',
+
+}
+</script>