API tools faq
paste
Guest User

app.js

a guest
Mar 5th, 2017
101
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.34 KB | None | 0 0
raw download clone embed print report
  1. var myLatLng;
  2.  
  3. function initMilesAway(locationLat, locationLong, index){
  4. //point is should be the dining location coordinates
  5. var point1 = {lat:locationLat, lng:locationLong};
  6. var distance = getDistance(myLatLng, point1);
  7. document.getElementById('theMiles' + index).innerHTML = distance + ' miles';
  8. return distance;
  9. }
  10.  
  11. var rad = function(x) {
  12. return x * Math.PI / 180;
  13. };
  14.  
  15. //function to get the distance between user and location
  16. var getDistance = function(p1, p2) {
  17. var R = 6378137; // Earth’s mean radius in meter
  18. var dLat = rad(p2.lat - p1.lat);
  19. var dLong = rad(p2.lng - p1.lng);
  20. var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
  21. Math.cos(rad(p1.lat)) * Math.cos(rad(p2.lat)) *
  22. Math.sin(dLong / 2) * Math.sin(dLong / 2);
  23. var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  24. var d = R * c;
  25. d = d*0.000621371192;
  26. d = parseFloat(d).toFixed(2);
  27. return d; // returns the distance in miles
  28. };
  29.  
  30. //when the page loads, ask for user permission for using location
  31. function onPageLoad(){
  32. if (navigator.geolocation){
  33. navigator.geolocation.getCurrentPosition(sendLocation);
  34. } else {
  35. alert("Geolocation is not supported by this browser.");
  36. }
  37. }
  38.  
  39. function myMap(){
  40. /*just leave this blank function here.
  41. The googlemaps api calls this one automatically on page load.
  42. Initially it called initMap, but that was doing things that
  43. I didn't want it to do right away, so we need this blank function here*/
  44. }
  45.  
  46. function sendLocation(position){
  47. myLatLng = {lat: position.coords.latitude, lng: position.coords.longitude};
  48. loadTheTable();
  49. }
  50.  
  51. function initMap(theLat, theLong, index) {
  52. //blue circle is for user's location
  53. var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
  54. var bounds = new google.maps.LatLngBounds();
  55. if (navigator.geolocation) {
  56. navigator.geolocation.getCurrentPosition(function(position) {
  57. var myLatLng = {
  58. lat: position.coords.latitude,
  59. lng: position.coords.longitude
  60. };
  61.  
  62. //initialize the map
  63. var map = new google.maps.Map(document.getElementById('map' + index), {
  64. zoom: 14,
  65. center: myLatLng
  66. });
  67.  
  68. //add a marker for the user's location
  69. var marker1 = new google.maps.Marker({
  70. position: myLatLng,
  71. map: map,
  72. title: 'My Location',
  73. icon: im
  74. });
  75.  
  76. bounds.extend(marker1.position);
  77.  
  78. //add a marker for the dining location
  79. var location = {lat: theLat, lng: theLong};
  80. var marker2 = new google.maps.Marker({
  81. position: location,
  82. map: map
  83. });
  84.  
  85. //fit the map to show both user location and dining location
  86. bounds.extend(marker2.position);
  87. map.fitBounds(bounds);
  88.  
  89. }, function() {
  90. handleLocationError(true, infoWindow, map.getCenter());
  91. });
  92. } else {
  93. // Browser doesn't support Geolocation
  94. handleLocationError(false, infoWindow, map.getCenter());
  95. }
  96.  
  97. }
  98.  
  99. function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  100. infoWindow.setPosition(pos);
  101. infoWindow.setContent(browserHasGeolocation ?
  102. 'Error: The Geolocation service failed.' :
  103. 'Error: Your browser doesn\'t support geolocation.');
  104. }
  105.  
  106. function loadTheTable(){
  107. $.getJSON("regularHours.json", function(data) {
  108. var index = 0;
  109. $.each(data, function (key, val) {
  110. console.log('------' + val._id + '------');
  111. //get information about whether the location is closed or open and the 'open till' description if location is open
  112. getDateTimeInfo();
  113. var locationStatus; //0=closed, 1=open, 2=24hours
  114. var closed = false;
  115. var dateString;
  116. switch(day){
  117. case 0: dateString = val.Sunday; break;
  118. case 1: dateString = val.Monday; break;
  119. case 2: dateString = val.Tuesday; break;
  120. case 3: dateString = val.Wednesday; break;
  121. case 4: dateString = val.Thursday; break;
  122. case 5: dateString = val.Friday; break;
  123. case 6: dateString = val.Saturday; break;
  124. }
  125. if(dateString === "CLOSED"){
  126. //closed = true;
  127. status = 0;
  128. }
  129. else if(dateString === "24 HOURS"){
  130. status = 2;
  131. }
  132. else{
  133. //need to further parse the dateString;
  134. var displayLocClosing;
  135. var locClosHr;
  136. var locClosMin;
  137. var locOpenHr;
  138. var locOpenMin;
  139. var splitForTime = dateString.split("- ");
  140. displayLocClosing = splitForTime[1];
  141. var splitStringArray = dateString.split(" ");
  142. //console.log(splitStringArray);
  143. locClosAmPm = splitStringArray[4];
  144. locClosHr = splitStringArray[3];
  145. var getHour = locClosHr.split(":");
  146. locClosHr = getHour[0];
  147. locClosMin = getHour[1];
  148. locClosMin = parseInt(locClosMin);
  149. locOpenHr = splitStringArray[0];
  150. var getOpen = locOpenHr.split(":");
  151. //console.log(getOpen);
  152. theLocOpenHr = getOpen[0];
  153. theLocOpenHr = parseInt(theLocOpenHr);
  154. locOpenMin = getOpen[1];
  155. var theLocClosHr;
  156. //console.log('locClosHr: ' + locClosHr);
  157. switch(locClosHr){
  158. case '1':
  159. if(locClosAmPm === 'AM')
  160. duration =
  161. theLocClosHr = 1;
  162. else
  163. theLocClosHr = 13;
  164. break;
  165. case '2':
  166. if(locClosAmPm === 'AM')
  167. theLocClosHr = 2;
  168. else
  169. theLocClosHr = 14;
  170. break;
  171. case '3':
  172. if(locClosAmPm === 'AM')
  173. theLocClosHr = 3;
  174. else
  175. theLocClosHr = 15;
  176. break;
  177. case '4':
  178. if(locClosAmPm === 'AM')
  179. theLocClosHr = 4;
  180. else
  181. theLocClosHr = 16;
  182. break;
  183. case '5':
  184. if(locClosAmPm === 'AM')
  185. theLocClosHr = 5;
  186. else
  187. theLocClosHr = 17;
  188. break;
  189. case '6':
  190. if(locClosAmPm === 'AM')
  191. theLocClosHr = 6;
  192. else
  193. theLocClosHr = 18;
  194. break;
  195. case '7':
  196. if(locClosAmPm === 'AM')
  197. theLocClosHr = 7;
  198. else
  199. theLocClosHr = 19;
  200. break;
  201. case '8':
  202. if(locClosAmPm === 'AM')
  203. theLocClosHr = 8;
  204. else
  205. theLocClosHr = 20;
  206. break;
  207. case '9':
  208. if(locClosAmPm === 'AM')
  209. theLocClosHr = 9;
  210. else
  211. theLocClosHr = 21;
  212. break;
  213. case '10':
  214. if(locClosAmPm === 'AM')
  215. theLocClosHr = 10;
  216. else
  217. theLocClosHr = 22;
  218. break;
  219. case '11':
  220. if(locClosAmPm === 'AM')
  221. theLocClosHr = 11;
  222. else
  223. theLocClosHr = 23;
  224. break;
  225. case '12':
  226. if(locClosAmPm === 'AM')
  227. theLocClosHr = 0;
  228. else
  229. theLocClosHr = 12;
  230. break;
  231. }
  232. /*console.log(typeof theLocClosHr);
  233. console.log('theLocClosHr: ' + theLocClosHr);
  234. console.log(typeof theLocOpenHr);
  235. console.log('theLocOpenHr: ' + theLocOpenHr);
  236. console.log('locClosAmPm: ' + locClosAmPm); */
  237. locOpenMin = parseInt(locOpenMin);
  238. theMinutes = parseInt(theMinutes);
  239. /*console.log(typeof locOpenMin);
  240. console.log(typeof theMinutes);
  241. console.log('locOpenMin: ' + locOpenMin); */
  242. if(theHours == theLocOpenHr){
  243. if(theMinutes < locOpenMin){
  244. status = 0;
  245. }
  246. else{
  247. status = 1;
  248. }
  249. }
  250. else if(theHours < theLocOpenHr && locClosAmPm === 'AM'){
  251. if(theHours < theLocClosHr){
  252. status = 1;
  253. }
  254. else if(theHours == theLocClosHr){
  255. if(theMinutes < locClosMin){
  256. status = 1;
  257. }
  258. else{
  259. status = 0;
  260. }
  261. }
  262. else{
  263. status = 0;
  264. }
  265. }
  266. else if(theLocOpenHr < theHours && theHours < theLocClosHr){
  267. status = 1;
  268. }
  269. else if(theLocOpenHr < theHours && theHours == theLocClosHr){
  270. if(theMinutes < locClosMin){
  271. status = 1;
  272. }
  273. else{
  274. status = 0;
  275. }
  276. }
  277. else if(theHours > theLocClosHr && locClosAmPm === 'AM'){
  278. status = 1;
  279. }
  280. else{
  281. status = 0;
  282. }
  283. }
  284.  
  285. //console.log(val._id);
  286. //console.log(status);
  287.  
  288. //the loaciton is closed
  289. if(status == 0){
  290. var content1 = "<tr class=\"tableRows\" id=\"tableRow" + index + "\"> <td class=\"col-md-4\" id=\"" + val._id + "\"><img src=\"" + val.logoLocation + "\" alt=\"" + val._id + " Logo\" class=\"logos\" id=\"theLogo" + index + "\"><p class=\"miles\" id=\"theMiles" + index + "\"></p></td> <td class=\"locationPreview\"> <h3 class=\"locationName\">" + val._id + "</h3> <h4 class=\"openTill\" id=\"openTill" + index + "\"></h4> <center><i class=\"fa fa-chevron-down\" aria-hidden=\"true\"></i></center> </td> </tr> <tr class=\"expandedInformation\"> <td class=\"col-md-4 weeklyHours\"> <h5 class=\"hoursHeading\">Weekly Hours</h5><h6 id=\"dynamicHoursLoadClosed" + index + "\"></h6> </td> <td class=\"displayMap\" id=\"map" + index + "\"> </td> </tr>";
  291. $("#dynamicRowLoadClosed").append(content1);
  292. document.getElementById('openTill' + index).innerHTML = "Closed now";
  293. document.getElementById('tableRow' + index).style = "background-color: rgba(222,222,222, 0.3); color: rgba(185,185,185, 0.9);";
  294. document.getElementById('openTill' + index).style = "color: red;";
  295. document.getElementById('theLogo' + index).style = "opacity: 0.4;";
  296. var content2 = "Monday: " + val.Monday + "<br>Tuesday: " + val.Tuesday + "<br>Wednesday: " + val.Wednesday + "<br>Thursday: " + val.Thursday + "<br>Friday: " + val.Friday + "<br>Saturday: " + val.Saturday + "<br>Sunday: " + val.Sunday;
  297. $("#dynamicHoursLoadClosed" + index).html(content2);
  298. //pass the coordinates to the function that calculates how far the user is from the location
  299. theDistance = initMilesAway(val.theLat, val.theLong, index);
  300. ++index;
  301. }
  302. //the location is open
  303. else if(status == 1){
  304. var content1 = "<tr class=\"tableRows\" id=\"tableRow" + index + "\"> <td class=\"col-md-4\" id=\"" + val._id + "\"><img src=\"" + val.logoLocation + "\" alt=\"" + val._id + " Logo\" class=\"logos\" id=\"theLogo" + index + "\"><p class=\"miles\" id=\"theMiles" + index + "\"></p></td> <td class=\"locationPreview\"> <h3 class=\"locationName\">" + val._id + "</h3> <h4 class=\"openTill\" id=\"openTill" + index + "\"></h4> <center><i class=\"fa fa-chevron-down\" aria-hidden=\"true\"></i></center> </td> </tr> <tr class=\"expandedInformation\"> <td class=\"col-md-4 weeklyHours\"> <h5 class=\"hoursHeading\">Weekly Hours</h5><h6 id=\"dynamicHoursLoadOpen" + index + "\"></h6> </td> <td class=\"displayMap\" id=\"map" + index + "\"> </td> </tr>";
  305. $("#dynamicRowLoadOpen").append(content1);
  306. document.getElementById('openTill' + index).innerHTML = displayLocClosing;
  307. document.getElementById('openTill' + index).style = "color: green;";
  308. var content2 = "Monday: " + val.Monday + "<br>Tuesday: " + val.Tuesday + "<br>Wednesday: " + val.Wednesday + "<br>Thursday: " + val.Thursday + "<br>Friday: " + val.Friday + "<br>Saturday: " + val.Saturday + "<br>Sunday: " + val.Sunday;
  309. $("#dynamicHoursLoadOpen" + index).html(content2);
  310. //pass the coordinates to the function that calculates how far the user is from the location
  311. theDistance = initMilesAway(val.theLat, val.theLong, index);
  312. ++index;
  313. }
  314. //the location is 24 hours
  315. else{
  316. var content1 = "<tr class=\"tableRows\" id=\"tableRow" + index + "\"> <td class=\"col-md-4\" id=\"" + val._id + "\"><img src=\"" + val.logoLocation + "\" alt=\"" + val._id + " Logo\" class=\"logos\" id=\"theLogo" + index + "\"><p class=\"miles\" id=\"theMiles" + index + "\"></p></td> <td class=\"locationPreview\"> <h3 class=\"locationName\">" + val._id + "</h3> <h4 class=\"openTill\" id=\"openTill" + index + "\"></h4> <center><i class=\"fa fa-chevron-down\" aria-hidden=\"true\"></i></center> </td> </tr> <tr class=\"expandedInformation\"> <td class=\"col-md-4 weeklyHours\"> <h5 class=\"hoursHeading\">Weekly Hours</h5><h6 id=\"dynamicHoursLoadOpen" + index + "\"></h6> </td> <td class=\"displayMap\" id=\"map" + index + "\"> </td> </tr>";
  317. $("#dynamicRowLoadOpen").append(content1);
  318. document.getElementById('openTill' + index).innerHTML = "24 Hours";
  319. document.getElementById('openTill' + index).style = "color: green;";
  320. var content2 = "Monday: " + val.Monday + "<br>Tuesday: " + val.Tuesday + "<br>Wednesday: " + val.Wednesday + "<br>Thursday: " + val.Thursday + "<br>Friday: " + val.Friday + "<br>Saturday: " + val.Saturday + "<br>Sunday: " + val.Sunday;
  321. $("#dynamicHoursLoadOpen" + index).html(content2);
  322. //pass the coordinates to the function that calculates how far the user is from the location
  323. theDistance = initMilesAway(val.theLat, val.theLong, index);
  324. ++index;
  325. }
  326. });
  327. //sortTheTable();
  328. });
  329. }
  330.  
  331. /*function sortTheTable(){
  332. console.log('about to sort the table.');
  333. var table = $('#openTable').eq(0);
  334. console.log(table);
  335. var rows = table.find('tr:gt(0)').toArray();
  336. var theRows = table.find('tr:gt(0)').toArray().sort(comparer($('miles').index()));
  337. console.log(rows);
  338. console.log(theRows);
  339. this.asc = !this.asc
  340. if (!this.asc){rows = rows.reverse(); }
  341. for (var i = 0; i < rows.length; i++){table.append(rows[i]); }
  342. }
  343.  
  344. function comparer(index) {
  345. return function(a, b) {
  346. var valA = getCellValue(a, index), valB = getCellValue(b, index);
  347. console.log('val a is: ');
  348. console.log(valA);
  349. console.log(a);
  350. console.log('val b is: ');
  351. console.log(valB);
  352. return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
  353. }
  354. }
  355. function getCellValue(row, index){ return $(row).children('td').eq(index).html() }*/
  356.  
  357. $('#dynamicRowLoadOpen').on('click', '.tableRows', function() {
  358. $(this).closest('tr').next('.expandedInformation').toggle();
  359. theId = $(this)[0].cells[0].id;
  360.  
  361. //load the map when the user clicks on the row. This saves a lot of time instead of loading them all on page load
  362. //loop through json to get the coordinates and pass them to the initMap function
  363. $.getJSON("regularHours.json", function(data) {
  364. var index = 0;
  365. $.each(data, function (key, val) {
  366. if(theId === val._id){
  367. initMap(val.theLat, val.theLong, index);
  368. }
  369. ++index;
  370. });
  371. });
  372. });
  373.  
  374. $('#dynamicRowLoadClosed').on('click', '.tableRows', function() {
  375. $(this).closest('tr').next('.expandedInformation').toggle();
  376. theId = $(this)[0].cells[0].id;
  377.  
  378. //load the map when the user clicks on the row. This saves a lot of time instead of loading them all on page load
  379. //loop through json to get the coordinates and pass them to the initMap function
  380. $.getJSON("regularHours.json", function(data) {
  381. var index = 0;
  382. $.each(data, function (key, val) {
  383. if(theId === val._id){
  384. initMap(val.theLat, val.theLong, index);
  385. }
  386. ++index;
  387. });
  388. });
  389. });
  390.  
  391. var day;
  392. var amPm;
  393. var theHours;
  394. var theMinutes;
  395.  
  396. function getDateTimeInfo(){
  397. var currentDate = new Date();
  398. day = currentDate.getDay();
  399. theHours = currentDate.getHours();
  400. minutes = currentDate.getMinutes();
  401. //day = 3;
  402. //theHours = 24;
  403. //theMinutes = 0;
  404. /*console.log('day is : ' + day);
  405. console.log('theHours is : ' + theHours);
  406. console.log('theMinutes is : ' + theMinutes);*/
  407.  
  408. }
  409.  
  410. // Search Function
  411. function search() {
  412. var input, filter, table, tr, td, i;
  413. input = document.getElementById("myInput");
  414. filter = input.value.toUpperCase();
  415. table1 = document.getElementById("openTable");
  416. tr = table1.getElementsByTagName("tr");
  417. for (i = 0; i < tr.length; i++) {
  418. td = tr[i].getElementsByTagName("td")[0];
  419. if (td) {
  420. if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
  421. tr[i].style.display = "";
  422. } else {
  423. tr[i].style.display = "none";
  424. }
  425. }
  426. /* //TODO
  427. table2 = document.getElementById("closedTable");
  428. tr2 = table2.getElementsByTagName("tr");
  429. for (i = 0; i < tr.length; i++) {
  430. td2 = tr2[i].getElementsByTagName("td")[0];
  431. if (td2) {
  432. if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
  433. tr2[i].style.display = "";
  434. } else {
  435. tr2[i].style.display = "none";
  436. }
  437. } */
  438. }
  439. }
  440.  
  441. //source: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
  442. //source: https://developers.google.com/maps/documentation/javascript/geolocation
  443. //source: http://stackoverflow.com/questions/1502590/calculate-distance-between-two-points-in-google-maps-v3
  444.  
  445. //work in progress source for sorting table: http://jsfiddle.net/Zhd2X/20/
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!