peya-nodejs-pool/website_example/pages/dual_mm_blocks.html

<section class="page-hero page-hero-compact">
    <div class="page-hero-copy">
        <span class="eyebrow">Merge-mining telemetry</span>
        <h3>Dual MM Blocks</h3>
        <p class="hero-copy-text">
            This view lists only blocks classified as <code>dual-mm</code>, meaning both the aux chain and the parent
            chain accepted the share according to pool-side telemetry.
        </p>
    </div>
    <div class="page-hero-panel">
        <div class="hero-kpi">
            <span>Filter</span>
            <strong>Dual Only</strong>
        </div>
        <div class="hero-kpi">
            <span>Source</span>
            <strong>Pool API</strong>
        </div>
    </div>
</section>

<section class="section-block">
    <div class="section-head">
        <div>
            <span class="eyebrow">Accepted on both sides</span>
            <h4>Dual merge-mined block list</h4>
        </div>
        <button type="button" class="btn btn-default" id="refreshDualMmBlocks">
            <i class="fa fa-refresh"></i> Refresh
        </button>
    </div>

    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="infoBox hoverExpandEffect">
                <div class="icon">
                    <span class="fa fa-link"></span>
                </div>
                <div class="content">
                    <div class="text">Dual MM blocks</div>
                    <div class="value"><span id="dualMmCount">0</span></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="infoBox hoverExpandEffect">
                <div class="icon">
                    <span class="fa fa-cubes"></span>
                </div>
                <div class="content">
                    <div class="text">Latest height</div>
                    <div class="value"><span id="dualMmLatestHeight">N/A</span></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-12">
            <div class="infoBox hoverExpandEffect">
                <div class="icon">
                    <span class="fa fa-clock-o"></span>
                </div>
                <div class="content">
                    <div class="text">Last observed</div>
                    <div class="value"><span id="dualMmLatestTime">N/A</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card push-up-10">
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th class="col1">Time Found</th>
                    <th class="col2">Height</th>
                    <th class="col3">Hash</th>
                    <th class="col4">Miner</th>
                    <th class="col5">Difficulty</th>
                    <th class="col6">Shares</th>
                    <th class="col7">Source</th>
                    <th class="col8">Mode</th>
                </tr>
                </thead>
                <tbody id="dualMmBlocksRows">
                </tbody>
            </table>
        </div>
    </div>
</section>

<script>
let xhrDualMmBlocks;

function dualMm_GetRow(item) {
    let stats = lastStats;
    let hashCell = item.hash;
    if (stats && stats.lastblock) {
        hashCell = '<a target="_blank" href="' + getBlockchainUrl(item.hash, stats) + '">' + item.hash + '</a>';
    }

    return '<tr data-height="' + item.height + '">' +
        '<td class="col1">' + formatDate(item.timestamp) + '</td>' +
        '<td class="col2">' + formatNumber(item.height.toString(), ' ') + '</td>' +
        '<td class="col3">' + hashCell + '</td>' +
        '<td class="col4">' + item.miner + '</td>' +
        '<td class="col5">' + formatNumber((item.difficulty || 0).toString(), ' ') + '</td>' +
        '<td class="col6">' + formatNumber((item.shares || 0).toString(), ' ') + '</td>' +
        '<td class="col7">' + item.source + '</td>' +
        '<td class="col8"><span class="badge-mm-inline">dual-mm</span></td>' +
        '</tr>';
}

function dualMm_Render(items) {
    let rows = $('#dualMmBlocksRows');
    rows.empty();

    let dualItems = items.filter(function(item) {
        return item.mmClassification === 'dual-mm' || (item.auxAccepted && item.parentAccepted);
    });

    updateText('dualMmCount', dualItems.length.toString());
    updateText('dualMmLatestHeight', dualItems.length ? formatNumber(dualItems[0].height.toString(), ' ') : 'N/A');
    updateText('dualMmLatestTime', dualItems.length ? $.timeago(new Date(parseInt(dualItems[0].timestamp) * 1000).toISOString()) : 'N/A');

    if (!dualItems.length) {
        rows.append('<tr><td colspan="8" class="text-center">No dual-mm blocks observed yet.</td></tr>');
        return;
    }

    dualItems.forEach(function(item) {
        rows.append(dualMm_GetRow(item));
    });
}

function dualMm_Load() {
    if (xhrDualMmBlocks) {
        xhrDualMmBlocks.abort();
    }

    xhrDualMmBlocks = $.ajax({
        url: api + '/get_mm_blocks',
        data: {
            limit: 200
        },
        dataType: 'json',
        cache: false,
        success: function(data) {
            dualMm_Render(data.items || []);
        },
        error: function() {
            $('#dualMmBlocksRows').html('<tr><td colspan="8" class="text-center">Failed to load dual-mm telemetry.</td></tr>');
        }
    });
}

currentPage = {
    destroy: function() {
        if (xhrDualMmBlocks) {
            xhrDualMmBlocks.abort();
        }
        $('#refreshDualMmBlocks').off('click');
    },
    update: function() {
        dualMm_Load();
    }
};

$('#refreshDualMmBlocks').click(function() {
    dualMm_Load();
});

dualMm_Load();
</script>