From 69ff0c24d4bf63ecc817173391cb19b2bda1311c Mon Sep 17 00:00:00 2001 From: Thomas L Date: Sat, 20 Jun 2020 17:09:00 +0200 Subject: [PATCH] basic functional ui with vue --- frontend/vue_dl6tom/index.html | 46 +++++++++++++++++++++++++++++ frontend/vue_dl6tom/ui.js | 53 ++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+) create mode 100644 frontend/vue_dl6tom/index.html create mode 100644 frontend/vue_dl6tom/ui.js diff --git a/frontend/vue_dl6tom/index.html b/frontend/vue_dl6tom/index.html new file mode 100644 index 0000000..868d3ae --- /dev/null +++ b/frontend/vue_dl6tom/index.html @@ -0,0 +1,46 @@ + + + + + + + + + Pizzatool + + +
+

Ingredients

+ +

Pizzas

+ +
+ + + diff --git a/frontend/vue_dl6tom/ui.js b/frontend/vue_dl6tom/ui.js new file mode 100644 index 0000000..4937636 --- /dev/null +++ b/frontend/vue_dl6tom/ui.js @@ -0,0 +1,53 @@ +var app = new Vue({ + el: '#app', + data: { + ingredients: [], + ingredient_name: '', + pizzas: [], + pizza_name: '', + }, + methods: { + create_ingredient: function() { + axios.post('api/ingredients', { + name: this.ingredient_name, + }) + .then(function(response) { + app.ingredients.push(response.data); + }); + }, + delete_ingredient: function(id) { + axios.delete('api/ingredients/' + id) + .then(function() { + app.ingredients = app.ingredients.filter(function(ingredient) { + return ingredient.id != id; + }); + }); + }, + create_pizza: function() { + axios.post('api/pizzas', { + name: this.pizza_name, + }) + .then(function(response) { + app.pizzas.push(response.data); + }); + }, + delete_pizza: function(id) { + axios.delete('api/pizzas/' + id) + .then(function() { + app.pizzas = app.pizzas.filter(function(pizza) { + return pizza.id != id; + }); + }); + }, + }, + mounted: function() { + axios.get('api/ingredients') + .then(function(response) { + app.ingredients = response.data; + }); + axios.get('api/pizzas') + .then(function(response) { + app.pizzas = response.data; + }); + }, +})