123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
- <meta charset="UTF-8">
- <meta name="theme-color" content="#4b75ff">
- <link rel="icon" type="image/png" href="./favicon.png" />
- <title>mDNS Discovery | Zoraxy</title>
- <link rel="stylesheet" href="../script/semantic/semantic.min.css">
- <script src="../script/jquery-3.6.0.min.js"></script>
- <script src="../../script/ao_module.js"></script>
- <script src="../script/semantic/semantic.min.js"></script>
- <script src="../script/tablesort.js"></script>
- <link rel="stylesheet" href="../main.css">
- </head>
- <body>
- <div id="mdns-hosts">
- </div>
- <br>
- <div class="ui container">
- <h4>Scan with custom domain filter</h4>
- <div class="ui form">
- <div class="field">
- <label for="domain">Domain</label>
- <input type="text" id="domain" name="domain" placeholder="domain.example.com"/>
- </div>
- <button id="discover" class="ui basic button">Discover</button>
- <small><span id="countdownTimer"></span></small>
- </div>
- <br>
- </div>
-
- <div style="float: right;">
- <button class="ui green basic button" onclick="initMDNSScan()"><i class="ui refresh icon"></i> Refresh</button>
- <button class="ui basic button" style="margin-right: 1em;" onclick="window.open('', '_self', ''); window.close();"><i class="ui red remove icon"></i> Close</button>
- </div>
- <br><br><br>
- <script>
- function initMDNSScan(){
- $.get("/api/mdns/list", function(data){
- renderMDNSHosts(data);
- });
- }
- initMDNSScan();
-
- $("#discover").on("click", function() {
- var domain = $("#domain").val();
- $("#discover").addClass("loading").addClass('disabled');
- setCountdown();
- $.ajax({
- type: "POST",
- url: "/api/mdns/discover",
- data: { domain: domain },
- success: function(data) {
- $("#discover").removeClass("loading").removeClass('disabled');
- renderMDNSHosts(data);
- },
- error: function(xhr, status, error) {
- console.error(error);
- // Handle error response here
- }
- });
- });
- function setCountdown() {
- var timeLeft = 29;
- var countdownTimer = document.getElementById("countdownTimer");
- // Update the timer every second
- var countdownInterval = setInterval(function() {
- if (timeLeft <= 0) {
- clearInterval(countdownInterval);
- countdownTimer.innerHTML = "Scan Completed";
- } else {
- countdownTimer.innerHTML = "Estimated Remaining Time: " + timeLeft + " seconds";
- timeLeft--;
- }
- }, 1000);
- }
- function renderMDNSHosts(data) {
- // Create table header
- var tableHeader = $('<thead>').append(
- $('<tr>').append(
- $('<th>').text('Host Name'),
- $('<th>').text('IP Address'),
- $('<th>').text('MAC Address'),
- $('<th>').text('Model'),
- $('<th>').text('Vendor')
- )
- );
-
- // Create table body
- var tableBody = $('<tbody>');
- for (var i = 0; i < data.length; i++) {
- var host = data[i];
- var ipAddresses = host.IPv4.join('<br> ');
- var macAddresses = host.MacAddr.join('<br> ');
- if (macAddresses.trim() == ""){
- macAddresses = '<i class="ui red remove icon"></i> Not Supported'
- }
- var row = $('<tr>').append(
- $('<td>').text(host.HostName),
- $('<td>').html(ipAddresses),
- $('<td>').html(macAddresses),
- $('<td>').text(host.Model),
- $('<td>').text(host.Vendor)
- );
- tableBody.append(row);
- }
-
- // Create table with header and body
- var table = $('<table>').addClass('ui celled unstackable table').append(tableHeader, tableBody);
-
- // Render table in HTML element with ID 'mdns-hosts'
- $('#mdns-hosts').html(table);
- }
- </script>
- </body>
- </html>
|