251 lines
8.5 KiB
JavaScript
251 lines
8.5 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require ui';
|
|
'require network-modes.api as api';
|
|
|
|
return view.extend({
|
|
title: _('Access Point Mode'),
|
|
|
|
load: function() {
|
|
return api.getApConfig();
|
|
},
|
|
|
|
render: function(data) {
|
|
var config = data || {};
|
|
var wifiTweaks = config.wifi_tweaks || {};
|
|
|
|
var view = E('div', { 'class': 'network-modes-dashboard' }, [
|
|
// Header
|
|
E('div', { 'class': 'nm-header' }, [
|
|
E('div', { 'class': 'nm-logo' }, [
|
|
E('div', { 'class': 'nm-logo-icon', 'style': 'background: linear-gradient(135deg, #06b6d4, #0ea5e9)' }, '📶'),
|
|
E('div', { 'class': 'nm-logo-text' }, ['Access ', E('span', { 'style': 'background: linear-gradient(135deg, #06b6d4, #0ea5e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent;' }, 'Point')])
|
|
])
|
|
]),
|
|
|
|
// Description
|
|
E('div', { 'class': 'nm-alert nm-alert-info' }, [
|
|
E('span', { 'class': 'nm-alert-icon' }, '📶'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-alert-title' }, 'WiFi Access Point with Advanced Features'),
|
|
E('div', { 'class': 'nm-alert-text' },
|
|
'Transform your device into a high-performance WiFi access point with 802.11r/k/v ' +
|
|
'roaming support, band steering, and optimized settings.')
|
|
])
|
|
]),
|
|
|
|
// Current WiFi Settings
|
|
E('div', { 'class': 'nm-card' }, [
|
|
E('div', { 'class': 'nm-card-header' }, [
|
|
E('div', { 'class': 'nm-card-title' }, [
|
|
E('span', { 'class': 'nm-card-title-icon' }, '📡'),
|
|
'WiFi Configuration'
|
|
]),
|
|
E('div', { 'class': 'nm-card-badge' }, config.wifi_driver || 'WiFi')
|
|
]),
|
|
E('div', { 'class': 'nm-card-body' }, [
|
|
E('div', { 'class': 'nm-wifi-grid' }, [
|
|
E('div', { 'class': 'nm-wifi-setting' }, [
|
|
E('div', { 'class': 'nm-wifi-setting-label' }, 'Channel'),
|
|
E('div', { 'class': 'nm-wifi-setting-value' }, config.wifi_channel || 'Auto')
|
|
]),
|
|
E('div', { 'class': 'nm-wifi-setting' }, [
|
|
E('div', { 'class': 'nm-wifi-setting-label' }, 'HT Mode'),
|
|
E('div', { 'class': 'nm-wifi-setting-value' }, config.wifi_htmode || 'VHT80')
|
|
]),
|
|
E('div', { 'class': 'nm-wifi-setting' }, [
|
|
E('div', { 'class': 'nm-wifi-setting-label' }, 'TX Power'),
|
|
E('div', { 'class': 'nm-wifi-setting-value' }, (config.wifi_txpower || 20) + ' dBm')
|
|
]),
|
|
E('div', { 'class': 'nm-wifi-setting' }, [
|
|
E('div', { 'class': 'nm-wifi-setting-label' }, 'PHY'),
|
|
E('div', { 'class': 'nm-wifi-setting-value' }, config.wifi_phy || 'phy0')
|
|
])
|
|
]),
|
|
|
|
// Channel selection
|
|
E('div', { 'class': 'nm-form-group', 'style': 'margin-top: 20px' }, [
|
|
E('label', { 'class': 'nm-form-label' }, 'WiFi Channel'),
|
|
E('select', { 'class': 'nm-select', 'id': 'wifi-channel' }, [
|
|
E('option', { 'value': 'auto', 'selected': config.wifi_channel === 'auto' }, 'Auto'),
|
|
E('optgroup', { 'label': '2.4 GHz' },
|
|
(config.available_channels_2g || [1, 6, 11]).map(function(ch) {
|
|
return E('option', { 'value': ch }, 'Channel ' + ch);
|
|
})
|
|
),
|
|
E('optgroup', { 'label': '5 GHz' },
|
|
(config.available_channels_5g || [36, 40, 44, 48, 149, 153, 157, 161]).map(function(ch) {
|
|
return E('option', { 'value': ch }, 'Channel ' + ch);
|
|
})
|
|
)
|
|
])
|
|
]),
|
|
|
|
// HT Mode selection
|
|
E('div', { 'class': 'nm-form-group' }, [
|
|
E('label', { 'class': 'nm-form-label' }, 'Channel Width (HT Mode)'),
|
|
E('select', { 'class': 'nm-select', 'id': 'wifi-htmode' },
|
|
(config.available_htmodes || ['HT20', 'HT40', 'VHT40', 'VHT80']).map(function(mode) {
|
|
return E('option', {
|
|
'value': mode,
|
|
'selected': mode === config.wifi_htmode
|
|
}, mode);
|
|
})
|
|
)
|
|
]),
|
|
|
|
// TX Power slider
|
|
E('div', { 'class': 'nm-slider-container' }, [
|
|
E('div', { 'class': 'nm-slider-header' }, [
|
|
E('span', { 'class': 'nm-slider-label' }, 'Transmit Power'),
|
|
E('span', { 'class': 'nm-slider-value', 'id': 'txpower-value' }, (config.wifi_txpower || 20) + ' dBm')
|
|
]),
|
|
E('input', {
|
|
'type': 'range',
|
|
'class': 'nm-slider',
|
|
'id': 'wifi-txpower',
|
|
'min': '1',
|
|
'max': '30',
|
|
'value': config.wifi_txpower || 20
|
|
})
|
|
])
|
|
])
|
|
]),
|
|
|
|
// WiFi Tweaks
|
|
E('div', { 'class': 'nm-card' }, [
|
|
E('div', { 'class': 'nm-card-header' }, [
|
|
E('div', { 'class': 'nm-card-title' }, [
|
|
E('span', { 'class': 'nm-card-title-icon' }, '🚀'),
|
|
'Advanced WiFi Features'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nm-card-body' }, [
|
|
E('div', { 'class': 'nm-toggle' }, [
|
|
E('div', { 'class': 'nm-toggle-info' }, [
|
|
E('span', { 'class': 'nm-toggle-icon' }, '🔄'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-toggle-label' }, '802.11r Fast BSS Transition'),
|
|
E('div', { 'class': 'nm-toggle-desc' }, 'Fast roaming between access points')
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'nm-toggle-switch' + (wifiTweaks.roaming_80211r ? ' active' : ''),
|
|
'data-setting': 'roaming_80211r'
|
|
})
|
|
]),
|
|
|
|
E('div', { 'class': 'nm-toggle' }, [
|
|
E('div', { 'class': 'nm-toggle-info' }, [
|
|
E('span', { 'class': 'nm-toggle-icon' }, '📊'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-toggle-label' }, '802.11k Radio Resource Management'),
|
|
E('div', { 'class': 'nm-toggle-desc' }, 'Neighbor reports for better roaming decisions')
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'nm-toggle-switch' + (wifiTweaks.rrm_80211k ? ' active' : ''),
|
|
'data-setting': 'rrm_80211k'
|
|
})
|
|
]),
|
|
|
|
E('div', { 'class': 'nm-toggle' }, [
|
|
E('div', { 'class': 'nm-toggle-info' }, [
|
|
E('span', { 'class': 'nm-toggle-icon' }, '📡'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-toggle-label' }, '802.11v BSS Transition Management'),
|
|
E('div', { 'class': 'nm-toggle-desc' }, 'AP-assisted client steering')
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'nm-toggle-switch' + (wifiTweaks.wnm_80211v ? ' active' : ''),
|
|
'data-setting': 'wnm_80211v'
|
|
})
|
|
]),
|
|
|
|
E('div', { 'class': 'nm-toggle' }, [
|
|
E('div', { 'class': 'nm-toggle-info' }, [
|
|
E('span', { 'class': 'nm-toggle-icon' }, '📶'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-toggle-label' }, 'Band Steering'),
|
|
E('div', { 'class': 'nm-toggle-desc' }, 'Prefer 5GHz for capable clients')
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'nm-toggle-switch' + (wifiTweaks.band_steering ? ' active' : ''),
|
|
'data-setting': 'band_steering'
|
|
})
|
|
]),
|
|
|
|
E('div', { 'class': 'nm-toggle' }, [
|
|
E('div', { 'class': 'nm-toggle-info' }, [
|
|
E('span', { 'class': 'nm-toggle-icon' }, '⚖️'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-toggle-label' }, 'Airtime Fairness'),
|
|
E('div', { 'class': 'nm-toggle-desc' }, 'Equal airtime for all clients')
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'nm-toggle-switch' + (wifiTweaks.airtime_fairness ? ' active' : ''),
|
|
'data-setting': 'airtime_fairness'
|
|
})
|
|
]),
|
|
|
|
E('div', { 'class': 'nm-toggle' }, [
|
|
E('div', { 'class': 'nm-toggle-info' }, [
|
|
E('span', { 'class': 'nm-toggle-icon' }, '🎯'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'nm-toggle-label' }, 'Beamforming'),
|
|
E('div', { 'class': 'nm-toggle-desc' }, 'Focus signal towards clients')
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'nm-toggle-switch' + (wifiTweaks.beamforming !== false ? ' active' : ''),
|
|
'data-setting': 'beamforming'
|
|
})
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Actions
|
|
E('div', { 'class': 'nm-btn-group' }, [
|
|
E('button', { 'class': 'nm-btn nm-btn-primary' }, [
|
|
E('span', {}, '💾'),
|
|
'Save Settings'
|
|
]),
|
|
E('button', { 'class': 'nm-btn' }, [
|
|
E('span', {}, '🔄'),
|
|
'Restart WiFi'
|
|
])
|
|
])
|
|
]);
|
|
|
|
// TX Power slider handler
|
|
var slider = view.querySelector('#wifi-txpower');
|
|
var valueDisplay = view.querySelector('#txpower-value');
|
|
if (slider && valueDisplay) {
|
|
slider.addEventListener('input', function() {
|
|
valueDisplay.textContent = this.value + ' dBm';
|
|
});
|
|
}
|
|
|
|
// Toggle handlers
|
|
view.querySelectorAll('.nm-toggle-switch').forEach(function(toggle) {
|
|
toggle.addEventListener('click', function() {
|
|
this.classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
// Include CSS
|
|
var cssLink = E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') });
|
|
document.head.appendChild(cssLink);
|
|
|
|
return view;
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|