console
This commit is contained in:
@@ -273,12 +273,13 @@ $runs = $pdo->query(
|
|||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label class="form-field">
|
<label class="form-field">
|
||||||
<span class="muted">Direkter Command</span>
|
<span class="muted">Direkter Befehl</span>
|
||||||
<textarea name="terminal_command_text" rows="2" placeholder="Optional: Command direkt ausführen"></textarea>
|
<textarea name="terminal_command_text" rows="2" placeholder="Optional: Befehl direkt ausführen"></textarea>
|
||||||
</label>
|
</label>
|
||||||
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
||||||
<button class="cta-button" type="button" data-open-console>Konsole öffnen</button>
|
<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-run-command>Im Hintergrund ausführen</button>
|
||||||
|
<button class="nav-link" type="button" data-send-active>In aktiver Konsole ausführen</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="muted" style="margin-top:.5rem;">
|
<div class="muted" style="margin-top:.5rem;">
|
||||||
|
|||||||
@@ -134,6 +134,24 @@
|
|||||||
let tabCount = 0;
|
let tabCount = 0;
|
||||||
const idleMs = 5 * 60 * 1000;
|
const idleMs = 5 * 60 * 1000;
|
||||||
const idleTimers = new Map();
|
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) => {
|
const activateTab = (id) => {
|
||||||
tabBar.querySelectorAll('.console-tab').forEach((btn) => {
|
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 id = `tab-${++tabCount}`;
|
||||||
const btn = document.createElement('button');
|
const btn = document.createElement('button');
|
||||||
btn.type = 'button';
|
btn.type = 'button';
|
||||||
@@ -162,6 +202,7 @@
|
|||||||
if (panel) panel.remove();
|
if (panel) panel.remove();
|
||||||
btn.remove();
|
btn.remove();
|
||||||
idleTimers.delete(id);
|
idleTimers.delete(id);
|
||||||
|
saveTabs();
|
||||||
const next = tabBar.querySelector('.console-tab');
|
const next = tabBar.querySelector('.console-tab');
|
||||||
if (next) activateTab(next.dataset.tabId);
|
if (next) activateTab(next.dataset.tabId);
|
||||||
});
|
});
|
||||||
@@ -175,6 +216,7 @@
|
|||||||
tabBar.appendChild(btn);
|
tabBar.appendChild(btn);
|
||||||
tabPanels.appendChild(panel);
|
tabPanels.appendChild(panel);
|
||||||
activateTab(id);
|
activateTab(id);
|
||||||
|
if (persist) saveTabs();
|
||||||
|
|
||||||
const iframe = panel.querySelector('iframe');
|
const iframe = panel.querySelector('iframe');
|
||||||
const markActive = () => {
|
const markActive = () => {
|
||||||
@@ -203,6 +245,7 @@
|
|||||||
if (panelEl) panelEl.remove();
|
if (panelEl) panelEl.remove();
|
||||||
if (btnEl) btnEl.remove();
|
if (btnEl) btnEl.remove();
|
||||||
idleTimers.delete(id);
|
idleTimers.delete(id);
|
||||||
|
saveTabs();
|
||||||
clearInterval(idleCheck);
|
clearInterval(idleCheck);
|
||||||
const next = tabBar.querySelector('.console-tab');
|
const next = tabBar.querySelector('.console-tab');
|
||||||
if (next) activateTab(next.dataset.tabId);
|
if (next) activateTab(next.dataset.tabId);
|
||||||
@@ -219,6 +262,35 @@
|
|||||||
el.remove();
|
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 queueBody = document.querySelector('[data-queue-body]');
|
||||||
const countdownEl = document.querySelector('[data-queue-countdown]');
|
const countdownEl = document.querySelector('[data-queue-countdown]');
|
||||||
const refreshBtn = document.querySelector('[data-queue-refresh]');
|
const refreshBtn = document.querySelector('[data-queue-refresh]');
|
||||||
@@ -266,6 +338,7 @@
|
|||||||
const consoleNotice = document.querySelector('[data-console-notice]');
|
const consoleNotice = document.querySelector('[data-console-notice]');
|
||||||
const tokenEl = document.querySelector('[data-console-token]');
|
const tokenEl = document.querySelector('[data-console-token]');
|
||||||
if (consoleForm) {
|
if (consoleForm) {
|
||||||
|
consoleForm.addEventListener('submit', (e) => e.preventDefault());
|
||||||
const presetSelect = consoleForm.querySelector('select[name="terminal_preset_id"]');
|
const presetSelect = consoleForm.querySelector('select[name="terminal_preset_id"]');
|
||||||
const commandTextarea = consoleForm.querySelector('textarea[name="terminal_command_text"]');
|
const commandTextarea = consoleForm.querySelector('textarea[name="terminal_command_text"]');
|
||||||
if (presetSelect && commandTextarea) {
|
if (presetSelect && commandTextarea) {
|
||||||
@@ -324,6 +397,7 @@
|
|||||||
|
|
||||||
const openBtn = consoleForm.querySelector('[data-open-console]');
|
const openBtn = consoleForm.querySelector('[data-open-console]');
|
||||||
const runBtn = consoleForm.querySelector('[data-run-command]');
|
const runBtn = consoleForm.querySelector('[data-run-command]');
|
||||||
|
const sendBtn = consoleForm.querySelector('[data-send-active]');
|
||||||
if (openBtn) {
|
if (openBtn) {
|
||||||
openBtn.addEventListener('click', (e) => {
|
openBtn.addEventListener('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -336,5 +410,25 @@
|
|||||||
submitRun();
|
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