795 lines
20 KiB
Plaintext
795 lines
20 KiB
Plaintext
---
|
|
/**
|
|
* Factory Command Center Dashboard
|
|
*
|
|
* The main control panel for the SEO Content Factory.
|
|
* Uses React islands for interactive components.
|
|
*/
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
---
|
|
|
|
<BaseLayout title="Factory Command Center">
|
|
<div class="factory-dashboard">
|
|
<!-- Header -->
|
|
<header class="dashboard-header">
|
|
<div class="header-content">
|
|
<h1>🏭 Factory Command Center</h1>
|
|
<div class="status-badge" id="factoryStatus">
|
|
<span class="pulse"></span>
|
|
<span>IDLE</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- KPI Cards -->
|
|
<section class="kpi-grid" id="kpiCards">
|
|
<div class="kpi-card">
|
|
<div class="kpi-icon">📝</div>
|
|
<div class="kpi-content">
|
|
<span class="kpi-value" id="totalArticles">0</span>
|
|
<span class="kpi-label">Total Articles</span>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-card ghost">
|
|
<div class="kpi-icon">👻</div>
|
|
<div class="kpi-content">
|
|
<span class="kpi-value" id="ghostCount">0</span>
|
|
<span class="kpi-label">Ghost (Hidden)</span>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-card indexed">
|
|
<div class="kpi-icon">🔍</div>
|
|
<div class="kpi-content">
|
|
<span class="kpi-value" id="indexedCount">0</span>
|
|
<span class="kpi-label">Indexed (Live)</span>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-card queue">
|
|
<div class="kpi-icon">⏳</div>
|
|
<div class="kpi-content">
|
|
<span class="kpi-value" id="queueCount">0</span>
|
|
<span class="kpi-label">In Queue</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Grid -->
|
|
<div class="main-grid">
|
|
<!-- Velocity Chart -->
|
|
<section class="panel velocity-panel">
|
|
<h2>📈 Velocity Distribution</h2>
|
|
<div class="chart-container">
|
|
<canvas id="velocityChart"></canvas>
|
|
</div>
|
|
<div class="chart-legend">
|
|
<span class="legend-item"><span class="dot ramp"></span> Ramp Up</span>
|
|
<span class="legend-item"><span class="dot weekend"></span> Weekend Throttle</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Active Campaigns -->
|
|
<section class="panel campaigns-panel">
|
|
<h2>🎯 Active Campaigns</h2>
|
|
<div class="campaign-list" id="campaignList">
|
|
<div class="loading-skeleton">Loading campaigns...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Production Queue -->
|
|
<section class="panel queue-panel full-width">
|
|
<div class="panel-header">
|
|
<h2>⚙️ Production Queue</h2>
|
|
<button class="btn-primary" id="newJobBtn">+ New Job</button>
|
|
</div>
|
|
<div class="queue-table-container">
|
|
<table class="queue-table" id="queueTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Campaign</th>
|
|
<th>Progress</th>
|
|
<th>Velocity</th>
|
|
<th>Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="queueTableBody">
|
|
<tr><td colspan="6" class="loading">Loading queue...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Work Log Terminal -->
|
|
<section class="panel terminal-panel full-width">
|
|
<div class="panel-header">
|
|
<h2>💻 Work Log</h2>
|
|
<button class="btn-ghost" id="clearLog">Clear</button>
|
|
</div>
|
|
<div class="terminal" id="terminal">
|
|
<div class="terminal-line system">[SYSTEM] Factory initialized. Ready for commands.</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Spintax Preview Modal -->
|
|
<div class="modal" id="spintaxModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>✏️ Spintax Preview</h3>
|
|
<button class="close-btn" id="closeSpintax">×</button>
|
|
</div>
|
|
<div class="spintax-split">
|
|
<div class="spintax-input">
|
|
<label>Raw Spintax</label>
|
|
<textarea id="spintaxInput" placeholder="{Hello|Hi} {World|Friend}...">{`{The best {solar|renewable energy} {service|solution} in {City}, {State}.|{City} homeowners trust us for {premium|top-quality} {solar|clean energy} {installation|systems}.}`}</textarea>
|
|
</div>
|
|
<div class="spintax-output">
|
|
<label>Live Preview</label>
|
|
<div id="spintaxOutput" class="preview-box">Click "Spin" to preview...</div>
|
|
<button class="btn-primary" id="spinBtn">🎲 Spin</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deploy Confirmation -->
|
|
<div class="modal" id="deployModal">
|
|
<div class="modal-content deploy-modal">
|
|
<h3>🚀 Deploy Campaign</h3>
|
|
<p>You are about to generate <strong id="deployCount">0</strong> articles.</p>
|
|
<div class="deploy-slider">
|
|
<div class="slider-track">
|
|
<div class="slider-thumb" id="deployThumb">
|
|
<span>→</span>
|
|
</div>
|
|
<span class="slider-label">Slide to Deploy</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn-ghost" id="cancelDeploy">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.factory-dashboard {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
|
|
color: #e0e0e0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
|
|
.dashboard-header {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.dashboard-header h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(90deg, #fff, #888);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.status-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pulse {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #00ff88;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|
}
|
|
|
|
/* KPI Cards */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.kpi-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.kpi-card:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.kpi-card.ghost { border-left: 3px solid #8b5cf6; }
|
|
.kpi-card.indexed { border-left: 3px solid #10b981; }
|
|
.kpi-card.queue { border-left: 3px solid #f59e0b; }
|
|
|
|
.kpi-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.kpi-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.kpi-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.kpi-label {
|
|
font-size: 0.85rem;
|
|
color: #888;
|
|
}
|
|
|
|
/* Main Grid */
|
|
.main-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.panel {
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.panel h2 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.panel-header h2 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Chart */
|
|
.chart-container {
|
|
height: 200px;
|
|
position: relative;
|
|
}
|
|
|
|
.chart-legend {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
|
|
.dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dot.ramp { background: #3b82f6; }
|
|
.dot.weekend { background: #ef4444; }
|
|
|
|
/* Campaign List */
|
|
.campaign-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.campaign-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 10px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.campaign-item:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.campaign-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.campaign-count {
|
|
font-size: 0.85rem;
|
|
color: #888;
|
|
}
|
|
|
|
/* Queue Table */
|
|
.queue-table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.queue-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.queue-table th,
|
|
.queue-table td {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.queue-table th {
|
|
color: #888;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.queue-table tr:hover td {
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
|
|
.status-pill {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-pill.pending { background: #374151; color: #9ca3af; }
|
|
.status-pill.running { background: #1e3a5f; color: #60a5fa; }
|
|
.status-pill.done { background: #064e3b; color: #34d399; }
|
|
.status-pill.failed { background: #7f1d1d; color: #fca5a5; }
|
|
|
|
.progress-bar {
|
|
width: 100px;
|
|
height: 6px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* Terminal */
|
|
.terminal {
|
|
background: #0d0d0d;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
font-size: 0.85rem;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.terminal-line {
|
|
padding: 4px 0;
|
|
color: #888;
|
|
}
|
|
|
|
.terminal-line.system { color: #10b981; }
|
|
.terminal-line.error { color: #ef4444; }
|
|
.terminal-line.warning { color: #f59e0b; }
|
|
.terminal-line.info { color: #3b82f6; }
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: #888;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.8);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: #1a1a2e;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
max-width: 800px;
|
|
width: 90%;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Spintax Preview */
|
|
.spintax-split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.spintax-input textarea,
|
|
.preview-box {
|
|
width: 100%;
|
|
height: 200px;
|
|
background: #0d0d0d;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
color: #e0e0e0;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
resize: none;
|
|
}
|
|
|
|
.spintax-input label,
|
|
.spintax-output label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #888;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.spintax-output {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.spintax-output .btn-primary {
|
|
margin-top: 12px;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
/* Deploy Slider */
|
|
.deploy-modal {
|
|
text-align: center;
|
|
}
|
|
|
|
.deploy-slider {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.slider-track {
|
|
position: relative;
|
|
height: 60px;
|
|
background: linear-gradient(90deg, #1e3a5f, #3b82f6);
|
|
border-radius: 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slider-thumb {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 5px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
cursor: grab;
|
|
transition: left 0.1s;
|
|
}
|
|
|
|
.slider-label {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: rgba(255,255,255,0.7);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 40px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Initialize Dashboard
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await loadDashboardData();
|
|
initializeChart();
|
|
initializeSpintax();
|
|
initializeDeploySlider();
|
|
startPolling();
|
|
});
|
|
|
|
let chartInstance = null;
|
|
|
|
async function loadDashboardData() {
|
|
try {
|
|
// Load KPIs
|
|
const [articles, queues, campaigns] = await Promise.all([
|
|
fetch('/api/seo/stats').then(r => r.json()).catch(() => ({ total: 0, ghost: 0, indexed: 0 })),
|
|
fetch('/api/admin/queues').then(r => r.json()).catch(() => ({ queues: [] })),
|
|
fetch('/api/admin/campaigns').then(r => r.json()).catch(() => ({ campaigns: [] }))
|
|
]);
|
|
|
|
// Update KPIs
|
|
document.getElementById('totalArticles').textContent = articles.total || '0';
|
|
document.getElementById('ghostCount').textContent = articles.ghost || '0';
|
|
document.getElementById('indexedCount').textContent = articles.indexed || '0';
|
|
document.getElementById('queueCount').textContent = queues.queues?.filter(q => q.status === 'running').length || '0';
|
|
|
|
// Update campaigns list
|
|
const campaignList = document.getElementById('campaignList');
|
|
if (campaigns.campaigns?.length > 0) {
|
|
campaignList.innerHTML = campaigns.campaigns.map(c => `
|
|
<div class="campaign-item">
|
|
<span class="campaign-name">${c.name}</span>
|
|
<span class="campaign-count">${c.article_count || 0} articles</span>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
campaignList.innerHTML = '<div class="loading">No active campaigns</div>';
|
|
}
|
|
|
|
// Update queue table
|
|
const queueBody = document.getElementById('queueTableBody');
|
|
if (queues.queues?.length > 0) {
|
|
queueBody.innerHTML = queues.queues.map(q => {
|
|
const progress = q.total_requested > 0 ? (q.completed_count / q.total_requested * 100).toFixed(0) : 0;
|
|
return `
|
|
<tr>
|
|
<td><span class="status-pill ${q.status}">${q.status}</span></td>
|
|
<td>${q.campaign_name || 'Unknown'}</td>
|
|
<td>
|
|
<div class="progress-bar"><div class="progress-fill" style="width: ${progress}%"></div></div>
|
|
<span style="font-size: 0.8rem; color: #888; margin-left: 8px;">${progress}%</span>
|
|
</td>
|
|
<td>${q.velocity_mode || 'STEADY'}</td>
|
|
<td>${new Date(q.date_created).toLocaleDateString()}</td>
|
|
<td>
|
|
<button class="btn-ghost" onclick="viewQueue('${q.id}')">View</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
} else {
|
|
queueBody.innerHTML = '<tr><td colspan="6" class="loading">No jobs in queue</td></tr>';
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Failed to load dashboard:', err);
|
|
addTerminalLine('[ERROR] Failed to load dashboard data', 'error');
|
|
}
|
|
}
|
|
|
|
function initializeChart() {
|
|
// Simple canvas chart (no external library needed)
|
|
const canvas = document.getElementById('velocityChart');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = canvas.parentElement.offsetWidth;
|
|
canvas.height = 200;
|
|
|
|
// Draw Gaussian curve
|
|
ctx.strokeStyle = '#3b82f6';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
|
|
for (let x = 0; x < canvas.width; x++) {
|
|
const progress = x / canvas.width;
|
|
// Ramp up curve: 0.2 to 1.0
|
|
const weight = 0.2 + (0.8 * progress);
|
|
// Add some noise
|
|
const noise = Math.random() * 0.1;
|
|
const y = canvas.height - ((weight + noise) * canvas.height * 0.8);
|
|
|
|
if (x === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
}
|
|
ctx.stroke();
|
|
|
|
// Weekend dips
|
|
ctx.strokeStyle = '#ef4444';
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([5, 5]);
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
const x = (canvas.width / 7) * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, canvas.height);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function initializeSpintax() {
|
|
const spinBtn = document.getElementById('spinBtn');
|
|
const input = document.getElementById('spintaxInput');
|
|
const output = document.getElementById('spintaxOutput');
|
|
|
|
spinBtn.addEventListener('click', () => {
|
|
const text = input.value;
|
|
const spun = processSpintax(text, {
|
|
City: 'Orlando',
|
|
State: 'Florida',
|
|
Current_Year: '2024'
|
|
});
|
|
output.textContent = spun;
|
|
});
|
|
}
|
|
|
|
function processSpintax(text, context) {
|
|
let result = text
|
|
.replace(/\{City\}/gi, context.City)
|
|
.replace(/\{State\}/gi, context.State)
|
|
.replace(/\{Current_Year\}/gi, context.Current_Year);
|
|
|
|
let iterations = 50;
|
|
while (result.includes('{') && iterations > 0) {
|
|
result = result.replace(/\{([^{}]+)\}/g, (_, opts) => {
|
|
const choices = opts.split('|');
|
|
return choices[Math.floor(Math.random() * choices.length)];
|
|
});
|
|
iterations--;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function initializeDeploySlider() {
|
|
const thumb = document.getElementById('deployThumb');
|
|
const track = thumb.parentElement;
|
|
let isDragging = false;
|
|
|
|
thumb.addEventListener('mousedown', () => isDragging = true);
|
|
document.addEventListener('mouseup', () => {
|
|
if (isDragging) {
|
|
const rect = track.getBoundingClientRect();
|
|
const thumbPos = parseInt(thumb.style.left || '5');
|
|
if (thumbPos > rect.width * 0.8) {
|
|
// Deploy!
|
|
addTerminalLine('[SYSTEM] DEPLOYMENT INITIATED! 🚀', 'system');
|
|
document.getElementById('deployModal').classList.remove('active');
|
|
}
|
|
thumb.style.left = '5px';
|
|
}
|
|
isDragging = false;
|
|
});
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (!isDragging) return;
|
|
const rect = track.getBoundingClientRect();
|
|
let x = e.clientX - rect.left - 25;
|
|
x = Math.max(5, Math.min(x, rect.width - 55));
|
|
thumb.style.left = x + 'px';
|
|
});
|
|
}
|
|
|
|
function addTerminalLine(text, type = 'info') {
|
|
const terminal = document.getElementById('terminal');
|
|
const line = document.createElement('div');
|
|
line.className = `terminal-line ${type}`;
|
|
line.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
|
|
terminal.appendChild(line);
|
|
terminal.scrollTop = terminal.scrollHeight;
|
|
}
|
|
|
|
function startPolling() {
|
|
setInterval(() => {
|
|
loadDashboardData();
|
|
}, 10000); // Refresh every 10 seconds
|
|
}
|
|
|
|
// Modal handlers
|
|
document.getElementById('newJobBtn')?.addEventListener('click', () => {
|
|
document.getElementById('deployModal').classList.add('active');
|
|
});
|
|
|
|
document.getElementById('cancelDeploy')?.addEventListener('click', () => {
|
|
document.getElementById('deployModal').classList.remove('active');
|
|
});
|
|
|
|
document.getElementById('clearLog')?.addEventListener('click', () => {
|
|
document.getElementById('terminal').innerHTML = '<div class="terminal-line system">[SYSTEM] Log cleared.</div>';
|
|
});
|
|
|
|
window.viewQueue = function(id) {
|
|
addTerminalLine(`Viewing queue: ${id}`, 'info');
|
|
};
|
|
</script>
|