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

View File

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