makes updating Template work

web/vue/src/App.vue

@@ -59,9 +59,8 @@ export default {
     closeActiveView: function() {
       this.active_view = -1;
     },
-    addToPlanning: function(idx) {
-      let mealKey = ["Lundi", "Lunch"];
-      let mealData = this.items[idx];
+    addToPlanning: function(mealKey, id) {
+      let mealData = this.items.find((recipe) => recipe.id == id);
       this.$refs.weekPlanning.setMeal(mealKey, mealData);
     },
     deleteRecipe: function(id) {

web/vue/src/components/Planner.vue

@@ -82,6 +82,15 @@ Template.prototype.findIndexByKey = function(slotKey) {
   return day_idx * 3 + meal_idx;
 }
 
+Template.prototype.updateJson = function(data) {
+  var i;
+  for (i in data.items) {
+    let item = data.items[i];
+    let idx = this.findIndexByKey(item.key);
+    this.items[idx].value = item.value;
+  }
+}
+
 export default {
   name: 'Planner',
   data () {
@@ -99,7 +108,7 @@ export default {
           this.is_loading = false;
           return res.json();}
         )
-        .then((data) => this.template = data) //TODO: update
+        .then((data) => this.template.updateJson(data)) 
         .catch((err) => console.log(err));
     },
     unsetMeal: function(mealKey) {

web/vue/src/components/RecipeDetails.vue

@@ -8,7 +8,7 @@
         </span>
       </a>
       <br class="is-hidden-mobile"/>
-      <SlotSelect />
+      <SlotSelect v-on:add="addToPlanning" />
     </div>
     <div class="column">
       <h4 class="title">{{ item.title }}</h4>
@@ -51,6 +51,11 @@ export default {
     return {
       categories: categories,
     }
+  },
+  methods: {
+    addToPlanning: function(slotKey) {
+      this.$emit('add', slotKey, this.item.id);
+    }
   }
 }
 </script>

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

@@ -1,22 +1,36 @@
 <template>
-<div>
-<a @click="$emit('add', item.id)"
+<div class="box">
+<div class="columns">
+  <div class="column">
+    <div class="field">
+      <div class="control is-expanded">
+      <div class="select is-small is-fullwidth">
+        <select v-model="selected_day">
+          <option value="Lundi">Lundi</option>
+          <option value="Mardi">Mardi</option>
+        </select>
+      </div>
+      </div>
+    </div>
+    <div class="field">
+      <p class="control">
+      <div class="select is-small">
+        <select v-model="selected_meal">
+          <option value="Breakfast">Breakfast</option>
+          <option value="Lunch">Lunch</option>
+        </select>
+      </div>
+      </p>
+    </div>
+  </div>
+  <div class="column">
+  <a @click="$emit('add', getSelectedKey)"
        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>
@@ -24,6 +38,16 @@
 <script>
 export default {
   name: 'SlotSelect',
-
+  data () {
+    return {
+      selected_day: "Lundi",
+      selected_meal: "Breakfast",
+    }
+  },
+  computed: {
+    getSelectedKey: function() {
+      return [this.selected_day, this.selected_meal];
+    }
+  }
 }
 </script>