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

<section class="page-hero page-hero-compact">
    <div class="page-hero-copy">
        <span class="eyebrow">Pool history</span>
        <h3><span data-tkey="poolBlocks">Pool Blocks</span></h3>
        <p class="hero-copy-text">
            Full found-block history for the pool with status, effort, maturity, and chart context. This is the long-form
            operational view corresponding to the compact diagnostics visible on the dashboard.
        </p>
    </div>
    <div class="page-hero-panel">
        <div class="hero-kpi">
            <span>Dataset</span>
            <strong>All blocks</strong>
        </div>
        <div class="hero-kpi">
            <span>Views</span>
            <strong>Chart + Table</strong>
        </div>
    </div>
</section>

<section class="section-block">
    <div class="section-head">
        <div>
            <span class="eyebrow">Block history</span>
            <h4>Pool results</h4>
        </div>
    </div>
    <ul class="nav nav-tabs hidden" id="blocksTabs" aria-hidden="true">
    </ul>

    <div class="tab-content" id="tab-content">
    </div>
</section>

<script id="siblingTabTemplate" type="text/x-handlebars-template">
    <li id="blockTabs{{coin}} role="presentation" class="{{active}}"><a href="#{{coin}}">{{coin}} {{symbol}}</a></li>
</script>

<script id="siblingTemplate" type="text/x-handlebars-template">
    <div role="tabpanel" class="tab-pane {{active}}" id="{{coin}}">
        <!-- Statistics -->
        <div class="blocksStats row">

            <!-- Total Blocks Mined -->
            <div class="col-lg-3 col-sm-4">
                <div class="infoBox hoverExpandEffect">
                    <div class="icon">
                        <span class="fa fa-cubes"></span>
                    </div>
                    <div class="content">
                        <div class="text"><span data-tkey="blocksTotal">Total Prop Blocks Mined</span></div>
                        <div class="value"><span id="blocksTotal{{coin}}">N/A</span> <span class="smallText">(<span id="lastBlockFound{{coin}}">Never</span>)</span></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-4">
                <div class="infoBox hoverExpandEffect">
                    <div class="icon">
                        <span class="fa fa-cubes"></span>
                    </div>
                    <div class="content">
                        <div class="text"><span data-tkey="blocksTotalSolo">Total Solo Blocks Mined</span></div>
                        <div class="value"><span id="blocksTotalSolo{{coin}}">N/A</span> <span class="smallText">(<span id="lastBlockFoundSolo{{coin}}">Never</span>)</span></div>
                    </div>
                </div>
            </div>
            <!-- Maturity Depth Requirement -->
            <div class="col-lg-3 col-sm-4">
                <div class="infoBox hoverExpandEffect">
                    <div class="icon">
                        <span class="fa fa-unlock-alt"></span>
                    </div>
                    <div class="content">
                        <div class="text"><span data-tkey="blocksMaturityCount">Maturity Requirement</span></div>
                        <div class="value"><span id="blocksMaturityCount{{coin}}">N/A</span></div>
                    </div>
                </div>
            </div>

            <!-- Average Luck -->
            <div class="col-lg-3 col-sm-4">
                <div class="infoBox hoverExpandEffect">
                    <div class="icon">
                        <span class="fa fa-line-chart"></span>
                    </div>
                    <div class="content">
                        <div class="text"><span data-tkey="averageLuck">Average Luck</span></div>
                        <div class="value"><span id="averageLuck{{coin}}">N/A</span></div>
                    </div>
                </div>
            </div>

        </div>
         <!-- Chart -->
        <div id="blocksChart{{coin}}" class="card padding-15 padding-t-5 padding-b-5">
            <h4 id="blocksChartTitle{{coin}}">Blocks found</h4>
            <div class="chart" style="height:200px;">
                <canvas id="blocksChartObj{{coin}}"></canvas>
                <a class="chart-style"></a>
            </div>
        </div>
        <!-- Report -->
        <div class="card push-up-10">
            <div class="table-responsive blocksReport">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th class="col1"><span data-tkey="timeFound">Time Found</span></th>
                        <th class="col2"><span data-tkey="reward">Reward</span></th>
                        <th class="col3"><span data-tkey="height">Height</span></th>
                        <th class="col4"><span data-tkey="difficulty">Difficulty</span></th>
                        <th class="col5"><span data-tkey="blockHash">Block Hash</span></th>
	                    <th class="col1"><span data-data-tkey="miner">Miner Address</span></th>
                        <th class="col6"><span data-tkey="effort">Effort</span></th>
                        <th class="col7" title="How many more blocks network must mine before this block is matured"><span data-tkey="status">Status</span></th>
                    </tr>
                    </thead>
                    <tbody id="blocksReport{{coin}}_rows">
                    </tbody>
                </table>
            </div>
        </div>

        <p class="text-center push-up-10">
            <button type="button" class="btn btn-default" id="loadMoreBlocks{{coin}}"><span data-tkey="loadMore">Load More</span></button>
        </p>
    </div>
</script>

<!-- Javascript -->
<script>
$('#blocksChartarqma').hide();
$('#blocksChartiridium').hide();

let displayedChart = {};
let xhrGetBlocks = {}
let ranOnce = false
// Update current page
currentPage = {
    destroy: function(){
        if (xhrGetBlocks) {
            Object.keys(xhrGetBlocks).forEach(key => {
                if (xhrGetBlocks[key])
                    xhrGetBlocks[key].abort();
                $(`#loadMoreBlocks${key}`).off('click')
            })
        }
        $('#blocksTabs a').off('click')
    },
    update: function(updateKey){
        let stats = lastStats;
        if (stats) {
            displayedChart[updateKey] = false
            if (stats.charts.blocks) {
                poolBlocks_GenerateChart(stats, displayedChart);
            }
            poolBlocks_RenderBlocks(stats.pool.blocks, stats);
        }
    }
};


function RunOnce() {
    $('#blocksTabs a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
    return true
}

poolBlocks_InitTemplate(ranOnce, displayedChart, xhrGetBlocks)


</script>