Builds a basic api with rocket.rs, updates index.html

2019-02-02 15:27:13 +01:00
parent ee3271f772
commit 46532eee9e
9 changed files with 118 additions and 30 deletions
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
+</head>
+<body>
+<div id="app">
+  <h1>Cook Assistant</h1>
+  <!-- Details View -->
+  <section v-if="active_view > -1">
+    <button @click="setActiveView(-1)">X close</button>
+    <h4>{{ items[active_view].title }}</h4>
+    <h6>{{ categories[items[active_view].category].name }}</h6>
+    <p><strong>{{ items[active_view].ingredients }}</strong></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 app = new Vue({
+    el: '#app',
+    data () {
+      return {
+        categories: [
+          {id: 0, name: "Petit-déjeuner"},
+          {id: 1, name: "Entrée"},
+          {id: 2, name: "Plat principal"},
+          {id: 3, name: "Dessert"}
+        ],
+        active_category: -1,
+        active_view: -1,
+        items: []
+      };
+    },
+    methods: {
+      setActiveCategory: function(id) {
+        this.active_category = id;
+      },
+      setActiveView: function(id) {
+        this.active_view = id - 1;
+      },
+      fetchRecipesList: function() {
+        fetch("/api/list")
+          .then((res) => res.json())
+          .then((data) => this.items = data)
+          .catch(function(err) {
+            console.error(err);
+          });
+      }
+    },
+    computed: {
+      displayed: function() {
+          return this.items.filter(
+            rec => rec.category == this.active_category
+          );
+      }
+    },
+    mounted () {
+      this.fetchRecipesList()
+    }
+  });
+</script>
+</html>