first commit

files/templates/excel/job_status.html

@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+    <style>
+        .job-card {
+            max-width: 520px;
+            margin: 80px auto;
+            text-align: center;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid #eee;
+            border-top: 4px solid #E30613;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+
+        @keyframes spin {
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+
+    <div class="card job-card">
+
+        <h2>Excel Processing</h2>
+        <p>Job ID: <b>{{ job_id }}</b></p>
+
+        <div id="status-area">
+            <div class="spinner"></div>
+            <p>Processing...</p>
+        </div>
+
+        <div id="download-area" style="display:none">
+            <a id="download-btn" class="btn btn-success">Download Result</a>
+        </div>
+
+        <div id="error-area" style="display:none; color:#dc2626">
+            <p><b>Error occurred</b></p>
+            <pre id="error-detail"></pre>
+            <a href="/job/{{ job_id }}/logs" target="_blank">View logs</a>
+        </div>
+
+    </div>
+
+    <script>
+        const jobId = "{{ job_id }}";
+
+        async function checkStatus() {
+            const r = await fetch(`/job/${jobId}/status`);
+            const s = await r.json();
+
+            if (s.status === "DONE") {
+                document.getElementById("status-area").style.display = "none";
+                document.getElementById("download-area").style.display = "block";
+
+                document.getElementById("download-btn").href =
+                    `/download/${jobId}`;
+
+                return;
+            }
+
+            if (s.status === "ERROR") {
+                document.getElementById("status-area").style.display = "none";
+                document.getElementById("error-area").style.display = "block";
+
+                document.getElementById("error-detail").innerText =
+                    s.detail || "Unknown error";
+
+                return;
+            }
+
+            setTimeout(checkStatus, 2000);
+        }
+
+        checkStatus();
+    </script>
+
+{% endblock %}