mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
Delete retro-refresh.js
This commit is contained in:
DJObleezy
GitHub
parent
e36c01627c
commit
7ab2d9f88d
238
retro-refresh.js
238
retro-refresh.js
@ -1,238 +0,0 @@
|
|||||||
// 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);
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
Loading…
Reference in New Issue
Block a user