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:
parent
faf9ee3265
commit
f65bc8c4ca
@ -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'
|
||||||
}, [
|
}, [
|
||||||
|
|||||||
@ -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'
|
||||||
}, [
|
}, [
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user