gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Render Media Flow stats directly from initial load data

Browse Source 
- Render flow count and streaming count immediately from load() data
- No longer rely on async update after DOM insertion
- Use setTimeout fallback for periodic updates
- Fixes data not appearing on initial page load

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-01-09 15:20:42 +01:00
parent acbed6797a
commit c4acbe074c
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
package/secubox/luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/dashboard.js
View File

@ -234,10 +234,26 @@ return L.view.extend({
renderActiveStreams(streamsData.streams || [], dpiSource); renderActiveStreams(streamsData.streams || [], dpiSource);
v.appendChild(streamsSection); v.appendChild(streamsSection);
// Network flow stats // Network flow stats - render initial data from load()
var initialFlowCount = streamsData.flow_count || 0;
var initialStreamCount = (streamsData.streams || []).length;
var initialNote = streamsData.note || '';
var flowSection = E('div', { 'class': 'cbi-section' }, [ var flowSection = E('div', { 'class': 'cbi-section' }, [
E('h3', {}, _('Network Flow Statistics')), E('h3', {}, _('Network Flow Statistics')),
E('div', { 'id': 'flow-stats-container' }) E('div', { 'id': 'flow-stats-container' }, [
E('div', { 'style': 'display: flex; justify-content: space-around; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 12px;' }, [
E('div', { 'style': 'text-align: center;' }, [
E('div', { 'id': 'total-flows-value', 'style': 'font-size: 2.5em; color: #06b6d4; font-weight: bold;' }, String(initialFlowCount)),
E('div', { 'style': 'color: #a1a1aa; margin-top: 5px;' }, _('Total Flows'))
]),
E('div', { 'style': 'text-align: center;' }, [
E('div', { 'id': 'streaming-flows-value', 'style': 'font-size: 2.5em; color: #ec4899; font-weight: bold;' }, String(initialStreamCount)),
E('div', { 'style': 'color: #a1a1aa; margin-top: 5px;' }, _('Streaming Flows'))
])
]),
initialNote ? E('p', { 'style': 'font-style: italic; color: #a1a1aa; text-align: center; margin-top: 10px;' }, initialNote) : E('span')
])
]); ]);
var updateFlowStats = function() { var updateFlowStats = function() {
@ -426,11 +442,11 @@ return L.view.extend({
wrapper.appendChild(v); wrapper.appendChild(v);
// Call update functions after DOM is ready // Call update functions after DOM is ready (delay for LuCI to insert into page)
requestAnimationFrame(function() { setTimeout(function() {
updateFlowStats(); updateFlowStats();
updateServiceStats(); updateServiceStats();
}); }, 100);
// Setup auto-refresh // Setup auto-refresh
poll.add(L.bind(function() { poll.add(L.bind(function() {