console
This commit is contained in:
@@ -273,12 +273,13 @@ $runs = $pdo->query(
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-field">
|
||||
<span class="muted">Direkter Command</span>
|
||||
<textarea name="terminal_command_text" rows="2" placeholder="Optional: Command direkt ausführen"></textarea>
|
||||
<span class="muted">Direkter Befehl</span>
|
||||
<textarea name="terminal_command_text" rows="2" placeholder="Optional: Befehl direkt ausführen"></textarea>
|
||||
</label>
|
||||
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
||||
<button class="cta-button" type="button" data-open-console>Konsole öffnen</button>
|
||||
<button class="nav-link" type="button" data-run-command>Im Hintergrund ausführen</button>
|
||||
<button class="nav-link" type="button" data-send-active>In aktiver Konsole ausführen</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="muted" style="margin-top:.5rem;">
|
||||
|
||||
@@ -134,6 +134,24 @@
|
||||
let tabCount = 0;
|
||||
const idleMs = 5 * 60 * 1000;
|
||||
const idleTimers = new Map();
|
||||
const storageKey = 'pi_control_console_tabs';
|
||||
|
||||
const saveTabs = () => {
|
||||
const tabs = [];
|
||||
tabBar.querySelectorAll('.console-tab').forEach((btn) => {
|
||||
const id = btn.dataset.tabId;
|
||||
const panel = tabPanels.querySelector(`.console-panel[data-tab-id="${id}"]`);
|
||||
const iframe = panel ? panel.querySelector('iframe') : null;
|
||||
if (iframe && iframe.src) {
|
||||
tabs.push({
|
||||
label: btn.firstChild ? btn.firstChild.textContent : btn.textContent,
|
||||
url: iframe.src,
|
||||
openedAt: Date.now(),
|
||||
});
|
||||
}
|
||||
});
|
||||
localStorage.setItem(storageKey, JSON.stringify(tabs));
|
||||
};
|
||||
|
||||
const activateTab = (id) => {
|
||||
tabBar.querySelectorAll('.console-tab').forEach((btn) => {
|
||||
@@ -144,7 +162,29 @@
|
||||
});
|
||||
};
|
||||
|
||||
const openTab = (label, url) => {
|
||||
const getActiveIframe = () => {
|
||||
const activePanel = tabPanels.querySelector('.console-panel.is-active');
|
||||
if (!activePanel) return null;
|
||||
return activePanel.querySelector('iframe');
|
||||
};
|
||||
|
||||
const trySendToIframe = (iframe, command) => {
|
||||
if (!iframe) return false;
|
||||
try {
|
||||
const win = iframe.contentWindow;
|
||||
if (!win) return false;
|
||||
const term = win.term || win.xterm || win.terminal;
|
||||
if (term && typeof term.write === 'function') {
|
||||
term.write(command + '\r');
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const openTab = (label, url, persist = true) => {
|
||||
const id = `tab-${++tabCount}`;
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
@@ -162,6 +202,7 @@
|
||||
if (panel) panel.remove();
|
||||
btn.remove();
|
||||
idleTimers.delete(id);
|
||||
saveTabs();
|
||||
const next = tabBar.querySelector('.console-tab');
|
||||
if (next) activateTab(next.dataset.tabId);
|
||||
});
|
||||
@@ -175,6 +216,7 @@
|
||||
tabBar.appendChild(btn);
|
||||
tabPanels.appendChild(panel);
|
||||
activateTab(id);
|
||||
if (persist) saveTabs();
|
||||
|
||||
const iframe = panel.querySelector('iframe');
|
||||
const markActive = () => {
|
||||
@@ -203,6 +245,7 @@
|
||||
if (panelEl) panelEl.remove();
|
||||
if (btnEl) btnEl.remove();
|
||||
idleTimers.delete(id);
|
||||
saveTabs();
|
||||
clearInterval(idleCheck);
|
||||
const next = tabBar.querySelector('.console-tab');
|
||||
if (next) activateTab(next.dataset.tabId);
|
||||
@@ -219,6 +262,35 @@
|
||||
el.remove();
|
||||
});
|
||||
|
||||
const showRestoreNotice = (text) => {
|
||||
const notice = document.querySelector('[data-console-notice]');
|
||||
if (!notice) return;
|
||||
notice.textContent = text;
|
||||
notice.style.display = 'block';
|
||||
};
|
||||
|
||||
// Restore tabs from previous session (best-effort)
|
||||
try {
|
||||
const raw = localStorage.getItem(storageKey);
|
||||
if (raw) {
|
||||
const tabs = JSON.parse(raw);
|
||||
if (Array.isArray(tabs)) {
|
||||
const now = Date.now();
|
||||
tabs.forEach((t) => {
|
||||
if (t && t.url) {
|
||||
if (t.openedAt && now - t.openedAt > (10 * 60 * 1000)) {
|
||||
showRestoreNotice('Token abgelaufen, bitte Konsole neu öffnen.');
|
||||
return;
|
||||
}
|
||||
openTab(t.label || 'Konsole', t.url, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
|
||||
const queueBody = document.querySelector('[data-queue-body]');
|
||||
const countdownEl = document.querySelector('[data-queue-countdown]');
|
||||
const refreshBtn = document.querySelector('[data-queue-refresh]');
|
||||
@@ -266,6 +338,7 @@
|
||||
const consoleNotice = document.querySelector('[data-console-notice]');
|
||||
const tokenEl = document.querySelector('[data-console-token]');
|
||||
if (consoleForm) {
|
||||
consoleForm.addEventListener('submit', (e) => e.preventDefault());
|
||||
const presetSelect = consoleForm.querySelector('select[name="terminal_preset_id"]');
|
||||
const commandTextarea = consoleForm.querySelector('textarea[name="terminal_command_text"]');
|
||||
if (presetSelect && commandTextarea) {
|
||||
@@ -324,6 +397,7 @@
|
||||
|
||||
const openBtn = consoleForm.querySelector('[data-open-console]');
|
||||
const runBtn = consoleForm.querySelector('[data-run-command]');
|
||||
const sendBtn = consoleForm.querySelector('[data-send-active]');
|
||||
if (openBtn) {
|
||||
openBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
@@ -336,5 +410,25 @@
|
||||
submitRun();
|
||||
});
|
||||
}
|
||||
if (sendBtn) {
|
||||
sendBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!commandTextarea || !commandTextarea.value.trim()) {
|
||||
if (consoleError) {
|
||||
consoleError.textContent = 'Bitte zuerst einen Befehl eingeben.';
|
||||
consoleError.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
const iframe = getActiveIframe();
|
||||
const ok = trySendToIframe(iframe, commandTextarea.value.trim());
|
||||
if (!ok && consoleError) {
|
||||
consoleError.textContent = 'Konnte den Befehl nicht an die aktive Konsole senden.';
|
||||
consoleError.style.display = 'block';
|
||||
} else if (consoleError) {
|
||||
consoleError.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user