mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
238 lines
10 KiB
JavaScript
238 lines
10 KiB
JavaScript
// This script integrates the retro floating refresh bar
|
|
// with the existing dashboard and workers page functionality
|
|
|
|
(function() {
|
|
// Wait for DOM to be ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Create the retro terminal bar if it doesn't exist yet
|
|
if (!document.getElementById('retro-terminal-bar')) {
|
|
createRetroTerminalBar();
|
|
}
|
|
|
|
// Hide the original refresh container
|
|
const originalRefreshUptime = document.getElementById('refreshUptime');
|
|
if (originalRefreshUptime) {
|
|
originalRefreshUptime.style.visibility = 'hidden';
|
|
originalRefreshUptime.style.height = '0';
|
|
originalRefreshUptime.style.overflow = 'hidden';
|
|
|
|
// Important: We keep the original elements and just hide them
|
|
// This ensures all existing JavaScript functions still work
|
|
}
|
|
|
|
// Add extra space at the bottom of the page to prevent the floating bar from covering content
|
|
const extraSpace = document.createElement('div');
|
|
extraSpace.style.height = '100px';
|
|
document.body.appendChild(extraSpace);
|
|
});
|
|
|
|
// Function to create the retro terminal bar
|
|
function createRetroTerminalBar() {
|
|
// Get the HTML content from the shared CSS/HTML
|
|
const html = `
|
|
<div id="retro-terminal-bar">
|
|
<div class="terminal-header">
|
|
<div class="terminal-title">SYSTEM MONITOR v0.1</div>
|
|
<div class="terminal-controls">
|
|
<div class="terminal-dot minimize" title="Minimize" onclick="toggleTerminal()"></div>
|
|
<div class="terminal-dot close" title="Close" onclick="hideTerminal()"></div>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-content">
|
|
<div class="status-indicators">
|
|
<div class="status-indicator">
|
|
<div class="status-dot connected"></div>
|
|
<span>LIVE</span>
|
|
</div>
|
|
<div class="status-indicator">
|
|
<span id="data-refresh-time">00:00:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="refreshContainer">
|
|
<!-- Enhanced progress bar with tick marks -->
|
|
<div class="bitcoin-progress-container">
|
|
<div id="bitcoin-progress-inner">
|
|
<div class="scan-line"></div>
|
|
</div>
|
|
<div class="progress-ticks">
|
|
<span>0s</span>
|
|
<span>15s</span>
|
|
<span>30s</span>
|
|
<span>45s</span>
|
|
<span>60s</span>
|
|
</div>
|
|
<!-- Add tick marks every 5 seconds -->
|
|
<div class="tick-mark major" style="left: 0%"></div>
|
|
<div class="tick-mark" style="left: 8.33%"></div>
|
|
<div class="tick-mark" style="left: 16.67%"></div>
|
|
<div class="tick-mark major" style="left: 25%"></div>
|
|
<div class="tick-mark" style="left: 33.33%"></div>
|
|
<div class="tick-mark" style="left: 41.67%"></div>
|
|
<div class="tick-mark major" style="left: 50%"></div>
|
|
<div class="tick-mark" style="left: 58.33%"></div>
|
|
<div class="tick-mark" style="left: 66.67%"></div>
|
|
<div class="tick-mark major" style="left: 75%"></div>
|
|
<div class="tick-mark" style="left: 83.33%"></div>
|
|
<div class="tick-mark" style="left: 91.67%"></div>
|
|
<div class="tick-mark major" style="left: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="progress-text">60s to next update</div>
|
|
<div id="uptimeTimer"><strong>Uptime:</strong> 0h 0m 0s</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Create a container for the HTML
|
|
const container = document.createElement('div');
|
|
container.innerHTML = html;
|
|
|
|
// Append to the body
|
|
document.body.appendChild(container.firstElementChild);
|
|
|
|
// Start the clock update
|
|
updateTerminalClock();
|
|
setInterval(updateTerminalClock, 1000);
|
|
|
|
// Check if terminal should be collapsed based on previous state
|
|
const isCollapsed = localStorage.getItem('terminalCollapsed') === 'true';
|
|
if (isCollapsed) {
|
|
document.getElementById('retro-terminal-bar').classList.add('collapsed');
|
|
}
|
|
}
|
|
|
|
// Function to update the terminal clock
|
|
function updateTerminalClock() {
|
|
const clockElement = document.getElementById('data-refresh-time');
|
|
if (clockElement) {
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
clockElement.textContent = `${hours}:${minutes}:${seconds}`;
|
|
}
|
|
}
|
|
|
|
// Expose these functions globally for the onclick handlers
|
|
window.toggleTerminal = function() {
|
|
const terminal = document.getElementById('retro-terminal-bar');
|
|
terminal.classList.toggle('collapsed');
|
|
|
|
// Store state in localStorage
|
|
localStorage.setItem('terminalCollapsed', terminal.classList.contains('collapsed'));
|
|
};
|
|
|
|
window.hideTerminal = function() {
|
|
document.getElementById('retro-terminal-bar').style.display = 'none';
|
|
|
|
// Create a show button that appears at the bottom right
|
|
const showButton = document.createElement('button');
|
|
showButton.id = 'show-terminal-button';
|
|
showButton.textContent = 'Show Monitor';
|
|
showButton.style.position = 'fixed';
|
|
showButton.style.bottom = '10px';
|
|
showButton.style.right = '10px';
|
|
showButton.style.zIndex = '1000';
|
|
showButton.style.backgroundColor = '#f7931a';
|
|
showButton.style.color = '#000';
|
|
showButton.style.border = 'none';
|
|
showButton.style.padding = '8px 12px';
|
|
showButton.style.cursor = 'pointer';
|
|
showButton.style.fontFamily = "'VT323', monospace";
|
|
showButton.style.fontSize = '14px';
|
|
showButton.onclick = function() {
|
|
document.getElementById('retro-terminal-bar').style.display = 'block';
|
|
this.remove();
|
|
};
|
|
document.body.appendChild(showButton);
|
|
};
|
|
|
|
// Redirect original progress bar updates to our new floating bar
|
|
// This Observer will listen for changes to the original #bitcoin-progress-inner
|
|
// and replicate them to our new floating bar version
|
|
const initProgressObserver = function() {
|
|
// Setup a MutationObserver to watch for style changes on the original progress bar
|
|
const originalProgressBar = document.querySelector('#refreshUptime #bitcoin-progress-inner');
|
|
const newProgressBar = document.querySelector('#retro-terminal-bar #bitcoin-progress-inner');
|
|
|
|
if (originalProgressBar && newProgressBar) {
|
|
const observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.attributeName === 'style') {
|
|
// Get the width from the original progress bar
|
|
const width = originalProgressBar.style.width;
|
|
if (width) {
|
|
// Apply it to our new progress bar
|
|
newProgressBar.style.width = width;
|
|
|
|
// Also copy any classes (like glow-effect)
|
|
if (originalProgressBar.classList.contains('glow-effect') &&
|
|
!newProgressBar.classList.contains('glow-effect')) {
|
|
newProgressBar.classList.add('glow-effect');
|
|
} else if (!originalProgressBar.classList.contains('glow-effect') &&
|
|
newProgressBar.classList.contains('glow-effect')) {
|
|
newProgressBar.classList.remove('glow-effect');
|
|
}
|
|
|
|
// Copy waiting-for-update class
|
|
if (originalProgressBar.classList.contains('waiting-for-update') &&
|
|
!newProgressBar.classList.contains('waiting-for-update')) {
|
|
newProgressBar.classList.add('waiting-for-update');
|
|
} else if (!originalProgressBar.classList.contains('waiting-for-update') &&
|
|
newProgressBar.classList.contains('waiting-for-update')) {
|
|
newProgressBar.classList.remove('waiting-for-update');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Start observing
|
|
observer.observe(originalProgressBar, { attributes: true });
|
|
}
|
|
|
|
// Also watch for changes to the progress text
|
|
const originalProgressText = document.querySelector('#refreshUptime #progress-text');
|
|
const newProgressText = document.querySelector('#retro-terminal-bar #progress-text');
|
|
|
|
if (originalProgressText && newProgressText) {
|
|
const textObserver = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type === 'childList') {
|
|
// Update the text in our new bar
|
|
newProgressText.textContent = originalProgressText.textContent;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Start observing
|
|
textObserver.observe(originalProgressText, { childList: true, subtree: true });
|
|
}
|
|
|
|
// Watch for changes to the uptime timer
|
|
const originalUptimeTimer = document.querySelector('#refreshUptime #uptimeTimer');
|
|
const newUptimeTimer = document.querySelector('#retro-terminal-bar #uptimeTimer');
|
|
|
|
if (originalUptimeTimer && newUptimeTimer) {
|
|
const uptimeObserver = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type === 'childList') {
|
|
// Update the text in our new bar
|
|
newUptimeTimer.innerHTML = originalUptimeTimer.innerHTML;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Start observing
|
|
uptimeObserver.observe(originalUptimeTimer, { childList: true, subtree: true });
|
|
}
|
|
};
|
|
|
|
// Start the observer once the page is fully loaded
|
|
window.addEventListener('load', function() {
|
|
// Give a short delay to ensure all elements are rendered
|
|
setTimeout(initProgressObserver, 500);
|
|
});
|
|
})(); |