makes slot selection 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/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)"
-     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 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>
 </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>