work in progress on Planner component

web/vue/src/App.vue

@@ -3,7 +3,7 @@
     <Heading msg="Cook-Assistant"/>
     <section class="section" id="recipes-view">
       <p v-if="status.loading">Loading...</p>
-      <div v-if="status.error">Error</div>
+      <div v-if="status.error" class="notification is-danger">Error: {{ status.error_msg }}</div>
       <h2 v-else class="subtitle">Livre de recettes</h2>
       <div class="container">
         <keep-alive>
@@ -31,7 +31,6 @@ import RecipeList from './components/RecipeList.vue'
 import Planner from './components/Planner.vue'
 
 
-
 export default {
   name: 'app',
   components: {
@@ -96,12 +95,4 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

web/vue/src/components/Heading.vue

@@ -1,5 +1,16 @@
 <template>
-    <h1 class="title">{{ msg }}</h1>
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="#">
+      {{ msg }}
+    </a>
+    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+  </nav>
 </template>
 
 <script>

web/vue/src/components/Planner.vue

@@ -3,13 +3,18 @@
     <button @click="fetchSolution" class="button is-primary">FetchSolution</button>
     <hr />
     <div v-if="template">
-      <div class="columns">
+      <div class="columns is-desktop is-vcentered">
         <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 v-for="meal in day_meals[1]">
+            <div v-if="meal.value" class="tags has-addons">
+              <span class="tag is-info">{{ meal.value.title }}</span>
+              <a @click="unsetMeal(meal.key)"
+                 class="tag is-delete"></a>
+            </div>
+            <div v-else class="tag is-warning">Empty</div>
+          </div>
         </div>
       </div>
     </div>
@@ -54,6 +59,13 @@ export default {
         .then((res) => res.json())
         .then((data) => this.template = data)
         .catch((err) => console.log(err));
+    },
+    unsetMeal: function(mealKey) {
+      console.log("Try unsetting " + mealKey);
+      let idx = this.template.items.findIndex((item) => {
+        return item.key == mealKey;
+      });
+      this.template.items[idx].value = null;
     }
   },
   computed: {

web/vue/src/components/RecipeList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div v-if="active_category == -1" class="columns">
-      <div v-for="c in categories" :key="c.id" class="column">
+    <div v-if="active_category == -1" class="columns is-multiline is-mobile">
+      <div v-for="c in categories" :key="c.id" class="column is-one-quarter-desktop is-half-tablet">
         <button @click="setActiveCategory(c.id)"
           class="button is-large is-primary has-text-dark button-block">
         {{ c.name }}</button>