357 lines
12 KiB
Plaintext
357 lines
12 KiB
Plaintext
|
/**
|
||
|
|
* SecuBox Help Button Integration Example
|
||
|
|
*
|
||
|
|
* This file demonstrates how to integrate help buttons into SecuBox modules
|
||
|
|
* to link with the deployed website documentation.
|
||
|
|
*
|
||
|
|
* Version: 1.0
|
||
|
|
* Date: 2025-12-28
|
||
|
|
*/
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 1: Shared Help Utility (Recommended)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// File: luci-app-secubox/htdocs/luci-static/resources/secubox/help.js
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
'require baseclass';
|
||
|
|
|
||
|
|
return baseclass.extend({
|
||
|
|
/**
|
||
|
|
* Create a help button element
|
||
|
|
* @param {string} moduleName - Module identifier (e.g., 'network-modes')
|
||
|
|
* @param {string} position - Button position: 'header', 'footer', 'floating'
|
||
|
|
* @param {object} options - Custom options
|
||
|
|
*/
|
||
|
|
createHelpButton: function(moduleName, position, options) {
|
||
|
|
var opts = options || {};
|
||
|
|
var helpUrl = this.getHelpUrl(moduleName);
|
||
|
|
var buttonClass = 'sb-help-btn sb-help-' + position;
|
||
|
|
|
||
|
|
return E('a', {
|
||
|
|
'class': buttonClass,
|
||
|
|
'href': helpUrl,
|
||
|
|
'target': opts.target || '_blank',
|
||
|
|
'title': opts.title || _('View Help & Documentation'),
|
||
|
|
'style': opts.style || ''
|
||
|
|
}, [
|
||
|
|
E('span', { 'class': 'sb-help-icon' }, opts.icon || '❓'),
|
||
|
|
opts.showLabel !== false ? E('span', { 'class': 'sb-help-label' }, opts.label || _('Help')) : null
|
||
|
|
]);
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get help URL for a module
|
||
|
|
* @param {string} moduleName - Module identifier
|
||
|
|
*/
|
||
|
|
getHelpUrl: function(moduleName) {
|
||
|
|
var baseUrl = '/luci-static/secubox/';
|
||
|
|
var moduleMap = {
|
||
|
|
'secubox': 'index.html#modules',
|
||
|
|
'system-hub': 'demo-secubox-hub.html',
|
||
|
|
'network-modes': 'demo-network-modes.html',
|
||
|
|
'client-guardian': 'demo-client-guardian.html',
|
||
|
|
'bandwidth-manager': 'demo-bandwidth.html',
|
||
|
|
'cdn-cache': 'demo-cdn-cache.html',
|
||
|
|
'traffic-shaper': 'demo-traffic-shaper.html',
|
||
|
|
'wireguard-dashboard': 'demo-wireguard.html',
|
||
|
|
'crowdsec-dashboard': 'demo-crowdsec.html',
|
||
|
|
'netdata-dashboard': 'demo-netdata.html',
|
||
|
|
'netifyd-dashboard': 'demo-netifyd.html',
|
||
|
|
'auth-guardian': 'demo-auth.html',
|
||
|
|
'vhost-manager': 'demo-vhost.html',
|
||
|
|
'ksm-manager': 'demo-ksm-manager.html',
|
||
|
|
'media-flow': 'demo-media.html'
|
||
|
|
};
|
||
|
|
|
||
|
|
return baseUrl + (moduleMap[moduleName] || 'index.html');
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Open help in modal (for inline help)
|
||
|
|
* @param {string} moduleName - Module identifier
|
||
|
|
*/
|
||
|
|
openHelpModal: function(moduleName) {
|
||
|
|
var helpUrl = this.getHelpUrl(moduleName);
|
||
|
|
var iframe = E('iframe', {
|
||
|
|
'src': helpUrl,
|
||
|
|
'style': 'width: 100%; height: 70vh; border: none; border-radius: 8px;'
|
||
|
|
});
|
||
|
|
|
||
|
|
ui.showModal(_('Help & Documentation'), [
|
||
|
|
E('div', { 'style': 'min-height: 70vh;' }, [iframe]),
|
||
|
|
E('div', { 'class': 'right', 'style': 'margin-top: 1rem;' }, [
|
||
|
|
E('button', {
|
||
|
|
'class': 'btn',
|
||
|
|
'click': ui.hideModal
|
||
|
|
}, _('Close'))
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 2: Module Integration (Network Modes)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// File: luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
'require view';
|
||
|
|
'require dom';
|
||
|
|
'require ui';
|
||
|
|
'require network-modes.api as api';
|
||
|
|
'require secubox/help as Help'; // ← ADD THIS LINE
|
||
|
|
|
||
|
|
return view.extend({
|
||
|
|
title: _('Network Modes'),
|
||
|
|
|
||
|
|
load: function() {
|
||
|
|
return api.getAllData();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function(data) {
|
||
|
|
var self = this;
|
||
|
|
var status = data.status || {};
|
||
|
|
var currentMode = status.current_mode || 'router';
|
||
|
|
|
||
|
|
var view = E('div', { 'class': 'network-modes-dashboard' }, [
|
||
|
|
// Load help CSS
|
||
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/help.css') }),
|
||
|
|
|
||
|
|
// Header with help button
|
||
|
|
E('div', { 'class': 'nm-header' }, [
|
||
|
|
E('div', { 'class': 'nm-logo' }, [
|
||
|
|
E('div', { 'class': 'nm-logo-icon' }, '🌐'),
|
||
|
|
E('div', { 'class': 'nm-logo-text' }, ['Network ', E('span', {}, 'Configuration')])
|
||
|
|
]),
|
||
|
|
E('div', { 'class': 'nm-mode-badge ' + currentMode }, [
|
||
|
|
E('span', { 'class': 'nm-mode-dot' }),
|
||
|
|
currentMode
|
||
|
|
]),
|
||
|
|
// ← ADD HELP BUTTON HERE
|
||
|
|
Help.createHelpButton('network-modes', 'header', {
|
||
|
|
icon: '📖',
|
||
|
|
label: _('Help')
|
||
|
|
})
|
||
|
|
]),
|
||
|
|
|
||
|
|
// Rest of the dashboard...
|
||
|
|
]);
|
||
|
|
|
||
|
|
return view;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 3: SecuBox Dashboard Integration (Quick Actions)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// File: luci-app-secubox/htdocs/luci-static/resources/view/secubox/dashboard.js
|
||
|
|
// Add to renderQuickActions method
|
||
|
|
|
||
|
|
renderQuickActions: function() {
|
||
|
|
var self = this;
|
||
|
|
var actions = [
|
||
|
|
{ name: 'restart_rpcd', label: 'RPCD', icon: '🔄', color: '#6366f1' },
|
||
|
|
{ name: 'restart_uhttpd', label: 'Web Server', icon: '🌐', color: '#00ab44' },
|
||
|
|
{ name: 'restart_network', label: 'Network', icon: '📡', color: '#06b6d4' },
|
||
|
|
{ name: 'restart_firewall', label: 'Firewall', icon: '🛡️', color: '#ef4444' },
|
||
|
|
{ name: 'clear_cache', label: 'Clear Cache', icon: '🧹', color: '#f59e0b' },
|
||
|
|
{ name: 'backup_config', label: 'Backup', icon: '💾', color: '#8b5cf6' }
|
||
|
|
];
|
||
|
|
|
||
|
|
var buttons = actions.map(function(action) {
|
||
|
|
return E('button', {
|
||
|
|
'class': 'secubox-action-btn',
|
||
|
|
'style': 'border-color: ' + action.color,
|
||
|
|
'click': function() {
|
||
|
|
self.executeQuickAction(action.name, action.label);
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
E('span', { 'class': 'secubox-action-icon' }, action.icon),
|
||
|
|
E('span', { 'class': 'secubox-action-label' }, action.label)
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
// ← ADD HELP BUTTON TO QUICK ACTIONS
|
||
|
|
buttons.push(
|
||
|
|
E('button', {
|
||
|
|
'class': 'secubox-action-btn',
|
||
|
|
'style': 'border-color: #667eea',
|
||
|
|
'click': function() {
|
||
|
|
window.open('/luci-static/secubox/index.html#modules', '_blank');
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
E('span', { 'class': 'secubox-action-icon' }, '📖'),
|
||
|
|
E('span', { 'class': 'secubox-action-label' }, _('Help'))
|
||
|
|
])
|
||
|
|
);
|
||
|
|
|
||
|
|
return E('div', { 'class': 'secubox-card' }, [
|
||
|
|
E('h3', { 'class': 'secubox-card-title' }, '⚡ Quick Actions'),
|
||
|
|
E('div', { 'class': 'secubox-actions-grid' }, buttons)
|
||
|
|
]);
|
||
|
|
},
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 4: System Hub Integration (Header Badge Style)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// File: luci-app-system-hub/htdocs/luci-static/resources/view/system-hub/overview.js
|
||
|
|
// Modify renderHeader method
|
||
|
|
|
||
|
|
renderHeader: function() {
|
||
|
|
var score = this.healthData.score || 0;
|
||
|
|
var scoreClass = score >= 80 ? 'excellent' : (score >= 60 ? 'good' : 'warning');
|
||
|
|
var scoreLabel = score >= 80 ? 'Excellent' : (score >= 60 ? 'Good' : 'Warning');
|
||
|
|
|
||
|
|
return E('div', { 'class': 'sh-dashboard-header' }, [
|
||
|
|
E('div', { 'class': 'sh-dashboard-header-content' }, [
|
||
|
|
E('div', {}, [
|
||
|
|
E('h2', {}, '⚙️ System Control Center'),
|
||
|
|
E('p', { 'class': 'sh-dashboard-subtitle' }, 'System Monitoring & Management Center')
|
||
|
|
]),
|
||
|
|
E('div', { 'class': 'sh-dashboard-header-info' }, [
|
||
|
|
E('div', { 'class': 'sh-header-badge-group' }, [
|
||
|
|
E('span', { 'class': 'sh-dashboard-badge sh-dashboard-badge-version' },
|
||
|
|
'v0.3.6'),
|
||
|
|
E('span', { 'class': 'sh-dashboard-badge' },
|
||
|
|
'⏱️ ' + (this.sysInfo.uptime_formatted || '0d 0h 0m')),
|
||
|
|
E('span', { 'class': 'sh-dashboard-badge' },
|
||
|
|
'🖥️ ' + (this.sysInfo.hostname || 'OpenWrt')),
|
||
|
|
// ← ADD HELP BADGE
|
||
|
|
E('a', {
|
||
|
|
'class': 'sh-dashboard-badge sh-help-badge',
|
||
|
|
'href': '/luci-static/secubox/demo-secubox-hub.html',
|
||
|
|
'target': '_blank',
|
||
|
|
'title': _('View Help')
|
||
|
|
}, '📖 Help')
|
||
|
|
]),
|
||
|
|
this.renderHealthGauge(score, scoreClass, scoreLabel)
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
},
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 5: Floating Help Button (Global)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// Add to any module's render method for a floating help button
|
||
|
|
|
||
|
|
render: function(data) {
|
||
|
|
var container = E('div', { 'class': 'module-dashboard' }, [
|
||
|
|
// ... module content ...
|
||
|
|
|
||
|
|
// ← ADD FLOATING HELP BUTTON
|
||
|
|
E('a', {
|
||
|
|
'class': 'sb-help-floating',
|
||
|
|
'href': '/luci-static/secubox/demo-module.html',
|
||
|
|
'target': '_blank',
|
||
|
|
'title': _('Help & Documentation')
|
||
|
|
}, [
|
||
|
|
E('span', { 'class': 'sb-help-icon' }, '❓')
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
|
||
|
|
return container;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 6: Inline Modal Help
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// Use Help.openHelpModal() for inline help
|
||
|
|
|
||
|
|
E('button', {
|
||
|
|
'class': 'btn cbi-button-action',
|
||
|
|
'click': function() {
|
||
|
|
Help.openHelpModal('network-modes');
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
E('span', {}, '❓ '),
|
||
|
|
_('Help')
|
||
|
|
])
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// EXAMPLE 7: Context-Sensitive Help
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// Different help URLs based on context
|
||
|
|
|
||
|
|
getContextualHelpUrl: function(context) {
|
||
|
|
var baseUrl = '/luci-static/secubox/demo-network-modes.html';
|
||
|
|
var anchors = {
|
||
|
|
'sniffer': '#sniffer-mode',
|
||
|
|
'accesspoint': '#access-point-mode',
|
||
|
|
'relay': '#relay-mode',
|
||
|
|
'router': '#router-mode'
|
||
|
|
};
|
||
|
|
|
||
|
|
return baseUrl + (anchors[context] || '');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Then use it:
|
||
|
|
E('a', {
|
||
|
|
'href': this.getContextualHelpUrl('sniffer'),
|
||
|
|
'target': '_blank'
|
||
|
|
}, _('Learn about Sniffer Mode'))
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// CSS INTEGRATION EXAMPLE
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
/*
|
||
|
|
File: luci-app-secubox/htdocs/luci-static/resources/secubox/help.css
|
||
|
|
|
||
|
|
Add to existing module CSS for consistent styling:
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Help Button Base */
|
||
|
|
.sb-help-btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sb-help-btn:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Floating position */
|
||
|
|
.sb-help-floating {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 2rem;
|
||
|
|
right: 2rem;
|
||
|
|
z-index: 1000;
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
border-radius: 50%;
|
||
|
|
padding: 0;
|
||
|
|
justify-content: center;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* System Hub badge style */
|
||
|
|
.sh-help-badge {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sh-help-badge:hover {
|
||
|
|
transform: scale(1.05);
|
||
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
|
||
|
|
}
|