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

<!-- Worker Statistics -->
<h3><span data-tkey="minerStats">Your Stats & Payment History</span></h3>

<ul class="nav nav-tabs" id="blocksTabs">
</ul>

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

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

<script id="siblingTemplate" type="text/x-handlebars-template">
    <div role="tabpanel" class="tab-pane {{active}}" id="{{coin}}">
        <div id="workerStats{{coin}}">
            <div class="input-group">
                <input class="form-control" id="yourStatsInput{{coin}}" type="text" data-tplaceholder="enterYourAddress" placeholder="Enter Your {{coin}} Address">
                <span class="input-group-btn"><button class="btn btn-default" type="button" id="lookUp{{coin}}">
                    <span><i class="fa fa-search"></i> <span data-tkey="lookup">Lookup</span></span>
                    <span><i class="fa fa-refresh fa-spin"></i> <span data-tkey="searching">Searching...</span></span>
                </button></span>
            </div>
            <div id="addressError{{coin}}"></div>

            <!-- Hashrate -->
            <div class="yourStats{{coin}} push-up-20">
                <h4><i class="fa fa-dashboard"></i>&nbsp; <span data-tkey="hashRate">Hash Rate</span></h4>
            <div class="row card">
                    <div class="col-sm-6 stats push-up-10">
                        <div><i class="fa fa-tachometer"></i> <span data-tkey="currentHashRate">Current Hash Rate</span>: <span id="yourHashrateHolder{{coin}}"></span></div>
                        <div id="minerAvgHR{{coin}}"><i class="fa fa-tachometer"></i> <span data-data-tkey="averageHashRate">Average 1/6/24-hour Hash Rate</span>:
                            <span id="yourHR1h{{coin}}"></span> / <span id="yourHR6h{{coin}}"></span> / <span id="yourHR24h{{coin}}"></span></div>
                        <div><i class="fa fa-clock-o"></i> <span data-tkey="lastShare">Last Share Submitted</span>: <span id="yourLastShare{{coin}}"></span></div>
                        <div><i class="fa fa-cloud-upload"></i> <span data-tkey="totalHashes">Total Hashes Submitted</span>: <span id="yourHashes{{coin}}"></span></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="userChart{{coin}} push-up-10" data-chart="user_hashrate_{{coin}}">
                            <div class="chart">

                            </div>
                        </div>
                    </div>
            </div>
            </div>

            <!-- Payments -->
            <div class="yourStats{{coin}} push-up-20">
                <h4><i class="fa fa-money"></i>&nbsp; <span data-tkey="payments">Payments</span></h4>
                <div class="row card">
                    <div class="col-sm-6 stats push-up-10">
                        <div><i class="fa fa-bank"></i> <span data-tkey="pendingBalance">Pending Balance</span>: <span id="yourPendingBalance{{coin}}"></span></div>
                        <div><i class="fa fa-money"></i> <span data-tkey="totalPaid">Total Paid</span>: <span id="yourPaid{{coin}}"></span></div>
                        <div><i class="fa fa-money card-icon"></i> <span data-tkey="last24hPaid" class="card-label">Last 24h Paid</span>: <span id="paid24h{{coin}}"></span></div>
                        <div><i class="fa fa-money card-icon"></i> <span data-tkey="last7dPaid" class="card-label">Last 7d Paid</span>: <span id="paid7d{{coin}}"></span></div>
                        <div class="card-separate-text"><i class="fa fa-star card-icon"></i> <span class="card-label">Round contribution</span>: <span id="yourRoundShareProportion{{coin}}"></span>%
                        <span id="slush_round_info"> (shares), <span id="yourRoundScoreProportion{{coin}}"></span>% (<a target="_blank" href="#payments">score</a>)</span></span></div>
                        <div><i class="fa fa-money"></i> <span data-tkey="payoutEstimate">Current Payout Estimate</span>: <span id="yourPayoutEstimate{{coin}}"></span></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="userChart{{coin}} push-up-10" data-chart="user_payments_{{coin}}">
                            <div class="chart">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Workers -->
            <h4 class="yourStats{{coin}} yourWorkers{{coin}} push-up-20"><i class="fa fa-server"></i>&nbsp; <span data-tkey="workerStats">Workers Statistics</span></h4>
            <div class="yourStats{{coin}} yourWorkers{{coin}} card">
                <div class="table-responsive workersReport{{coin}}">
                    <table class="table table-hover table-striped workerStats">
                        <thead>
                        <tr>
                            <th class="col1 sort"><span data-tkey="status">Status</span> <i class="fa fa-sort"></i></th>
                            <th class="col2 sort"><span data-tkey="workerName">Worker Name</span> <i class="fa fa-sort"></i></th>
                            <th class="col3 sort"><span data-tkey="hashRate">Hash Rate</span> <i class="fa fa-sort"></i></th>
                            <th class="col4 sort avghr" title="Average hashrate over the last hour (only includes times the worker was active)"><span data-data-tkey="hashRate1h">HR (1h)</span> <i class="fa fa-sort"></i></th>
                    <th class="col5 sort avghr" title="Average hashrate over the last six hours (only includes times the worker was active)"><span data-data-tkey="hashRate6h">HR (6h)</span> <i class="fa fa-sort"></i></th>
                    <th class="col6 sort avghr" title="Average hashrate over the last day (only includes times the worker was active)"><span data-data-tkey="hashRate24h">HR (24h)</span> <i class="fa fa-sort"></i></th>
                            <th class="col7 sort"><span data-tkey="lastShare">Last Share Submitted</span> <i class="fa fa-sort"></i></th>
                            <th class="col8 sort"><span data-tkey="totalHashes">Total Hashes Submitted</span> <i class="fa fa-sort"></i></th>
                        </tr>
                        </thead>
                        <tbody id="workersReport_rows_{{coin}}">

                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Payments -->
            <h4 class="yourStats{{coin}} push-up-20"><i class="fa fa-money"></i>&nbsp; <span data-tkey="paymentsHistory">Payments History</span></h4>
            <div class="yourStats{{coin}} card">
                <div id="workerPayments{{coin}}" class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th class="col1"><span data-tkey="timeSent">Time Sent</span></th>
                            <th class="col2"><span data-tkey="transactionHash">Transaction Hash</span></th>
                            <th class="col3"><span data-tkey="amount">Amount</span></th>
                            <th class="col4"><span data-tkey="mixin">Mixin</span></th>
                        </tr>
                        </thead>
                        <tbody id="paymentsReport_rows_{{coin}}">

                        </tbody>
                    </table>
                </div>
            </div>

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

        </div>

    </div>
</script>

<!-- Javascript -->
<script>

let xhrGetPayments = {}
let xhrAddressPoll = {}
let addressTimeout = {}
let ranOnce = false
// Update current page
currentPage = {
    destroy: function(){
        $(`#yourLastShare${lastStats.config.coin}`).timeago('dispose');
        if (mergedApis) {
            Object.keys(mergedApis).forEach(key => {
                if (mergedApis[key])
                    $(`#yourLastShare${key}`).timeago('dispose');
            })
        }
        if (xhrAddressPoll[lastStats.config.coin])
            xhrAddressPoll[lastStats.config.coin].abort();
        if (xhrAddressPoll) {
            Object.keys(xhrAddressPoll).forEach(key => {
                if (xhrAddressPoll[key])
                    xhrAddressPoll[key].abort();
            })
        }
        if (addressTimeout[lastStats.config.coin])
            clearTimeout(addressTimeout[lastStats.config.coin])

        if (addressTimeout) {
            Object.keys(addressTimeout).forEach(key => {
                if (addressTimeout[key])
                    clearTimeout(addressTimeout[key])
            })
        }
        if (xhrGetPayments[lastStats.config.coin])
            xhrGetPayments[lastStats.config.coin].abort();

        if (xhrGetPayments) {
            Object.keys(xhrGetPayments).forEach(key => {
                if (xhrGetPayments[key])
                    xhrGetPayments[key].abort();
            })
        }

    },
    update: function(updateKey){
    }
};

function RunOnce() {
    $('#blocksTabs a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
      let coin = $(this).data('coin')
      $(`#lookUp${coin}`).click();
    })
    return true
}

// Charts settings
var graphSettings = {
    type: 'line',
    width: '100%',
    height: '140',
    lineColor: '#03a9f4',
    fillColor: 'rgba(3, 169, 244, .4)',
    spotColor: null,
    minSpotColor: null,
    maxSpotColor: null,
    highlightLineColor: '#236d26',
    spotRadius: 3,
    chartRangeMin: 0,
    drawNormalOnTop: false,
    tooltipFormat: '<b>{{y}}</b> &ndash; {{offset:names}}'
};

// Handle charts tooltip
$(function() {
    $('[data-toggle="tooltip"]').tooltip();
});


workerstats_InitTemplate(ranOnce, addressTimeout, xhrAddressPoll)

</script>