diff --git a/public/js/main.js b/public/js/main.js index ab54335..b8f1bf8 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,10 +1,85 @@ -new Vue({ - el: '#select', - data: { - regiones: [] - }, - mounted() { - axios.get("/api/regiones").then(response => this.regiones = response.data); - } +window.Event = new Vue(); -}) \ No newline at end of file +Vue.component('region-select', { + template: ` +
+ +
+ +
+
`, + data() { + return { + regiones: [] + } + }, + mounted() { + axios.get("/api/regiones").then(response => this.regiones = response.data); + } +}); + +Vue.component('region-option', { + template: ``, + methods: { + onRegionClicked() { + Event.$emit("region-seleccionada",this.$attrs.name); + } + } +}); + +Vue.component('barrio-select', { + template: ` +
+ +
+ +
+
`, + data() { + return { + visible: false, + region: null, + gdc: [] + } + }, + mounted() { + Event.$on('region-seleccionada', (region)=> { + this.fillGDC(region); + this.visible = true; + }); + }, + methods : { + fillGDC(region) { + this.region = region; + axios.get("/api/grupos-de-compra").then(response => { + this.gdc = response.data[this.region]; + }); + + } + } + +}); + +Vue.component('gdc-option', { + template: ``, + methods: { + onGDCClicked() { + Event.$emit("gdc-seleccionado",this.$attrs.name); + } + } +}); + +new Vue({ + el: '#root', + mounted() { + Event.$on('gdc-seleccionado', (gdc) => { + console.log('se seleccionó el gdc ' + gdc); + }); +} +}); \ No newline at end of file diff --git a/resources/views/inicio.blade.php b/resources/views/inicio.blade.php index 076b2f3..7dac652 100644 --- a/resources/views/inicio.blade.php +++ b/resources/views/inicio.blade.php @@ -8,20 +8,15 @@
-
+

Compras MPS

Bienvenidx a la aplicación de compras del Mercado Popular de Subsistencia

- -
- -
+ +