Spaces:

Really-amin
/

Datasourceforcryptocurrency

Running

File size: 26,339 Bytes

b068b76

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Crypto Data Tracker</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
        }

        header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px 30px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        h1 {
            color: white;
            font-size: 28px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .connection-status {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-size: 14px;
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #10b981;
            animation: pulse 2s infinite;
        }

        .status-indicator.disconnected {
            background: #ef4444;
            animation: none;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .controls {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .controls-row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: white;
            color: #667eea;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .btn-success {
            background: #10b981;
            color: white;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-info {
            background: #3b82f6;
            color: white;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            color: white;
        }

        .card h2 {
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
        }

        .stat-label {
            font-size: 12px;
            opacity: 0.8;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 700;
        }

        .api-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .api-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .api-info {
            flex: 1;
        }

        .api-name {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .api-meta {
            font-size: 12px;
            opacity: 0.7;
            display: flex;
            gap: 15px;
        }

        .api-controls {
            display: flex;
            gap: 10px;
        }

        .small-btn {
            padding: 5px 12px;
            font-size: 12px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            transition: all 0.2s;
        }

        .small-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .status-success {
            background: #10b981;
            color: white;
        }

        .status-pending {
            background: #f59e0b;
            color: white;
        }

        .status-failed {
            background: #ef4444;
            color: white;
        }

        .log-container {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 15px;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 12px;
        }

        .log-entry {
            margin-bottom: 8px;
            padding: 5px;
            border-left: 3px solid #667eea;
            padding-left: 10px;
        }

        .log-time {
            opacity: 0.6;
            margin-right: 10px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            color: #333;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #333;
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }

        .form-select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            color: #333;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            z-index: 2000;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>
                <span>🚀</span>
                Enhanced Crypto Data Tracker
            </h1>
            <div class="connection-status">
                <div class="status-indicator" id="wsStatus"></div>
                <span id="wsStatusText">Connecting...</span>
            </div>
        </header>

        <div class="controls">
            <div class="controls-row">
                <button class="btn btn-primary" onclick="exportJSON()">
                    💾 Export JSON
                </button>
                <button class="btn btn-primary" onclick="exportCSV()">
                    📊 Export CSV
                </button>
                <button class="btn btn-success" onclick="createBackup()">
                    🔄 Create Backup
                </button>
                <button class="btn btn-info" onclick="showScheduleModal()">
                    ⏰ Configure Schedule
                </button>
                <button class="btn btn-info" onclick="forceUpdateAll()">
                    🔃 Force Update All
                </button>
                <button class="btn btn-danger" onclick="clearCache()">
                    🗑️ Clear Cache
                </button>
            </div>
        </div>

        <div class="grid">
            <div class="card">
                <h2>📊 System Statistics</h2>
                <div class="stat-grid">
                    <div class="stat-item">
                        <div class="stat-label">Total APIs</div>
                        <div class="stat-value" id="totalApis">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Active Tasks</div>
                        <div class="stat-value" id="activeTasks">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Cached Data</div>
                        <div class="stat-value" id="cachedData">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">WS Connections</div>
                        <div class="stat-value" id="wsConnections">0</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <h2>📈 Recent Activity</h2>
                <div class="log-container" id="activityLog">
                    <div class="log-entry">
                        <span class="log-time">--:--:--</span>
                        Waiting for updates...
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>🔌 API Sources</h2>
            <div class="api-list" id="apiList">
                Loading...
            </div>
        </div>
    </div>

    <!-- Schedule Modal -->
    <div class="modal" id="scheduleModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>⏰ Configure Schedule</h2>
                <button class="modal-close" onclick="closeScheduleModal()">×</button>
            </div>
            <div class="form-group">
                <label class="form-label">API Source</label>
                <select class="form-select" id="scheduleApiSelect"></select>
            </div>
            <div class="form-group">
                <label class="form-label">Interval (seconds)</label>
                <input type="number" class="form-input" id="scheduleInterval" value="60" min="10">
            </div>
            <div class="form-group">
                <label class="form-label">Enabled</label>
                <input type="checkbox" id="scheduleEnabled" checked>
            </div>
            <button class="btn btn-primary" onclick="updateSchedule()">Save Schedule</button>
        </div>
    </div>

    <!-- Toast notification -->
    <div class="toast" id="toast"></div>

    <script>
        let ws = null;
        let reconnectAttempts = 0;
        const maxReconnectAttempts = 5;
        const reconnectDelay = 3000;

        // Initialize WebSocket connection
        function initWebSocket() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/api/v2/ws`;

            ws = new WebSocket(wsUrl);

            ws.onopen = () => {
                console.log('WebSocket connected');
                updateWSStatus(true);
                reconnectAttempts = 0;

                // Subscribe to all updates
                ws.send(JSON.stringify({ type: 'subscribe_all' }));

                // Start heartbeat
                startHeartbeat();
            };

            ws.onmessage = (event) => {
                const message = JSON.parse(event.data);
                handleWSMessage(message);
            };

            ws.onerror = (error) => {
                console.error('WebSocket error:', error);
            };

            ws.onclose = () => {
                console.log('WebSocket disconnected');
                updateWSStatus(false);
                attemptReconnect();
            };
        }

        function attemptReconnect() {
            if (reconnectAttempts < maxReconnectAttempts) {
                reconnectAttempts++;
                console.log(`Reconnecting... Attempt ${reconnectAttempts}`);
                setTimeout(initWebSocket, reconnectDelay);
            }
        }

        let heartbeatInterval;
        function startHeartbeat() {
            clearInterval(heartbeatInterval);
            heartbeatInterval = setInterval(() => {
                if (ws && ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify({ type: 'ping' }));
                }
            }, 30000);
        }

        function updateWSStatus(connected) {
            const indicator = document.getElementById('wsStatus');
            const text = document.getElementById('wsStatusText');

            if (connected) {
                indicator.classList.remove('disconnected');
                text.textContent = 'Connected';
            } else {
                indicator.classList.add('disconnected');
                text.textContent = 'Disconnected';
            }
        }

        function handleWSMessage(message) {
            console.log('Received:', message);

            switch (message.type) {
                case 'api_update':
                    handleApiUpdate(message);
                    break;
                case 'status_update':
                    handleStatusUpdate(message);
                    break;
                case 'schedule_update':
                    handleScheduleUpdate(message);
                    break;
                case 'subscribed':
                    addLog(`Subscribed to ${message.api_id || 'all updates'}`);
                    break;
            }
        }

        function handleApiUpdate(message) {
            addLog(`Updated: ${message.api_id}`, 'success');
            loadSystemStatus();
        }

        function handleStatusUpdate(message) {
            addLog('System status updated');
            loadSystemStatus();
        }

        function handleScheduleUpdate(message) {
            addLog(`Schedule updated for ${message.schedule.api_id}`);
            loadAPIs();
        }

        function addLog(text, type = 'info') {
            const logContainer = document.getElementById('activityLog');
            const time = new Date().toLocaleTimeString();

            const entry = document.createElement('div');
            entry.className = 'log-entry';
            entry.innerHTML = `<span class="log-time">${time}</span>${text}`;

            logContainer.insertBefore(entry, logContainer.firstChild);

            // Keep only last 50 entries
            while (logContainer.children.length > 50) {
                logContainer.removeChild(logContainer.lastChild);
            }
        }

        function showToast(message, duration = 3000) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');

            setTimeout(() => {
                toast.classList.remove('show');
            }, duration);
        }

        // Load system status
        async function loadSystemStatus() {
            try {
                const response = await fetch('/api/v2/status');
                const data = await response.json();

                document.getElementById('totalApis').textContent =
                    data.services.config_loader.apis_loaded;
                document.getElementById('activeTasks').textContent =
                    data.services.scheduler.total_tasks;
                document.getElementById('cachedData').textContent =
                    data.services.persistence.cached_apis;
                document.getElementById('wsConnections').textContent =
                    data.services.websocket.total_connections;

            } catch (error) {
                console.error('Error loading status:', error);
            }
        }

        // Load APIs
        async function loadAPIs() {
            try {
                const response = await fetch('/api/v2/config/apis');
                const data = await response.json();

                const scheduleResponse = await fetch('/api/v2/schedule/tasks');
                const schedules = await scheduleResponse.json();

                displayAPIs(data.apis, schedules);

            } catch (error) {
                console.error('Error loading APIs:', error);
            }
        }

        function displayAPIs(apis, schedules) {
            const listElement = document.getElementById('apiList');
            listElement.innerHTML = '';

            for (const [apiId, api] of Object.entries(apis)) {
                const schedule = schedules[apiId] || {};

                const item = document.createElement('div');
                item.className = 'api-item';
                item.innerHTML = `
                    <div class="api-info">
                        <div class="api-name">${api.name}</div>
                        <div class="api-meta">
                            <span>📂 ${api.category}</span>
                            <span>⏱️ ${schedule.interval || 300}s</span>
                            <span class="status-badge ${schedule.last_status === 'success' ? 'status-success' : 'status-pending'}">
                                ${schedule.last_status || 'pending'}
                            </span>
                        </div>
                    </div>
                    <div class="api-controls">
                        <button class="small-btn" onclick="forceUpdate('${apiId}')">🔄 Update</button>
                        <button class="small-btn" onclick="showScheduleModalFor('${apiId}')">⚙️ Schedule</button>
                    </div>
                `;

                listElement.appendChild(item);
            }
        }

        // Export functions
        async function exportJSON() {
            try {
                const response = await fetch('/api/v2/export/json', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ include_history: true })
                });

                const data = await response.json();
                showToast('✅ JSON export created!');
                addLog(`Exported to JSON: ${data.filepath}`);

                // Trigger download
                window.open(data.download_url, '_blank');

            } catch (error) {
                showToast('❌ Export failed');
                console.error(error);
            }
        }

        async function exportCSV() {
            try {
                const response = await fetch('/api/v2/export/csv', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ flatten: true })
                });

                const data = await response.json();
                showToast('✅ CSV export created!');
                addLog(`Exported to CSV: ${data.filepath}`);

                // Trigger download
                window.open(data.download_url, '_blank');

            } catch (error) {
                showToast('❌ Export failed');
                console.error(error);
            }
        }

        async function createBackup() {
            try {
                const response = await fetch('/api/v2/backup', {
                    method: 'POST'
                });

                const data = await response.json();
                showToast('✅ Backup created!');
                addLog(`Backup created: ${data.backup_file}`);

            } catch (error) {
                showToast('❌ Backup failed');
                console.error(error);
            }
        }

        async function forceUpdate(apiId) {
            try {
                const response = await fetch(`/api/v2/schedule/tasks/${apiId}/force-update`, {
                    method: 'POST'
                });

                const data = await response.json();
                showToast(`✅ ${apiId} updated!`);
                addLog(`Forced update: ${apiId}`);
                loadAPIs();

            } catch (error) {
                showToast('❌ Update failed');
                console.error(error);
            }
        }

        async function forceUpdateAll() {
            showToast('🔄 Updating all APIs...');
            addLog('Forcing update for all APIs');

            try {
                const response = await fetch('/api/v2/config/apis');
                const data = await response.json();

                for (const apiId of Object.keys(data.apis)) {
                    await forceUpdate(apiId);
                    await new Promise(resolve => setTimeout(resolve, 100)); // Small delay
                }

                showToast('✅ All APIs updated!');
            } catch (error) {
                showToast('❌ Update failed');
                console.error(error);
            }
        }

        async function clearCache() {
            if (!confirm('Clear all cached data?')) return;

            try {
                const response = await fetch('/api/v2/cleanup/cache', {
                    method: 'POST'
                });

                showToast('✅ Cache cleared!');
                addLog('Cache cleared');
                loadSystemStatus();

            } catch (error) {
                showToast('❌ Failed to clear cache');
                console.error(error);
            }
        }

        // Schedule modal functions
        function showScheduleModal() {
            loadAPISelectOptions();
            document.getElementById('scheduleModal').classList.add('active');
        }

        function closeScheduleModal() {
            document.getElementById('scheduleModal').classList.remove('active');
        }

        async function showScheduleModalFor(apiId) {
            await loadAPISelectOptions();
            document.getElementById('scheduleApiSelect').value = apiId;

            // Load current schedule
            try {
                const response = await fetch(`/api/v2/schedule/tasks/${apiId}`);
                const schedule = await response.json();

                document.getElementById('scheduleInterval').value = schedule.interval;
                document.getElementById('scheduleEnabled').checked = schedule.enabled;

            } catch (error) {
                console.error(error);
            }

            showScheduleModal();
        }

        async function loadAPISelectOptions() {
            try {
                const response = await fetch('/api/v2/config/apis');
                const data = await response.json();

                const select = document.getElementById('scheduleApiSelect');
                select.innerHTML = '';

                for (const [apiId, api] of Object.entries(data.apis)) {
                    const option = document.createElement('option');
                    option.value = apiId;
                    option.textContent = api.name;
                    select.appendChild(option);
                }

            } catch (error) {
                console.error(error);
            }
        }

        async function updateSchedule() {
            const apiId = document.getElementById('scheduleApiSelect').value;
            const interval = parseInt(document.getElementById('scheduleInterval').value);
            const enabled = document.getElementById('scheduleEnabled').checked;

            try {
                const response = await fetch(`/api/v2/schedule/tasks/${apiId}?interval=${interval}&enabled=${enabled}`, {
                    method: 'PUT'
                });

                const data = await response.json();
                showToast('✅ Schedule updated!');
                addLog(`Updated schedule for ${apiId}`);
                closeScheduleModal();
                loadAPIs();

            } catch (error) {
                showToast('❌ Schedule update failed');
                console.error(error);
            }
        }

        // Initialize on load
        window.addEventListener('load', () => {
            initWebSocket();
            loadSystemStatus();
            loadAPIs();

            // Refresh status every 30 seconds
            setInterval(loadSystemStatus, 30000);
        });
    </script>
</body>
</html>