Sidebar changes (#254)

Author: LukePrior

img/splash/splash-narrow.png

@@ -27,6 +27,7 @@
     <div id="loading">
         <div>
             <img src="img/sondehub_logo.png" />
+            <img src="img/splash/splash-wide.png" style="transform: translate(-50%,250%);"/>
             <div class="bar" style="display: none"><div class="complete"></div></div>
         </div>
     </div>
@@ -210,6 +211,13 @@ <h4>Visibility</h4>
                     <input type="checkbox" id="opt_layers_launches">
                 </div>
             </div>
+            <div class="row option">
+                <span><b>Only show visible on sidebar</b></span>
+                <div class="switch off" id="sw_selective_sidebar">
+                    <span class="thumb"></span>
+                    <input type="checkbox" id="opt_selective_sidebar">
+                </div>
+            </div>
             <h4>Other</h4>
             <hr/>
             <div class="row option">

img/splash/splash-wide.png

@@ -722,6 +722,7 @@ $(window).ready(function() {
         '#sw_hide_horizon',
         '#sw_hide_titles',
         '#sw_layers_launches',
+        '#sw_selective_sidebar',
         "#sw_nowelcome",
         "#sw_interpolate",
     ];
@@ -820,6 +821,9 @@ $(window).ready(function() {
                 if(on) map.overlayMapTypes.setAt("1", overlayAPRS);
                 else map.overlayMapTypes.setAt("1", null);
                 break;
+            case "opt_selective_sidebar":
+                sidebar_update();
+                break;
             case "opt_layers_launches":
                 if(on) {
                     map.removeLayer(launches);

index.html

@@ -878,6 +878,7 @@ function load() {
 
     map.on('moveend', function (e) {
         lhash_update();
+        sidebar_update();
     });
 
     map.on('baselayerchange', function (e) {
@@ -926,6 +927,7 @@ function load() {
 
         map.on('moveend', function() {
             lhash_update();
+            sidebar_update();
         });
         map.on('baselayerchange', function() {
             lhash_update();
@@ -1053,6 +1055,24 @@ function panToRecovery(rcallsign) {
     }
 }
 
+function sidebar_update() {
+    if (offline.get('opt_selective_sidebar')) {
+        for (let serial in vehicles) {
+            if (map.getBounds().contains(vehicles[serial].marker.getLatLng())) {
+                $("#main .vehicle"+vehicles[serial].uuid).show();
+            } else {
+                if (!($("#main .vehicle"+vehicles[serial].uuid).hasClass("follow"))) {
+                    $("#main .vehicle"+vehicles[serial].uuid).hide();
+                }
+            }
+        }
+    } else {
+        for (let serial in vehicles) {
+            $("#main .vehicle"+vehicles[serial].uuid).show();
+        }
+    }
+}
+
 function title_case(s) {
   return s.replace(/\w\S*/g, function(txt) {
     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
@@ -1528,6 +1548,14 @@ function updateVehicleInfo(vcallsign, newPosition) {
         $('.landscape').append('<div class="row vehicle'+vehicle.uuid+'" data-vcallsign="'+vcallsign+'"></div>');
     }
 
+    if (offline.get('opt_selective_sidebar')) {
+        if (map.getBounds().contains(vehicles[vcallsign].marker.getLatLng())) {
+            $("#main .vehicle"+vehicle.uuid).show();
+        } else {
+            $("#main .vehicle"+vehicle.uuid).hide();
+        }
+    }
+
   } else if(elm.attr('data-vcallsign') === undefined) {
     elm.attr('data-vcallsign', vcallsign);
   }
@@ -3463,7 +3491,7 @@ function refresh() {
             refreshSingle(wvar.query);
         } else {
             response = formatData(data, false);
-            update(response);   
+            update(response, true);   
             $("#stTimer").attr("data-timestamp", response.fetch_timestamp);
         }
         $("#stText").text("");
@@ -3591,7 +3619,7 @@ function refreshSingle(serial) {
       dataType: "json",
       success: function(data, textStatus) {
         response = formatData(data, false);
-        update(response);
+        update(response, true);
         singleRecovery(serial);
         $("#stText").text("");
       },
@@ -3633,7 +3661,7 @@ function refreshSingleNew(serial) {
       dataType: "json",
       success: function(data, textStatus) {
         response = formatData(data, false);
-        update(response);
+        update(response, true);
       },
       error: function() {
         ajax_inprogress_single_new = false;
@@ -4348,14 +4376,16 @@ var ssdv = {};
 var status = "";
 var bs_idx = 0;
 
-function update(response) {
+function update(response, none) {
     if (response === null ||
         !response.positions ||
         !response.positions.position ||
         !response.positions.position.length) {
 
         // if no vehicles are found, this will remove the spinner and put a friendly message
-        $("#main .empty").html("<span>No vehicles :(</span>");
+        if (none) {
+            $("#main .empty").html("<span>No vehicles :(</span>");
+        }
 
         return;
     }