fix: Array nesting issue in devices and applications table rendering

Fixed "[object HTMLDivElement]" display bug in device and application list views.

## Problem:
- Device list showed "[object HTMLDivElement],[object HTMLDivElement],..." instead of table rows
- Applications list had the same issue
- Root cause: `sortedDevices.map()` and `sortedApps.map()` return arrays, but these arrays were being nested incorrectly in the E() children array

## Solution:
Changed table row structure from:
```javascript
E('div', { 'class': 'table' }, [
    E('div', { 'class': 'tr table-titles' }, [...]),  // header
    sortedDevices.map(function(device) {              // array nested wrong!
        return E('div', {...});
    })
])
```

To:
```javascript
E('div', { 'class': 'table' },
    [
        E('div', { 'class': 'tr table-titles' }, [...])  // header
    ].concat(
        sortedDevices.map(function(device) {             // properly flattened!
            return E('div', {...});
        })
    )
)
```

## Technical Details:
- The E() helper expects children to be individual DOM elements, not nested arrays
- Using `.concat()` properly flattens the array of row elements
- Applied fix to both devices.js and applications.js views

## Testing:
- Deployed to router
- Device list now displays all 6 detected devices with IP, MAC, traffic stats
- Applications list displays all 4 application categories correctly
- Table formatting and styling render properly

🤖 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-06 19:17:56 +01:00
parent faf9ee3265
commit f65bc8c4ca
2 changed files with 95 additions and 91 deletions

View File

@ -169,7 +169,8 @@ return view.extend({
}.bind(this); }.bind(this);
dom.content(container, [ dom.content(container, [
apps.length > 0 ? E('div', { 'class': 'table', 'style': 'font-size: 0.95em' }, [ apps.length > 0 ? E('div', { 'class': 'table', 'style': 'font-size: 0.95em' },
[
// Header // Header
E('div', { 'class': 'tr table-titles' }, [ E('div', { 'class': 'tr table-titles' }, [
E('div', { E('div', {
@ -209,8 +210,8 @@ return view.extend({
getSortIcon('bytes') getSortIcon('bytes')
]), ]),
E('div', { 'class': 'th', 'style': 'width: 20%' }, _('% of Total')) E('div', { 'class': 'th', 'style': 'width: 20%' }, _('% of Total'))
]), ])
].concat(
// Rows // Rows
sortedApps.map(function(app, idx) { sortedApps.map(function(app, idx) {
var percentage = totalBytes > 0 ? (app.bytes / totalBytes * 100) : 0; var percentage = totalBytes > 0 ? (app.bytes / totalBytes * 100) : 0;
@ -250,7 +251,8 @@ return view.extend({
]) ])
]); ]);
}.bind(this)) }.bind(this))
]) : E('div', { )
) : E('div', {
'class': 'alert-message info', 'class': 'alert-message info',
'style': 'text-align: center; padding: 3rem' 'style': 'text-align: center; padding: 3rem'
}, [ }, [

View File

@ -172,7 +172,8 @@ return view.extend({
}.bind(this); }.bind(this);
dom.content(container, [ dom.content(container, [
devices.length > 0 ? E('div', { 'class': 'table', 'style': 'font-size: 0.95em' }, [ devices.length > 0 ? E('div', { 'class': 'table', 'style': 'font-size: 0.95em' },
[
// Header // Header
E('div', { 'class': 'tr table-titles' }, [ E('div', { 'class': 'tr table-titles' }, [
E('div', { E('div', {
@ -213,8 +214,8 @@ return view.extend({
getSortIcon('bytes_received') getSortIcon('bytes_received')
]), ]),
E('div', { 'class': 'th', 'style': 'width: 20%' }, _('Traffic Distribution')) E('div', { 'class': 'th', 'style': 'width: 20%' }, _('Traffic Distribution'))
]), ])
].concat(
// Rows // Rows
sortedDevices.map(function(device, idx) { sortedDevices.map(function(device, idx) {
var lastSeen = device.last_seen || 0; var lastSeen = device.last_seen || 0;
@ -278,7 +279,8 @@ return view.extend({
]) ])
]); ]);
}.bind(this)) }.bind(this))
]) : E('div', { )
) : E('div', {
'class': 'alert-message info', 'class': 'alert-message info',
'style': 'text-align: center; padding: 3rem' 'style': 'text-align: center; padding: 3rem'
}, [ }, [