Commit rauchg#4: Replace all files from bus-locator-socket here

TheSachinSBhat · Feb 7, 2017 · 970a736 · 970a736
1 parent 572c7d5
commit 970a736
Show file tree

Hide file tree

Showing 5 changed files with 415 additions and 39 deletions.
diff --git a/app.json b/app.json
@@ -0,0 +1,6 @@
+{
+  "name": "Node.js Socket.io Example",
+  "description": "Part of the Using WebSockets on Heroku Tutorial",
+  "repository": "https://github.com/heroku-examples/node-socket.io",
+  "keywords": ["node", "websocket", "socket.io"]
+}
diff --git a/index.html b/index.html
@@ -1,36 +1,231 @@
-<!doctype html>
 <html>
-  <head>
-    <title>Socket.IO chat</title>
+<head>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      body { font: 13px Helvetica, Arial; }
-      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
-      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
-      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
-      #messages { list-style-type: none; margin: 0; padding: 0; }
-      #messages li { padding: 5px 10px; }
-      #messages li:nth-child(odd) { background: #eee; }
+        #location-container {
+            width: 100%;
+            height: 10%;
+            position: fixed;
+        }
+
+        #user-location-div {
+            float: left;
+            height: 10%;
+            position: relative;
+        }
+
+        #transmit-location-div {
+            top: 30%;
+            left: 25%;
+            float: right;
+            height: 10%;
+            position: absolute;
+        }
+
+        #googleMap {
+            width: 1200px;
+            height: 600px;
+            position: fixed;
+            overflow: hidden;
+            top: 10%;
+        }
     </style>
-  </head>
-  <body>
-    <ul id="messages"></ul>
-    <form action="">
-      <input id="m" autocomplete="off" /><button>Send</button>
-    </form>
     <script src="/socket.io/socket.io.js"></script>
-    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDA5w4IA_fIDe8Iex8ybjYf8N7a2hMNkGA"></script>
+</head>
+<body>
+    <div id="location-container">
+        <div id="user-location-div">
+            <label>User Location</label>
+            <div id="">
+                <div id="startLat"></div>
+                <div id="startLon"></div>
+            </div>
+        </div>
+        <div id="transmit-location-div">
+            <a href="/transmitter.html" target="_blank">Transmit Location</a>
+        </div>
+    </div>
+    <div id="googleMap" style="width:1200px;height:600px;"></div>
     <script>
-      var socket = io.connect();
-
-      $('form').submit(function(){
-        socket.emit('chat message', $('#m').val());
-        $('#m').val('');
-        return false;
-      });
-      socket.on('chat message', function(msg){
-        $('#messages').append($('<li>').text(msg));
-      });
+        var socket = io.connect();
+
+        socket.on('message', function (data) {
+            console.log(data.message);
+        });
+
+        socket.on('buslocationData', function (busLocation) {
+
+            var busLocations = [];
+
+            // Parse the busLocationData and put it into busLocations array
+            for (var device in busLocation.deviceLocationData) {
+                var deviceLocation = busLocation.deviceLocationData[device];
+                if (deviceLocation) {
+                    busLocations.push(deviceLocation);
+                }
+            }
+
+            updateBusLocations(busLocations);
+        });
+      //var el = document.getElementById('server-time');
+
+      //socket.on('time', function(timeString) {
+      //  el.innerHTML = 'Server time: ' + timeString;
+        //});
+
+      /***** Page Variables *****/
+
+      /* Represents the Map object */
+      var map;
+      /* Represents the Area Bound for the Map object */
+      var bounds = new google.maps.LatLngBounds();
+
+      /* Object that represents Custom Bus Marker */
+      var busMarkers = [];
+
+      var busLocation = new google.maps.LatLng(18.52592091234, 73.82753751221);
+
+      /***** Google Maps methods *****/
+
+      /* Method that initializes the Map Object */
+      function initialize() {
+          debugger;
+          /* Stores the map properties */
+          var mapProp = {
+              center: new google.maps.LatLng(18.52592091234, 73.82753751221),
+              zoom: 18,
+              mapTypeId: google.maps.MapTypeId.ROADMAP
+          };
+
+          // Create a map object
+          map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
+
+          ///* Add a custom marker on the map */
+          //busMarker = new google.maps.Marker({
+          //    position: busLocation,
+          //    icon: "https://buslocatorapp.herokuapp.com/static/bus_18_2x.png",
+          //    map: map
+          //});
+
+          //// Reference: https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
+          //// Create a new polyline which would display the route of the bus
+          //busRoutePolyline = new google.maps.Polyline({
+          //    strokeColor: '#000000',
+          //    strokeOpacity: 1.0,
+          //    strokeWeight: 3
+          //});
+          //busRoutePolyline.setMap(map);
+
+          ///* Monitor User Location */
+          //getUserLocation();
+      }
+
+      /* Event listener for Window Load event */
+      google.maps.event.addDomListener(window, 'load', initialize);
+
+      ///* Method that returns location co-ordinates of the user */
+      //function getUserLocation() {
+      //    options = {
+      //        enableHighAccuracy: true,
+      //        timeout: 5000,
+      //        maximumAge: 0
+      //    };
+
+      //    // Reference: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition
+      //    id = navigator.geolocation.watchPosition(sendBusLocation, error, options);
+      //}
+
+      //function error(err) {
+      //    console.warn('ERROR(' + err.code + '): ' + err.message);
+      //}
+
+
+      ///* Method that sends the bus current location to server */
+      //function sendBusLocation(pos) {
+      //    var busLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
+      //    socket.emit('buslocation', busLocation);
+      //}
+
+      /* Remove all bus markers from the Google Map */
+      function removeBusMarkers() {
+          for (i = 0; i < busMarkers.length; i++) {
+            /* Remove the marker from the Google Map */
+            busMarkers[i].setMap(null);
+          }
+
+          /* Empty the array */
+          busMarkers.length = 0;
+      }
+
+        /* Add bus markers on the Google Map based on busLocations */
+      function addBusMarkers(busLocations) {
+
+          for (var location in busLocations) {
+              var busLocation = busLocations[location];
+              if (busLocation) {
+
+                  document.getElementById('startLat').innerHTML = busLocation.lat;
+                  document.getElementById('startLon').innerHTML = busLocation.lng;
+
+                  // Reference: https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
+                  bounds.extend(busLocation);
+
+                  var busMarker = new google.maps.Marker({
+                      position: busLocation,
+                      //title: locations[i].title,
+                      icon: "https://buslocatorapp.herokuapp.com/static/bus_18_2x.png",
+                      map: map
+                  });
+
+                  // Push the newly created bus marker into the busMarkers array
+                  busMarkers.push(busMarker);
+
+                  // Automatically center the map fitting all markers on the screen
+                  map.fitBounds(bounds);
+              }
+          }
+      }
+
+      /* Method that updates all the bus current locations on the Google Map */
+      function updateBusLocations(busLocations) {
+
+          /* Remove all existing bus markers from the Google Map */
+          removeBusMarkers();
+
+          /* Add new bus markers based on updated locations on the Google Map */
+          addBusMarkers(busLocations);
+
+          ///* Object that represents Custom Bus Marker */
+          //var busMarker;
+
+          ///* Add a custom marker on the map */
+          //busMarker = new google.maps.Marker({
+          //    position: busLocation,
+          //    icon: "https://buslocatorapp.herokuapp.com/static/bus_18_2x.png",
+          //    map: map
+          //});
+
+          ////// TODO: Update user location on map
+          ////busLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
+          //busMarker.setPosition(busLocation);
+
+          //var currCenter = map.getCenter();
+          google.maps.event.trigger(map, 'resize');
+          // Re-center map to the current bus location
+          //map.setCenter(busLocation);
+
+          //// Get the path of the bus from the polyline
+          //var busPath = busRoutePolyline.getPath();
+
+          //// Because path is an MVCArray, we can simply append a new coordinate
+          //// and it will automatically appear.
+          //// Append the current bus location to the bus path
+          //busPath.push(busLocation);
+
+      }
     </script>
-  </body>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,15 +1,20 @@
 {
-  "name": "socket-chat-example",
-  "version": "0.0.1",
+  "name": "websockets-socket.io",
+  "version": "1.0.0",
   "engines": {
     "node": "6.2.0"
   },
-  "description": "my first socket.io app",
+  "description": "",
+  "main": "index.js",
   "scripts": {
-    "start": "node index.js"
+    "start": "node server.js"
   },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
   "dependencies": {
     "express": "4.13.4",
-    "socket.io": "1.4.6"
+    "socket.io": "1.4.6",
+    "ejs": "2.5.2"
   }
 }
diff --git a/index.js → server.js b/index.js → server.js
@@ -11,6 +11,19 @@ var server = http.createServer(function (request, response) {
     switch (path) {
         case '/':
             path = "/index.html";
+        case '/transmitter.html':
+            fs.readFile(__dirname + path, function (error, data) {
+                if (error) {
+                    response.writeHead(404);
+                    response.write('File not found!');
+                    response.end();
+                }
+                else {
+                    response.writeHead(200, { 'Content-Type': 'text/html' });
+                    response.write(data, "utf8");
+                    response.end();
+                }
+            });
             break;
         default:
             response.writeHead(404);
@@ -34,11 +47,14 @@ global.deviceLocationData = [];
 /* Array that holds the session data for all the connected clients */
 global.allClients = [];
 
+
 listener.sockets.on('connection', function (socket) {
     /* Push the current socket to the allClients array */
     allClients.push(socket);
     var deviceSessionId = allClients.indexOf(socket);
 
+    //global.testContext = global.testContext + 1;
+
     socket.emit('message', { 'message': 'hello world'});
 
     socket.emit('deviceSessionData', { 'deviceSessionId': deviceSessionId });
@@ -69,8 +85,4 @@ listener.sockets.on('connection', function (socket) {
             'deviceLocationData': global.deviceLocationData
         });
     });
-
-    socket.on('chat message', function(msg){
-    	socket.emit('chat message', msg);
-    });
-});
+});