nathalie
/
pedi2
3
3
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Usuarix puede elegir region y barrio en la pantalla inicial

This commit is contained in:
nat 2022-01-06 19:05:34 -03:00
parent 6fd9833dda
commit 425c2a3a65
2 changed files with 87 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
public/js/main.js vendored
View File

@ -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();
})
Vue.component('region-select', {
template: `
<div class="block">
<label class="label">Seleccioná tu región</label>
<div class="select">
<select>
<option>Seleccionar</option>
<region-option v-for="region in regiones" v-text="region" :name="region"></region-option>
</select>
</div>
</div>`,
data() {
return {
regiones: []
}
},
mounted() {
axios.get("/api/regiones").then(response => this.regiones = response.data);
}
});
Vue.component('region-option', {
template: `<option @click="onRegionClicked""></option>`,
methods: {
onRegionClicked() {
Event.$emit("region-seleccionada",this.$attrs.name);
}
}
});
Vue.component('barrio-select', {
template: `
<div v-show="visible" class="block">
<label class="label">Seleccioná tu grupo de compra</label>
<div class="select">
<select>
<option>Seleccionar</option>
<gdc-option v-for="grupo in gdc" v-text="grupo.nombre" :name="grupo.nombre"></gdc-option>
</select>
</div>
</div>`,
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: `<option @click="onGDCClicked""></option>`,
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);
});
}
});

11
resources/views/inicio.blade.php
View File

@ -8,20 +8,15 @@
</head>
<body>
<section class="section">
<div class="container">
<div id="root" class="container">
<h1 class="title">
Compras MPS
</h1>
<p class="subtitle">
Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
</p>
<label class="label">Seleccioná tu región</label>
<div id="select" class="select">
<select>
<option>Seleccionar</option>
<option v-for="region in regiones" v-text="region"></option>
</select>
</div>
<region-select></region-select>
<barrio-select></barrio-select>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>