API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 6th, 2016
57
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  5. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  7. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  9. <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
  10. <style>
  11. #errorlogin{
  12. color:red;
  13. }
  14. #map_canvas {
  15. height: 500px;
  16. }
  17. th {
  18. border-bottom: 1px solid #d6d6d6;
  19. }
  20. tr:nth-child(even) {
  21. background: #e9e9e9;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div data-role="page" id="pag-inicial">
  27. <div data-role="header" data-position="fixed">
  28. <h1>Página Inicial</h1>
  29. <div data-role="navbar" data-iconpos="left">
  30. <ul>
  31. <li><a href="#pag-inicial" data-icon="back">Voltar</a></li>
  32. <li><a href="#sair" data-icon="forbidden">Sair</a></li>
  33. </ul>
  34. </div>
  35. </div>
  36. <center>
  37. <div data-role="main" class="ui-content">
  38. <a href="#pag-mapa"><img src="img/navigation.png" alt="HTML5 Icon" style="width:100px;height:100px;"></a>
  39. <a href="#pag-appts"><img src="img/editar.png" alt="HTML5 Icon" style="width:100px;height:100px;"></a>
  40. <a href="#"><img src="img/contas.png" alt="HTML5 Icon" style="width:100px;height:100px;"></a>
  41. <a href="#"><img src="img/validar.png" alt="HTML5 Icon" style="width:100px;height:100px;"></a>
  42. <a href="#"><img src="img/fotografia.png" alt="HTML5 Icon" style="width:100px;height:100px;"></a>
  43. </div>
  44. </center>
  45. <div data-role="footer" data-position="fixed">
  46. <h3>RentHouse - Powered by Mickael Marques & Tiago Gomes</h3>
  47. </div>
  48. </div>
  49. <div data-role="page" id="pag-mapa">
  50. <div data-role="header" data-position="fixed">
  51. <h1>Mapa Mundo</h1>
  52. <div data-role="navbar" data-iconpos="left">
  53. <ul>
  54. <li><a href="#" class="ui-btn" data-rel="back">Back</a></li>
  55. <li><a href="#pag-inicial" data-icon="home">Home</a></li>
  56. </ul>
  57. </div>
  58. </div>
  59. <div data-role="collapsible">
  60. <h1>Direções</h1>
  61. <label for="from">Origem</label>
  62. <select name="from" id="from">
  63. </select>
  64. <label for="to">Destino</label>
  65. <select name="to" id="to">
  66. </select>
  67. <button onclick="render()"></button>
  68. </div>
  69. <div id="mapcontainer" data-role="main"><div id="map_canvas"></div>
  70.  
  71. </div>
  72. <div data-role="footer" data-position="fixed">
  73. <h3>RentHouse - Powered by Mickael Marques & Tiago Gomes</h3>
  74. </div>
  75. </div>
  76. <div data-role="page" id="pag-appts">
  77. <div data-role="header" data-position="fixed" >
  78. <h1>Informação do Apartamento</h1>
  79. <div data-role="navbar" data-iconpos="left">
  80. <ul>
  81. <li><a href="#pag-inicial" data-icon="back">Mapa</a></li>
  82. <li><a href="#pag-dois" data-icon="home">Login</a></li>
  83. </ul>
  84. </div>
  85. </div>
  86. <div data-role="main" class="ui-content">
  87. <table data-role="table" class="ui-responsive" id="myTable">
  88. <thead><tr><th data-priority="1">Descrição</th><th data-priority="2">Lat</th><th data-priority="3">Long</th><th data-priority="4">Ação</th></tr></thead>
  89. <tbody id="myTablebody"></tbody>
  90. </table>
  91. <a href="#editarappar" data-role="button" data-corners="true"class="ui-btn ui-btn-corner-all " onclick="editarit('')">Novo</a>
  92. </div>
  93. <div data-role="footer" data-position="fixed">
  94. <h3>RentHouse - Powered by Mickael Marques & Tiago Gomes</h3>
  95. </div>
  96. </div>
  97. <div data-role="page" data-dialog="true" id="editarappar">
  98. <div data-role="header">
  99. <h1>Apartamento</h1>
  100. </div>
  101. <div data-role="main" class="ui-content">
  102. <input type="hidden" id="txtidapp"/>
  103. <label for="txtdesc">Desc:</label>
  104. <input type="text" id="txtdesc" />
  105. <label for="txtlat">Latitude:</label>
  106. <input type="number" id="txtlat" />
  107. <label for="txtlong">Longitude:</label>
  108. <input type="number" id="txtlong" />
  109. <a href="#pag-appts" class="ui-btn" onclick="saveoraddapp()">Save</a>
  110. </div>
  111. </div>
  112. <div data-role="page" id="pag-dois">
  113. <div data-role="header" data-position="fixed">
  114. <h1>Entrar</h1>
  115. <div data-role="navbar" data-iconpos="left">
  116. <ul>
  117. <li><a href="#pag-inicial" data-icon="back">Voltar</a></li>
  118. <li ><a href="#myPopup1" id="loginnext" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" data-icon="back" >Apartamentos</a></li>
  119. </ul>
  120. </div>
  121. </div>
  122. <div data-role="main" class="ui-content">
  123. <div data-role="popup" id="myPopup1" class="ui-content">
  124. <p>Efetue login.</p>
  125. </div>
  126. <center><h2>User</h2></center>
  127. <input type="email" name="email" id="email" placeholder="email">
  128. <center><h2>Password</h2><center>
  129. <input type="password" name="passwd" id="passwd" placeholder="password">
  130. <div id="errorlogin"></div>
  131. <button class="ui-btn ui-shadow ui-btn-corner-all ui-btn-hover-c" onclick="logemail()">Button</button>
  132. </div>
  133. <div data-role="footer" data-position="fixed">
  134. <h3>RentHouse - Powered by Mickael Marques & Tiago Gomes</h3>
  135. </div>
  136. </div>
  137. <div data-role="page" id="pag-dez">
  138. <div data-role="header" data-position="fixed">
  139. <h1>Página Inicial</h1>
  140. <div data-role="navbar" data-iconpos="left">
  141. <ul>
  142. <li><a href="#pag-inicial" data-icon="back">Voltar</a></li>
  143. <li><a href="#sair" data-icon="forbidden">Sair</a></li>
  144. </ul>
  145. </div>
  146. </div>
  147. <div data-role="main" class="ui-content">
  148. <div id="map" ></div>
  149.  
  150. <b>Mode of Travel: </b>
  151. <select id="mode">
  152. <option value="DRIVING">Driving</option>
  153. <option value="WALKING">Walking</option>
  154. </select>
  155.  
  156.  
  157.  
  158. </div>
  159. <div data-role="footer" data-position="fixed">
  160. <h3>RentHouse - Powered by Mickael Marques & Tiago Gomes</h3>
  161. </div>
  162. </div>
  163.  
  164. <script type="text/javascript">
  165. var map;
  166. function initMap() {
  167. var map = new google.maps.Map(document.getElementById('map_canvas'), {
  168. center: {lat: -34.397, lng: 150.644},
  169. zoom: 8
  170. });
  171. // Try HTML5 geolocation.
  172. var ref=new Firebase('https://fiery-inferno-7376.firebaseio.com/Apartament');
  173. ref.on("child_added", function(snapshot, prevChildKey) {
  174. var newPost = snapshot.val();
  175. var membro=snapshot.val();
  176. var l=parseFloat(membro.latitude);
  177. var ln=parseFloat(membro.longitude);
  178. var infowindow = new google.maps.InfoWindow({
  179. content: membro.desc
  180. });
  181. var pos = {
  182. lat: l,
  183. lng: ln
  184. };
  185.  
  186. var marker = new google.maps.Marker({
  187. position: pos,
  188. map: map,
  189. });
  190. marker.addListener('click', function() {
  191. infowindow.open(map, marker);
  192. });
  193. });
  194. var image = 'img/mymarker.png';
  195. var infowindow = new google.maps.InfoWindow({
  196. content: 'Eu estou aqui!'
  197. });
  198. if (navigator.geolocation) {
  199. navigator.geolocation.getCurrentPosition(function(position) {
  200. var pos = {
  201. lat: position.coords.latitude,
  202. lng: position.coords.longitude
  203. };
  204.  
  205. var marker = new google.maps.Marker({
  206. position: pos,
  207. map: map,
  208. icon: {'url': image}
  209. });
  210. marker.addListener('click', function() {
  211. infowindow.open(map, marker);
  212. });
  213. map.setCenter(pos);
  214. $("#from").append($("<option></option>").attr("lat", position.coords.latitude).attr("lng",position.coords.longitude).attr("id",0).text('Localização atual'));
  215. }, function() {
  216. handleLocationError(true, infoWindow, map.getCenter());
  217. });
  218. } else {
  219. // Browser doesn't support Geolocation
  220. handleLocationError(false, infoWindow, map.getCenter());
  221. }
  222.  
  223. }
  224. function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  225. infoWindow.setPosition(pos);
  226. infoWindow.setContent(browserHasGeolocation ?
  227. 'Error: The Geolocation service failed.' :
  228. 'Error: Your browser doesn\'t support geolocation.');
  229. }
  230. </script>
  231. <script>
  232. function render(){
  233.  
  234. var directionsDisplay = new google.maps.DirectionsRenderer;
  235. var directionsService = new google.maps.DirectionsService;
  236. var map = new google.maps.Map(document.getElementById('map_canvas'),{});
  237. directionsDisplay.setMap(map);
  238. calculateAndDisplayRoute(directionsService, directionsDisplay);
  239. }
  240. function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  241. var selectedMode = 'DRIVING';
  242. var origemlat=$("#from option:selected").attr("lat");
  243. var origemlng=$("#from option:selected").attr("lng");
  244. var destinolat=$("#to option:selected").attr("lat");
  245. var destinolng=$("#to option:selected").attr("lng");
  246. directionsService.route({
  247. origin: {lat: parseFloat(origemlat), lng: parseFloat(origemlng)}, // Haight.
  248. destination: {lat: parseFloat(destinolat), lng: parseFloat(destinolng)}, // Ocean Beach.
  249. // Note that Javascript allows us to access the constant
  250. // using square brackets and a string value as its
  251. // "property."
  252. travelMode: google.maps.TravelMode[selectedMode]
  253. }, function(response, status) {
  254. if (status == google.maps.DirectionsStatus.OK) {
  255. directionsDisplay.setDirections(response);
  256. } else {
  257. window.alert('Directions request failed due to ' + status);
  258. }
  259. });
  260. }
  261. </script>
  262. <script>
  263. function saveoraddapp(){
  264. var id = $("#txtidapp").val();
  265. var jdata={};
  266. var a=$("#txtlat").val();
  267. var b=$("#txtlong").val();
  268. var c=$("#txtdesc").val();
  269. if(a!="" && b!="" && c!=""){
  270. if(id!=''){
  271. jdata.latitude=a;
  272. jdata.longitude=b;
  273. jdata.desc=c;
  274. var ref = new Firebase('https://fiery-inferno-7376.firebaseio.com/Apartament/'+id);
  275. ref.set(jdata);
  276. }else{
  277. var ref = new Firebase('https://fiery-inferno-7376.firebaseio.com/Apartament');
  278. jdata.latitude=a;
  279. jdata.longitude=b;
  280. jdata.desc=c;
  281. ref.push().set(jdata);
  282. }}}
  283. function editarit(id){
  284. if(id!=''){
  285. new Firebase('https://fiery-inferno-7376.firebaseio.com/Apartament/'+id).once('value', function(snap) {
  286. x= snap.val();
  287. $("#txtidapp").val(id);
  288. $("#txtdesc").val(x.desc);
  289. $("#txtlat").val(x.latitude);
  290. $("#txtlong").val(x.longitude);
  291. });
  292. }else{
  293. $("#txtidapp").val('');
  294. $("#txtdesc").val("");
  295. $("#txtlat").val("");
  296. $("#txtlong").val("");
  297. }
  298. }
  299. </script>
  300. <script>
  301. function logemail(){
  302. var credencial={};
  303. credencial.email=$("#email").val();
  304. credencial.password=$("#passwd").val();
  305. var ref= new Firebase('https://fiery-inferno-7376.firebaseio.com/');
  306. ref.authWithPassword(credencial,function(error, authData){
  307. if(error){
  308. document.getElementById("errorlogin").innerHTML = "Credencais incorretas!";
  309. }else{
  310. document.getElementById("errorlogin").innerHTML ="Sucesso";
  311. $("#loginnext").attr('href',"#pag-tres");
  312. $("#loginnext").removeAttr('data-rel');
  313. }},{
  314. remember : "sessionOnly"
  315. });
  316. }
  317. </script>
  318. <script>
  319. function loadappts(){
  320. var url = 'https://fiery-inferno-7376.firebaseio.com/';
  321. var ref= new Firebase(url);
  322. var authData = ref.getAuth();
  323. var conct=new Firebase(url+".info/connected");
  324. conct.on("value",connSatusCallbackapp);
  325. var app=ref.child('Apartament');
  326. app.orderByKey().on("child_added",childAddedapp);
  327. app.on("child_removed",childReomvapp);
  328. app.on("child_changed",childChangeapp);
  329. }
  330. function connSatusCallbackapp(snapshot,prevChildKey){
  331.  
  332. }
  333. function childAddedapp(snapshot,prevChildKey){
  334.  
  335. var app=snapshot.val();
  336. var memberkey=snapshot.key();
  337. var tableapp=document.getElementById("myTablebody");
  338. var row=tableapp.insertRow(-1);
  339. row.setAttribute("id",memberkey);
  340. var cell1=row.insertCell(0);cell1.innerHTML=app.desc;
  341. var cell2=row.insertCell(1);cell2.innerHTML=app.latitude;
  342. var cell3=row.insertCell(2);cell3.innerHTML=app.longitude;
  343. var delte='<a href="#editarappar" data-role="button" data-corners="true"class="ui-btn ui-btn-corner-all " onclick=editarit("'+memberkey+'")>Editar</a>';
  344. var cell4=row.insertCell(3);cell4.innerHTML=delte;
  345. $("#myTable").table();
  346. $("#from").append($("<option></option>").attr("lat",app.latitude).attr("lng",app.longitude).attr("id",memberkey).text(app.desc));
  347. $("#to").append($("<option></option>").attr("lat",app.latitude).attr("lng",app.longitude).attr("id",memberkey).text(app.desc));
  348. }
  349. function childChangeapp(snapshot,prevChildKey){
  350. var k=snapshot.key();
  351. var app=snapshot.val();
  352. $("#myTable tr[id='" + k + "'] td:nth-child(1)").text(app.desc);
  353. $("#myTable tr[id='" + k + "'] td:nth-child(2)").text(app.latitude);
  354. $("#myTable tr[id='" + k + "'] td:nth-child(3)").text(app.longitude);
  355. $("#from option[value="+k+"]").text(app.desc);
  356. $("#to option[value="+k+"]").text(app.desc);
  357. }
  358. function childReomvapp(snapshot,prevChildKey){
  359. var k=snapshot.key();
  360. $("#myTable tr[id='" + k + "']").remove();
  361. $("#from option[value="+k+"]").remove();
  362. $("#to option[value="+k+"]").remove();
  363. }
  364. </script>
  365. <script type="text/javascript">
  366. $(document).on('pagecreate', '#pag-inicial', function (e, data) {
  367.  
  368. loadappts();
  369. });
  370. </script>
  371. <script type="text/javascript">
  372. $(document).on('pageshow', '#pag-mapa', function (e, data) {
  373. initMap();
  374. });
  375. </script>
  376. <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC_4Et_DjP3VQQr7wVlVmrffENK8WzIdDI&signed_in=true" async defer></script>
  377. </body>
  378.  
  379. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!