feat: add blip controls

Users can now toggle on/off the blips they want.

Author: TGRHavoc

index.php

@@ -297,7 +297,7 @@
             <div id="blip-filter-dropdown" class="custom-menu col-sm-0 col-xs-0 col-md-12 collapse">
                 <div class="list-group border-0 card text-center text-md-left" style="padding: 8px 0;">
 
-                    <a class="nav-header">Blip Controls</a>
+                    <a class="nav-header">Blip Controls <small id="toggle-all-blips" class="btn btn-sm btn-info">Toggle all</small></a>
 
                     <div id="blip-control-container" class="row">
 

js/src/alerter.js

@@ -135,10 +135,8 @@ function createAlert(data, settings){
         settings.type = "warning";
     }
 
-    console.log(JSON.stringify(data));
-    console.log(JSON.stringify(settings));
-
-    var notif = $.notify(data, settings);
-
-    return notif; // Incase I need this in future for shit like prgress bars or, if i need to update the alert
+    //console.log(JSON.stringify(data));
+    //console.log(JSON.stringify(settings));
+    
+    return $.notify(data, settings);; // Incase I need this in future for shit like prgress bars or, if i need to update the alert
 }

js/src/controls.js

@@ -22,6 +22,15 @@ function toggleBlips(){
 
         for(var spriteId in _blips){
             var blipArray = _blips[spriteId];
+            //console.log("Disabled (" + spriteId + ")? " + _disabledBlips.includes(spriteId));
+
+            if(_disabledBlips.indexOf(spriteId) != -1){
+                if(_SETTINGS_debug){
+                    console.log("Blip " + spriteId + "'s are disabled..");
+                }
+                // If disabled, don't make a marker for it
+                continue;
+            }
 
             for(var i in blipArray){
                 var blip = blipArray[i];
@@ -93,4 +102,28 @@ $(document).ready(function(){
 
         connect();
     });
+
+    $("#toggle-all-blips").on("click", function(){
+        // Toggle the classes and add/remove the blipIds from the array
+        $("#blip-control-container").find("a").each(function(index, ele){
+            var ele = $(ele);
+            var blipId = ele.data("blipNumber").toString();
+
+            // Toggle blip
+            if(_disabledBlips.includes(blipId)){
+                // Already disabled, enable it
+                _disabledBlips.splice(_disabledBlips.indexOf(blipId), 1);
+                ele.removeClass("blip-disabled").addClass("blip-enabled");
+            }else{
+                // Enabled, disable it
+                _disabledBlips.push(blipId);
+                ele.removeClass("blip-enabled").addClass("blip-disabled");
+            }
+        });
+
+        // Now we can refresh the markers
+        clearAllMarkers();
+        toggleBlips();
+    });
+
 });

js/src/init.js

@@ -25,6 +25,7 @@ var _isConnected = false;
 var _trackPlayer = null;
 var playerCount = 0;
 var _overlays = [];
+var _disabledBlips = [];
 
 function globalInit() {
     mapInit("map-canvas");

js/src/markers.js

@@ -219,6 +219,8 @@ var types = {
     DollarSignSquared : {id: 434}
 };
 
+var nameToId = {};
+
 var blipCss = `.blip {
     background: url("${_MAP_currentUri}${_MAP_iconURL}blips_texturesheet.png");
     background-size: ${1024/2}px ${1024/2}px;
@@ -229,13 +231,34 @@ var blipCss = `.blip {
 
 function generateBlipControls(){
     for(var blipName in types){
-        $("#blip-control-container").append(`<a id="blip_${blipName}_link" class="list-group-item d-inline-block collapsed blip-enabled" href="#"><span class="blip blip-${blipName}"></span></a>`);
+        $("#blip-control-container").append(`<a data-blip-number="${nameToId[blipName]}" id="blip_${blipName}_link" class="blip-button-a list-group-item d-inline-block collapsed blip-enabled" href="#"><span class="blip blip-${blipName}"></span></a>`);
 
         if(_SETTINGS_debug){
             console.log("Added ahref for " + blipName);
         }
-        
     }
+    
+    // Events
+    $(".blip-button-a").on("click", function(e){
+        var ele = $(e.currentTarget);
+        var blipId = ele.data("blipNumber").toString();
+
+        // Toggle blip
+        if(_disabledBlips.includes(blipId)){
+            // Already disabled, enable it
+            _disabledBlips.splice(_disabledBlips.indexOf(blipId), 1);
+            ele.removeClass("blip-disabled").addClass("blip-enabled");
+        }else{
+            // Enabled, disable it
+            _disabledBlips.push(blipId);
+            ele.removeClass("blip-enabled").addClass("blip-disabled");
+        }
+
+        // Refresh blips (there's probably a faster way..)
+        clearAllMarkers();
+        toggleBlips();
+    });
+
 }
 
 function generateBlipShit(){
@@ -272,6 +295,8 @@ function generateBlipShit(){
             origin: new google.maps.Point( customImageWidth * currentX , customImageHeight * currentY ),
         };
 
+        nameToId[blipName] = currentId;
+
         // CSS GENERATOR FOR BLIP ICONS IN HTML
         // Just add the class "blip blip-<NAME>" to the element for blip icons
         // e.g. <span class="blip blip-Standard"> for a Standard blip

utils/config.php

@@ -28,7 +28,7 @@ class Config{
 
     // Set to false to enable the miinified versions of JS and CSS files
     // that should speed up content delivery on production websites
-    public $debug = true;
+    public $debug = false;
 
     // An array of servers that you want the interface to be available for
     public static $servers = array(