Untitled


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="gmap/gmap3.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&language=pl"></script>
    <script src="gmap3/gmap3.min.js"></script>
    <title>Hello World</title>
    <script>
        var kolory = "#000000";
        var tab = []; // tablica z lokalizacjami


        $(document).on("pageinit", function () {
            var x, y, z;
            y = 0;
            x = 0;
            z = 5;
            var idmark = 1;
            var licz = 0;
            $("#mark").on("click", ".centr", function () {
                var index = $(this).parents('li').index();
                $('#mapDiv').gmap3({
                    map: {
                        options: {
                            center: [tab[index].szer, tab[index].dl],
                            zoom: tab[index].prz,
                            disableDefaultUI: true
                        },
                    },
                    marker: {
                        latLng: [tab[index].lat, tab[index].lng],
                        id: [tab[index].id]
                    }
                });

            });

            $("#popupek").on("click", ".kol", function () {
                var index = $(this).index();
               // alert(index);
                index = parseInt(index);
                if (index == 0)
                    kolory = "#FF0000";
                else if (index == 1)
                    kolory = "#000000";
                else if (index == 2)
                    kolory = "#0000FF";
                else if (index == 3)
                    kolory = "#FF7F50";
                else if (index == 4)
                    kolory = "#006400";
                else if (index == 5)
                    kolory = "#228B22";
                else if (index == 6)
                    kolory = "#FFFFF0";
                else if (index == 7)
                    kolory = "#BA55D3";
                else if (index == 8)
                    kolory = "#FF4500";
            });

            $("#zapisz").click(function () {
                localStorage.setItem("markery", JSON.stringify(tab));
            });
            $("#wczytaj").click(function () {
                if (localStorage.getItem("markery") != null && localStorage.getItem("markery") != undefined) {
                    tab = JSON.parse(localStorage.getItem("markery"));
                    for (var i = 0; i < tab.length; i++) {
                        $("#mark").append("<li><a class='centr'>Marker " + idmark + "</a><a class='del' data-icon='delete' id='" + tab[i].id + "'></a></li>");
                        $("#mapDiv").gmap3({
                            marker: {
                                options: {
                                    draggable: false,
                                },
                                id: tab[i].id,
                                latLng: [tab[i].szer, tab[i].dl],
                                zoom: tab[i].prz
                            }
                        });
                        idmark++;
                    }
                    $("#mark").listview('refresh');

                }
            });
            function zmiana() {

                x = $("#input1").val();
                y = $("#input2").val();
                z = $("#input3").val();
                $("#mapDiv").gmap3({
                    map: {
                        options: {
                            center: [parseInt(x), parseInt(y)],
                            zoom: parseInt(z)


                        }
                    }
                })
            }

            $(".inp").change(function () { zmiana() });
            $("#mapDiv").width("100%");
            $("#mapDiv").height("500px");
            $("#mapDiv").gmap3();

            $("#mapDiv").gmap3({
                map: {
                    options: {
                        center: [x, y],
                        zoom: 5,
                        disableDefaultUI: true

                    },
                    events: {
                        click: function (map, event) {
                            var x = event.latLng.lat();
                            var y = event.latLng.lng();
                            var z = map.getZoom();

                            $("#mark").append("<li><a class='centr'>Marker " + idmark + "</a><a class='del' data-icon='delete' id='mark" + idmark + "'></a></li>");
                            $("#mark").listview('refresh');
                            $("#mapDiv").gmap3({
                                marker: {
                                    options: {
                                        draggable: false,
                                    },
                                    id: "mark" + idmark,
                                    latLng: [x, y],
                                    zoom: parseInt(z)
                                }

                            });
                            idmark += 1;

                            tab.push({ szer: x, dl: y, prz: z, id: "mark" + idmark });     // dodanie pierwszego obiektu na początek tablicy
                            // alert(tab[licz].szer);
                            licz += 1;

                        }
                    }
                }
            });

            /*   $("#mapDiv").gmap3({
                   map: {

                       events: {
                           click: function (map, event) {
                               console.log(event.latLng.lat());
                               console.log(event.latLng.lng());
                               console.log(map.getZoom());
                               console.log(map.getCenter());
                                $("#input1").change(functio
                                 $("#input2").change(functio
                           }
                       }
                   }
               })*/

            $("#mark").on("click", ".del", function () {
                var markers = $("#mapDiv").gmap3({
                    get: {
                        name: 'marker',
                        all: true
                    }
                });

                var w = $(this).prop("id");
                var index = $(this).parents('li').index();
                tab.splice(index, 1);
                $("#mapDiv").gmap3({
                    clear: {
                        id: w
                    }
                });
                $(this).parent().remove();

            });

            $("#rysujtrase").click(function () {
                var markerArray = [];
                //pobranie wszystkich markerow z mapy
                var markers = $("#mapDiv").gmap3({
                    get: {
                        name: 'marker',
                        all: true
                    }
                });

                //dla kazdego markera do tablicy wrzucasz jego pozycje latLng
                for (var i = 0; i < markers.length; i++) {
                    markerArray.push(markers[i].getPosition());
                }
                $("#mapDiv").gmap3({
                    polyline: {
                        options: {
                            strokeColor: kolory,
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            path: markerArray
                        }
                    }
                })
            });
            ////////////////////////////////////////////////////////////////////

            $("#wyslij").click(function () {
                // loader
                imie = prompt("Podaj imie:");
                ostatnia_data = new Date().toLocaleTimeString()

                $.mobile.showPageLoadingMsg();

                //upraszczam to co wysylam
                var sendTab = [];
                sendTab.push(imie);
                sendTab.push(ostatnia_data);
                sendTab.push(kolory);
                for (var i = 0; i < tab.length; i++) {
                    sendTab.push([tab[i].szer, tab[i].dl, tab[i].prz]);
                }
                //alert(JSON.stringify(sendTab));
                var sendObj = {
                    trasa: JSON.stringify(sendTab)
                }
                //jak wysylamy - AJAX
                $.ajax({
                    type: "POST",
                    url: "ZapisPliku.aspx",
                    data: sendObj,
                    dataType: "text",
                    success: function (response) {
                        $.mobile.hidePageLoadingMsg();
                        alert(response);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                })
            });


            ////////////////////////////////////////////////////////////////////


            $("#pobierz").click(function () {
                $.ajax({
                    type: "POST",
                    url: "ReadTrips.aspx",
                    dataType: "text",
                    success: onSuccess,
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
                function onSuccess(response) {

                    //czytam wszystko z serwera
                    alert(response)
                  //  var allTripsOnServer = JSON.parse(response);
                   // alert(allTripsOnServer.length)

                    //jedna wycieczka - numer 0 w pliku txt

                    //var firstTrip = allTripsOnServer[0];
                    // usuwam z tablicy imie, kolor i datę aby czytac tylko dane geolokacyjne wycieczki
                    // uwaga  - ta metoda modyfikuje tablicę!
                   // firstTrip.splice(0, 3);

                    //rysuję pierwsza wycieczkę:

                  /*  $("#mapa").gmap3({
                        marker: {
                            values: firstTrip
                        },
                        polyline: {
                            options: {
                                strokeColor: "#ff0000",
                                strokeOpacity: 0.5,
                                strokeWeight: 4,
                                path: firstTrip
                            }
                        },
                        autofit: {} // focus na wycieczkę - przybliżenie

                    })*/

                }

            });


            ///////////////////////////////////////////////////////////////////////
        });


    </script>
    <style>
        #h1 {
            text-align: center;
            margin: 0 auto;
            float: left;
        }

        .ui-content {
            padding: 0px;
        }

        #popupek {
            width: 290px;
            height: 300px;
            margin: 0auto;
        }

        #kol2 {
            width: 50px;
            height: 50px;
            background: black;
            margin: 20px;
            float: left;
        }

        #kol1 {
            width: 50px;
            height: 50px;
            background: red;
            margin: 20px;
            float: left;
        }

        #kol3 {
            width: 50px;
            height: 50px;
            background: blue;
            margin: 20px;
            float: left;
        }

        #kol4 {
            width: 50px;
            height: 50px;
            background: #FF7F50;
            margin: 20px;
            float: left;
        }

        #kol5 {
            width: 50px;
            height: 50px;
            background: #006400;
            margin: 20px;
            float: left;
        }

        #kol6 {
            width: 50px;
            height: 50px;
            background: #228B22;
            margin: 20px;
            float: left;
        }

        #kol7 {
            width: 50px;
            height: 50px;
            background: #FFFFF0;
            margin: 20px;
            float: left;
        }

        #kol8 {
            width: 50px;
            height: 50px;
            background: #BA55D3;
            margin: 20px;
            float: left;
        }

        #kol9 {
            width: 50px;
            height: 50px;
            background: #FF4500;
            margin: 20px;
            float: left;
        }
        #startowa img {
            width:100%;
            margin:0auto;
        }
    </style>
</head>
<body>
    <div id="calosc" data-role="page">
        <div data-role="header">
            <h1>mapa GOOGLE</h1>
            <a href="#mypanel"><img src="lista.png" id="lista" /></a>
            <a href="#popupek" data-rel="popup"><img src="lista.png" /></a>
        </div>
        <div data-role="content">
            <div id="mapDiv">
            </div>


        </div>
        <div data-role="panel" id="mypanel">
            <ul data-role="listview" id="mark"></ul>
            <br />
            <input type="range" id="input1" class="inp" value="0" min="-90" max="90" step="1" />
            <input type="range" id="input2" class="inp" value="0" min="-180" max="180" step="1" />
            <input type="range" id="input3" class="inp" value="5" min="1" max="15" step="1" />
            <button id="rysujtrase">Rysuj Trasę</button>
            <button id="zapisz">Zapamiętaj dane</button>
            <button id="wczytaj">Wczytaj dane</button>
            <button id="wyslij">Wyślij na serwer</button>
            <button id="pobierz">Wczytaj z serwera</button>
        </div>
        <div id="popupek" data-role="popup">
            <div id="kol1" class="kol"></div>
            <div id="kol2" class="kol"></div>
            <div id="kol3" class="kol"></div>
            <div id="kol4" class="kol"></div>
            <div id="kol5" class="kol"></div>
            <div id="kol6" class="kol"></div>
            <div id="kol7" class="kol"></div>
            <div id="kol8" class="kol"></div>
            <div id="kol9" class="kol"></div>
        </div>
    </div>
    <div id="startowa" data-role="page">
        <img src="sitemap.png" />
        <input type="text" value="Wpisz imie" />
        <button id="startbt">Wyslij</button>
    </div>


    <script type="text/javascript" src="cordova.js"></script>
</body>
</html>