Update static/js/spark.js

static/js/spark.js

@@ -1,33 +1,55 @@
-function sparkStartup() {
-    const payload = JSON.parse(document.getElementById('spark-startup-payload').value);
-    apiPost('/spark/startup', payload)
-        .then(data => showResult('spark-result', data))
-        .catch(err => console.error(err));
-}
-
-function sparkProjectList() {
-    apiGet('/spark/project_list')
-        .then(data => showResult('spark-result', data))
-        .catch(err => console.error(err));
-}
-
-function sparkEnable() {
-    const payload = JSON.parse(document.getElementById('spark-enable-payload').value);
-    apiPost('/spark/enable', payload)
-        .then(data => showResult('spark-result', data))
-        .catch(err => console.error(err));
-}
-
-function sparkDisable() {
-    const payload = JSON.parse(document.getElementById('spark-disable-payload').value);
-    apiPost('/spark/disable', payload)
-        .then(data => showResult('spark-result', data))
-        .catch(err => console.error(err));
-}
-
-function sparkDelete() {
-    const payload = JSON.parse(document.getElementById('spark-delete-payload').value);
-    apiPost('/spark/delete', payload)
-        .then(data => showResult('spark-result', data))
-        .catch(err => console.error(err));
-}
+function sparkStartup() {
+    const payload = JSON.parse(document.getElementById('spark-startup-payload').value);
+    apiPost('/spark/startup', payload)
+        .then(data => showResult('spark-result', data))
+        .catch(err => console.error(err));
+}
+
+function sparkProjectList() {
+    apiGet('/spark/project_list')
+        .then(data => {
+            const body = document.getElementById('spark-body');
+            body.innerHTML = '';
+            data.projects.forEach(proj => {
+                const row = document.createElement('tr');
+
+                row.innerHTML = `
+                    <td>${proj.project_name}</td>
+                    <td>${proj.version}</td>
+                    <td>${proj.enabled ? '🟢' : '🔴'}</td>
+                    <td>${getStatusIcon(proj.status)} ${proj.status}</td>
+                    <td>${proj.last_accessed}</td>
+                `;
+                body.appendChild(row);
+            });
+        })
+        .catch(err => console.error(err));
+}
+
+function getStatusIcon(status) {
+    if (status === 'loading') return '⚙️';
+    if (status === 'ready') return '✅';
+    if (status === 'error') return '❌';
+    return 'ℹ️';
+}
+
+function sparkEnable() {
+    const payload = JSON.parse(document.getElementById('spark-enable-payload').value);
+    apiPost('/spark/enable', payload)
+        .then(data => showResult('spark-result', data))
+        .catch(err => console.error(err));
+}
+
+function sparkDisable() {
+    const payload = JSON.parse(document.getElementById('spark-disable-payload').value);
+    apiPost('/spark/disable', payload)
+        .then(data => showResult('spark-result', data))
+        .catch(err => console.error(err));
+}
+
+function sparkDelete() {
+    const payload = JSON.parse(document.getElementById('spark-delete-payload').value);
+    apiPost('/spark/delete', payload)
+        .then(data => showResult('spark-result', data))
+        .catch(err => console.error(err));
+}