Untitled

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>


    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- ESTILOS -->

    <link href="css/general.css" rel="stylesheet" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />

    <!--<link rel="stylesheet" type="text/css" href="css/index.css">-->


    <!-- SCRIPTS -->
    <script src="scripts/jquery-2.1.4.js" type="text/javascript"></script>
    <script src="scripts/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
    <script src="scripts/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v3"></script>
    <script src="scripts/general.js" type="text/javascript"></script>


    <title>Ubicacion</title>
</head>
<body>

    <!-- INICIAR SESION -->
    <div id="iniciarSesion" data-role="page">
        <header id="encabezado">
            <div class="row">
                <div class="col-sm-10">
                    <h1 id="titulo">Iniciar sesi&oacute;n</h1>
                </div>
                <div class="col-sm-2">

                </div>
            </div>

        </header>
        <!--<header data-role="header"></header>-->
        <div data-role="content">
            <toast></toast>
            <div class="row">
                <div class="col-sm-12">
                    <form>
                        <div class="row form-group">
                            <div class="col-sm-12 text-center">
                                <input type="text" id="usuario" placeholder="Usuario" class="form-control" />
                                &nbsp;
                                <input type="password" id="pass" placeholder="Contrase&ntilde;a" class="form-control" autocomplete="off" />
                                <p>&nbsp;</p>
                                <a role="button" id="iniciar" class="btn btn-primary btn-lg" data-transition="flip">Iniciar sesi&oacute;n</a>
                            </div>
                            <p>&nbsp;</p>
                            <div class="col-sm-12 text-center">
                                <a href="#registro" role="button" id="crearCuenta" class="btn btn-link btn-lg" data-transition="slide">O crea una cuenta</a>
                            </div>
                        </div>
                    </form>

                </div>
            </div>

        </div>

        <footer>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <p class="pie">Universidad Tecnol&oacute;gica Fidel Vel&aacute;zquez | <span id="year"></span></p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /INICIAR SESION -->

    <!-- REGISTRO -->
    <div id="registro" data-role="page">
        <header id="encabezado">
            <div class="row">
                <div class="col-sm-10">
                    <h1 id="titulo">Crea una cuenta</h1>
                </div>
                <div class="col-sm-2">

                </div>
            </div>

        </header>
        <div data-role="content">
            <div class="row">
                <div class="col-sm-12">
                    <form id="registroUser">
                        <div class="form-group text-center">
                            <input type="text" name="user" id="usuarioR" class="form-control" placeholder="Usuario" />
                            &nbsp;
                            <input type="email" name="email" id="email" class="form-control" placeholder="Correo electrónico" />
                            &nbsp;
                            <input type="password" name="pass" id="passR" class="form-control" placeholder="Contraseña" />
                            &nbsp;
                            <input type="password" name="pass2" id="pass2" class="form-control" placeholder="Repetir contraseña" />
                            <p>&nbsp;</p>
                            <a role="button" class="btn btn-primary btn-md" id="registrarse">Registrarse</a>
                        </div>
                    </form>
                </div>
                <div class="col-sm-12 text-center">
                    <a href="#iniciarSesion" role="button" class="btn btn-link btn-lg" id="iniciarS" data-transition="slide" data-direction="reverse">O inicia sesi&oacute;n</a>
                </div>
            </div>
        </div>

        <toast></toast>
        <p>&nbsp;</p>

        <footer>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <p class="pie">Universidad Tecnol&oacute;gica Fidel Vel&aacute;zquez | <span id="year"></span></p>
                </div>
            </div>
        </footer>
    </div>


    <!-- PRINCIPAL -->
    <div id="principal" data-role="page">

        <header id="encabezado">
            <div class="row">
                <div class="col-sm-10">
                    <h1 id="titulo">Tu informaci&oacute;n</h1>
                </div>
                <div class="col-sm-2">
                    <a role="button" class="btn" id="logout"><img src="images/logout.png" class="img-responsive" alt="Icon Logout" /></a>
                </div>
            </div>

        </header>
        <div data-role="content">
            <div class="row">
                <div class="col-sm-12">
                    <h3 id="nombre">Usuario:</h3>
                    <p>Latitud: <span id="latitud"></span></p>
                    <p>Longitud: <span id="longitud"></span></p>
                    <!--<p>Precisi&oacute;n: <span id="precision"></span></p>-->
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div id="map"></div>

                        </div>
                    </div>
                    <toast></toast>
                </div>

                <p>&nbsp;</p>
                <!--<div class="col-sm-12 text-center">
                    <a href="#buscar" role="button" class="btn btn-primary btn-lg" data-transition="slide">Buscar amigos</a>
                </div>-->
            </div>

            <p>&nbsp;</p>
            <div id="buscar">
                <div class="row">
                    <div class="col-sm-12">
                        <form>
                            <input type="search" id="buscarUser" class="form-control" />
                            &nbsp;
                            <a role="button" class="btn btn-primary btn-lg" id="buscarU">Buscar</a>
                        </form>
                        <toast></toast>
                    </div>
                    &nbsp;
                    <div class="col-sm-12" id="infoUser">
                        <h3 id="nombreAmigo"></h3>
                        <p>Latitud: <span id="latitudA"></span></p>
                        <p>Longitud: <span id="longitudA"></span></p>

                    </div>
                    <p>&nbsp;</p>

                </div>
            </div>
        </div>

        <footer>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <p class="pie">Universidad Tecnol&oacute;gica Fidel Vel&aacute;zquez | <span id="year"></span></p>
                </div>
            </div>
        </footer>

    </div><!-- fin page -->


    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>


</body>
</html>

var ruta = "http://ubicacion.16mb.com/";


            //######################################################################
            //FUNCIONES
            function header(titulo) {
                $('#encabezado').html('<h1>'+ titulo +'</h1>');
            }

        function getYear() {
            //Para obtener el año
            var fecha = new Date();
            var annio = fecha.getFullYear();
            $('#year').html(annio);
        }

        function estaConectado() {
            //Funcion para validar si esta conectado a Internet
            var conexion = navigator.connection.type;

            //var tipos = {};
            //tipos[connection.UNKNOWN] = 'Unknown connection';
            //tipos[connection.ETHERNET] = 'Ethernet connection';
            //tipos[connection.WIFI] = 'WiFi connection';
            //tipos[connection.CELL_2G] = 'Cell 2G connection';
            //tipos[connection.CELL_3G] = 'Cell 3G connection';
            //tipos[connection.CELL_4G] = 'Cell 4G connection';
            //tipos[connection.CELL] = 'Cell generic connection';
            //tipos[connection.NONE] = 'No network connection';

            if (conexion == 'none' || conexion == 'unknown') {
                alert('Error con la Conexion de Internet');
                return false;
            }
            else {
                return true;
            }
        };

        var toast = function (msg, color) {
            //Alerta
            $("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h3>" + msg + "</h3></div>")
            .css({
                display: "block",
                opacity: 0.90,
                position: "fixed",
                padding: "5px",
                "text-align": "center",
                width: "200px",
                left: ($(window).width() - 284) / 2,
                top: $(window).height() / 2 - 20,
                background: color
            })
            .appendTo($.mobile.pageContainer).delay(1500)
            .fadeOut(400, function () {
                $(this).remove();
            });
        }

        //Colores para el toast
        var danger = '#FE2E2E';
        var success = '#3ADF00';
        var warning = '#F7D358';


        function iniciarSeion(user, pass) {
            //Funcion para iniciar sesion
        //if (estaConectado()) {
                //var datos = { user: user, pass: pass };
        // }

            $.ajax({
                type: 'post',
                url: ruta + 'login',
                data: { user: user, pass: pass },
                dataType: 'json'
            }).done(function (respuesta) {
                console.log(respuesta);

                if (respuesta == "0") {
                    toast('El usuario o la contraseña son incorrectos', danger);
                }
                else {
                    toast('Bienvenido :)', success);
                    localStorage.setItem('sesion', respuesta.usuario);
                    localStorage.setItem('id', respuesta.id);
                    $.mobile.changePage('#principal', { transition: "slidedown" });
                }
            }).fail(function (xhr, status, error) {
                alert("Error: " + xhr + " - " + status + " - " + error);
            });
        }

        function registro(usuario, correo, pass) {
            idUser = Math.floor((Math.random() * 100) + 1); // Genera un numero aleatorio para el ID del usuario
            $.post(ruta + "registro", {
                idUser: idUser,
                user: usuario,
                email: correo,
                pass, pass
            }, function (respuesta) {
                if (respuesta == "1") {
                    toast('¡Ya estas registrado! :D', success);
                    localStorage.setItem('sesion', usuario);
                    localStorage.setItem('id', idUser);
                    $.mobile.changePage('#principal', {transition: "slidedown"});
                } else {
                    toast('El usuario o el email ya estan registrados', warning);
                    return;
                }
            });
        }

        function ubicacion() {
            // onSuccess llamada
            // Este metodo acepta una 'position' object, que contiene las coordenadas GPS actuales del dispositivo
        // if (estaConectado()) {
                function onSuccess(position) {
                    var latitud = position.coords.latitude;
                    var longitud = position.coords.longitude;

                    $('#latitud').html(latitud);
                    $('#longitud').html(longitud);

                    localStorage.setItem('latOrigen', latitud);
                    localStorage.setItem('lonOrigen', longitud);
                    //LLama a la funcion papa y pasa como parametro la latitud y longitud
                    mapaPropio(latitud, longitud);

                    // Llama la funcion que inserta la ubicacion y la fecha
                    insertarUbicacion(latitud, longitud);
                }

                // onError Muestra el código y msj de error
                //
                function onError(error) {
                    alert('code: ' + error.code + 'n' +
                        'message: ' + error.message + 'n');
                }

                // Opciones: Muestra un error if la actualizacion no es recevida cada 30 segundos
                //
                //var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 30000 });
                navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000 });
        // }


        }

        function mapaPropio(latitud, longitud) {
            //Funcion para hacer la imagen del mapa con base a las coordenadas (latitud y longitud)
            var idMapa = document.getElementById('map');

            var gLanLngO = new google.maps.LatLng(latitud, longitud); // Latitud y Longitud de Origen


            var objConfigO = {
                zoom: 17,
                center: gLanLngO
            }

            var gMapa = new google.maps.Map(idMapa, objConfigO); //Render del mapa


            //Marker Origen
            var objConfigMarker = {
                position: gLanLngO,
                map: gMapa,
                title: "Usted esta aqui"
            }
            var gMarkerOri = new google.maps.Marker(objConfigMarker);


            //localStorage.setItem('ubiOrigen', gLanLngO);

        };


        //function mapaAmigo(latitud, longitud, gLanLngO) {
        //    var idMapa = document.getElementById('map');

        //    //var gLanLngD = new google.maps.LatLng(latitud, longitud); // Latitud y Longitud de Destino

        //}

        function direcciones(latOrigen, lonOrigen, latDestino, lonDestino) {
            //function direcciones() {

            var idMapa = document.getElementById('map');

            var gLanLngO = new google.maps.LatLng(latOrigen, lonOrigen); // Latitud y Longitud de Origen
            var gLanLngD = new google.maps.LatLng(latDestino, lonDestino); // Latitud y Longitud de Destino
            //alert(gLanLngO, gLanLngD);
            //return;
            var objConfigO = {
                zoom: 17,
                center: gLanLngO
            }

            var gMapa = new google.maps.Map(idMapa, objConfigO); //Render del mapa


            //Marker Origen
            var objConfigMarker = {
                position: gLanLngO,
                map: gMapa,
                title: "Usted esta aqui"
            }
            var gMarkerO = new google.maps.Marker(objConfigMarker);


            var objConfigD = {
                zoom: 17,
                center: gLanLngD
            }

            var gMapa = new google.maps.Map(idMapa, objConfigD); //Render del mapa

            //Marker Destino
            //var gLanLngD = new google.maps.LatLng("19.592541", "-99.2457444"); // Latitud y longitud de Destino
        // var gLanLngD = new google.maps.LatLng(latitud, longitud); // Latitud y longitud de Destino

            var objConfigMarkerD = {
                position: gLanLngD,
                map: gMapa,
                title: "Este es el destino"
            }
            var gMarkerDest = new google.maps.Marker(objConfigMarkerD);


            // Funcion para hacer la ruta
            //var gMapa = document.getElementById('map');
            /* Como parametros:
            * gLanLngO = latitud y longitud de Origen
            * gLanLngD = latitud y longitud de Destino
            * gMapa = Mapa de renderizado
            */

            var objConfigDR = {
                // Objeto de configuracion del DirectionRenderer
                map: gMapa
            }
            var objConfigDS = {
                // Objeto de configuracion del DirectionService
                origin: gLanLngO, // Ubicacion del usuario
                destination: gLanLngD, // Ubicacion del destino
                travelMode: google.maps.TravelMode.WALKING
            }

            var ds = new google.maps.DirectionsService() // Obitiene coordenadas
            var dr = new google.maps.DirectionsRenderer(objConfigDR) // Traduce coordenadas a la ruta visible

            ds.route(objConfigDS, trazar) // Funcion para marcar la ruta dentro del mapa
            function trazar(resultados, status) {
                // Funcion para mostrar la linea entre A y B
                if (status == 'OK') {
                    dr.setDirections(resultados);
                } else {
                    toast('Error: ' + status, danger);
                }
            }


            $('#cargando').html('');
        }

        function insertarUbicacion(latitud, longitud) {
            // Funcion para insertar los datos de ubicacion a la bd
            var idUser = localStorage.getItem('id');

            $.post(ruta + "ubicacion", { idUser: idUser, latitud: latitud, longitud: longitud }, function (respuesta) {
                if (respuesta == "1") {
                    toast('Ubicacion registrada :)', success);
                } else {
                    toast('Error al registrar ubicación', danger);
                }

            });
        }

        $(function () {

            getYear();//Llama a la funcion que obtiene y asigna el año al pie de pagina

            if (localStorage.getItem('sesion') != null) {
                $.mobile.changePage('#principal');
            }
        });

        //function bloqueBtnAtras() {

        //    console.log("PhoneGap is ready");
        //}

        function backKeyDown(e) {
            navigator.app.exitApp(); // Sale de la app
            e.preventDefault(); // Deshabilita el boton atras del telefono
        }


        $(document).ready(function () {
            //TODO
            getYear();

            //Funcion que al dar clic en el boton #iniciar se ejecutan las siguientes lineas
            $('#iniciar').click(function () {
                var usuario = $('#usuario').val().toUpperCase();
                var pass = $('#pass').val();

                if (usuario == "" || usuario == null || pass == "" || pass == null) {
                    toast('Hay campos vacios', warning);
                    return false;
                } else {
                    iniciarSeion(usuario, pass);
                }
                //alert(usuario + " - " + pass);

            });

            //Funcion que al dar clic en registro, se inserta la informacion en la bd
            $('#registrarse').click(function () {
                var usuario = $('#usuarioR').val().toUpperCase();
                var email = $('#email').val().toUpperCase();
                var pass = $('#passR').val();

                if (usuario == "" || pass == ""  || email == "") {
                    //Comprueba si los campos estan vacios, manda una alerta de que hay campos vacios
                    toast('Hay campos vacios', warning);
                    return false;
                } else {
                    var pass2 = $('#pass2').val();
                    if (pass != pass2) {
                        // Si las contraseñas no coinciden
                        //Se vuelven en blanco los campos pass y pass2
                        //Se termina la condicion
                        toast('Las contraseñas no coinciden', warning);
                        $('#passR').val('');
                        $('#pass2').val('');
                        return false;
                    } else {
                        registro(usuario, email, pass);
                    }
                }
            });

            $(document).on('pageshow', '#principal', function () {
                ubicacion(); // Llama a la funcion Ubicacion para obtener coordenadas y mapa
                $('#nombre').html("<h2>" + localStorage.getItem('sesion') + " tu ubicación actual es:");
                document.addEventListener("backbutton", backKeyDown, true);

                //Cada que se muestra la pagina Principal
                //Se vaciará el campo de busqueda y las etiquetas de las coordenadas del amigo
                $('#buscarUser').val('');
                $('#nombreAmigo, #latitudA, #longitudA').text('');
            });


            $('#buscarU').click(function () {
                //direcciones();
                var usuario = $('#buscarUser').val().toUpperCase();

                if (usuario == "") {
                    toast('El campo de búsqueda está vacío', warning);
                    return false;
                }
            // alert(usuario);
                $.ajax({
                    type: 'POST',
                    url: ruta + 'buscar',
                    data: { user: usuario },
                    dataType: 'json'
                }).done(function (resultado) {
                    //Funcion que obtiene los datos del amigo
                    $('#cargando').html('<img src="../css/images/ajax-loader.gif" /><p>Trazando ruta</p>');
                    if (resultado == "0") {
                        toast('Ingresa un usuario válido', warning);
                        return false;
                    } else {
                        $('#nombreAmigo').html("Las coordenadas de " + resultado.usuario + " son:");
                        $('#latitudA').html(resultado.latitud);
                        $('#longitudA').html(resultado.longitud);
                        var latOrigen = localStorage.getItem('latOrigen');
                        var lonOrigen = localStorage.getItem('lonOrigen');
                        var latDestino = resultado.latitud;
                        var lonDestino = resultado.longitud;
                        direcciones(latOrigen, lonOrigen, latDestino, lonDestino);
                        $('#cargando').html('');
                    }

                    $('#buscarUser').val('');

                }).fail(function (xhr, status, error) {
                    toast('Error: ' + xhr + ' - ' + status + ' - ' + error, danger);
                });
            });


            //Boton de cerrar sesion
            $('#logout').click(function () {
                localStorage.clear();
                $.mobile.changePage('#iniciarSesion', { transition: "slideup" });
                $('#usuario').val('');
                $('#pass').val('');
            });
        });

*{
        margin:0;
        padding:0;
    }
    a{
        text-shadow:none !important;

    }
    body {
        width:97%;
    }
    div[data-role*="page"]{
        background: #265CFF !important;
        padding:0;
        width:100%;
        margin:0 auto;
    }
    header{
        background: #0040FF;
        box-shadow:0px 3px 1px black;
        padding:0 10px;
        margin: 0 0 15px 0 !important;
        float:left;
        width:100%;
    }
    p, h1, h2, h3{
        text-shadow:none;
        color:white !important;
    }

    footer{
        background:none !important;
        border:none;
    }
    .btn-primary{
        background:#00A3D9 !important;
        border: none !important;
        color: white !important;
        text-shadow: none !important;
        box-shadow: 0px 2px 3px black !important;
    }
    .btn-link{
        color:white !important;
    }
    .pie{
        padding:5px;
    }
    #contenedor{
        padding:5px;
    }
    #logout{
        width:55px;
    }
    #map{
        width:300px;
        height:300px;
    }