Adds basic vuejs functionnality, implements RecipeCategory custom field

2019-02-01 15:58:58 +01:00
parent 66514eb192
commit 616f8095e2
5 changed files with 112 additions and 14 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -7,23 +7,64 @@
 <body>
 <div id="app">
  <h1>Cook Assistant</h1>
-  <p>Fetch value from wasm : {{ value }}</p>
-  <strong>{{ message }}</strong>
+  <!-- Details View -->
+  <section v-if="active_view > -1">
+    <button @click="setActiveView(-1)">X close</button>
+    <h4>{{ items[active_view].title }}</h4>
+    <p>{{ categories[items[active_view].category].name }}</p>
+  </section>
+  <!-- Category List View -->
+  <section v-else>
+    <div v-if="active_category == -1">
+      <div v-for="c in categories" :key="c.id">
+        <button @click="setActiveCategory(c.id)">{{ c.name }}</button>
+      </div>
+    </div>
+    <div v-else>
+      <button @click="setActiveCategory(-1)"><< back</button>
+      <p>{{ categories[active_category].name }}</p>
+      <ul>
+        <li v-for="item in displayed" :key="item.id">
+          <a href="" @click.prevent="setActiveView(item.id)">{{ item.title }}</a>
+        </li>
+      </ul>
+    </div>
+  </section>
 </div>
 </body>
 <script type="text/javascript">

-  var getWasmValue = function() {
-    return 42
-  };
-
  var app = new Vue({
    el: '#app',
    data: {
-      message: 'Hello ! We are trying out here...',
+      categories: [
+        {id: 0, name: "Petit-déjeuner"},
+        {id: 1, name: "Plat principal"},
+        {id: 2, name: "Dessert"}
+      ],
+      active_category: -1,
+      active_view: -1,
+      items: [
+        {id: 0, title: "Raclette", category: 1},
+        {id: 1, title: "Tartiflette", category: 1},
+        {id: 2, title: "Pancakes", category: 0},
+        {id: 3, title: "Crêpes", category: 2}
+      ],
+    },
+    methods: {
+      setActiveCategory: function(id) {
+        this.active_category = id;
+      },
+      setActiveView: function(id) {
+        this.active_view = id;
+      }
    },
    computed: {
-      value: getWasmValue,
+      displayed: function() {
+          return this.items.filter(
+            rec => rec.category == this.active_category
+          );
+      }
    }
  });
 </script>