button to create pizzas

2020-06-20 15:36:35 +02:00 · 2020-06-20 15:36:35 +02:00 · fa0a9672d3
parent 0f1eeabc7c
commit fa0a9672d3
2 changed files with 29 additions and 25 deletions
--- a/frontend/missytake/dist/index.html
+++ b/frontend/missytake/dist/index.html
@ -6,31 +6,14 @@
 </head>
 <body>
    <div id="app">
-        {{ message }}
-    </div>
-    <div id="app-2">
-        <span v-bind:title="message">
-            Hover your mouse over me for a few seconds
-            to see my dynamically bound title!
-        </span>
-    </div>
-
-    <script>
-var app = new Vue({
-  el: '#app',
-  data: {
-    message: 'Hello Vue!'
-  }
-})
-    </script>
-<script>
-var app2 = new Vue({
-  el: '#app-2',
-  data: {
-    message: 'You loaded this page on ' + new Date().toLocaleString()
-  }
-})
-</script>
+        <p>Du willst eine Pizza? Hier kannst du mit belegen anfangen:</p>
+        <input v-model="pizzatitle" :placeholder="pizzatitle">
+        <button v-on:click="createPizza">Starte mit Belegen!</button>
+        <p>Existierende Pizzen:</p>
+        <ul>

+        </ul>
+    </div>
+    <script src="/js/index.js"></script>
 </body>
 </html>
--- a/frontend/missytake/dist/js/index.js
+++ b/frontend/missytake/dist/js/index.js
@ -0,0 +1,21 @@
+var app = new Vue({
+  el: '#app',
+  data: {
+    pizzatitle: "Meine Pizza"
+  },
+  methods: {
+    createPizza: function () {
+    console.log("Creating Pizza...");
+      var myJson = {
+        "name": this.pizzatitle
+      };
+      fetch("/api/pizzas/", {
+        method: 'POST',
+        body: JSON.stringify(myJson),
+        headers: {
+          'Content-Type': 'application/json'
+          }
+      });
+    }
+  }
+});