From 93e06d7f59285f60b9fa2d4e63237efc83ea40c0 Mon Sep 17 00:00:00 2001
From: xenDE <daniel@mameso.com>
Date: Sun, 24 Nov 2019 18:49:32 +0100
Subject: [PATCH] add filter for: SSID, MAC, isCracked, Password

---
 pwnagotchi/plugins/default/webgpsmap.html | 134 +++++++++++++++-------
 1 file changed, 95 insertions(+), 39 deletions(-)
diff --git a/pwnagotchi/plugins/default/webgpsmap.html b/pwnagotchi/plugins/default/webgpsmap.html
index 13bfacbb..6c401ec1 100644
--- a/pwnagotchi/plugins/default/webgpsmap.html
+++ b/pwnagotchi/plugins/default/webgpsmap.html
@@ -9,7 +9,7 @@
   <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
   <style type="text/css">
     /* for map */
-    html, body, #mapdiv {   height: 100%; width: 100%; margin:0; background-color:#000;}
+    html, body {   height: 100%; width: 100%; margin:0; background-color:#000;}
     .pwnAPPin path {
       fill: #ce7575;
     }
@@ -85,11 +85,19 @@
       display: none;
     }
     #loading .face { font-size:8vw; }
-    #loading .text {position:absolute;bottom:0;text-align:center; font-size: 1vw;color:#a0a0a0;}
+    #loading .text { position:absolute;bottom:0;text-align:center; font-size: 2vw;color:#a0a0a0;}
+    #filterbox { position: fixed;top:0px;left:0px;z-index:999999;margin-left:55px;width:100%;height:20px;border-bottom:2px solid #303030;display: grid;grid-template-columns: 1fr 0.1fr;grid-template-rows: 1fr;grid-template-areas: ". .";}
+      #search { grid-area: 1 / 1 / 2 / 2;height:30px;padding:3px;background-color:#000;color:#e0e0e0;border:none;}
+      #matchcount { grid-area: 1 / 2 / 2 / 3;height:30px;margin-right:55px;padding-right:5px;background-color:#000;color:#a0a0a0;font-weight:bold;}
+      #mapdiv { width:100%; height: 100%; }
   </style>
 </head>
 <body>
   <div id="mapdiv"></div>
+  <div id="filterbox">
+    <input type="text" id="search" placeholder="filter: #cracked #notcracked AA:BB:CC aabbcc AndroidAP ..."/>
+    <div id="matchcount">0&nbsp;APs</div>
+  </div>
   <div id="loading"><div class="face"><nobr>(⌐■&nbsp;<span id="loading_ap_img"></span>&nbsp;■)</nobr></div><div class="text" id="loading_infotext">loading positions...</div></div>
   <script type="text/javascript">
     function loadJSON(url, callback) {
@@ -133,11 +141,9 @@
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
       subdomains: 'abcd',
       opacity:0.8,
-      maxZoom: 19
+//      maxZoom: 19
     });
     var mymap = L.map('mapdiv');
-    Esri_WorldImagery.addTo(mymap);
-    CartoDB_DarkMatter.addTo(mymap);
 
     var svg     = '<svg class="pwnAPPin" width="80px" height="60px" viewBox="0 0 44 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>pwnagotchi AP icon.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#000000" offset="100%"></stop></linearGradient></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="marker"><path class="ring_outer" d="M28.6,8 C34.7,9.4 39,12.4 39,16 C39,20.7 31.3,24.6 21.7,24.6 C12.1,24.6 4.3,20.7 4.3,16 C4.3,12.5 8.5,9.5 14.6,8.1 C15.3,8 14.2,6.6 13.3,6.8 C5.5,8.4 0,12.2 0,16.7 C0,22.7 9.7,27.4 21.7,27.4 C33.7,27.4 43.3,22.6 43.3,16.7 C43.3,12.1 37.6,8.3 29.6,6.7 C28.8,6.5 27.8,7.9 28.6,8.1 L28.6,8 Z" id="Shape" fill="#878787" fill-rule="nonzero"></path><path class="ring_inner" d="M28.1427313,11.0811939 C30.4951542,11.9119726 32.0242291,13.2174821 32.0242291,14.6416742 C32.0242291,17.2526931 27.6722467,19.2702986 22.261674,19.2702986 C16.8511013,19.2702986 12.4991189,17.2526931 12.4991189,14.7603569 C12.4991189,13.5735301 13.4400881,12.505386 15.0867841,11.6746073 C15.792511,11.3185592 14.7339207,9.30095371 13.9105727,9.77568442 C10.6171806,10.9625112 8.5,12.9801167 8.5,15.2350876 C8.5,19.0329333 14.4986784,22.0000002 21.9088106,22.0000002 C29.2013216,22.0000002 35.2,19.0329333 35.2,15.2350876 C35.2,12.861434 32.7299559,10.6064632 28.8484581,9.30095371 C28.0251101,9.18227103 27.4370044,10.8438285 28.0251101,11.0811939 L28.1427313,11.0811939 Z" id="Shape" fill="#5F5F5F" fill-rule="nonzero"></path><g id="ap" transform="translate(13.000000, 0.000000)"><rect id="apfront" fill="#000000" x="0" y="14" width="18" height="4"></rect><polygon id="apbody" fill="url(#linearGradient-1)" points="3.83034404 10 14.169656 10 18 14 0 14"></polygon><circle class="ring_outer" id="led1" fill="#931F1F" cx="3" cy="16" r="1"></circle><circle class="ring_inner" id="led2" fill="#931F1F" cx="7" cy="16" r="1"></circle><circle class="ring_outer" id="led3" fill="#931F1F" cx="11" cy="16" r="1"></circle><circle class="ring_inner" id="led4" fill="#931F1F" cx="15" cy="16" r="1"></circle><polygon id="antenna2" fill="#000000" points="8.8173082 0 9.1826918 0 9.5 11 8.5 11"></polygon><polygon id="antenna3" fill="#000000" transform="translate(15.000000, 5.500000) rotate(15.000000) translate(-15.000000, -5.500000) " points="14.8173082 0 15.1826918 0 15.5 11 14.5 11"></polygon><polygon id="antenna1" fill="#000000" transform="translate(3.000000, 5.500000) rotate(-15.000000) translate(-3.000000, -5.500000) " points="2.8173082 0 3.1826918 0 3.5 11 2.5 11"></polygon></g></g></g></svg>';
     var svgOpen = '<svg class="pwnAPPinOpen" width="80px" height="60px" viewBox="0 0 44 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>pwnagotchi AP icon.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#000000" offset="100%"></stop></linearGradient></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="marker"><path class="ring_outer" d="M28.6,8 C34.7,9.4 39,12.4 39,16 C39,20.7 31.3,24.6 21.7,24.6 C12.1,24.6 4.3,20.7 4.3,16 C4.3,12.5 8.5,9.5 14.6,8.1 C15.3,8 14.2,6.6 13.3,6.8 C5.5,8.4 0,12.2 0,16.7 C0,22.7 9.7,27.4 21.7,27.4 C33.7,27.4 43.3,22.6 43.3,16.7 C43.3,12.1 37.6,8.3 29.6,6.7 C28.8,6.5 27.8,7.9 28.6,8.1 L28.6,8 Z" id="Shape" fill="#878787" fill-rule="nonzero"></path><path class="ring_inner" d="M28.1427313,11.0811939 C30.4951542,11.9119726 32.0242291,13.2174821 32.0242291,14.6416742 C32.0242291,17.2526931 27.6722467,19.2702986 22.261674,19.2702986 C16.8511013,19.2702986 12.4991189,17.2526931 12.4991189,14.7603569 C12.4991189,13.5735301 13.4400881,12.505386 15.0867841,11.6746073 C15.792511,11.3185592 14.7339207,9.30095371 13.9105727,9.77568442 C10.6171806,10.9625112 8.5,12.9801167 8.5,15.2350876 C8.5,19.0329333 14.4986784,22.0000002 21.9088106,22.0000002 C29.2013216,22.0000002 35.2,19.0329333 35.2,15.2350876 C35.2,12.861434 32.7299559,10.6064632 28.8484581,9.30095371 C28.0251101,9.18227103 27.4370044,10.8438285 28.0251101,11.0811939 L28.1427313,11.0811939 Z" id="Shape" fill="#5F5F5F" fill-rule="nonzero"></path><g id="ap" transform="translate(13.000000, 0.000000)"><rect id="apfront" fill="#000000" x="0" y="14" width="18" height="4"></rect><polygon id="apbody" fill="url(#linearGradient-1)" points="3.83034404 10 14.169656 10 18 14 0 14"></polygon><circle class="ring_outer" id="led1" fill="#1f9321" cx="3" cy="16" r="1"></circle><circle class="ring_inner" id="led2" fill="#1f9321" cx="7" cy="16" r="1"></circle><circle class="ring_outer" id="led3" fill="#1f9321" cx="11" cy="16" r="1"></circle><circle class="ring_inner" id="led4" fill="#1f9321" cx="15" cy="16" r="1"></circle><polygon id="antenna2" fill="#000000" points="8.8173082 0 9.1826918 0 9.5 11 8.5 11"></polygon><polygon id="antenna3" fill="#000000" transform="translate(15.000000, 5.500000) rotate(15.000000) translate(-15.000000, -5.500000) " points="14.8173082 0 15.1826918 0 15.5 11 14.5 11"></polygon><polygon id="antenna1" fill="#000000" transform="translate(3.000000, 5.500000) rotate(-15.000000) translate(-3.000000, -5.500000) " points="2.8173082 0 3.1826918 0 3.5 11 2.5 11"></polygon></g></g></g></svg>';
@@ -157,54 +163,88 @@
       popupAnchor : [0, -30],
     });
 
+    var positionsLoaded = false;
+    var positions = [];
     var accuracys = [];
     var markers = [];
     var marker_pos = [];
     var markerClusters = L.markerClusterGroup();
 
-    loadJSON("/plugins/webgpsmap/all", function(response) {
-      var positions = JSON.parse(response);
+    function drawPositions() {
       count = 0;
+      //mymap.removeLayer(markerClusters);
+      mymap.eachLayer(function (layer) {
+        mymap.removeLayer(layer);
+      });
+      Esri_WorldImagery.addTo(mymap);
+      CartoDB_DarkMatter.addTo(mymap);
+      markerClusters = L.markerClusterGroup();
+      accuracys = [];
+      markers = [];
+      marker_pos = [];
+      filterText = document.getElementById("search").value;
+      //console.log(filterText);
       Object.keys(positions).forEach(function(key) {
-        count++;
         if(positions[key].lng){
-          new_marker_pos = [positions[key].lat, positions[key].lng];
-          if (positions[key].acc) {
-            radius = Math.round(Math.min(positions[key].acc, 500));
-            markerColor = 'red';
-            markerColorCode = '#f03';
-            fillOpacity = 0.002;
-            if (positions[key].pass) {
-              markerColor = 'green';
-              markerColorCode = '#1aff00';
-              fillOpacity = 0.1;
-            }
-            accuracys.push(
-              L.circle(new_marker_pos, {
-                color: markerColor,
-                fillColor: markerColorCode,
-                fillOpacity: fillOpacity,
-                weight: 1,
-                opacity: 0.1,
-                radius: Math.min(positions[key].acc, 500),
-              }).setStyle({'className': 'radar'}).addTo(mymap)
-            );
-          }
+          filterPattern =
+            positions[key].ssid + ' ' +
+            formatMacAddress(positions[key].mac) + ' ' +
+            positions[key].mac
+          ;
           if (positions[key].pass) {
-            newMarker = L.marker(new_marker_pos, { icon: myIconOpen, title: positions[key].ssid }); //.addTo(mymap);
+            filterPattern += positions[key].pass + ' #cracked';
           } else {
-            newMarker = L.marker(new_marker_pos, { icon: myIcon, title: positions[key].ssid }); //.addTo(mymap);
+            filterPattern += ' #notcracked';
           }
-          passInfo = '';
-          if (positions[key].pass) {
+          filterPattern = filterPattern.toLowerCase();
+          //console.log(filterPattern);
+          var matched = true;
+          if (filterText) {
+              filterText.split(" ").forEach(function (item) {
+                if (!filterPattern.includes(item.toLowerCase())) {
+                  matched = false;
+                }
+              });
+          }
+          if (matched) {
+            count++;
+            new_marker_pos = [positions[key].lat, positions[key].lng];
+            if (positions[key].acc) {
+              radius = Math.round(Math.min(positions[key].acc, 500));
+              markerColor = 'red';
+              markerColorCode = '#f03';
+              fillOpacity = 0.002;
+              if (positions[key].pass) {
+                markerColor = 'green';
+                markerColorCode = '#1aff00';
+                fillOpacity = 0.1;
+              }
+              accuracys.push(
+                L.circle(new_marker_pos, {
+                  color: markerColor,
+                  fillColor: markerColorCode,
+                  fillOpacity: fillOpacity,
+                  weight: 1,
+                  opacity: 0.1,
+                  radius: Math.min(positions[key].acc, 500),
+                }).setStyle({'className': 'radar'}).addTo(mymap)
+              );
+            }
+            passInfo = '';
+            if (positions[key].pass) {
               passInfo = '<br/><b>Pass:</b> '+escapeHtml(positions[key].pass);
+              newMarker = L.marker(new_marker_pos, { icon: myIconOpen, title: positions[key].ssid }); //.addTo(mymap);
+            } else {
+              newMarker = L.marker(new_marker_pos, { icon: myIcon, title: positions[key].ssid }); //.addTo(mymap);
+            }
+            newMarker.bindPopup("<b>"+escapeHtml(positions[key].ssid)+"</b><br><nobr>MAC: "+escapeHtml(formatMacAddress(positions[key].mac))+"</nobr><br/>"+"<nobr>position type: "+escapeHtml(positions[key].type)+"</nobr><br/>"+"<nobr>position accuracy: "+escapeHtml(Math.round(positions[key].acc))+"</nobr>"+passInfo, { maxWidth: "auto" });
+            markers.push(newMarker);
+            marker_pos.push(new_marker_pos);
+            markerClusters.addLayer( newMarker );
           }
-          newMarker.bindPopup("<b>"+escapeHtml(positions[key].ssid)+"</b><br><nobr>MAC: "+escapeHtml(formatMacAddress(positions[key].mac))+"</nobr><br/>"+"<nobr>position type: "+escapeHtml(positions[key].type)+"</nobr><br/>"+"<nobr>position accuracy: "+escapeHtml(Math.round(positions[key].acc))+"</nobr>"+passInfo, { maxWidth: "auto" });
-          markers.push(newMarker);
-          marker_pos.push(new_marker_pos);
-          markerClusters.addLayer( newMarker );
         }
       });
+      document.getElementById("matchcount").innerHTML = count + "&nbsp;APs";
       if (count > 0) {
         mymap.addLayer( markerClusters );
         var bounds = new L.LatLngBounds(marker_pos);
@@ -213,6 +253,22 @@
       } else {
         document.getElementById("loading_infotext").innerHTML = "NO POSITION DATA FOUND :(";
       }
+    }
+
+    // draw map on Enter in FilterInputField
+    const node = document.getElementById("search").addEventListener("keyup", function(event) {
+      if (event.key === "Enter") {
+        if (positionsLoaded) {
+          drawPositions();
+        }
+      }
+    });
+
+    // load positions
+    loadJSON("/plugins/webgpsmap/all", function(response) {
+      positions = JSON.parse(response);
+      positionsLoaded = true;
+      drawPositions();
     });
   </script>
-</body></html>
\ No newline at end of file
+</body></html>
