asdasd

modules/pi_control/assets/console.js

@@ -165,6 +165,10 @@
   const queueBody = document.querySelector('[data-queue-body]');
   const countdownEl = document.querySelector('[data-queue-countdown]');
   const refreshBtn = document.querySelector('[data-queue-refresh]');
+  const queueBtn = document.querySelector('[data-queue-button]');
+  const queueCount = document.querySelector('[data-queue-count]');
+  const queueModal = document.querySelector('[data-queue-modal]');
+  const queueClose = document.querySelector('[data-queue-close]');
   if (!queueBody || !countdownEl) return;
 
   let remaining = 10;
@@ -179,6 +183,10 @@
       if (data && data.html) {
         queueBody.innerHTML = data.html;
       }
+      if (queueCount && typeof data.count === 'number') {
+        queueCount.textContent = String(data.count);
+        queueCount.style.display = data.count > 0 ? 'inline-flex' : 'none';
+      }
       remaining = data && data.next ? data.next : 10;
     } catch (e) {
       // ignore
@@ -195,6 +203,7 @@
   };
 
   setInterval(tick, 1000);
+  fetchQueue();
   if (refreshBtn) {
     refreshBtn.addEventListener('click', () => {
       fetchQueue();
@@ -203,6 +212,59 @@
     });
   }
 
+  if (queueBtn && queueModal) {
+    queueBtn.addEventListener('click', () => {
+      queueModal.classList.add('is-open');
+      queueModal.setAttribute('aria-hidden', 'false');
+      fetchQueue();
+    });
+  }
+  if (queueClose && queueModal) {
+    queueClose.addEventListener('click', () => {
+      queueModal.classList.remove('is-open');
+      queueModal.setAttribute('aria-hidden', 'true');
+    });
+  }
+  if (queueModal) {
+    queueModal.addEventListener('click', (e) => {
+      if (e.target === queueModal) {
+        queueModal.classList.remove('is-open');
+        queueModal.setAttribute('aria-hidden', 'true');
+      }
+    });
+  }
+
+  queueBody.addEventListener('click', async (e) => {
+    const btn = e.target.closest('[data-queue-action]');
+    if (!btn) return;
+    const runId = btn.getAttribute('data-run-id');
+    const action = btn.getAttribute('data-queue-action');
+    if (!runId || !action) return;
+    const url = new URL(window.location.href);
+    url.searchParams.set('queue_action_json', '1');
+    const formData = new FormData();
+    formData.set('run_id', runId);
+    formData.set('action', action);
+    try {
+      const res = await fetch(url.toString(), { method: 'POST', body: formData, cache: 'no-store' });
+      const data = await res.json();
+      if (!data.ok) {
+        if (consoleNotice) {
+          consoleNotice.textContent = data.error || 'Aktion fehlgeschlagen.';
+          consoleNotice.style.display = 'block';
+        }
+      }
+    } catch (err) {
+      if (consoleNotice) {
+        consoleNotice.textContent = 'Aktion fehlgeschlagen.';
+        consoleNotice.style.display = 'block';
+      }
+    }
+    fetchQueue();
+    remaining = 10;
+    countdownEl.textContent = String(remaining);
+  });
+
   const consoleForm = document.querySelector('[data-console-form]');
   const consoleError = document.querySelector('[data-console-error]');
   const consoleNotice = document.querySelector('[data-console-notice]');

modules/pi_control/assets/pi_control.css

@@ -72,3 +72,55 @@
   border: 0;
   background: #0b0f17;
 }
+
+.queue-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.queue-badge {
+  display: inline-flex;
+  min-width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #ff5a3c;
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.75rem;
+  padding: 0 6px;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(10, 14, 24, 0.55);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  z-index: 40;
+}
+.modal.is-open { display: flex; }
+.modal-card {
+  width: min(1100px, 96vw);
+  max-height: 90vh;
+  overflow: auto;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  box-shadow: var(--shadow);
+  padding: 16px;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.modal-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}