CyberMind-FR
3e86952d48
Add portal header and dark theme styling to all Media Flow subviews: - clients.js: Client statistics with portal header - services.js: Service statistics with portal header - history.js: Stream history with portal header - alerts.js: Streaming alerts with portal header Each view now includes: - SecuBox global header with Hub, Admin, Security, Network, Monitoring, System navigation - Internal Media Flow navigation (Dashboard, Clients, Services, History, Alerts) - Consistent dark theme styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require form';
|
|
'require ui';
|
|
'require media-flow/api as API';
|
|
'require secubox-portal/header as SbHeader';
|
|
|
|
var MEDIAFLOW_NAV = [
|
|
{ id: 'dashboard', icon: '📊', label: 'Dashboard' },
|
|
{ id: 'clients', icon: '👥', label: 'Clients' },
|
|
{ id: 'services', icon: '🎬', label: 'Services' },
|
|
{ id: 'history', icon: '📜', label: 'History' },
|
|
{ id: 'alerts', icon: '🔔', label: 'Alerts' }
|
|
];
|
|
|
|
function renderMediaFlowNav(activeId) {
|
|
return E('div', {
|
|
'class': 'sb-app-nav',
|
|
'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;'
|
|
}, MEDIAFLOW_NAV.map(function(item) {
|
|
var isActive = activeId === item.id;
|
|
return E('a', {
|
|
'href': L.url('admin', 'secubox', 'mediaflow', item.id),
|
|
'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' +
|
|
(isActive ? 'background:linear-gradient(135deg,#ec4899,#8b5cf6);color:white;' : 'color:#a0a0b0;background:transparent;')
|
|
}, [
|
|
E('span', {}, item.icon),
|
|
E('span', {}, _(item.label))
|
|
]);
|
|
}));
|
|
}
|
|
|
|
return L.view.extend({
|
|
load: function() {
|
|
return Promise.all([
|
|
API.listAlerts()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var alerts = data[0] || [];
|
|
|
|
var m = new form.Map('media_flow', null, null);
|
|
|
|
var s = m.section(form.TypedSection, 'alert', _('Streaming Alerts'));
|
|
s.anonymous = false;
|
|
s.addremove = true;
|
|
s.sortable = true;
|
|
|
|
var o;
|
|
|
|
o = s.option(form.Value, 'service', _('Service Name'));
|
|
o.placeholder = 'Netflix';
|
|
o.rmempty = false;
|
|
|
|
o = s.option(form.Value, 'threshold_hours', _('Threshold (hours)'));
|
|
o.datatype = 'uinteger';
|
|
o.placeholder = '2';
|
|
o.rmempty = false;
|
|
o.description = _('Trigger alert if usage exceeds this many hours per day');
|
|
|
|
o = s.option(form.ListValue, 'action', _('Action'));
|
|
o.value('notify', _('Notification only'));
|
|
o.value('limit', _('Limit bandwidth'));
|
|
o.value('block', _('Block service'));
|
|
o.default = 'notify';
|
|
o.rmempty = false;
|
|
|
|
o = s.option(form.Flag, 'enabled', _('Enabled'));
|
|
o.default = o.enabled;
|
|
|
|
return m.render().then(function(rendered) {
|
|
var css = `
|
|
.mf-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #e4e4e7; }
|
|
.mf-header { margin-bottom: 24px; }
|
|
.mf-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
|
|
.mf-subtitle { color: #a1a1aa; font-size: 0.875rem; }
|
|
`;
|
|
var container = E('div', { 'class': 'mf-page' }, [
|
|
E('style', {}, css),
|
|
renderMediaFlowNav('alerts'),
|
|
E('div', { 'class': 'mf-header' }, [
|
|
E('div', { 'class': 'mf-title' }, ['🔔 ', _('Streaming Alerts')]),
|
|
E('div', { 'class': 'mf-subtitle' }, _('Configure alerts based on streaming service usage'))
|
|
]),
|
|
rendered
|
|
]);
|
|
|
|
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
|
|
wrapper.appendChild(SbHeader.render());
|
|
wrapper.appendChild(container);
|
|
return wrapper;
|
|
});
|
|
}
|
|
});
|