refactor(apps): decompose apps-manager god-file into 7 responsibility files
Brace-aware split of apps-manager.js (4154->2015 base) into apps-grid,
config-form, port-manager-integration, gluetun-vpn, config-dirty-guard,
install-console, service-buttons-sidebar — augmenting AppsManager.prototype.
Removed the dead duplicate initializeSimpleTabs (kept the live later def).
Used a self-checking extractor (node --check per cluster, auto-revert on
failure): install-dispatch contains a regex literal (/^\d{16}$/) that trips
brace-bounding, so its methods were safely LEFT in the base rather than risk a
bad split. ServiceButtons class + expandServiceLinks + bootstrap also remain
inline. Verified: all 117 methods preserved (none lost), all files
node --check clean.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad
parent
3d058b3469
commit
df75059330
@ -0,0 +1,280 @@
|
||||
// Auto-extracted from apps-manager.js (verbatim) — augments AppsManager.prototype. Loaded after the base.
|
||||
Object.assign(AppsManager.prototype, {
|
||||
setupSidebar(activeCategory = 'all') {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
if (!sidebar) return;
|
||||
|
||||
// Clear sidebar
|
||||
const container = document.getElementById('dynamic-categories');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
// Hide loading
|
||||
const loading = document.querySelector('.loading-categories');
|
||||
if (loading) loading.style.display = 'none';
|
||||
|
||||
// Add categories
|
||||
this.addCategory('All', 'all');
|
||||
this.addCategory('Installed', 'installed');
|
||||
|
||||
// Add dynamic categories
|
||||
if (window.sidebarCategories) {
|
||||
const categoriesArray = Array.isArray(window.sidebarCategories) ? window.sidebarCategories :
|
||||
Object.entries(window.sidebarCategories).map(([key, value]) => ({ id: key, ...value }));
|
||||
|
||||
categoriesArray.forEach(cat => {
|
||||
this.addCategory(cat.name, cat.id, cat.icon);
|
||||
});
|
||||
}
|
||||
|
||||
// Add back button for app detail
|
||||
if (this.currentView === 'app-detail') {
|
||||
this.addBackButton();
|
||||
}
|
||||
|
||||
// Set active category
|
||||
this.setActiveCategory(activeCategory);
|
||||
},
|
||||
addCategory(name, id, icon) {
|
||||
const container = document.getElementById('dynamic-categories');
|
||||
if (!container) return;
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'category';
|
||||
div.setAttribute('data-category', id);
|
||||
|
||||
let iconHtml;
|
||||
if (!icon && id === 'all') {
|
||||
iconHtml = '<svg class="category-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>';
|
||||
} else if (!icon && id === 'installed') {
|
||||
iconHtml = '<svg class="category-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
||||
} else {
|
||||
let iconPath = icon || `/core/icons/categories/${id}.svg`;
|
||||
if (!iconPath.startsWith('/')) iconPath = '/' + iconPath;
|
||||
iconHtml = `<img src="${iconPath}" alt="${name}" onerror="this.src='/core/icons/categories/default.svg'"/>`;
|
||||
}
|
||||
|
||||
div.innerHTML = `${iconHtml} ${name}`;
|
||||
|
||||
div.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.switchCategory(id);
|
||||
});
|
||||
|
||||
container.appendChild(div);
|
||||
},
|
||||
addBackButton() {
|
||||
const container = document.getElementById('dynamic-categories');
|
||||
if (!container) return;
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'category';
|
||||
div.innerHTML = '← Back to Apps';
|
||||
div.addEventListener('click', () => {
|
||||
this.showAppsList('all');
|
||||
});
|
||||
|
||||
container.appendChild(div);
|
||||
},
|
||||
setActiveCategory(categoryId) {
|
||||
document.querySelectorAll('.category').forEach(cat => {
|
||||
cat.classList.remove('active');
|
||||
});
|
||||
|
||||
const active = document.querySelector(`[data-category="${categoryId}"]`);
|
||||
if (active) active.classList.add('active');
|
||||
},
|
||||
switchCategory(categoryId) {
|
||||
//// // console.log(`AppsManager: Switching to category: ${categoryId}`);
|
||||
|
||||
// Update URL to reflect current state
|
||||
if (categoryId === 'all') {
|
||||
history.pushState({}, '', '/apps');
|
||||
} else {
|
||||
history.pushState({}, '', `/apps/${categoryId}`);
|
||||
}
|
||||
|
||||
// Direct view update without URL change to avoid conflicts
|
||||
this.currentView = 'apps';
|
||||
this.currentApp = null;
|
||||
|
||||
// Switch to apps view
|
||||
this.showView('apps');
|
||||
|
||||
// Render apps for new category
|
||||
this.renderApps(categoryId);
|
||||
|
||||
// Update sidebar for new category
|
||||
this.setupSidebar(categoryId);
|
||||
},
|
||||
renderApps(category) {
|
||||
const container = document.getElementById('apps-section');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
// Load and render apps
|
||||
this.loadApps(category).then(apps => {
|
||||
apps.forEach(app => {
|
||||
const card = this.createAppCard(app);
|
||||
container.appendChild(card);
|
||||
});
|
||||
this.populateInlineServiceButtons();
|
||||
// Re-apply any active sidebar search so changing category
|
||||
// doesn't reveal apps that should be filtered out.
|
||||
if (this.appsSearchQuery) this.filterAppsByQuery(this.appsSearchQuery);
|
||||
}).catch(error => {
|
||||
console.error('Error rendering apps:', error);
|
||||
});
|
||||
},
|
||||
// Client-side substring filter wired to the sidebar search box.
|
||||
// Cards carry data-search (built in createAppCard) so this stays
|
||||
// a single querySelectorAll + display toggle.
|
||||
filterAppsByQuery(query) {
|
||||
const q = (query || '').trim().toLowerCase();
|
||||
this.appsSearchQuery = q;
|
||||
const wrap = document.querySelector('.apps-search');
|
||||
if (wrap) wrap.classList.toggle('has-value', !!q);
|
||||
|
||||
const cards = document.querySelectorAll('#apps-section .app-card');
|
||||
cards.forEach(card => {
|
||||
const hay = card.dataset.search || '';
|
||||
card.style.display = (!q || hay.includes(q)) ? '' : 'none';
|
||||
});
|
||||
},
|
||||
clearAppsSearch() {
|
||||
const input = document.getElementById('apps-search-input');
|
||||
if (input) input.value = '';
|
||||
this.filterAppsByQuery('');
|
||||
if (input) input.focus();
|
||||
},
|
||||
createAppCard(app) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'app-card';
|
||||
if (app.installed) card.classList.add('installed');
|
||||
|
||||
// Searchable text for the sidebar search box. Combined name +
|
||||
// description + long description + category, lowercased once here
|
||||
// so filterAppsByQuery is a cheap substring match.
|
||||
const searchHaystack = [
|
||||
app.name,
|
||||
app.description,
|
||||
app.longDescription,
|
||||
app.category,
|
||||
this.getCategoryName ? this.getCategoryName(app.category) : ''
|
||||
].filter(Boolean).join(' ').toLowerCase();
|
||||
card.dataset.search = searchHaystack;
|
||||
|
||||
const appName = app.command.split(' ').pop();
|
||||
let icon = app.icon || '/core/icons/apps/default.svg';
|
||||
|
||||
// Ensure absolute path from root
|
||||
if (!icon.startsWith('/')) {
|
||||
icon = '/' + icon;
|
||||
}
|
||||
|
||||
const status = app.installed ? 'Installed' : 'Not Installed';
|
||||
|
||||
// Get category icon and name
|
||||
const categoryIcon = this.getCategoryIcon(app.category);
|
||||
const categoryName = this.getCategoryName(app.category);
|
||||
|
||||
// Create rich tags like original
|
||||
const descriptionTag = app.description ? `<span class="app-tag description-tag"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg> ${app.description}</span>` : '';
|
||||
const categoryTag = `<span class="app-tag category-tag clickable" onclick="event.stopPropagation(); appsManager.switchCategory('${app.category}')"><img src="${categoryIcon}"/> ${categoryName}</span>`;
|
||||
|
||||
// Format long description with period if missing
|
||||
let formattedLongDescription = '';
|
||||
if (app.longDescription) {
|
||||
formattedLongDescription = app.longDescription;
|
||||
if (!formattedLongDescription.endsWith('.') && !formattedLongDescription.endsWith('?') && !formattedLongDescription.endsWith('!')) {
|
||||
formattedLongDescription += '.';
|
||||
}
|
||||
}
|
||||
|
||||
// Service trigger icon (only for installed apps - visibility controlled after services load)
|
||||
const serviceTrigger = app.installed ? `
|
||||
<div class="service-trigger" id="service-trigger-${appName}" style="display:none;">
|
||||
<div class="service-trigger-icon" onclick="event.stopPropagation(); window.toggleServiceTrigger('${appName}')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</svg>
|
||||
Open
|
||||
</div>
|
||||
<div class="service-trigger-popup">
|
||||
<div id="service-popup-content-${appName}"></div>
|
||||
</div>
|
||||
</div>` : '';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="app-card-top" style="cursor: pointer;" onclick="appsManager.showAppDetail('${appName}')">
|
||||
<div class="app-card-icon">
|
||||
<img src="${icon}" alt="${app.name}" onerror="this.src='/core/icons/apps/default.svg'"/>
|
||||
</div>
|
||||
<div class="app-card-content">
|
||||
<div class="app-card-title" style="cursor: pointer;">${app.name.split(' - ')[0].trim()}</div>
|
||||
<div class="app-card-tags">
|
||||
${descriptionTag}
|
||||
${categoryTag}
|
||||
<span class="app-tag clickable ${app.installed ? 'installed-tag' : 'not-installed-tag'}" onclick="event.stopPropagation(); appsManager.switchCategory('${app.installed ? 'installed' : 'all'}')">${status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${formattedLongDescription ? `<div class="app-card-long-description">${formattedLongDescription}</div>` : ''}
|
||||
<div class="app-card-actions">
|
||||
<button class="${app.installed ? 'manage-btn' : 'install-btn'}" onclick="appsManager.showAppDetailWithConfig('${appName}')">
|
||||
${app.installed ? 'Manage' : 'Install'}
|
||||
</button>
|
||||
${serviceTrigger}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return card;
|
||||
},
|
||||
// Populate inline service trigger popups for installed apps
|
||||
async populateInlineServiceButtons() {
|
||||
if (!window.serviceButtons) return;
|
||||
|
||||
if (window.serviceButtons.services.length === 0) {
|
||||
await window.serviceButtons.loadServices();
|
||||
}
|
||||
|
||||
const proto = s => ['http', 'https'].includes((s.protocol || '').toLowerCase()) ? s.protocol.toLowerCase() : 'http';
|
||||
|
||||
const popupContents = document.querySelectorAll('[id^="service-popup-content-"]');
|
||||
for (const content of popupContents) {
|
||||
const appName = content.id.replace('service-popup-content-', '');
|
||||
const trigger = document.getElementById(`service-trigger-${appName}`);
|
||||
|
||||
const appServices = window.serviceButtons.services.filter(s => s.app === appName && s.buttonEnabled === true);
|
||||
if (appServices.length === 0) continue;
|
||||
|
||||
// Multi-button render via the shared expandServiceLinks() helper.
|
||||
const buttons = appServices.flatMap(s => {
|
||||
const protectedClass = s.loginRequired ? ' protected' : '';
|
||||
const lockIcon = s.loginRequired
|
||||
? `<span class="service-lock-icon" title="Login required for this URL — credentials in Config → General → Logins."><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>`
|
||||
: '';
|
||||
return window.expandServiceLinks(s).map(({ url, label }) => `
|
||||
<a href="${url}" target="_blank" rel="noopener noreferrer" class="service-button${protectedClass}" onclick="event.stopPropagation()">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</svg>
|
||||
${label}
|
||||
${lockIcon}
|
||||
</a>
|
||||
`);
|
||||
}).filter(Boolean).join('');
|
||||
|
||||
if (buttons) {
|
||||
content.innerHTML = buttons;
|
||||
if (trigger) trigger.style.display = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,198 @@
|
||||
// Auto-extracted from apps-manager.js (verbatim) — augments AppsManager.prototype. Loaded after the base.
|
||||
Object.assign(AppsManager.prototype, {
|
||||
// Snapshot of CFG_ field values, keyed by input name. Mirrors the filter in
|
||||
// collectConfigFromForm so the two agree on what counts as a config field.
|
||||
_readConfigFieldState(form) {
|
||||
const state = {};
|
||||
form.querySelectorAll('input, select, textarea').forEach((input) => {
|
||||
const name = input.name;
|
||||
if (!name || !name.startsWith('CFG_') || name.endsWith('_PORT_MANAGER')) return;
|
||||
state[name] = (input.type === 'checkbox') ? (input.checked ? 'true' : 'false') : input.value;
|
||||
});
|
||||
return state;
|
||||
},
|
||||
_getDirtyConfigFields() {
|
||||
if (!this._dirtyAppName || !this._configSnapshot) return [];
|
||||
const form = document.getElementById(`app-form-${this._dirtyAppName}`);
|
||||
if (!form) return [];
|
||||
const current = this._readConfigFieldState(form);
|
||||
return Object.keys(current).filter((name) => current[name] !== (this._configSnapshot[name] ?? ''));
|
||||
},
|
||||
_isConfigDirty() {
|
||||
return this._getDirtyConfigFields().length > 0;
|
||||
},
|
||||
// Called once per config-panel render: snapshots the saved state, wires the
|
||||
// change listener + sticky bar, and (re)registers the nav guard. Only tracks
|
||||
// installed apps — for a fresh install the Install button is already the
|
||||
// "apply" action, so a dirty bar would just be noise.
|
||||
wireConfigDirtyTracking(appName) {
|
||||
const form = document.getElementById(`app-form-${appName}`);
|
||||
if (!form) return;
|
||||
|
||||
const app = (window.apps || []).find((a) =>
|
||||
(a.command || '').endsWith(` ${appName}`) ||
|
||||
(a.name && a.name.toLowerCase() === appName.toLowerCase())
|
||||
);
|
||||
if (!app || !app.installed) {
|
||||
this._clearConfigDirty();
|
||||
return;
|
||||
}
|
||||
|
||||
this._dirtyAppName = appName;
|
||||
this._configSnapshot = this._readConfigFieldState(form);
|
||||
|
||||
if (form.dataset.dirtyWired !== '1') {
|
||||
form.dataset.dirtyWired = '1';
|
||||
const onEdit = () => this._refreshDirtyBar();
|
||||
form.addEventListener('input', onEdit);
|
||||
form.addEventListener('change', onEdit);
|
||||
}
|
||||
|
||||
this._ensureDirtyBar(appName, form);
|
||||
|
||||
// beforeunload covers tab close / refresh / external nav — the browser
|
||||
// shows its own generic prompt. Registered once for the page lifetime.
|
||||
if (!this._beforeUnloadWired) {
|
||||
this._beforeUnloadWired = true;
|
||||
window.addEventListener('beforeunload', (e) => {
|
||||
if (this._isConfigDirty()) { e.preventDefault(); e.returnValue = ''; }
|
||||
});
|
||||
}
|
||||
|
||||
// SPA route changes route through this guard (see spa.js navigate()).
|
||||
window.__appConfigNavGuard = (targetPath) => this._appConfigNavGuard(targetPath);
|
||||
|
||||
this._refreshDirtyBar();
|
||||
},
|
||||
// Build (or rebuild) the sticky bar at the bottom of the config form.
|
||||
_ensureDirtyBar(appName, form) {
|
||||
const stale = document.getElementById('config-dirty-bar');
|
||||
if (stale) stale.remove();
|
||||
|
||||
const bar = document.createElement('div');
|
||||
bar.id = 'config-dirty-bar';
|
||||
bar.className = 'config-dirty-bar';
|
||||
bar.style.display = 'none';
|
||||
bar.innerHTML = `
|
||||
<span class="config-dirty-msg">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
||||
<line x1="12" y1="9" x2="12" y2="13"></line>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
||||
</svg>
|
||||
<span class="config-dirty-count"></span>
|
||||
</span>
|
||||
<span class="config-dirty-actions">
|
||||
<button type="button" class="btn btn-secondary config-dirty-discard">Discard</button>
|
||||
<button type="button" class="btn btn-primary config-dirty-apply">Apply</button>
|
||||
</span>`;
|
||||
// Sits in normal flow between the config content and the action buttons.
|
||||
const actions = form.querySelector('.config-actions');
|
||||
if (actions) {
|
||||
form.insertBefore(bar, actions);
|
||||
} else {
|
||||
form.appendChild(bar);
|
||||
}
|
||||
|
||||
bar.querySelector('.config-dirty-discard').addEventListener('click', () => this._discardConfigChanges());
|
||||
bar.querySelector('.config-dirty-apply').addEventListener('click', () => this.installApp(appName));
|
||||
},
|
||||
_refreshDirtyBar() {
|
||||
const bar = document.getElementById('config-dirty-bar');
|
||||
if (!bar) return;
|
||||
const count = this._getDirtyConfigFields().length;
|
||||
if (count === 0) {
|
||||
bar.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
const label = bar.querySelector('.config-dirty-count');
|
||||
if (label) label.textContent = `${count} unsaved change${count === 1 ? '' : 's'}`;
|
||||
bar.style.display = 'flex';
|
||||
},
|
||||
// Revert every field to its snapshot value, then re-fire change/input so
|
||||
// dependent UI (showWhen visibility, etc.) reconciles.
|
||||
_discardConfigChanges() {
|
||||
if (!this._dirtyAppName || !this._configSnapshot) return;
|
||||
const form = document.getElementById(`app-form-${this._dirtyAppName}`);
|
||||
if (!form) return;
|
||||
form.querySelectorAll('input, select, textarea').forEach((input) => {
|
||||
const name = input.name;
|
||||
if (!name || !name.startsWith('CFG_') || name.endsWith('_PORT_MANAGER')) return;
|
||||
if (!(name in this._configSnapshot)) return;
|
||||
const orig = this._configSnapshot[name];
|
||||
if (input.type === 'checkbox') {
|
||||
input.checked = (orig === 'true');
|
||||
} else {
|
||||
input.value = orig;
|
||||
}
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
input.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
this._refreshDirtyBar();
|
||||
},
|
||||
// Drop the dirty state without touching the form — used when the changes are
|
||||
// being applied (the form is about to be replaced) or discarded on leave.
|
||||
_clearConfigDirty() {
|
||||
this._configSnapshot = null;
|
||||
this._dirtyAppName = null;
|
||||
window.__appConfigNavGuard = null;
|
||||
const bar = document.getElementById('config-dirty-bar');
|
||||
if (bar) bar.style.display = 'none';
|
||||
},
|
||||
// SPA nav guard body — returns 'proceed' | 'stay'. 'apply' kicks off the
|
||||
// normal apply flow and stays put (apply navigates to the tasks view itself).
|
||||
async _appConfigNavGuard() {
|
||||
if (!this._isConfigDirty()) return 'proceed';
|
||||
const appName = this._dirtyAppName;
|
||||
const decision = await this._confirmLeaveUnsaved(appName);
|
||||
if (decision === 'apply') {
|
||||
this.installApp(appName);
|
||||
return 'stay';
|
||||
}
|
||||
if (decision === 'discard') {
|
||||
this._clearConfigDirty();
|
||||
return 'proceed';
|
||||
}
|
||||
return 'stay';
|
||||
},
|
||||
// Apply / Discard / Stay prompt. Resolves with the chosen action; closing
|
||||
// via the X or backdrop resolves 'stay' (the safe default).
|
||||
_confirmLeaveUnsaved(appName) {
|
||||
let displayName = appName;
|
||||
const app = (window.apps || []).find((a) =>
|
||||
(a.command || '').endsWith(` ${appName}`) ||
|
||||
(a.name && a.name.toLowerCase() === appName.toLowerCase())
|
||||
);
|
||||
if (app && app.name) displayName = app.name.split(' - ')[0].trim();
|
||||
|
||||
return new Promise((resolve) => {
|
||||
let decided = false;
|
||||
const finish = (val, modal) => {
|
||||
if (decided) return;
|
||||
decided = true;
|
||||
if (modal) modal.close();
|
||||
resolve(val);
|
||||
};
|
||||
window.openEoModal({
|
||||
id: 'config-unsaved-modal',
|
||||
size: 'sm',
|
||||
eyebrow: '⚠ Unsaved changes',
|
||||
title: displayName,
|
||||
desc: 'You have configuration changes that haven’t been applied.',
|
||||
body: `
|
||||
<div class="eo-empty-state warning" role="status">
|
||||
<div class="eo-empty-state-body">
|
||||
<p class="eo-empty-state-title">Apply before you go?</p>
|
||||
<p class="eo-empty-state-text">Apply runs the update now. Discard throws the edits away. Stay keeps you on this page.</p>
|
||||
</div>
|
||||
</div>`,
|
||||
actions: [
|
||||
{ label: 'Apply', variant: 'primary', onClick: (m) => finish('apply', m) },
|
||||
{ label: 'Discard', variant: 'secondary', onClick: (m) => finish('discard', m) },
|
||||
{ label: 'Stay', variant: 'secondary', onClick: (m) => finish('stay', m) }
|
||||
],
|
||||
onClose: () => { if (!decided) { decided = true; resolve('stay'); } }
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,350 @@
|
||||
// Auto-extracted from apps-manager.js (verbatim) — augments AppsManager.prototype. Loaded after the base.
|
||||
Object.assign(AppsManager.prototype, {
|
||||
countryFlagEmoji(name) {
|
||||
const map = {
|
||||
'Albania':'AL','Algeria':'DZ','Andorra':'AD','Angola':'AO','Argentina':'AR','Armenia':'AM','Australia':'AU','Austria':'AT','Azerbaijan':'AZ',
|
||||
'Bahamas':'BS','Bahrain':'BH','Bangladesh':'BD','Belarus':'BY','Belgium':'BE','Belize':'BZ','Bermuda':'BM','Bhutan':'BT','Bolivia':'BO',
|
||||
'Bosnia and Herzegovina':'BA','Brazil':'BR','Brunei':'BN','Brunei Darussalam':'BN','Bulgaria':'BG','Cambodia':'KH','Canada':'CA','Chile':'CL',
|
||||
'China':'CN','Colombia':'CO','Costa Rica':'CR','Croatia':'HR','Cyprus':'CY','Czech Republic':'CZ','Czechia':'CZ',
|
||||
'Denmark':'DK','Dominican Republic':'DO','Ecuador':'EC','Egypt':'EG','El Salvador':'SV','Estonia':'EE','Ethiopia':'ET',
|
||||
'Finland':'FI','France':'FR','Georgia':'GE','Germany':'DE','Ghana':'GH','Greece':'GR','Greenland':'GL','Guatemala':'GT',
|
||||
'Honduras':'HN','Hong Kong':'HK','Hungary':'HU','Iceland':'IS','India':'IN','Indonesia':'ID','Iran':'IR','Iraq':'IQ',
|
||||
'Ireland':'IE','Isle of Man':'IM','Israel':'IL','Italy':'IT','Jamaica':'JM','Japan':'JP','Jordan':'JO','Kazakhstan':'KZ',
|
||||
'Kenya':'KE','Kuwait':'KW','Kyrgyzstan':'KG','Laos':'LA','Latvia':'LV','Lebanon':'LB','Liechtenstein':'LI','Lithuania':'LT',
|
||||
'Luxembourg':'LU','Macao':'MO','Macau':'MO','North Macedonia':'MK','Macedonia':'MK','Madagascar':'MG','Malaysia':'MY','Malta':'MT',
|
||||
'Mexico':'MX','Moldova':'MD','Monaco':'MC','Mongolia':'MN','Montenegro':'ME','Morocco':'MA','Myanmar':'MM','Nepal':'NP',
|
||||
'Netherlands':'NL','New Zealand':'NZ','Nicaragua':'NI','Nigeria':'NG','Norway':'NO','Oman':'OM','Pakistan':'PK','Panama':'PA',
|
||||
'Papua New Guinea':'PG','Paraguay':'PY','Peru':'PE','Philippines':'PH','Poland':'PL','Portugal':'PT','Puerto Rico':'PR','Qatar':'QA',
|
||||
'Romania':'RO','Russia':'RU','Russian Federation':'RU','Saudi Arabia':'SA','Senegal':'SN','Serbia':'RS','Singapore':'SG',
|
||||
'Slovakia':'SK','Slovenia':'SI','South Africa':'ZA','South Korea':'KR','Korea, Republic of':'KR','Spain':'ES','Sri Lanka':'LK',
|
||||
'Sweden':'SE','Switzerland':'CH','Taiwan':'TW','Tajikistan':'TJ','Thailand':'TH','Trinidad and Tobago':'TT','Tunisia':'TN',
|
||||
'Turkey':'TR','Türkiye':'TR','Turkmenistan':'TM','Ukraine':'UA','United Arab Emirates':'AE','UAE':'AE','United Kingdom':'GB','UK':'GB',
|
||||
'United States':'US','USA':'US','United States of America':'US','Uruguay':'UY','Uzbekistan':'UZ','Venezuela':'VE','Vietnam':'VN','Viet Nam':'VN'
|
||||
};
|
||||
const code = map[name];
|
||||
if (!code) return '🏳️';
|
||||
return String.fromCodePoint(...[...code].map(c => 0x1F1E6 + (c.charCodeAt(0) - 65)));
|
||||
},
|
||||
openGluetunCountriesModal(fieldId) {
|
||||
const hidden = document.getElementById(fieldId);
|
||||
const chips = document.getElementById(`${fieldId}-chips`);
|
||||
if (!hidden) return;
|
||||
|
||||
const providerEl = (typeof ConfigOptions !== 'undefined' && ConfigOptions.findGluetunProviderEl)
|
||||
? ConfigOptions.findGluetunProviderEl()
|
||||
: null;
|
||||
const provider = providerEl ? providerEl.value : '';
|
||||
const providers = window.gluetunProviders || {};
|
||||
const countries = (provider && providers[provider] && Array.isArray(providers[provider].countries))
|
||||
? [...providers[provider].countries].sort((a, b) => a.localeCompare(b))
|
||||
: [];
|
||||
|
||||
const current = new Set((hidden.value || '').split(',').map(s => s.trim()).filter(Boolean));
|
||||
|
||||
const existing = document.getElementById('gluetun-countries-modal');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const flag = (n) => this.countryFlagEmoji(n);
|
||||
const renderChips = (list) => list.length
|
||||
? list.map(c => `<span class="gluetun-country-chip"><span class="gluetun-flag">${flag(c)}</span>${c}</span>`).join('')
|
||||
: `<span class="gluetun-country-empty">Any</span>`;
|
||||
|
||||
const fallbackProviderIcon = `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z'/><path d='M9 12l2 2 4-4'/></svg>`;
|
||||
const providerLabel = provider ? provider.replace(/\b\w/g, (c) => c.toUpperCase()) : '— none selected —';
|
||||
const iconManifest = window.gluetunProviderIcons || {};
|
||||
const providerIconUrl = (provider && iconManifest[provider]) || fallbackProviderIcon;
|
||||
|
||||
const bodyHtml = `
|
||||
<div class="gluetun-provider-card">
|
||||
<div class="gluetun-provider-icon-wrap">
|
||||
<img class="gluetun-provider-icon" src="${providerIconUrl}" alt="${provider}" onerror="this.onerror=null; this.src='${fallbackProviderIcon}';">
|
||||
</div>
|
||||
<div class="gluetun-provider-text">
|
||||
<p class="gluetun-provider-label">Provider</p>
|
||||
<p class="gluetun-provider-name">${providerLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gluetun-search-card">
|
||||
<div class="gluetun-search-row">
|
||||
<svg class="gluetun-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
<input type="text" class="gluetun-country-search" placeholder="Filter countries...">
|
||||
</div>
|
||||
<div class="gluetun-search-actions">
|
||||
<button type="button" class="btn btn-secondary gluetun-country-all">Select all</button>
|
||||
<button type="button" class="btn btn-secondary gluetun-country-none">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gluetun-country-list">
|
||||
${countries.length === 0
|
||||
? `<p class="gluetun-country-empty-msg">No country list available for this provider. Pick a provider first or wait for the snapshot to load.</p>`
|
||||
: countries.map(c => `
|
||||
<label class="gluetun-country-item">
|
||||
<input type="checkbox" value="${c}" ${current.has(c) ? 'checked' : ''}>
|
||||
<span class="gluetun-country-name"><span class="gluetun-flag">${flag(c)}</span>${c}</span>
|
||||
</label>`).join('')}
|
||||
</div>`;
|
||||
|
||||
const m = window.openEoModal({
|
||||
id: 'gluetun-countries-modal',
|
||||
title: '🌍 Select VPN Countries',
|
||||
body: bodyHtml,
|
||||
actions: [
|
||||
{ label: 'Save', variant: 'primary', onClick: (modal) => {
|
||||
const picked = Array.from(modal.contentEl.querySelectorAll('.gluetun-country-item input:checked')).map(cb => cb.value);
|
||||
hidden.value = picked.join(',');
|
||||
hidden.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
if (chips) chips.innerHTML = renderChips(picked);
|
||||
modal.close();
|
||||
}},
|
||||
{ label: 'Cancel', variant: 'secondary' }
|
||||
]
|
||||
});
|
||||
const root = m.contentEl;
|
||||
root.querySelector('.gluetun-country-search').addEventListener('input', (e) => {
|
||||
const q = e.target.value.toLowerCase();
|
||||
root.querySelectorAll('.gluetun-country-item').forEach(item => {
|
||||
const label = item.querySelector('.gluetun-country-name').textContent.toLowerCase();
|
||||
item.style.display = label.includes(q) ? '' : 'none';
|
||||
});
|
||||
});
|
||||
root.querySelector('.gluetun-country-all').addEventListener('click', () => {
|
||||
root.querySelectorAll('.gluetun-country-item').forEach(item => {
|
||||
if (item.style.display !== 'none') item.querySelector('input').checked = true;
|
||||
});
|
||||
});
|
||||
root.querySelector('.gluetun-country-none').addEventListener('click', () => {
|
||||
root.querySelectorAll('.gluetun-country-item input').forEach(cb => cb.checked = false);
|
||||
});
|
||||
},
|
||||
async openGluetunRouteAppsModal() {
|
||||
const existing = document.getElementById('gluetun-route-apps-modal');
|
||||
if (existing) existing.remove();
|
||||
|
||||
let allow = [];
|
||||
try {
|
||||
const r = await fetch('/data/apps/gluetun-eligible-categories.json', { cache: 'no-store' });
|
||||
if (r.ok) allow = (await r.json()).categories || [];
|
||||
} catch {}
|
||||
const allowSet = new Set(allow.map((c) => String(c).toLowerCase()));
|
||||
const overrideOn = (typeof ConfigOptions !== 'undefined') && this.checkRequirementEnabled('GLUETUN_FOR_ALL');
|
||||
const skip = new Set(['gluetun', 'libreportal', 'traefik', 'fail2ban']);
|
||||
const apps = (window.apps || [])
|
||||
.filter((a) => a.installed)
|
||||
.map((a) => {
|
||||
const slug = (a.command || '').split(' ').pop();
|
||||
return { ...a, slug };
|
||||
})
|
||||
.filter((a) => a.slug && !skip.has(a.slug))
|
||||
.filter((a) => overrideOn || allowSet.has(String(a.category || '').toLowerCase()))
|
||||
.sort((a, b) => (a.name || a.slug).localeCompare(b.name || b.slug));
|
||||
|
||||
const bodyHtml = `
|
||||
<p class="eo-modal-section-text">
|
||||
Tick an app to send its outbound traffic through the Gluetun VPN. Untick to restore the default network.
|
||||
Each change re-runs that app's install task to apply the new compose.
|
||||
</p>
|
||||
${apps.length === 0 ? `
|
||||
<div class="eo-empty-state info" role="status">
|
||||
<div class="eo-empty-state-icon" aria-hidden="true">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="eo-empty-state-body">
|
||||
<p class="eo-empty-state-title">No eligible installed apps</p>
|
||||
<p class="eo-empty-state-text">
|
||||
Install an app from the curated categories first, or enable the
|
||||
<strong>Gluetun For All Apps</strong> requirement to expose every app.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="gluetun-country-list">
|
||||
${apps.map((a) => {
|
||||
const cfgKey = `CFG_${a.slug.toUpperCase()}_NETWORK`;
|
||||
const current = (a.config && a.config[cfgKey]) || 'default';
|
||||
const checked = current === 'gluetun' ? 'checked' : '';
|
||||
const icon = a.icon ? (a.icon.startsWith('/') ? a.icon : '/' + a.icon) : '/core/icons/apps/default.svg';
|
||||
return `
|
||||
<label class="gluetun-country-item">
|
||||
<input type="checkbox" data-slug="${a.slug}" data-current="${current}" ${checked}>
|
||||
<span class="gluetun-country-name" style="display:flex; align-items:center; gap:10px;">
|
||||
<img src="${icon}" alt="" style="width:20px; height:20px; object-fit:contain;" onerror="this.onerror=null; this.src='/core/icons/apps/default.svg';">
|
||||
${a.name || a.slug}
|
||||
</span>
|
||||
</label>`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`}`;
|
||||
|
||||
const m = window.openEoModal({
|
||||
id: 'gluetun-route-apps-modal',
|
||||
title: '🛡️ Route apps through Gluetun',
|
||||
body: bodyHtml,
|
||||
actions: [
|
||||
{ label: 'Apply', variant: 'primary', onClick: async (modal) => {
|
||||
if (apps.length === 0) { modal.close(); return; }
|
||||
const root = modal.contentEl;
|
||||
const applyBtn = root.querySelectorAll('.eo-modal-footer .btn')[0];
|
||||
const changes = [];
|
||||
root.querySelectorAll('.gluetun-country-item input[type=checkbox]').forEach((cb) => {
|
||||
const desired = cb.checked ? 'gluetun' : 'default';
|
||||
if (desired !== cb.dataset.current) changes.push({ slug: cb.dataset.slug, value: desired });
|
||||
});
|
||||
if (changes.length === 0) { modal.close(); return; }
|
||||
applyBtn.disabled = true; applyBtn.textContent = 'Applying…';
|
||||
try {
|
||||
if (!window.tasksManager?.router) await this.loadTaskSystem?.();
|
||||
for (const { slug, value } of changes) {
|
||||
const cfgKey = `CFG_${slug.toUpperCase()}_NETWORK`;
|
||||
await window.tasksManager.router.routeAction('install', { appName: slug, config: { [cfgKey]: value } });
|
||||
}
|
||||
this.addSuccessLog?.(`Queued ${changes.length} gluetun routing task(s).`);
|
||||
modal.close();
|
||||
if (window.appTabbedManager) window.appTabbedManager.switchTab('tasks');
|
||||
} catch (err) {
|
||||
applyBtn.disabled = false; applyBtn.textContent = 'Apply';
|
||||
console.error('Failed to queue gluetun routing tasks', err);
|
||||
}
|
||||
}},
|
||||
{ label: 'Cancel', variant: 'secondary' }
|
||||
]
|
||||
});
|
||||
if (apps.length === 0) {
|
||||
const applyBtn = m.contentEl.querySelectorAll('.eo-modal-footer .btn')[0];
|
||||
if (applyBtn) applyBtn.disabled = true;
|
||||
}
|
||||
},
|
||||
openMullvadGenerateModal() {
|
||||
const existing = document.getElementById('mullvad-generate-modal');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const mullvadIcon = (window.gluetunProviderIcons && window.gluetunProviderIcons.mullvad) || '/components/apps/core/icons/vpn/mullvad.svg';
|
||||
const bodyHtml = `
|
||||
<p class="eo-modal-section-text">
|
||||
Enter your 16-digit Mullvad account number. A new WireGuard key will be generated locally
|
||||
and registered with Mullvad — this consumes one of your 5 device slots.
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label for="mullvad-acct" style="display:block; margin-bottom:6px; font-size:13px;">Account number</label>
|
||||
<input type="text" id="mullvad-acct" class="form-input" placeholder="1234567890123456" autocomplete="off" inputmode="numeric">
|
||||
</div>
|
||||
<p class="mullvad-error" style="color: #f87171; font-size: 13px; margin: 8px 0 0 0; display:none;"></p>`;
|
||||
|
||||
const m = window.openEoModal({
|
||||
id: 'mullvad-generate-modal',
|
||||
size: 'sm',
|
||||
icon: mullvadIcon,
|
||||
iconAlt: 'Mullvad',
|
||||
eyebrow: 'Provider',
|
||||
title: 'Generate Mullvad Config',
|
||||
body: bodyHtml,
|
||||
actions: [
|
||||
{ label: 'Generate', variant: 'primary', onClick: async (modal) => {
|
||||
const root = modal.contentEl;
|
||||
const errEl = root.querySelector('.mullvad-error');
|
||||
const confirmBtn = root.querySelectorAll('.eo-modal-footer .btn')[0];
|
||||
const acctEl = root.querySelector('#mullvad-acct');
|
||||
const setError = (msg) => { errEl.textContent = msg || ''; errEl.style.display = msg ? '' : 'none'; };
|
||||
const account = (acctEl.value || '').replace(/\s+/g, '');
|
||||
if (!/^\d{16}$/.test(account)) { setError('Account number must be 16 digits.'); return; }
|
||||
setError('');
|
||||
confirmBtn.disabled = true; confirmBtn.textContent = 'Generating…';
|
||||
try {
|
||||
const res = await fetch('/api/gluetun/mullvad-wireguard', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ accountNumber: account })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok || !data.success) {
|
||||
setError(data.error || `Request failed (${res.status}).`);
|
||||
confirmBtn.disabled = false; confirmBtn.textContent = 'Generate';
|
||||
return;
|
||||
}
|
||||
const findField = (suffix) => (typeof ConfigOptions !== 'undefined' && ConfigOptions.findGluetunFieldEl) ? ConfigOptions.findGluetunFieldEl(suffix) : null;
|
||||
const setField = (suffix, value) => {
|
||||
const el = findField(suffix); if (!el) return;
|
||||
el.value = value;
|
||||
el.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
el.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
};
|
||||
setField('WIREGUARD_PRIVATE_KEY', data.privateKey);
|
||||
setField('WIREGUARD_ADDRESSES', data.addresses);
|
||||
modal.close();
|
||||
} catch (err) {
|
||||
setError(err.message || 'Network error.');
|
||||
confirmBtn.disabled = false; confirmBtn.textContent = 'Generate';
|
||||
}
|
||||
}},
|
||||
{ label: 'Cancel', variant: 'secondary' }
|
||||
]
|
||||
});
|
||||
m.contentEl.querySelector('#mullvad-acct').focus();
|
||||
},
|
||||
async shouldRecommendGluetun(appName, appData) {
|
||||
if (appName === 'gluetun') return false;
|
||||
if (this.checkServiceInstalled('gluetun')) return false;
|
||||
const overrideOn = this.checkRequirementEnabled?.('GLUETUN_FOR_ALL');
|
||||
if (overrideOn) return true;
|
||||
if (!this._gluetunEligiblePromise) {
|
||||
this._gluetunEligiblePromise = (async () => {
|
||||
try {
|
||||
const r = await fetch('/data/apps/gluetun-eligible-categories.json', { cache: 'no-store' });
|
||||
if (!r.ok) return new Set();
|
||||
const j = await r.json();
|
||||
return new Set((j.categories || []).map((c) => String(c).toLowerCase()));
|
||||
} catch { return new Set(); }
|
||||
})();
|
||||
}
|
||||
const allow = await this._gluetunEligiblePromise;
|
||||
const cat = String(appData?.category || '').toLowerCase();
|
||||
return allow.has(cat);
|
||||
},
|
||||
showGluetunRecommendModal(appName, appData) {
|
||||
const existing = document.getElementById('gluetun-recommend-modal');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const displayName = appData?.name?.split(' - ')[0]?.trim() || appName;
|
||||
let icon = appData?.icon || `/core/icons/apps/${appName}.svg`;
|
||||
if (icon && !icon.startsWith('/')) icon = '/' + icon;
|
||||
|
||||
const bodyHtml = `
|
||||
<div class="eo-empty-state warning" role="status">
|
||||
<div class="eo-empty-state-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="eo-empty-state-body">
|
||||
<p class="eo-empty-state-title">Apps in this category usually benefit from VPN routing</p>
|
||||
<p class="eo-empty-state-text">Without Gluetun, this app's outbound traffic uses your real public IP — exposing activity to ISPs, copyright trackers, and the destination services.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
window.openEoModal({
|
||||
id: 'gluetun-recommend-modal',
|
||||
size: 'sm',
|
||||
icon,
|
||||
iconAlt: displayName,
|
||||
eyebrow: 'About to install',
|
||||
title: displayName,
|
||||
desc: 'VPN routing is recommended for this app.',
|
||||
body: bodyHtml,
|
||||
actions: [
|
||||
{ label: 'Install Gluetun first', variant: 'primary', onClick: (modal) => {
|
||||
modal.close();
|
||||
this.showAppDetailWithConfig('gluetun');
|
||||
}},
|
||||
{ label: 'Continue without VPN', variant: 'secondary', onClick: (modal) => {
|
||||
modal.close();
|
||||
this.executeInstall(appName, false);
|
||||
}}
|
||||
]
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,49 @@
|
||||
// Auto-extracted from apps-manager.js (verbatim) — augments AppsManager.prototype. Loaded after the base.
|
||||
Object.assign(AppsManager.prototype, {
|
||||
// Terminal logging functions with old styling
|
||||
addLogMessage(message, type = 'info') {
|
||||
const messageLog = document.getElementById('message-log');
|
||||
if (!messageLog) return;
|
||||
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const messageLine = document.createElement('div');
|
||||
messageLine.className = `log-entry ${type}`;
|
||||
messageLine.innerHTML = `<span class="log-timestamp">[${timestamp}]</span> ${message}`;
|
||||
|
||||
messageLog.appendChild(messageLine);
|
||||
// Only scroll to bottom if user hasn't scrolled up
|
||||
if (messageLog.scrollTop >= messageLog.scrollHeight - messageLog.clientHeight - 50) {
|
||||
messageLog.scrollTop = messageLog.scrollHeight;
|
||||
}
|
||||
},
|
||||
addSuccessLog(message) {
|
||||
this.addLogMessage(message, 'success');
|
||||
},
|
||||
addErrorLog(message) {
|
||||
this.addLogMessage(message, 'error');
|
||||
},
|
||||
addWarningLog(message) {
|
||||
this.addLogMessage(message, 'warning');
|
||||
},
|
||||
addInfoLog(message) {
|
||||
this.addLogMessage(message, 'info');
|
||||
},
|
||||
clearConsole() {
|
||||
const messageLog = document.getElementById('message-log');
|
||||
if (!messageLog) return;
|
||||
|
||||
messageLog.innerHTML = '<div class="log-entry info"><span class="log-timestamp">[' + new Date().toLocaleTimeString() + ']</span> Console cleared...</div>';
|
||||
messageLog.scrollTop = 0; // Force to top
|
||||
},
|
||||
initializeConsole() {
|
||||
const messageLog = document.getElementById('message-log');
|
||||
if (messageLog) {
|
||||
messageLog.scrollTop = 0; // Force scroll to top
|
||||
messageLog.innerHTML = ''; // Clear any existing content
|
||||
// Add initial message after a tiny delay to ensure it renders at top
|
||||
setTimeout(() => {
|
||||
this.addInfoLog('Application configuration loaded successfully');
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,99 @@
|
||||
// Auto-extracted from apps-manager.js (verbatim) — augments AppsManager.prototype. Loaded after the base.
|
||||
Object.assign(AppsManager.prototype, {
|
||||
// Initialize port managers after DOM is ready
|
||||
async initializePortManagers() {
|
||||
//// // console.log('🔌 Looking for port manager containers...');
|
||||
const portContainers = document.querySelectorAll('.port-manager-container');
|
||||
//// // console.log(`🔌 Found ${portContainers.length} port manager containers`);
|
||||
|
||||
// Group port containers by app
|
||||
const appPortContainers = {};
|
||||
for (const container of portContainers) {
|
||||
const appName = container.dataset.appName;
|
||||
if (!appPortContainers[appName]) {
|
||||
appPortContainers[appName] = [];
|
||||
}
|
||||
appPortContainers[appName].push(container);
|
||||
}
|
||||
|
||||
// Create one consolidated port manager per app
|
||||
for (const [appName, containers] of Object.entries(appPortContainers)) {
|
||||
//// // console.log(`🔌 Creating consolidated port manager for app: ${appName} with ${containers.length} port fields`);
|
||||
|
||||
try {
|
||||
// Get all port configurations for this app
|
||||
const appConfig = this.getCurrentAppConfig();
|
||||
const allPortConfigs = this.getAllPortConfigs(appConfig, appName);
|
||||
|
||||
// Create consolidated port manager
|
||||
const portManager = new PortManager();
|
||||
const html = portManager.generateHTML(appName, allPortConfigs);
|
||||
|
||||
// Replace the first container with the consolidated port manager
|
||||
const firstContainer = containers[0];
|
||||
firstContainer.innerHTML = html;
|
||||
|
||||
// Hide other port containers (PORT_2, PORT_3, etc.) and their labels
|
||||
for (let i = 1; i < containers.length; i++) {
|
||||
const container = containers[i];
|
||||
const formField = container.closest('.form-field');
|
||||
if (formField) {
|
||||
formField.style.display = 'none';
|
||||
} else {
|
||||
container.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Hide labels and help text for the first port container
|
||||
this.hidePortFieldLabels(containers[0]);
|
||||
|
||||
// Initialize port manager with services
|
||||
await portManager.initialize(appName);
|
||||
//// // console.log(`🔌 Consolidated port manager initialized successfully for ${appName}`);
|
||||
} catch (error) {
|
||||
console.error(`Error initializing consolidated port manager for ${appName}:`, error);
|
||||
containers[0].innerHTML = `<div class="error">Failed to initialize port manager: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
// Hide labels and help text for port field containers
|
||||
hidePortFieldLabels(container) {
|
||||
const formField = container.closest('.form-field');
|
||||
if (formField) {
|
||||
// Hide the label
|
||||
const label = formField.querySelector('label.form-label');
|
||||
if (label) {
|
||||
label.style.display = 'none';
|
||||
}
|
||||
|
||||
// Hide the help text
|
||||
const helpText = formField.querySelector('small.form-help');
|
||||
if (helpText) {
|
||||
helpText.style.display = 'none';
|
||||
}
|
||||
|
||||
// Hide any help icons
|
||||
const helpIcons = formField.querySelectorAll('.help-icon');
|
||||
helpIcons.forEach(icon => {
|
||||
icon.style.display = 'none';
|
||||
});
|
||||
}
|
||||
},
|
||||
// Get all port configurations for an app
|
||||
getAllPortConfigs(appConfig, appName) {
|
||||
const portConfigs = [];
|
||||
const portPrefix = `CFG_${appName.toUpperCase()}_PORT_`;
|
||||
Object.keys(appConfig).forEach(key => {
|
||||
if (key.startsWith(portPrefix)) {
|
||||
const configValue = appConfig[key];
|
||||
if (configValue && configValue.trim() !== '') {
|
||||
portConfigs.push(configValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Return as array — one CFG_<APP>_PORT_N value per element. The
|
||||
// port manager iterates this directly so commas inside fields
|
||||
// (multi-button labels / paths) stay meaningful and hand-editable.
|
||||
return portConfigs;
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,47 @@
|
||||
// Auto-extracted from apps-manager.js (verbatim) — augments AppsManager.prototype. Loaded after the base.
|
||||
Object.assign(AppsManager.prototype, {
|
||||
// Update service buttons sidebar with service data from apps-services.json
|
||||
async updateServiceButtonsSidebar(app, appName) {
|
||||
if (!window.serviceButtons) return;
|
||||
|
||||
try {
|
||||
// Update sidebar using the new ServiceButtons API
|
||||
await window.serviceButtons.updateSidebar(appName);
|
||||
} catch (error) {
|
||||
console.error('Error updating service buttons sidebar:', error);
|
||||
}
|
||||
},
|
||||
// Show service popup on hover
|
||||
async showServicePopup(event, appName) {
|
||||
if (!window.serviceButtons) return;
|
||||
|
||||
const popup = document.getElementById(`service-popup-${appName}`);
|
||||
if (!popup) return;
|
||||
|
||||
try {
|
||||
// Load services if not already loaded
|
||||
if (window.serviceButtons.services.length === 0) {
|
||||
await window.serviceButtons.loadServices();
|
||||
}
|
||||
|
||||
// Generate buttons HTML
|
||||
const buttonsHTML = await window.serviceButtons.generateButtonsHTML(appName);
|
||||
const content = popup.querySelector('.service-popup-content');
|
||||
if (content) {
|
||||
content.innerHTML = buttonsHTML;
|
||||
}
|
||||
|
||||
// Show popup
|
||||
popup.style.display = 'block';
|
||||
} catch (error) {
|
||||
console.error('Error showing service popup:', error);
|
||||
}
|
||||
},
|
||||
// Hide service popup
|
||||
hideServicePopup() {
|
||||
const popups = document.querySelectorAll('.service-popup');
|
||||
popups.forEach(popup => {
|
||||
popup.style.display = 'none';
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -219,7 +219,15 @@ class SystemLoader {
|
||||
'/components/apps/services/js/services-manager.js',
|
||||
'/components/apps/tools/js/tools-manager.js',
|
||||
'/components/apps/routing/js/routing-manager.js',
|
||||
'/components/apps/core/js/apps-manager.js'
|
||||
'/components/apps/core/js/apps-manager.js', // base: class + constructor + orchestration + ServiceButtons + bootstrap (+ install-dispatch, kept inline)
|
||||
// prototype-augment clusters (load after base; ordered via async=false):
|
||||
'/components/apps/core/js/apps-grid.js',
|
||||
'/components/apps/core/js/config-form.js',
|
||||
'/components/apps/core/js/port-manager-integration.js',
|
||||
'/components/apps/core/js/gluetun-vpn.js',
|
||||
'/components/apps/core/js/config-dirty-guard.js',
|
||||
'/components/apps/core/js/install-console.js',
|
||||
'/components/apps/core/js/service-buttons-sidebar.js'
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user