feat: add dynamic blip controls

Blip controls are now created and popped into the right div when the webapp is navigated to.

Still need to implement the actual behaviour.

Author: TGRHavoc

index.php

@@ -220,13 +220,13 @@
 						</a>
 					</li>
 
-					<!--
+
 					<li class="nv-item">
 						<a class="nav-link" role="button" id="blipToggle" data-toggle="collapse" data-target="#blip-filter-dropdown" aria-controls="blip-filter-dropdown" aria-label="Toggle blip controls" aria-expanded="false">
 							Blip controls
 						</a>
 					</li>
-					-->
+
 				</ul>
 			</div>
 		</div>
@@ -299,20 +299,8 @@
 
 					<a class="nav-header">Blip Controls</a>
 
-					<div class="row">
-
-						<a class="list-group-item d-inline-block collapsed" href="#">
-							<span class="d-md-inline">Refresh Blips</span>
-						</a>
-						<a class="list-group-item d-inline-block collapsed" href="#">
-							<span class="d-md-inline">Refresh Blips</span>
-						</a>
-						<a class="list-group-item d-inline-block collapsed" href="#">
-							<span class="d-md-inline">Refresh Blips</span>
-						</a>
-						<a class="list-group-item d-inline-block collapsed" href="#">
-							<span class="d-md-inline">Refresh Blips</span>
-						</a>
+					<div id="blip-control-container" class="row">
+						
 					</div>
 
 				</div>

js/src/markers.js

@@ -226,6 +226,18 @@ var blipCss = `.blip {
     width: ${customImageWidth}px;
     height: ${customImageHeight}px;
 }`;
+
+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>`);
+
+        if(_SETTINGS_debug){
+            console.log("Added ahref for " + blipName);
+        }
+        
+    }
+}
+
 function generateBlipShit(){
     var currentX = 0, currentY = 0, currentId = 0;
 
@@ -272,6 +284,7 @@ function generateBlipShit(){
     }
 
     $("head").append(`<style>${blipCss}</style>`);
+    setTimeout(generateBlipControls, 50);
 }
 
 setTimeout(generateBlipShit, 50);

style/src/style.css

@@ -329,7 +329,17 @@ input[type=text] {display:inline;}
 }
 
 #blip-filter-dropdown .list-group-item{
-    width: 150px;
+    /*width: 150px;*/
     float: left;
     border: 1px solid rgba(0, 0, 0, 0.125);
 }
+
+#blip-filter-dropdown .list-group-item.blip-disabled {
+    background-color: inherit;
+}
+#blip-filter-dropdown .list-group-item.blip-enabled {
+    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+    background-color: rgba(31, 31, 31, 0.67);
+}