feat(frontend,backend): simple navigation bar added

2026-09-30 17:01:53 +04:00
parent e13d45401f
commit a831ec2546
5 changed files with 195 additions and 39 deletions
@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% block title %}Job Queue{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <h2>Job Queue</h2>
+        <p class="text-muted">Monitor and manage benchmark jobs.</p>
+        
+        <!-- Jobs list -->
+        <div id="jobs-list" 
+             hx-get="/api/v1/jobs" 
+             hx-trigger="load"
+             hx-target="#jobs-content">
+            <p>Loading jobs...</p>
+        </div>
+        <div id="jobs-content"></div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    // Load jobs when page loads
+    document.addEventListener('htmx:afterRequest', function(evt) {
+        if (evt.detail.target.id === 'jobs-content') {
+            renderJobs(JSON.parse(evt.detail.xhr.response));
+        }
+    });
+    
+    function renderJobs(jobIds) {
+        const container = document.getElementById('jobs-content');
+        container.innerHTML = '';
+        
+        if (!jobIds || jobIds.length === 0) {
+            container.innerHTML = '<div class="alert alert-info">No jobs in queue.</div>';
+            return;
+        }
+        
+        jobIds.forEach(jobId => {
+            const div = document.createElement('div');
+            div.className = 'card mb-2';
+            div.innerHTML = `
+                <div class="card-body">
+                    <h5 class="card-title">${jobId}</h5>
+                    <p class="card-text text-muted">Job details will appear here...</p>
+                </div>
+            `;
+            container.appendChild(div);
+        });
+    }
+</script>
+{% endblock %}