[admin] Add goto in subnet ui #39

Closes #39

Author: purhan

openwisp_ipam/static/openwisp-ipam/js/subnet.js

@@ -35,6 +35,7 @@ function initHostsInfiniteScroll($, current_subnet, address_add_url, address_cha
         fetchedPages = [],
         busy = false,
         nextPageUrl = '/api/v1/subnet/' + current_subnet + '/hosts/',
+        searchQuery = '',
         lastRenderedPage = 0; //1 based indexing (0 -> no page rendered)
     function addressListItem(addr) {
         var id = normalizeIP(addr.address);
@@ -58,6 +59,41 @@ function initHostsInfiniteScroll($, current_subnet, address_add_url, address_cha
         });
         return div;
     }
+    async function validateIp(ip_address) {
+        if (ip_address === '') return true;
+        var isValid = false;
+        await $.ajax({
+            type: 'GET',
+            url: '/api/v1/subnet/' + current_subnet + '/hosts/?start=' + ip_address,
+            success: function (res) {
+                isValid = (res.results[0].address == ip_address);
+            },
+            error: function (error) {
+                busy = false;
+                throw error;
+            },
+        });
+        return isValid;
+    }
+    function goTo() {
+        var input = $("#goto-input").val().toLowerCase().trim();
+        validateIp(input).then(isValid => {
+            if (isValid) {
+                $("#invalid-address").hide();
+                if (input !== searchQuery) {
+                    searchQuery = input;
+                    nextPageUrl = '/api/v1/subnet/' + current_subnet + '/hosts/?start=' + searchQuery;
+                    $('#subnet-visual').empty();
+                    fetchedPages = [];
+                    lastRenderedPage = 0;
+                    busy = false;
+                    onUpdate();
+                }
+            } else {
+                $("#invalid-address").show();
+            }
+        });
+    }
     function appendPage() {
         $('.subnet-visual').append(pageContainer(fetchedPages[lastRenderedPage]));
         if (lastRenderedPage >= renderedPages) {
@@ -117,6 +153,9 @@ function initHostsInfiniteScroll($, current_subnet, address_add_url, address_cha
             }
         }
     }
+    $("#goto-button").on("click", function () {
+        goTo();
+    });
     $('.subnet-visual').scroll(onUpdate);
     onUpdate();
 }

openwisp_ipam/templates/admin/openwisp-ipam/subnet/change_form.html

@@ -28,7 +28,16 @@ <h2>{% trans 'Network Hierarchical View' %}</h2>
 <div id="graph"></div>
 
 <h3>{% trans 'Subnet Visual Display' %}</h3>
-<section class="subnet-visual{% if original.subnet.version == 6 %} ipv6{% endif %}">
+<div>
+  <div>
+    <input id="goto-input" placeholder="Jump to" />
+    <input id="goto-button" type="button" value="Go" />
+  </div>
+  <ul id="invalid-address" class="errorlist" style="display:none;">
+    <li>Address not valid for subnet</li>
+  </ul>
+</div>
+<section id="subnet-visual" class="subnet-visual{% if original.subnet.version == 6 %} ipv6{% endif %}">
 </section>
 {% endif %}
 {% endblock %}
@@ -37,6 +46,12 @@ <h3>{% trans 'Subnet Visual Display' %}</h3>
 {{ block.super }}
 {% if original and not is_popup %}
 <script type="text/javascript">
+  document.querySelector("#goto-input").addEventListener("keyup", event => {
+    event.preventDefault();
+    if (event.key == "Enter") {
+      document.querySelector("#subnet-go").click();
+    }
+  });
   var current_subnet = '{{ original.pk }}';
   var IpAddUrl = '{% url ipaddress_add_url %}'
   var IpChangeUrl = '{% url ipaddress_change_url "1234" %}'
@@ -102,4 +117,4 @@ <h3>{% trans 'Subnet Visual Display' %}</h3>
   Plotly.newPlot('graph', data, layout);
 </script>
 {% endif %}
-{% endblock %}
+{% endblock %}