changes

templates/arp.html

@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+
+{% block title %}AS215085 - Router tools | ARP table{% endblock %}
+
+{% block content %}
+    <script src="../static/js/pages/arp.js"></script>
+    <section id="arp">
+	    <h2>ARP table</h2>
+        <div class="input-group mb-3">
+            <input type="text" id="arpSearch" class="form-control" placeholder="Search in ARP table..." onkeyup="filterTable('arpSearch', 'arpTable')">
+            <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshArpTable()">
+                <span id="refreshIcon">⟳</span>
+                <span id="refreshSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
+                Refresh data
+            </button>
+        </div>
+        <table class="striped table table-bordered" id="arpTable">
+            <thead>
+                <tr>
+                    <th class="sortable" onclick="sortTable('arpTable', 0, this)">Address <span class="sort-arrow"></span></th>
+                    <th class="sortable" onclick="sortTable('arpTable', 1, this)">Interface <span class="sort-arrow"></span></th>
+                    <th class="sortable" onclick="sortTable('arpTable', 2, this)">Link Layer Address <span class="sort-arrow"></span></th>
+                    <th class="sortable" onclick="sortTable('arpTable', 3, this)">State <span class="sort-arrow"></span></th>
+                </tr>
+            </thead>
+        <tbody id="arpTableBody">
+          <tr id="arp-loading-row">
+            <td colspan="4" class="text-center">
+              <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        </table>
+        <p><a href="/arp/json">JSON version</a></p>
+    </section>
+{% endblock %}