<!DOCTYPE html>
<html>
<head>
<title>Chespi Delivery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript">
//Esta es una util funcion que convierte el contenido del Formulario
// a Json
function formToJSON() {
return JSON.stringify({
"nombre": $('#nombre').val(),
"direccion": $('#direccion').val(),
"telefono": $('#telefono').val(),
"cantidad": $('#cantidad').val(),
"hora": $('#hora').val()
});
}
// Cuando se hace click en el boton
function obtenerListaPedidos(){
//Hacemos una peticion get al servidor, a la direccion que establecimos
$.get('./server/api.php/pedidos', function(data) {
console.log(data);
//Tenemos la lista pero esta mas adentro
var lista = jQuery.parseJSON( data );
console.log (lista);
//Sacamos un poco mas afuera
var pedidos = lista.Pedidos;
//ocultamos el listado
$("#listadoPedidos").hide();
//Vaciamos lo que tiene para empezar a cargar
$("#listadoPedidos").empty().append("<ul>");
for (pedido in pedidos){
//Metemos en el div en forma de lista
$("#listadoPedidos").append( "<li> A :" + pedidos[pedido].nombre + " " + pedidos[pedido].cantidad + "grs" + " a las: " + pedidos[pedido].hora + " en: " + pedidos[pedido].direccion + " tel: " + pedidos[pedido].telefono +
"</li>" );
}
$("#listadoPedidos").append("</ul>");
$("#listadoPedidos").slideDown();
});
};
//Esto se encargaria de enviar el formulario
function addPedido() {
/* detenemos el post normal no... */
event.preventDefault();
var datos = formToJSON();
var url = "./server/api.php/pedido";
console.log(datos);
/* Obtenemos los datos del formulario y posteamos*/
var posting = $.post( url , datos );
/* Put the results in a div */
posting.done(function( data ) {
//ya esta tarde asi que no comprobamos errores :O
alert("Se agrego " + data);
});
};
</script>
</head>
<body>
<!-- Esta seria la pantalla de Inicio, donde el person tiene dos botones no -->
<div data-role="page" id="inicio" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Chespi Delivery</h1>
</div><!-- /header -->
<div data-role="content">
<center>
<p> <img src="img/logo.jpg"> </p>
<h1>Chespi locooo</h1>
<p>Facilitando la vida de los manijas</p>
<p><br/></p>
<p><a href="#getPedidos" data-role="button" data-transition="slide" id="getpedidosbtn" onClick="obtenerListaPedidos()"> Ver los Pedidos</a></p>
<p><a href="#addPedido" data-role="button" data-transition="slide" id="addpedidobtn"> Agregar un Pedido </a></p>
</center>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<p><br/>no se que me divague</p>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Esta seria la pantalla donde veria la lista de pedidos -->
<div data-role="page" id="getPedidos" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Chespi Delivery</h1>
</div><!-- /header -->
<div data-role="content">
<center>
<p> <img src="img/logo.jpg"> </p>
<h1>Lista de Pedidos</h1>
<!-- Aca vamos a meter con jquery los pedidos viteh -->
<div id="listadoPedidos" ></div>
<p><a href="#inicio" data-role="button" data-transition="slide"> Atras </a></p>
</center>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<p><br/>le doy a tu hermana</p>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Y esta seria la pantalla donde da de alta un pedido -->
<div data-role="page" id="addPedido" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Chespi Delivery</h1>
</div><!-- /header -->
<div data-role="content">
<center>
<p> <img src="img/logo.jpg"> </p>
<h1>Agregar Pedido</h1>
<!-- Este es el formulario que tiene que llenar el amigo -->
<form method = "post" action ="" id="formAddPedido">
<input type="text" id="nombre" name="nombre" placeholder="Nombre del cliente..." />
<input type="text" id="direccion" name="direccion" placeholder="Direccion del cliente..." />
<input type="number" id="cantidad" name="cantidad" placeholder="Cantidad..." />
<input type="tel" id="telefono" name="telefono" placeholder="Telefono del cliente..." />
<input type="time" id="hora" name="hora" placeholder="Hora..." />
</form>
<p><a href="#inicio" data-role="button" data-transition="slide" id="addpedidobtn" onClick="addPedido()"> Agregar Pedido</a></p>
<br/>
<p><a href="#inicio" data-role="button" data-transition="slide"> Atras </a></p>
</center>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<p><br/>de lo vago</p>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>