CyberMind-FR
6314884f00
- Created help system (help.js, help.css) for all modules - Integrated help button in network-modes module - Fixed menu structure: removed empty Network Management category - Fixed all dashboard and modules page links - Added website deployment script - Created comprehensive documentation New Files: - DOCS/HELP_INTEGRATION_PLAN.md - DOCS/WEBSITE_DEPLOYMENT_GUIDE.md - EXAMPLES/help-button-integration.js - luci-app-secubox/htdocs/luci-static/resources/secubox/help.js - luci-app-secubox/htdocs/luci-static/resources/secubox/help.css - secubox-tools/deploy-website.sh Modified: - luci-app-network-modes: Added help button integration - luci-app-secubox: Fixed menu paths and module links 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
141 lines
3.7 KiB
Markdown
141 lines
3.7 KiB
Markdown
# SecuBox Code Examples
|
|
|
|
This directory contains practical code examples for SecuBox module development and integration.
|
|
|
|
## Available Examples
|
|
|
|
### help-button-integration.js
|
|
Comprehensive examples for integrating help/documentation buttons into SecuBox modules.
|
|
|
|
**What's Included:**
|
|
- Shared help utility module
|
|
- Module integration examples
|
|
- Multiple UI patterns (header, floating, quick actions)
|
|
- Context-sensitive help
|
|
- CSS styling examples
|
|
|
|
**Use Cases:**
|
|
- Adding help buttons to module dashboards
|
|
- Linking to website documentation
|
|
- Creating consistent help UX across modules
|
|
|
|
## Related Documentation
|
|
|
|
- **Integration Plan:** `../DOCS/HELP_INTEGRATION_PLAN.md`
|
|
- **Deployment Guide:** `../DOCS/WEBSITE_DEPLOYMENT_GUIDE.md`
|
|
- **LuCI Development:** `../DOCS/LUCI_DEVELOPMENT_REFERENCE.md`
|
|
|
|
## How to Use Examples
|
|
|
|
1. **Review the example code** to understand the pattern
|
|
2. **Copy relevant sections** to your module
|
|
3. **Customize** module names, URLs, and styling
|
|
4. **Test** on development router
|
|
5. **Deploy** using deployment scripts
|
|
|
|
## Integration Workflow
|
|
|
|
```bash
|
|
# 1. Deploy website to router
|
|
./secubox-tools/deploy-website.sh root@192.168.8.191
|
|
|
|
# 2. Add help button code to your module
|
|
# (see help-button-integration.js)
|
|
|
|
# 3. Build and deploy module
|
|
./secubox-tools/local-build.sh build luci-app-your-module
|
|
./secubox-tools/deploy-network-modes.sh root@192.168.8.191
|
|
|
|
# 4. Test in browser
|
|
open http://192.168.8.191/cgi-bin/luci/admin/secubox/your-module
|
|
```
|
|
|
|
## Common Patterns
|
|
|
|
### Pattern 1: Header Help Button
|
|
```javascript
|
|
'require secubox/help as Help';
|
|
|
|
E('div', { 'class': 'header' }, [
|
|
E('h2', {}, 'Module Title'),
|
|
Help.createHelpButton('module-name', 'header')
|
|
])
|
|
```
|
|
|
|
### Pattern 2: Floating Help Button
|
|
```javascript
|
|
E('a', {
|
|
'class': 'sb-help-floating',
|
|
'href': '/luci-static/secubox/demo-module.html',
|
|
'target': '_blank'
|
|
}, [E('span', {}, '❓')])
|
|
```
|
|
|
|
### Pattern 3: Quick Action
|
|
```javascript
|
|
buttons.push(
|
|
E('button', {
|
|
'class': 'action-btn',
|
|
'click': function() {
|
|
window.open('/luci-static/secubox/demo-module.html', '_blank');
|
|
}
|
|
}, ['📖 Help'])
|
|
)
|
|
```
|
|
|
|
## Module-Specific Examples
|
|
|
|
Each module can have different help button placements:
|
|
|
|
| Module | Recommended Position | Example File |
|
|
|--------|---------------------|--------------|
|
|
| SecuBox Dashboard | Quick Actions | help-button-integration.js (Ex 3) |
|
|
| System Hub | Header Badge | help-button-integration.js (Ex 4) |
|
|
| Network Modes | Header Button | help-button-integration.js (Ex 2) |
|
|
| Other Modules | Floating Button | help-button-integration.js (Ex 5) |
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Help button is visible
|
|
- [ ] Clicking opens correct documentation page
|
|
- [ ] Styling matches module theme
|
|
- [ ] Works in dark/light mode
|
|
- [ ] Responsive on mobile
|
|
- [ ] No console errors
|
|
- [ ] Accessible via keyboard
|
|
|
|
## Contributing Examples
|
|
|
|
To add new examples:
|
|
|
|
1. Create descriptive JavaScript file
|
|
2. Include clear comments
|
|
3. Show complete, working code
|
|
4. Update this README
|
|
5. Test on actual router
|
|
|
|
## Support
|
|
|
|
For questions about examples:
|
|
- Review related documentation in `DOCS/`
|
|
- Check module source code in `luci-app-*/`
|
|
- Test on development router first
|
|
|
|
## Quick Reference
|
|
|
|
**Website Base URL:** `/luci-static/secubox/`
|
|
|
|
**Module Help Pages:**
|
|
- 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`
|
|
- traffic-shaper → `demo-traffic-shaper.html`
|
|
- (See help-button-integration.js for complete list)
|
|
|
|
**Help Utility Methods:**
|
|
- `Help.createHelpButton(module, position, options)`
|
|
- `Help.getHelpUrl(module)`
|
|
- `Help.openHelpModal(module)`
|