mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 11:10:44 +02:00
0d0a707019
Introduces a responsive theme toggle button with styles for desktop and mobile views in `theme-toggle.css`. Updates `BitcoinProgressBar.js` to support dynamic theme changes and adds a new `updateTheme` method. Enhances `main.js` for theme management based on user preferences in `localStorage`. Modifies `base.html` and other HTML files to include the theme toggle button and necessary scripts. Introduces `theme.js` for managing theme constants and applying the DeepSea theme.
376 lines
16 KiB
HTML
376 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}BTC-OS Mining Dashboard v 0.3{% endblock %}
|
|
|
|
{% block css %}
|
|
<link rel="stylesheet" href="/static/css/dashboard.css">
|
|
<link rel="stylesheet" href="/static/css/theme-toggle.css">
|
|
{% endblock %}
|
|
|
|
{% block dashboard_active %}active{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Graph Container -->
|
|
<div id="graphContainer" class="mb-2">
|
|
<canvas id="trendGraph" style="width: 100%; height: 100%; position: relative; z-index: 2;"></canvas>
|
|
</div>
|
|
|
|
<!-- Miner Status and Payout Info -->
|
|
<div class="row mb-2 equal-height">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">Miner Status</div>
|
|
<div class="card-body">
|
|
<p>
|
|
<strong>Status:</strong>
|
|
<span id="miner_status" class="metric-value">
|
|
{% if metrics and metrics.workers_hashing and metrics.workers_hashing > 0 %}
|
|
<span class="status-green">ONLINE</span> <span class="online-dot"></span>
|
|
{% else %}
|
|
<span class="status-red">OFFLINE</span> <span class="offline-dot"></span>
|
|
{% endif %}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<strong>Workers Hashing:</strong>
|
|
<span id="workers_hashing" class="metric-value">{{ metrics.workers_hashing or 0 }}</span>
|
|
<span id="indicator_workers_hashing"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Last Share:</strong>
|
|
<span id="last_share" class="metric-value">{{ metrics.total_last_share or "N/A" }}</span>
|
|
</p>
|
|
<p>
|
|
<strong>Blocks Found:</strong>
|
|
<span id="blocks_found" class="metric-value white">
|
|
{{ metrics.blocks_found if metrics and metrics.blocks_found else "0" }}
|
|
</span>
|
|
<span id="indicator_blocks_found"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card" id="payoutMiscCard">
|
|
<div class="card-header">Payout Info</div>
|
|
<div class="card-body">
|
|
<p>
|
|
<strong>Unpaid Earnings:</strong>
|
|
<span id="unpaid_earnings" class="metric-value green">
|
|
{% if metrics and metrics.unpaid_earnings %}
|
|
{{ metrics.unpaid_earnings }} BTC
|
|
{% else %}
|
|
0 BTC
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_unpaid_earnings"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Last Block:</strong>
|
|
<span id="last_block_height" class="metric-value white">
|
|
{{ metrics.last_block_height|commafy if metrics and metrics.last_block_height else "N/A" }}
|
|
</span>
|
|
—
|
|
<span id="last_block_time" class="metric-value blue">
|
|
{{ metrics.last_block_time if metrics and metrics.last_block_time else "N/A" }}
|
|
</span>
|
|
—
|
|
<span class="green">
|
|
{% if metrics and metrics.last_block_earnings %}
|
|
+{{ metrics.last_block_earnings|int|commafy }} SATS
|
|
{% else %}
|
|
+0 SATS
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_last_block"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Est. Time to Payout:</strong>
|
|
<span id="est_time_to_payout" class="metric-value yellow">
|
|
{{ metrics.est_time_to_payout if metrics and metrics.est_time_to_payout else "N/A" }}
|
|
</span>
|
|
<span id="indicator_est_time_to_payout"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Pool Fees:</strong>
|
|
<span id="pool_fees_percentage" class="metric-value">
|
|
{% if metrics and metrics.pool_fees_percentage is defined and metrics.pool_fees_percentage is not none %}
|
|
{{ metrics.pool_fees_percentage }}%
|
|
{% if metrics.pool_fees_percentage is not none and metrics.pool_fees_percentage >= 0.9 and metrics.pool_fees_percentage <= 1.3 %}
|
|
<span class="fee-star">★</span> <span class="datum-label">DATUM</span>
|
|
{% endif %}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_pool_fees_percentage"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pool Hashrates and Bitcoin Network Stats -->
|
|
<div class="row equal-height">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">Pool Hashrates</div>
|
|
<div class="card-body">
|
|
<p>
|
|
<strong>Pool Hashrate:</strong>
|
|
<span id="pool_total_hashrate" class="metric-value white">
|
|
{% if metrics and metrics.pool_total_hashrate and metrics.pool_total_hashrate_unit %}
|
|
{{ metrics.pool_total_hashrate }} {{ metrics.pool_total_hashrate_unit[:-2]|upper ~ metrics.pool_total_hashrate_unit[-2:] }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_pool_total_hashrate"></span>
|
|
</p>
|
|
<hr>
|
|
<p>
|
|
<strong>24hr Avg Hashrate:</strong>
|
|
<span id="hashrate_24hr" class="metric-value white">
|
|
{% if metrics and metrics.hashrate_24hr %}
|
|
{{ metrics.hashrate_24hr }}
|
|
{% if metrics.hashrate_24hr_unit %}
|
|
{{ metrics.hashrate_24hr_unit[:-2]|upper ~ metrics.hashrate_24hr_unit[-2:] }}
|
|
{% else %}
|
|
TH/s
|
|
{% endif %}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_hashrate_24hr"></span>
|
|
</p>
|
|
<p>
|
|
<strong>3hr Avg Hashrate:</strong>
|
|
<span id="hashrate_3hr" class="metric-value white">
|
|
{% if metrics and metrics.hashrate_3hr %}
|
|
{{ metrics.hashrate_3hr }}
|
|
{% if metrics.hashrate_3hr_unit %}
|
|
{{ metrics.hashrate_3hr_unit[:-2]|upper ~ metrics.hashrate_3hr_unit[-2:] }}
|
|
{% else %}
|
|
TH/s
|
|
{% endif %}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_hashrate_3hr"></span>
|
|
</p>
|
|
<p>
|
|
<strong>10min Avg Hashrate:</strong>
|
|
<span id="hashrate_10min" class="metric-value white">
|
|
{% if metrics and metrics.hashrate_10min %}
|
|
{{ metrics.hashrate_10min }}
|
|
{% if metrics.hashrate_10min_unit %}
|
|
{{ metrics.hashrate_10min_unit[:-2]|upper ~ metrics.hashrate_10min_unit[-2:] }}
|
|
{% else %}
|
|
TH/s
|
|
{% endif %}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_hashrate_10min"></span>
|
|
</p>
|
|
<p>
|
|
<strong>60sec Avg Hashrate:</strong>
|
|
<span id="hashrate_60sec" class="metric-value white">
|
|
{% if metrics and metrics.hashrate_60sec %}
|
|
{{ metrics.hashrate_60sec }}
|
|
{% if metrics.hashrate_60sec_unit %}
|
|
{{ metrics.hashrate_60sec_unit[:-2]|upper ~ metrics.hashrate_60sec_unit[-2:] }}
|
|
{% else %}
|
|
TH/s
|
|
{% endif %}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_hashrate_60sec"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">Network Stats</div>
|
|
<div class="card-body">
|
|
<p>
|
|
<strong>Block Number:</strong>
|
|
<span id="block_number" class="metric-value white">
|
|
{% if metrics and metrics.block_number %}
|
|
{{ metrics.block_number|commafy }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_block_number"></span>
|
|
</p>
|
|
<p>
|
|
<strong>BTC Price:</strong>
|
|
<span id="btc_price" class="metric-value yellow">
|
|
{% if metrics and metrics.btc_price %}
|
|
${{ "%.2f"|format(metrics.btc_price) }}
|
|
{% else %}
|
|
$0.00
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_btc_price"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Network Hashrate:</strong>
|
|
<span id="network_hashrate" class="metric-value white">
|
|
{% if metrics and metrics.network_hashrate %}
|
|
{{ metrics.network_hashrate|round|commafy }} EH/s
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_network_hashrate"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Difficulty:</strong>
|
|
<span id="difficulty" class="metric-value white">
|
|
{% if metrics and metrics.difficulty %}
|
|
{{ metrics.difficulty|round|commafy }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_difficulty"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Satoshi and USD Metrics -->
|
|
<div class="row equal-height">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">SATOSHI EARNINGS</div>
|
|
<div class="card-body">
|
|
<p>
|
|
<strong>Projected Daily (Net):</strong>
|
|
<span id="daily_mined_sats" class="metric-value yellow">
|
|
{% if metrics and metrics.daily_mined_sats %}
|
|
{{ metrics.daily_mined_sats|commafy }} SATS
|
|
{% else %}
|
|
0 sats
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_daily_mined_sats"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Projected Monthly (Net):</strong>
|
|
<span id="monthly_mined_sats" class="metric-value yellow">
|
|
{% if metrics and metrics.monthly_mined_sats %}
|
|
{{ metrics.monthly_mined_sats|commafy }} SATS
|
|
{% else %}
|
|
0 sats
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_monthly_mined_sats"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Est. Earnings/Day:</strong>
|
|
<span id="estimated_earnings_per_day_sats" class="metric-value yellow">
|
|
{% if metrics and metrics.estimated_earnings_per_day_sats %}
|
|
{{ metrics.estimated_earnings_per_day_sats|commafy }} SATS
|
|
{% else %}
|
|
0 sats
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_estimated_earnings_per_day_sats"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Est. Earnings/Block:</strong>
|
|
<span id="estimated_earnings_next_block_sats" class="metric-value yellow">
|
|
{% if metrics and metrics.estimated_earnings_next_block_sats %}
|
|
{{ metrics.estimated_earnings_next_block_sats|commafy }} SATS
|
|
{% else %}
|
|
0 sats
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_estimated_earnings_next_block_sats"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Est. Rewards in Window:</strong>
|
|
<span id="estimated_rewards_in_window_sats" class="metric-value yellow">
|
|
{% if metrics and metrics.estimated_rewards_in_window_sats %}
|
|
{{ metrics.estimated_rewards_in_window_sats|commafy }} SATS
|
|
{% else %}
|
|
0 sats
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_estimated_rewards_in_window_sats"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">USD EARNINGS</div>
|
|
<div class="card-body">
|
|
<p>
|
|
<strong>Daily Revenue:</strong>
|
|
<span id="daily_revenue" class="metric-value green">
|
|
{% if metrics and metrics.daily_revenue is defined and metrics.daily_revenue is not none %}
|
|
${{ "%.2f"|format(metrics.daily_revenue) }}
|
|
{% else %}
|
|
$0.00
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_daily_revenue"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Daily Power Cost:</strong>
|
|
<span id="daily_power_cost" class="metric-value red">
|
|
{% if metrics and metrics.daily_power_cost is defined and metrics.daily_power_cost is not none %}
|
|
${{ "%.2f"|format(metrics.daily_power_cost) }}
|
|
{% else %}
|
|
$0.00
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_daily_power_cost"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Daily Profit (USD):</strong>
|
|
<span id="daily_profit_usd" class="metric-value green">
|
|
{% if metrics and metrics.daily_profit_usd is defined and metrics.daily_profit_usd is not none %}
|
|
${{ "%.2f"|format(metrics.daily_profit_usd) }}
|
|
{% else %}
|
|
$0.00
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_daily_profit_usd"></span>
|
|
</p>
|
|
<p>
|
|
<strong>Monthly Profit (USD):</strong>
|
|
<span id="monthly_profit_usd" class="metric-value green">
|
|
{% if metrics and metrics.monthly_profit_usd is defined and metrics.monthly_profit_usd is not none %}
|
|
${{ "%.2f"|format(metrics.monthly_profit_usd) }}
|
|
{% else %}
|
|
$0.00
|
|
{% endif %}
|
|
</span>
|
|
<span id="indicator_monthly_profit_usd"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascript %}
|
|
<!-- External JavaScript file with our application logic -->
|
|
<script src="/static/js/main.js"></script>
|
|
{% endblock %}
|