l-assiette/src/views/MiPedido.vue

116 lines
3.7 KiB
Vue

<template>
<div>
<header-mini />
<login-bar v-if="usuarioNoLogeado" />
<nav-bar />
<div class="container fondoBlanco pedidos">
<h2 class="pedidos__titulo">Mis pedidos</h2>
<br>
<br>
<div v-if="usuarioNoLogeado" class="pedidos__usuario-no-logeado">
¡Ups! Parece que no iniciaste sesión.<br>
Inicia sesión y controla fácilmente tus pedidos y entregas a domicilio. <br>
<br>
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
<router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
Registrarse
</router-link>
<router-link to="/iniciar-sesion/" id="botonInicioSesion" class="boton">
Iniciar Sesion
</router-link>
<br/>
<br/>
<br/>
</div>
</div>
<div v-else>
<pedido v-for="pedido in pedidos"/>
</div>
</div>
<mi-footer />
</div>
</template>
<script>
import HeaderMini from '../components/headerMini'
import NavBar from '../components/navBar'
import LoginBar from '../components/navBarInicioSesion'
import MiFooter from '../components/mi-footer'
import Pedido from '../components/pedido'
import conexion from '../variables';
export default {
name: "MiPedido",
data: function () {
return {
usuario: window.usuarioActual[0],
pedidos: []
}
},
components: {
'header-mini': HeaderMini,
'nav-bar': NavBar,
'login-bar': LoginBar,
'mi-footer': MiFooter,
'pedido': Pedido
},
computed: {
usuarioNoLogeado: function () {
return !this.usuario.logged;
}
},
methods: {
obtenerPedidos: function () {
let vm = this;
const usuarioLogueado = !this.usuario.logged;
return new Promise((resolve, reject) => {
if ( usuarioLogueado ) {
reject("Usuario no logeado.");
return;
}
const xhr = new XMLHttpRequest();
xhr.open("POST",`${conexion}/pedidos/actual`);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onload = () => {
console.log(`Esta es mi respuesta we :3\n${xhr.responseText}`);
resolve(xhr.responseText);
};
xhr.send(`USER_ID=${vm.usuario["USER_ID"]}`);
});
}
},
created: function () {
let vm = this;
this.obtenerPedidos()
.then(response => {
while (vm.pedidos.pop() !== 0);
const data = JSON.parse(response);
for (item of data) {
vm.pedidos.push(item);
}
})
.catch(reason => console.log(`Obtener pedidos desde el servidor rechazado. Razón: ${reason}`));
}
}
</script>
<style scoped lang="sass">
.pedidos__titulo
text-align: center
font:
size: xx-large
weight: bold
family: Muli, "Open Sans", sans-serif
margin: 10px 0
.pedidos__usuario-no-logeado
font-size: x-large
text-align: center
.pedidos
</style>