Zoraxy/web/components/networktools.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Network Tools</h2>
        <p>Network tools to help manage your cluster nodes</p>
    </div>


    <div class="ui top attached tabular menu">
        <a class="nettools item active bluefont" data-tab="tab1">Discovery</a>
        <a class="nettools item bluefont" data-tab="tab2">Connections</a>
        <a class="nettools item bluefont" data-tab="tab3">Debugging</a>
    </div>

    <div class="ui bottom attached tab segment active" data-tab="tab1">
        <h2>Multicast DNS (mDNS) Scanner</h2>
        <p>Discover mDNS enabled service in this gateway forwarded network</p>
        <button class="ui basic larger circular button" onclick="launchToolWithSize('./tools/mdns.html',1000, 640);">View Discovery</button>
        <div class="ui divider"></div>
        <h2>IP Scanner</h2>
        <p>Discover local area network devices by pinging them one by one</p>
        <button class="ui basic larger circular button" onclick="launchToolWithSize('./tools/ipscan.html',1000, 640);">Start Scanner</button>
    </div>

    <div class="ui bottom attached tab segment" data-tab="tab2">
    <p>Content of tab 2</p>
    </div>

    <div class="ui bottom attached tab segment" data-tab="tab3">
    <p>Content of tab 3</p>
    </div>
</div>

<script>
    // Activate the default tab

    $('.menu .nettools.item').tab();
    $('.menu .nettools.item').addClass("activated");

    // Switch tabs when clicking on the menu items
    $('.menu .nettools.item').on('click', function() {
        $('.menu .item').removeClass('active');
        $(this).addClass('active');
        var tab = $(this).attr('data-tab');
        $('.tab.segment').removeClass('active');
        $('div[data-tab="' + tab + '"]').addClass('active');
    });
    
</script>
<script>
function launchToolWithSize(url, width, height){
    window.open(url,'targetWindow',
    `toolbar=no,
    location=no,
    status=no,
    menubar=no,
    scrollbars=yes,
    resizable=yes,
    width=${width},
    height=${height}`);
}
</script>