feat: add caching for blips and player selection

Blips are now only downloaded when the user clicks "refresh" and when the app is first loaded.
User can now select a player that is online to "track". Still need to implement tracking,

Author: TGRHavoc

index.php

@@ -72,7 +72,7 @@
 
     // Set to the IP of the GTA server running "live_map" and change the port to the
     // number that is in the "server.lua" file
-    var _SETTINGS_socketUrl = "wss://identityrp.co.uk:30121"
+    var _SETTINGS_socketUrl = "ws://localhost:30121"
 
     </script>
 
@@ -144,6 +144,14 @@ function startMarkers(){
 
                   <li id="socket_error" class="label label-danger"></li>
 
+                  <li style="height: 50px;">
+                      <a>
+                          Track Player
+                          <select id="playerSelect" class="input-large form-control pull-right" style="width: 65%">
+                              <option></option>
+                          </select>
+                  </li>
+
                 </ul>
 
                 <ul class="nav nav-list" style="margin-top: 10px;">
@@ -163,7 +171,24 @@ function startMarkers(){
 <script>
 var _invervalId;
 var _isLive = false;
+var _blips = [];
+var _blipCount = 0;
 var _showBlips = true;
+var _isConnected = false;
+var _trackPlayer = null;
+
+function toggleBlips(){
+    console.log("showing local blips");
+    if (_showBlips){
+        _blips.forEach(function(blip){
+            var desc = blip.description == undefined ? "" : blip.description;
+            var obj = new MarkerObject(blip.name, new Coordinates(blip.x, blip.y, blip.z), MarkerTypes[blip.type], desc, "", "");
+            createMarker(false, false, obj, "");
+        });
+    }else{
+        clearAllMarkers();
+    }
+}
 
 $(document).ready(function(){
     globalInit();
@@ -179,7 +204,8 @@ function startMarkers(){
 
         _showBlips = !_showBlips;
 
-        webSocket.send("getBlips");
+        //webSocket.send("getBlips");
+        toggleBlips();
 
         $("#blips_enabled").removeClass("label-success").removeClass("label-danger")
             .addClass( _showBlips ? "label-success" : "label-danger")
@@ -195,6 +221,10 @@ function startMarkers(){
 
     $("#toggleLive").click(function(e){
         e.preventDefault();
+        if(!_isConnected){
+            // Not connected
+            return;
+        }
 
         _isLive = !_isLive;
 
@@ -209,7 +239,6 @@ function startMarkers(){
         }
 
     });
-
 });
 </script>
 </html>

js/socket.min.js

@@ -21,8 +21,11 @@ function connect(){
 }
 
 function onOpen(e){
+    _isConnected = true;
+    console.log("_isConnected: " + _isConnected);
     // Get blips?
     webSocket.send("getBlips");
+    webSocket.send("getLocations"); // Get any players connected to the server
 
     $("#connection").removeClass("label-danger")
         .removeClass("label-warning")
@@ -82,7 +85,7 @@ function onError(e){
     else if(event.code == 1015)
         reason = "The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).";
     else
-        reason = "Unknown reason";
+        reason = "Unknown reason (Server is probably down)";
 
     $("#socket_error").text(reason);
 
@@ -96,27 +99,35 @@ function onClose(e){
         .removeClass("label-warning")
         .addClass("label-danger").text("disconnected");
 
+    _isConnected = false;
     if (_isLive){
         clearInterval(_invervalId);
     }
 
 }
 
+function addBlip(blip, bool){
+    //_blipCount++;
+}
+
 function initBlips(blips){
-    var count = 0;
+    _blipCount = 0;
+    _blips = [];
     clearAllMarkers();
 
     if (_showBlips){
         blips.forEach(function(blip){
             var desc = blip.description == undefined ? "" : blip.description;
             var obj = new MarkerObject(blip.name, new Coordinates(blip.x, blip.y, blip.z), MarkerTypes[blip.type], desc, "", "");
+
+            _blips[_blipCount++] = blip;
+
             createMarker(false, false, obj, "");
-            count++;
         });
     }
 
-    console.log(count + " blips created");
-    $("#blip_count").text(count);
+    console.log(_blipCount + " blips created");
+    $("#blip_count").text(_blipCount);
 }
 
 var localCache = {};
@@ -126,6 +137,10 @@ function playerLeft(playerName){
         clearMarker(localCache[playerName].marker);
         localCache[playerName].marker = null;
     }
+
+    if ($("#playerSelect option[value='" + playerName + "']").length > 0){
+        $("#playerSelect option[value='" + playerName + "']").remove();
+    }
 }
 
 function doPlayerUpdate(players){
@@ -134,6 +149,13 @@ function doPlayerUpdate(players){
         playerCount ++;
         if (plr == null) return;
 
+        if ($("#playerSelect option[value='" + plr.id + "']").length <= 0){
+            $("#playerSelect").append($("<option>", {
+                value: plr.id,
+                text: plr.name
+            }));
+        }
+
         if (plr.id in localCache){
 
             //console.log(JSON.stringify(plr));