adds Key generic parameters, use custom Key type from template.rs

web/vue/src/App.vue

@@ -1,10 +1,9 @@
 <template>
   <div id="app">
-    <section class="section has-background-primary" id="heading">
-      <Heading msg="Cook-Assistant"/>
-    </section>
+    <Heading msg="Cook-Assistant"/>
     <section class="section" id="recipes-view">
-      <p v-if="is_loading">Loading...</p>
+      <p v-if="status.loading">Loading...</p>
+      <div v-if="status.error">Error</div>
       <h2 v-else class="subtitle">Livre de recettes</h2>
       <div class="container">
         <keep-alive>
@@ -19,6 +18,7 @@
     </section>
     <section class="section has-background-grey-lighter" id="planner-view">
       <h2 class="subtitle">Planning</h2>
+      <Planner />
     </section>
   </div>
 </template>
@@ -28,6 +28,7 @@ import 'bulma/css/bulma.css'
 import Heading from './components/Heading.vue'
 import RecipeDetails from './components/RecipeDetails.vue'
 import RecipeList from './components/RecipeList.vue'
+import Planner from './components/Planner.vue'
 
 
 
@@ -37,10 +38,15 @@ export default {
     Heading,
     RecipeDetails,
     RecipeList,
+    Planner,
   },
   data () {
     return {
-      is_loading: true,
+      status: {
+        loading: true,
+        error: false,
+        error_msg: "",
+      },
       items: [],
       // Index of the item
       // activated for details view
@@ -71,10 +77,14 @@ export default {
       fetch("http://localhost:8000/api/list")
         .then((res) => res.json())
         .then((data) => {
+          console.log(data);
           this.items = data;
-          this.is_loading = false;
+          this.status.loading = false;
         })
         .catch(function(err) {
+          this.status.loading = false;
+          this.status.error = true;
+          this.statue.error_msg = err;
           console.error(err);
         });
     }

web/vue/src/components/Planner.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="box">
+    <h2 class="subtitle">Week</h2>
+    <button @click="fetchSolution" class="button is-primary">FetchSolution</button>
+    <p>{{ template }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Planner',
+  data () {
+    return {
+    template: "",
+  };},
+  methods: {
+    fetchSolution: function() {
+      fetch("http://localhost:8000/api/solver/one")
+        .then((res) => res.json())
+        .then((data) => this.template = data)
+        .catch((err) => console.log(err));
+    }
+  }
+}
+</script>

web/vue/src/components/RecipeDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container box">
-  <button @click="$emit('close')" class="button is-pulled-right">X close</button>
+  <button @click="$emit('close')" class="button is-pulled-left">Return to list</button>
     <h4 class="title">{{ item.title }}</h4>
     <h6 class="subtitle">{{ categories[item.category].name }}</h6>
     <p><strong>Ingredients : </strong></p>
@@ -15,6 +15,8 @@
 </template>
 
 <script>
+import _, {categories} from './RecipeList.vue'
+
 export default {
   name: 'RecipeDetails',
   props: {
@@ -28,7 +30,7 @@ export default {
   },
   data () {
     return {
-      categories: ["test", "test", "test"],
+      categories: categories,
     }
   }
 }

web/vue/src/components/RecipeList.vue

@@ -2,14 +2,16 @@
   <div class="container">
     <div v-if="active_category == -1" class="columns">
       <div v-for="c in categories" :key="c.id" class="column">
-        <button @click="setActiveCategory(c.id)" class="button is-large is-primary has-text-dark">{{ c.name }}</button>
+        <button @click="setActiveCategory(c.id)"
+          class="button is-large is-primary has-text-dark button-block">
+        {{ c.name }}</button>
       </div>
     </div>
     <div v-else class="box">
-      <button @click="setActiveCategory(-1)" class="button is-pulled-left"><< back</button>
+      <button @click="setActiveCategory(-1)" class="button is-pulled-left">Categories</button>
       <h2 class="subtitle">{{ categories[active_category].name }}</h2>
       <ul>
-        <li v-for="item in displayed" :key="item.id">
+        <li v-for="item in displayed" :key="item.id" class="has-text-left">
           <a href=""
              @click.prevent="$emit(
                'open-details',
@@ -52,3 +54,14 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+  .button-block {
+    width: 200px;
+    height: 200px;
+  }
+
+  .li {
+    list-style: circle;
+  }
+</style>