| <!-- |
| -- Copyright (c) 2013 DataTorrent, Inc. ALL Rights Reserved. |
| -- |
| -- Licensed under the Apache License, Version 2.0 (the "License"); |
| -- you may not use this file except in compliance with the License. |
| -- You may obtain a copy of the License at |
| -- |
| -- http://www.apache.org/licenses/LICENSE-2.0 |
| -- |
| -- Unless required by applicable law or agreed to in writing, software |
| -- distributed under the License is distributed on an "AS IS" BASIS, |
| -- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| -- See the License for the specific language governing permissions and |
| -- limitations under the License. |
| --> |
| <!doctype html> |
| <html> |
| <head> |
| <title>DataTorrent Mobile Demo</title> |
| |
| <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> |
| <meta charset="utf-8"> |
| |
| <link type="text/css" href="/common/css/demo-common.css" rel="stylesheet" /> |
| |
| <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> |
| |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| .phone-input { |
| margin-left: 0.5em; |
| margin-right: 0.5em; |
| } |
| </style> |
| |
| |
| </head> |
| |
| |
| <body> |
| |
| <%- include header %> |
| |
| <div class="demo-content"> |
| <script> |
| |
| var host = 'node1.morado.com:9090'; |
| |
| var map; |
| var markers = {}; |
| //var marker; |
| |
| function initGMap() { |
| |
| var latlng = new google.maps.LatLng(37.375894,-121.959328); |
| var mapOptions = { |
| zoom: 12, |
| center: latlng, |
| mapTypeId: google.maps.MapTypeId.ROADMAP |
| } |
| map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); |
| |
| setupMapContainerSize(); |
| /* |
| marker = new google.maps.Marker({ |
| position: latlng, |
| map: map, |
| title: 'Hello World!' |
| }); |
| */ |
| } |
| |
| google.maps.event.addDomListener(window, 'load', initGMap); |
| |
| |
| $(function() { |
| |
| //var queryId = "" + new Date().getTime(); |
| |
| $("#query1AddButton").click(function() { |
| |
| var phone = $("input#phone").val(); |
| if (phone == "") { |
| $("input#phone").addClass('ui-state-error'); |
| $("label#phone_error").show(); |
| $("input#phone").focus(); |
| return false; |
| } |
| |
| $("input#phone").removeClass('ui-state-error'); |
| |
| var jsonData = { |
| command : 'add', |
| //queryId : queryId, |
| phone : phone |
| }; |
| |
| sendQuery(jsonData, function() { |
| if (true) return; |
| $('#query1SubmitConfirm').html("<div id='message'></div>"); |
| //$('#message').html("<h2>Query " + queryId + " submitted to application!</h2>") |
| $('#message').html("<h2>Add " + phone + " submitted to application!</h2>") |
| .append("<p>Result will appear on page shortly.</p>") |
| //.hide() |
| //.fadeIn(1500, function() { |
| // $('#message').append("<img id='checkmark' src='images/check.png' />"); |
| //}) |
| ; |
| }); |
| |
| return false; |
| }); |
| |
| $("#query1DeleteButton").click(function() { |
| |
| var phone = $("input#phone").val(); |
| if (phone == "") { |
| $("input#phone").addClass('ui-state-error'); |
| $("label#phone_error").show(); |
| $("input#phone").focus(); |
| return false; |
| } |
| |
| $("input#phone").removeClass('ui-state-error'); |
| |
| var jsonData = { |
| command : 'del', |
| //queryId : queryId, |
| phone : phone |
| }; |
| |
| sendQuery(jsonData, function() { |
| if (true) return; |
| $('#query1SubmitConfirm').html("<div id='message'></div>"); |
| //$('#message').html("<h2>Query " + queryId + " submitted to application!</h2>") |
| $('#message').html("<h2>Delete " + phone + " submitted to application!</h2>") |
| //.hide() |
| //.fadeIn(1500, function() { |
| // $('#message').append("<img id='checkmark' src='images/check.png' />"); |
| //}) |
| ; |
| }); |
| |
| setTimeout(function() { |
| var marker = markers[phone]; |
| if (marker != null) { |
| marker.setMap(null); |
| markers[phone] = null; |
| } |
| }, 1000); |
| |
| return false; |
| }); |
| |
| $("#query1ClearButton").click(function() { |
| |
| /* |
| var phone = $("input#phone").val(); |
| if (phone == "") { |
| $("input#phone").addClass('ui-state-error'); |
| $("label#phone_error").show(); |
| $("input#phone").focus(); |
| return false; |
| } |
| |
| $("input#phone").removeClass('ui-state-error'); |
| */ |
| |
| var jsonData = { |
| command : 'clear' |
| }; |
| |
| sendQuery(jsonData, function() { |
| $('#query1SubmitConfirm').html("<div id='message'></div>"); |
| //$('#message').html("<h2>Query " + queryId + " submitted to application!</h2>") |
| $('#message').html("<h2>Clear phones submitted to application!</h2>") |
| //.hide() |
| //.fadeIn(1500, function() { |
| // $('#message').append("<img id='checkmark' src='images/check.png' />"); |
| //}) |
| ; |
| }); |
| |
| setTimeout(function() { |
| for (var phone in markers) { |
| var marker = markers[phone]; |
| if (marker != null) { |
| marker.setMap(null); |
| markers[phone] = null; |
| } |
| } |
| }, 1000); |
| |
| return false; |
| }); |
| |
| function sendQuery(jsonData, callback) { |
| var ws = new WebSocket('ws://'+host+'/pubsub'); |
| |
| ws.onopen = function () { |
| var topic = "demos.mobile.phoneLocationQuery"; |
| var msg = JSON.stringify({ "type" : "publish", "topic" : topic, "data" : jsonData }); |
| ws.send(msg); |
| console.log("published to: " + topic + " data: " + msg); |
| ws.close(); |
| if (callback) callback(); |
| }; |
| |
| ws.onerror = function (error) { |
| console.log('WebSocket Error ' + error); |
| }; |
| |
| ws.onmessage = function (e) { |
| console.log('Server: ' + e.data); |
| }; |
| |
| ws.onclose = function (e) { |
| console.log('close: ' , e); |
| }; |
| /* |
| $.ajax({ |
| type: "POST", |
| url: "../channel/mobile/phoneLocationQuery", |
| data: JSON.stringify(jsonData), |
| processData:false, |
| contentType : "application/json", |
| dataType: "JSON", |
| success: callback, |
| error : function(jqXHR, textStatus, errorThrown) { |
| alert("ajax call failed: " + textStatus + ", error: " + errorThrown); |
| } |
| }); |
| */ |
| } |
| |
| var ws = new WebSocket('ws://'+host+'/pubsub'); |
| var topic = "demos.mobile.phoneLocationQueryResult"; |
| |
| ws.onopen = function () { |
| var msg = JSON.stringify({ "type":"subscribe", "topic": topic}); |
| console.log("sending: " + msg); |
| ws.send(msg); |
| }; |
| |
| ws.onerror = function (error) { |
| console.log('WebSocket Error ' + error); |
| }; |
| |
| ws.onmessage = function (e) { |
| |
| var bounds = map.getBounds(); |
| var ne = bounds.getNorthEast(); // LatLng of the north-east corner |
| var sw = bounds.getSouthWest(); // LatLng of the south-west corder |
| var nw = new google.maps.LatLng(ne.lat(), sw.lng()); |
| var se = new google.maps.LatLng(sw.lat(), ne.lng()); |
| var latw = ne.lat() - sw.lat(); |
| var lonw = ne.lng() - sw.lng(); |
| //console.log(latw + " " + lonw); |
| |
| console.log('Server: ' + e.data); |
| //console.log(e.data); |
| var data = JSON.parse(e.data).data; |
| var str = JSON.stringify(data); |
| var ploc = str.indexOf('phone'); |
| var ppos = ploc + 8; |
| var ploc2 = str.indexOf('"', ppos); |
| var phone = str.substring(ppos, ploc2); |
| var loc = str.indexOf('location'); |
| var loc2 = str.indexOf(',',loc); |
| var loc3 = str.indexOf(')',loc2); |
| var latstr = str.substring( loc+12, loc2 ); |
| var lonstr = str.substring( loc2+1, loc3 ); |
| var lat = parseInt(latstr); |
| var lon = parseInt(lonstr); |
| //if (data["queryId"] == queryId) { |
| // only show results requested from this session |
| //$("#phoneQueryResult").text(JSON.stringify(data)); |
| |
| |
| //$("#phoneQueryResult").text(phone + " " + latstr + " " + lonstr); |
| //console.log(data.phone + " " + data.location); |
| $("#phoneQueryResult").text(JSON.stringify(data)); |
| $('#query1SubmitConfirm').hide(); |
| |
| //} |
| //var myLatlng = new google.maps.LatLng(37.375894+(phone % 4 - 2)*0.005+lat*0.007,-121.959328+(phone % 8 - 4)*0.01+lon*0.007); |
| var myLatlng = new google.maps.LatLng(37.375894+(phone % 4 - 2)*0.01-lat*0.005,-121.959328+(phone % 8 - 4)*0.01+lon*0.007); |
| //var myLatlng = new google.maps.LatLng(ne.lat() + (lat % 20)/20 * latw, ne.lng() + (lon % 20)/20 * lonw); |
| //var myLatlng = new google.maps.LatLng(ne.lat(), ne.lng()); |
| var marker = markers[phone]; |
| if (marker == null) { |
| marker = new google.maps.Marker({ |
| position: myLatlng, |
| map: map, |
| title: phone}); |
| markers[phone] = marker; |
| } |
| marker.setPosition(myLatlng); |
| }; |
| |
| /* |
| $(window).unload( function () { |
| // clear query |
| var jsonData = { |
| //queryId : queryId, |
| phone : "" |
| }; |
| sendQuery(jsonData, function() {}); |
| var msg = JSON.stringify({ "type":"unsubscribe", "topic": topic}); |
| console.log("sending: " + msg); |
| ws.send(msg); |
| ws.close(); |
| }); |
| */ |
| /* |
| // setup poll for results |
| LongPoll("../channel/mobile/phoneLocationQueryResult", function(data) { |
| //console.log("query result => " + JSON.stringify(data)); |
| if (data["queryId"] == queryId) { |
| // only show results requested from this session |
| $("#phoneQueryResult").text(JSON.stringify(data)); |
| $('#query1SubmitConfirm').hide(); |
| } |
| }); |
| */ |
| |
| }); |
| |
| jQuery(window).resize(function() { |
| setupMapContainerSize(); |
| }); |
| |
| function setupMapContainerSize() { |
| var h = jQuery("#query1FormDiv").outerHeight(); |
| var mapHeight = jQuery(window).height() - h - 20; |
| jQuery("#map-canvas").height(mapHeight + "px"); |
| console.log("resize " + mapHeight); |
| google.maps.event.trigger(map, 'resize'); |
| map.setZoom(map.getZoom()); |
| } |
| |
| </script> |
| |
| |
| <div id="query1FormDiv"> |
| <form name="query1" action=""> |
| <p> |
| <label for="phone" id="phone_label">Phone Number</label> |
| <input type="text" name="phone" id="phone" size="30" value="" class="phone-input" /> |
| <label class="error" for="phone" id="phone_error">This field is required.</label> |
| </p> |
| <p> |
| <input type="submit" name="command" class="button" id="query1AddButton" value="Add" /> |
| <input type="submit" name="command" class="button" id="query1DeleteButton" value="Delete" /> |
| <input type="submit" name="command" class="button" id="query1ClearButton" value="Clear" /> |
| </p> |
| </form> |
| <div id="query1SubmitConfirm"></div> |
| <div>Debug: <span id="phoneQueryResult"></span></div> |
| </div> |
| <div id="map-canvas" style="width: 100%; height: 200px;"></div> |
| |
| </div> |
| </body> |
| </html> |
