Merge pull request projecthorus#71 from darksidelemm/main

darksidelemm · web-flow · commit 4bb8e300fbeb · 2023-01-01T11:41:24.000+10:30
Enable multi-payload filtering, re-add embed tab
diff --git a/embed-preview.html b/embed-preview.html
@@ -97,6 +97,9 @@
     // filter
     $("#opt_filter").on('keyup', function() {
         updateCode();
+        // Force iframe refresh
+        var ifr = document.getElementsByName('embed_iframe')[0];
+        ifr.contentWindow.location.reload(true);
     });
 
     // vehicle list
@@ -215,7 +218,7 @@
         <h1>Embed SondeHub-Amateur tracker on your page</h1>
         <h2>1. Options</h1>
         <fieldset>
-            <label for="opt_filter">Vehicle filter (;)</label>
+            <label for="opt_filter">Vehicle filter (, separated. Note: Filtering will not take effect in preview below.)</label>
             <input type="input" value="" id="opt_filter" size="40" />
             <br />
             <input type="checkbox" value="1" id="opt_list" />
@@ -244,7 +247,7 @@ <h2>3. HTML code</h1>
 
         <h2>4. Live preview</h1>
             <div id="iframe-box">
-            <iframe width="400px" height="500px" src="index.html?&preview=1" style="border:1px solid #00A3D3;border-radius:20px;"></iframe>
+            <iframe name="embed_iframe" width="400px" height="500px" src="index.html?&preview=1" style="border:1px solid #00A3D3;border-radius:20px;"></iframe>
             </div>
     </div>
 </body>
diff --git a/index.html b/index.html
@@ -50,13 +50,38 @@
                         <path style="fill:#ffffff;" d="M 18.28125,5 C 17.665689,5.1577701 18.03897,6.072102 17.9375,6.6048171 17.961629,7.7933649 17.891319,9.0210305 17.96875,10.1875 18.260664,10.655295 18.988694,10.16755 19.495121,10.179003 19.915569,10.180314 20.482932,9.9817615 20.218593,9.5070668 19.685242,8.0689805 19.166647,6.5372411 18.625,5.15625 18.528924,5.0654291 18.420762,5.0014609 18.28125,5 z M 28.15625,6.78125 C 27.636383,7.0532274 27.291342,7.7650855 26.831767,8.2022559 26.183602,9.0036626 25.432231,9.7753304 24.84375,10.59375 24.760617,11.249334 25.657959,11.271078 26.078986,11.644576 26.390422,11.953835 26.933703,11.952146 27.000157,11.538317 27.50744,10.067568 28.117357,8.594139 28.5625,7.125 28.492656,6.9017107 28.410263,6.7690543 28.15625,6.78125 z M 9.5,10 C 9.0954231,10.135594 9.2373811,10.695886 9.5795967,10.908518 10.537018,12.015516 11.460558,13.256267 12.4375,14.28125 13.029751,14.410245 13.239648,13.580555 13.666521,13.22967 13.9948,13.00156 14.131018,12.482443 13.78125,12.375 12.489706,11.554805 11.012447,10.783392 9.71875,10 9.6458333,10 9.5729167,10 9.5,10 z M 20.84375,11.84375 C 18.371908,11.824599 15.919598,13.01633 14.4375,15 11.081301,15.152911 7.9058815,17.160924 6.28125,20.09375 2.2666586,20.646663 -0.69921244,24.862902 0.11714748,28.826804 0.69396943,32.528614 4.3500351,35.295394 8.0531848,35 13.498142,34.979277 18.945738,35.041925 24.389003,34.967703 28.012052,34.706771 30.775569,30.845122 29.836019,27.330847 29.833738,25.300645 26.765497,24.336816 28.355407,22.48894 29.815113,18.665861 27.745092,13.988203 23.952748,12.472903 22.972942,12.055889 21.908328,11.842683 20.84375,11.84375 z M 20.21875,13.59375 C 23.527165,13.23952 26.784739,15.868299 27.030581,19.205159 27.115191,20.410269 26.970056,22.322167 26.040039,22.926528 23.85825,22.779121 24.34015,19.916014 22.792045,18.711734 21.278161,16.832506 19.06924,15.524713 16.6875,15.125 17.664583,14.25896 18.917452,13.711132 20.21875,13.59375 z M 34.53125,14.5 C 32.976676,14.79175 31.359523,14.999412 29.84375,15.34375 29.432201,15.70465 29.988892,16.309044 30.057328,16.768486 30.153946,17.218356 30.409976,17.817605 30.892161,17.453583 32.226329,16.650798 33.669292,15.884461 34.9375,15.0625 35.138066,14.780605 34.838029,14.456276 34.53125,14.5 z M 15,16.75 C 18.527258,16.691328 21.880457,19.184293 22.875,22.5625 21.79535,22.747412 19.681154,23.400321 19.66679,24.380589 20.173956,24.71003 20.627331,25.845369 21.195407,25.029384 23.413999,23.416094 26.91018,24.431242 27.896354,26.999192 29.087621,29.561636 27.239462,32.866375 24.435283,33.198105 21.16923,33.314717 17.892696,33.218673 14.62245,33.25 11.957151,33.213512 9.2843705,33.327734 6.6243627,33.183689 3.2643734,32.772467 0.9055326,29.012617 2.003206,25.808244 2.6850371,23.482227 4.9843514,21.775323 7.40625,21.78125 8.6597695,18.794322 11.749593,16.71468 15,16.75 z M 30.46875,22.1875 C 30.056841,22.438736 30.028318,23.215643 29.779714,23.682554 29.505486,24.023058 29.684998,24.517691 30.15025,24.501295 31.642521,24.753547 33.129447,25.065901 34.625,25.28125 35.096754,25.222871 35.037983,24.560567 34.590363,24.47021 33.258254,23.721082 31.923603,22.888061 30.59375,22.1875 30.552083,22.1875 30.510417,22.1875 30.46875,22.1875 z"></path>
                     </svg>
                 </li>
+                <li class="embed">
+                    <svg width="100%" height="100%" viewbox="0 0 35 40" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1">
+                    <path style="fill:#ffffff;" d="m19.188,4.0378c-1.698,10.6-3.396,21.2-5.094,31.8,1.478,0.9,2.037-0.6,2.024-1.7,1.607-10.1,3.213-20.1,4.82-30.1h-1.75zm-6.469,5.3c-3.9064,3-7.8129,6-11.719,9v3.7c3.9045,3,7.8143,6,11.719,9v-3.9c-3.0949-2.3-6.1868-4.6-9.2815-7,3.0937-2.3,6.1875-4.6,9.2815-6.9v-3.9zm9.562,0v3.9c3.094,2.3,6.188,4.6,9.281,6.9-3.093,2.4-6.187,4.7-9.281,7v3.9c3.905-3,7.814-6,11.719-9v-3.7c-3.906-3-7.813-6-11.719-9z"></path>
+                    </svg>
+                </li>
                 <li class="about last"><i class="icon-question"></i></li>
             </ol>
             <span id="locate-me" style="display: none"><i class="icon-target"></i></span>
             <span id="app_name"><b>no<br/>location</b></span>
         </div>
     </header>
 
+    <div id="embedbox" style="display: none" class="flatpage">
+        <div class="slimContainer">
+            <h2>Embed tracker
+                <svg width="35" height="40" viewbox="0 0 35 40" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1" class="rfloat">
+                <path style="fill:#666666;" d="m19.188,4.0378c-1.698,10.6-3.396,21.2-5.094,31.8,1.478,0.9,2.037-0.6,2.024-1.7,1.607-10.1,3.213-20.1,4.82-30.1h-1.75zm-6.469,5.3c-3.9064,3-7.8129,6-11.719,9v3.7c3.9045,3,7.8143,6,11.719,9v-3.9c-3.0949-2.3-6.1868-4.6-9.2815-7,3.0937-2.3,6.1875-4.6,9.2815-6.9v-3.9zm9.562,0v3.9c3.094,2.3,6.188,4.6,9.281,6.9-3.093,2.4-6.187,4.7-9.281,7v3.9c3.905-3,7.814-6,11.719-9v-3.7c-3.906-3-7.813-6-11.719-9z"></path>
+                </svg>
+            </h2>
+            <hr>
+            <p>
+                It's possible to embed the mobile tracker on any page! <br/>
+                If you are developing a HAB project, you can add the tracker to your website. You can customize the tracker to fit, and there are options to limit the visible vehicles to
+                a set of specific callsigns. <br/>
+                It's easy. Just visit the page below and check it out.
+            </p>
+            <p>
+                <a href="embed-preview.html" target="_blank">Customize tracker for embedding</a>
+            </p>
+        </div>
+    </div>
+
     <div id="aboutbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2><i class="icon-question rfloat"></i>Welcome</h2>
@@ -80,7 +105,7 @@ <h4>I'm launching a balloon!</h4>
                 <br/>
 
                 <h4>What happened to HabHub?</h4>
-                HabHub is soon to be retired due to obsolescence issues, 
+                HabHub has now been retired due to obsolescence issues, 
                 <a href="https://github.com/projecthorus/sondehub-amateur-tracker/wiki/Guide-for-HabHub-Users" target="_blank" rel="noopener">read more here.</a> 
                 <br/>
 
@@ -104,7 +129,7 @@ <h2>Contribute</h2>
                 <br/><br/>
                 A huge thanks to RGP for developing the mobile tracker that this site is based on.
                 <br/><br/>
-                You can also find us on IRC in <a href="https://kiwiirc.com/nextclient/irc.libera.chat/highaltitude" target="_blank" rel="noopener">#highaltitude</a> at <b>libera.chat</b>.
+                You can also find us on IRC in <a href="https://kiwiirc.com/nextclient/irc.libera.chat/habhub" target="_blank" rel="noopener">#habhub</a> at <b>libera.chat</b>.
                 <br/><br/>
                 Tracker Revision: <span class="r" id="build_version"></span>
                 <br/>
diff --git a/js/app.js b/js/app.js
@@ -169,14 +169,14 @@ for(var idx in params) {
         case "embed":
             if(line[1] == "1") {
                 wvar.enabled = true;
-                if(!is_mobile) wvar.mode = 'All';
+                if(!is_mobile) wvar.mode = '3d';
             }
             break;
         case "hidelist": if(line[1] == "1") wvar.vlist = false; break;
         case "hidegraph": if(line[1] == "1") wvar.graph = false; break;
         case "expandgraph": if(line[1] == "1") wvar.graph_expanded = true; break;
         case "filter":
-            wvar.query = decodeURIComponent(line[1]);
+            wvar.query = decodeURIComponent(line[1]).replace(/;/g,",");
             $("header .search input[type='text']").val(wvar.query);
             break;
         case "nyan": wvar.nyan = true; break;
@@ -188,7 +188,7 @@ for(var idx in params) {
 
 // loads the tracker interface
 function trackerInit() {
-    $('#loading,#settingsbox,#aboutbox,#chasebox').hide(); // welcome screen
+    $('#loading,#settingsbox,#aboutbox,#embedbox,#chasebox').hide(); // welcome screen
     $('header,#main').show(); // interface elements
     checkSize();
 
@@ -959,7 +959,7 @@ $(window).ready(function() {
    $("header .search form").on('submit', function(e) {
        e.preventDefault();
 
-       var text = $("header .search input[type='text']").val();
+       var text = $("header .search input[type='text']").val().replace(/;/g,",");
 
        if(text === wvar.query) return;
 
diff --git a/js/tracker.js b/js/tracker.js
@@ -526,7 +526,10 @@ function clean_refresh(text, force, history_step) {
     try {
         client.unsubscribe(clientTopic);
         if (wvar.query && sondePrefix.indexOf(wvar.query) == -1) {
-            var topic = "amateur/" + wvar.query;
+            // Generate array of filter entries.
+            var topic = wvar.query.split(",").map(function(el) { 
+                return 'amateur/' + el; 
+            });
             client.subscribe(topic);
             clientTopic = topic;
         } else {
@@ -3204,8 +3207,8 @@ function refresh() {
   var mode = wvar.mode.toLowerCase();
   mode = (mode == "position") ? "latest" : mode.replace(/ /g,"");
 
-  if (wvar.query && sondePrefix.indexOf(wvar.query) == -1) {
-    var data_str = "duration=3d&payload_callsign=" + encodeURIComponent(wvar.query);
+  if (wvar.query) {
+    var data_str = "duration=" + mode + "&payload_callsign=" + encodeURIComponent(wvar.query);
   } else {
     var data_str = "duration=" + mode;
   }
@@ -3216,13 +3219,15 @@ function refresh() {
     data: data_str,
     dataType: "json",
     success: function(data, textStatus) {
-        if (wvar.query != null && JSON.stringify(data).indexOf(wvar.query) == -1) {
-            refreshSingle(wvar.query);
-        } else {
+        // This check breaks multiple payload queries.
+        // Is this correct anyway? refreshSingle uses the /sonde/ API which is for radiosondes only?
+        // if (wvar.query != null && JSON.stringify(data).indexOf(wvar.query) == -1) {
+        //     refreshSingle(wvar.query);
+        // } else {
             response = formatData(data);
             update(response, true);   
             $("#stTimer").attr("data-timestamp", response.fetch_timestamp);
-        }
+        //}
         $("#stText").text("");
     },
     error: function() {
@@ -3238,6 +3243,20 @@ function refresh() {
         //console.log("WebSockets - Resuming Websockets updates after poll.")
         clearTimeout(periodical);
         ajax_inprogress = false;
+
+        if(wvar.query){
+            // If we have a query, pan the map to cover the payloads in that query.
+            var vehicle_query = wvar.query.replace(/;/g,',').split(',');
+            var query_positions = [];
+            for (k in vehicle_query){
+                veh = vehicle_query[k];
+                if(vehicles.hasOwnProperty(veh)){
+                    query_positions.push(vehicles[veh].positions[vehicles[veh].positions.length-1]);
+                }
+            }
+            map.fitBounds(query_positions, {'maxZoom': 8});
+        }
+
     }
   });
 }
@@ -3327,7 +3346,10 @@ function liveData() {
 
     function onConnect() {
         if (wvar.query && sondePrefix.indexOf(wvar.query) == -1) {
-            var topic = "amateur/" + wvar.query;
+            //var topic = "amateur/" + wvar.query;
+            var topic = wvar.query.split(",").map(function(el) { 
+                return 'amateur/' + el; 
+            });
             client.subscribe(topic);
             clientTopic = topic;
         } else {
@@ -3897,6 +3919,7 @@ function update(response, none) {
         return;
     }
 
+    // This is not required for sondehub-amateur?
     if (sondePrefix.indexOf(wvar.query) > -1) {
         for (var i = response.positions.position.length - 1; i >= 0; i--) {
             try {
