gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cyberpunk Updates view with debug (v1.0.0-13)

Browse Source 
Complete cyberpunk transformation with console logging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-01-04 17:23:43 +01:00
parent d18222dec8
commit 9801631580
2 changed files with 130 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/secubox/luci-app-secubox-admin/Makefile
View File

@ -2,7 +2,7 @@ include $(TOPDIR)/rules.mk
PKG_NAME:=luci-app-secubox-admin PKG_NAME:=luci-app-secubox-admin
PKG_VERSION:=1.0.0 PKG_VERSION:=1.0.0
PKG_RELEASE:=12 PKG_RELEASE:=13
PKG_LICENSE:=MIT PKG_LICENSE:=MIT
PKG_MAINTAINER:=CyberMind <contact@cybermind.fr> PKG_MAINTAINER:=CyberMind <contact@cybermind.fr>

342
package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/updates.js
View File

@ -7,83 +7,116 @@
return view.extend({ return view.extend({
load: function() { load: function() {
console.log('[UPDATES] Loading data...');
return Promise.all([ return Promise.all([
L.resolveDefault(API.checkUpdates(), { updates: [] }), L.resolveDefault(API.checkUpdates(), { updates: [] }),
API.getApps(), L.resolveDefault(API.getApps(), { apps: [] }),
API.getModules() L.resolveDefault(API.getModules(), { modules: {} })
]); ]).then(function(results) {
console.log('[UPDATES] Data loaded:', {
updates: results[0],
apps: results[1],
modules: results[2]
});
return results;
}).catch(function(err) {
console.error('[UPDATES] Load error:', err);
return [{ updates: [] }, { apps: [] }, { modules: {} }];
});
}, },
render: function(data) { render: function(data) {
console.log('[UPDATES] Rendering with data:', data);
var updateData = data[0] || {}; var updateData = data[0] || {};
var apps = data[1].apps || []; var apps = data[1].apps || [];
var modules = data[2].modules || {}; var modules = data[2].modules || {};
var self = this; var self = this;
// Filter apps that have updates available
var updatesAvailable = updateData.updates || []; var updatesAvailable = updateData.updates || [];
var totalUpdates = updatesAvailable.length; var totalUpdates = updatesAvailable.length;
var container = E('div', { 'class': 'secubox-updates' }, [ console.log('[UPDATES] Total updates available:', totalUpdates);
var container = E('div', { 'class': 'cyberpunk-mode secubox-updates' }, [
E('link', { 'rel': 'stylesheet', E('link', { 'rel': 'stylesheet',
'href': L.resource('secubox-admin/common.css') }), 'href': L.resource('secubox-admin/common.css') }),
E('link', { 'rel': 'stylesheet', E('link', { 'rel': 'stylesheet',
'href': L.resource('secubox-admin/admin.css') }), 'href': L.resource('secubox-admin/admin.css') }),
E('link', { 'rel': 'stylesheet',
'href': L.resource('secubox-admin/cyberpunk.css') }),
E('h2', {}, 'Available Updates'), // Cyberpunk header
E('p', {}, 'Review and install available updates for SecuBox applications'), E('div', { 'class': 'cyber-header' }, [
E('div', { 'class': 'cyber-header-title' }, '⚡ AVAILABLE UPDATES'),
E('div', { 'class': 'cyber-header-subtitle' },
totalUpdates + ' update' + (totalUpdates !== 1 ? 's' : '') + ' available · Keep your system current')
]),
// Summary header // Summary stats panel
E('div', { 'class': 'updates-summary' }, [ E('div', { 'class': 'cyber-panel' }, [
E('div', { 'class': 'summary-card' }, [ E('div', { 'class': 'cyber-panel-header' }, [
E('div', { 'class': 'summary-icon' }, '📦'), E('span', { 'class': 'cyber-panel-title' }, 'UPDATE STATUS'),
E('div', { 'class': 'summary-info' }, [ E('span', { 'class': 'cyber-panel-badge ' + (totalUpdates > 0 ? 'warning' : 'success') },
E('div', { 'class': 'summary-count' }, totalUpdates.toString()), totalUpdates > 0 ? totalUpdates + ' PENDING' : 'UP TO DATE')
E('div', { 'class': 'summary-label' }, totalUpdates === 1 ? 'Update Available' : 'Updates Available')
])
]), ]),
E('div', { 'class': 'summary-actions' }, [ E('div', { 'class': 'cyber-panel-body' }, [
totalUpdates > 0 ? E('button', { E('div', { 'class': 'cyber-quick-actions' }, [
'class': 'btn btn-primary', totalUpdates > 0 ? E('button', {
'click': function() { 'class': 'cyber-action-btn',
self.updateAllApps(updatesAvailable); 'click': function() {
} console.log('[UPDATES] Update all apps');
}, 'Update All') : null, self.updateAllApps(updatesAvailable);
E('button', { }
'class': 'btn btn-secondary', }, [
'click': function() { E('span', { 'class': 'cyber-action-icon' }, '⚡'),
self.checkForUpdates(); E('span', { 'class': 'cyber-action-label' }, 'UPDATE ALL (' + totalUpdates + ')'),
} E('span', { 'class': 'cyber-action-arrow' }, '→')
}, 'Check for Updates') ]) : null,
E('button', {
'class': 'cyber-action-btn',
'click': function() {
console.log('[UPDATES] Check for updates');
self.checkForUpdates();
}
}, [
E('span', { 'class': 'cyber-action-icon' }, '🔍'),
E('span', { 'class': 'cyber-action-label' }, 'CHECK FOR UPDATES'),
E('span', { 'class': 'cyber-action-arrow' }, '→')
])
])
]) ])
]), ]),
// Updates list // Updates list
totalUpdates > 0 ? totalUpdates > 0 ?
E('div', { 'class': 'updates-list', 'id': 'updates-list' }, E('div', { 'class': 'cyber-list', 'id': 'updates-list' },
updatesAvailable.map(function(update) { updatesAvailable.map(function(update) {
// Find full app details from catalog
var app = apps.find(function(a) { return a.id === update.app_id; }); var app = apps.find(function(a) { return a.id === update.app_id; });
console.log('[UPDATES] Rendering update for:', update.app_id);
return self.renderUpdateCard(update, app); return self.renderUpdateCard(update, app);
}) })
) : ) :
E('div', { 'class': 'no-updates' }, [ E('div', { 'class': 'cyber-panel' }, [
E('div', { 'class': 'no-updates-icon' }, '✓'), E('div', { 'class': 'cyber-panel-body', 'style': 'text-align: center; padding: 40px;' }, [
E('h3', {}, 'All applications are up to date'), E('div', { 'style': 'font-size: 48px; margin-bottom: 20px;' }, '✓'),
E('p', {}, 'Check back later for new updates or click "Check for Updates" to refresh.') E('div', { 'style': 'color: var(--cyber-primary); font-size: 18px; margin-bottom: 10px;' },
'ALL APPLICATIONS UP TO DATE'),
E('div', { 'style': 'color: var(--cyber-text-dim); font-size: 12px;' },
'Check back later or click "CHECK FOR UPDATES"')
])
]) ])
]); ]);
// Auto-refresh every 60 seconds // Auto-refresh every 60s
poll.add(function() { poll.add(function() {
console.log('[UPDATES] Polling for updates...');
return API.checkUpdates().then(function(result) { return API.checkUpdates().then(function(result) {
var updatesList = document.getElementById('updates-list'); if ((result.updates || []).length !== totalUpdates) {
if (updatesList && result.updates) { console.log('[UPDATES] Update count changed, reloading');
// Only update if count changed window.location.reload();
if (result.updates.length !== totalUpdates) {
window.location.reload();
}
} }
}).catch(function(err) {
console.error('[UPDATES] Poll error:', err);
}); });
}, 60); }, 60);
@ -94,184 +127,100 @@ return view.extend({
var self = this; var self = this;
if (!app) { if (!app) {
// App not found in catalog, show minimal info
app = { app = {
id: update.app_id, id: update.app_id,
name: update.app_id, name: update.app_id,
description: 'Application from catalog', description: 'Application',
icon: '📦' icon: '📦'
}; };
} }
return E('div', { 'class': 'update-card', 'data-app-id': update.app_id }, [ return E('div', { 'class': 'cyber-list-item', 'data-app-id': update.app_id }, [
// App header E('div', { 'class': 'cyber-list-icon' }, app.icon || '📦'),
E('div', { 'class': 'update-header' }, [ E('div', { 'class': 'cyber-list-content' }, [
E('div', { 'class': 'app-icon-large' }, app.icon || '📦'), E('div', { 'class': 'cyber-list-title' }, [
E('div', { 'class': 'app-title' }, [ app.name,
E('h3', {}, app.name), E('span', { 'class': 'cyber-badge warning' }, '⚡ UPDATE')
E('p', { 'class': 'app-category' }, app.category || 'Application')
]), ]),
E('div', { 'class': 'update-badge' }, [ E('div', { 'class': 'cyber-list-meta' }, [
E('span', { 'class': 'badge badge-warning' }, 'UPDATE AVAILABLE') E('span', { 'class': 'cyber-list-meta-item' }, [
E('span', {}, '📊 '),
'v' + (update.installed_version || '?') + ' → v' + (update.catalog_version || '?')
]),
E('span', { 'class': 'cyber-list-meta-item' }, [
E('span', {}, '📁 '),
app.category || 'application'
])
]) ])
]), ]),
E('div', { 'class': 'cyber-list-actions' }, [
// Version info
E('div', { 'class': 'version-info' }, [
E('div', { 'class': 'version-row' }, [
E('span', { 'class': 'version-label' }, 'Current Version:'),
E('span', { 'class': 'version-value current' }, update.installed_version || 'Unknown')
]),
E('div', { 'class': 'version-arrow' }, '→'),
E('div', { 'class': 'version-row' }, [
E('span', { 'class': 'version-label' }, 'New Version:'),
E('span', { 'class': 'version-value new' }, update.catalog_version || 'Unknown')
])
]),
// Changelog section
update.changelog ? E('div', { 'class': 'changelog-section' }, [
E('h4', {}, 'What\'s New'),
E('div', { 'class': 'changelog-content' },
this.renderChangelog(update.changelog)
)
]) : null,
// Update info
E('div', { 'class': 'update-meta' }, [
update.release_date ? E('div', { 'class': 'meta-item' }, [
E('span', { 'class': 'meta-label' }, 'Release Date:'),
E('span', { 'class': 'meta-value' }, update.release_date)
]) : null,
update.download_size ? E('div', { 'class': 'meta-item' }, [
E('span', { 'class': 'meta-label' }, 'Download Size:'),
E('span', { 'class': 'meta-value' }, API.formatBytes(update.download_size))
]) : null
]),
// Actions
E('div', { 'class': 'update-actions' }, [
E('button', { E('button', {
'class': 'btn btn-primary', 'class': 'cyber-btn warning',
'click': function() { 'click': function() {
console.log('[UPDATES] Update app:', update.app_id);
self.updateApp(update.app_id, app.name); self.updateApp(update.app_id, app.name);
} }
}, 'Update Now'), }, '⚡ UPDATE'),
E('button', { E('button', {
'class': 'btn btn-secondary', 'class': 'cyber-btn',
'click': function() { 'click': function() {
console.log('[UPDATES] View changelog:', update.app_id);
self.viewFullChangelog(update.app_id, update.installed_version, update.catalog_version); self.viewFullChangelog(update.app_id, update.installed_version, update.catalog_version);
} }
}, 'View Full Changelog'), }, '📋 CHANGELOG')
E('button', {
'class': 'btn btn-tertiary',
'click': function() {
self.skipUpdate(update.app_id);
}
}, 'Skip This Version')
]) ])
]); ]);
}, },
renderChangelog: function(changelog) {
if (typeof changelog === 'string') {
return E('p', {}, changelog);
}
if (Array.isArray(changelog)) {
return E('ul', { 'class': 'changelog-list' },
changelog.map(function(item) {
return E('li', {}, item);
})
);
}
// Object with version keys
var versions = Object.keys(changelog);
if (versions.length > 0) {
var latestVersion = versions[0];
var changes = changelog[latestVersion].changes || [];
return E('ul', { 'class': 'changelog-list' },
changes.map(function(item) {
return E('li', {}, item);
})
);
}
return E('p', {}, 'No changelog available');
},
updateApp: function(appId, appName) { updateApp: function(appId, appName) {
ui.showModal(_('Updating Application'), [ console.log('[UPDATES] Updating app:', appId);
E('p', { 'class': 'spinning' }, _('Updating %s...').format(appName)) ui.showModal('Updating Application', [
Components.renderLoader('Updating ' + appName + '...')
]); ]);
API.installApp(appId).then(function(result) { API.installApp(appId).then(function(result) {
console.log('[UPDATES] Update result:', result);
ui.hideModal(); ui.hideModal();
if (result.success) { if (result.success) {
ui.addNotification(null, ui.addNotification(null, E('p', appName + ' updated successfully'), 'success');
E('p', _('%s updated successfully').format(appName)), setTimeout(function() { window.location.reload(); }, 1000);
'success'
);
// Refresh the page to show updated status
setTimeout(function() {
window.location.reload();
}, 1000);
} else { } else {
ui.addNotification(null, ui.addNotification(null, E('p', 'Update failed: ' + (result.error || 'Unknown')), 'error');
E('p', _('Update failed: %s').format(result.error || 'Unknown error')),
'error'
);
} }
}).catch(function(err) { }).catch(function(err) {
console.error('[UPDATES] Update error:', err);
ui.hideModal(); ui.hideModal();
ui.addNotification(null, ui.addNotification(null, E('p', 'Update error: ' + err.message), 'error');
E('p', _('Update error: %s').format(err.message)),
'error'
);
}); });
}, },
updateAllApps: function(updates) { updateAllApps: function(updates) {
console.log('[UPDATES] Updating all apps:', updates.length);
if (updates.length === 0) return; if (updates.length === 0) return;
ui.showModal(_('Updating Applications'), [ ui.showModal('Updating Applications', [
E('p', { 'class': 'spinning' }, _('Updating %d applications...').format(updates.length)), Components.renderLoader('Updating ' + updates.length + ' applications...')
E('p', { 'id': 'update-progress' }, _('Preparing...'))
]); ]);
var self = this;
var currentIndex = 0; var currentIndex = 0;
function updateNext() { function updateNext() {
if (currentIndex >= updates.length) { if (currentIndex >= updates.length) {
ui.hideModal(); ui.hideModal();
ui.addNotification(null, ui.addNotification(null, E('p', 'All applications updated'), 'success');
E('p', _('All applications updated successfully')), setTimeout(function() { window.location.reload(); }, 1000);
'success'
);
setTimeout(function() {
window.location.reload();
}, 1000);
return; return;
} }
var update = updates[currentIndex]; var update = updates[currentIndex];
var progressEl = document.getElementById('update-progress'); console.log('[UPDATES] Batch update:', update.app_id, '(' + (currentIndex + 1) + '/' + updates.length + ')');
if (progressEl) {
progressEl.textContent = _('Updating %s (%d/%d)...') API.installApp(update.app_id).then(function() {
.format(update.app_id, currentIndex + 1, updates.length);
}
API.installApp(update.app_id).then(function(result) {
currentIndex++; currentIndex++;
updateNext(); updateNext();
}).catch(function(err) { }).catch(function(err) {
console.error('[UPDATES] Batch update error:', err);
ui.hideModal(); ui.hideModal();
ui.addNotification(null, ui.addNotification(null, E('p', 'Failed: ' + update.app_id), 'error');
E('p', _('Failed to update %s: %s').format(update.app_id, err.message)),
'error'
);
}); });
} }
@ -279,70 +228,37 @@ return view.extend({
}, },
viewFullChangelog: function(appId, fromVersion, toVersion) { viewFullChangelog: function(appId, fromVersion, toVersion) {
console.log('[UPDATES] Viewing changelog:', appId, fromVersion, '→', toVersion);
API.getChangelog(appId, fromVersion, toVersion).then(function(changelog) { API.getChangelog(appId, fromVersion, toVersion).then(function(changelog) {
var content = E('div', { 'class': 'changelog-modal' }, [ ui.showModal('Changelog: ' + appId, [
E('h3', {}, _('Changelog for %s').format(appId)), E('pre', {}, JSON.stringify(changelog, null, 2)),
E('div', { 'class': 'version-range' },
_('Changes from %s to %s').format(fromVersion, toVersion)
),
E('div', { 'class': 'changelog-full' },
// Render full changelog
typeof changelog === 'string' ?
E('pre', {}, changelog) :
JSON.stringify(changelog, null, 2)
)
]);
ui.showModal(_('Full Changelog'), [
content,
E('div', { 'class': 'right' }, [ E('div', { 'class': 'right' }, [
E('button', { E('button', { 'class': 'btn', 'click': ui.hideModal }, 'Close')
'class': 'btn',
'click': function() {
ui.hideModal();
}
}, _('Close'))
]) ])
]); ]);
}).catch(function(err) { }).catch(function(err) {
ui.addNotification(null, console.error('[UPDATES] Changelog error:', err);
E('p', _('Failed to load changelog: %s').format(err.message)), ui.addNotification(null, E('p', 'Changelog failed: ' + err.message), 'error');
'error'
);
}); });
}, },
skipUpdate: function(appId) {
// TODO: Implement skip version functionality
// This would mark the version as skipped in metadata
ui.addNotification(null,
E('p', _('Skipped update for: %s').format(appId)),
'info'
);
},
checkForUpdates: function() { checkForUpdates: function() {
ui.showModal(_('Checking for Updates'), [ console.log('[UPDATES] Checking for updates');
E('p', { 'class': 'spinning' }, _('Checking for available updates...')) ui.showModal('Checking for Updates', [
Components.renderLoader('Syncing catalog and checking for updates...')
]); ]);
// Sync catalog first, then check for updates
API.syncCatalog(null).then(function() { API.syncCatalog(null).then(function() {
return API.checkUpdates(); return API.checkUpdates();
}).then(function(result) { }).then(function(result) {
console.log('[UPDATES] Check result:', result);
ui.hideModal(); ui.hideModal();
ui.addNotification(null, ui.addNotification(null, E('p', 'Found ' + (result.updates || []).length + ' updates'), 'success');
E('p', _('Update check complete. Found %d updates.')
.format((result.updates || []).length)),
'success'
);
window.location.reload(); window.location.reload();
}).catch(function(err) { }).catch(function(err) {
console.error('[UPDATES] Check error:', err);
ui.hideModal(); ui.hideModal();
ui.addNotification(null, ui.addNotification(null, E('p', 'Check failed: ' + err.message), 'error');
E('p', _('Update check failed: %s').format(err.message)),
'error'
);
}); });
}, },