mirror of
https://dev.iopsys.eu/feed/iopsys.git
synced 2026-01-28 01:47:19 +01:00
Added wireless device editor and macfilter editor
This commit is contained in:
Martin Schröder
Martin Schröder
parent
34b4ef62e8
commit
eb7f227206
18 changed files with 444 additions and 177 deletions
|
|
@ -4,3 +4,13 @@
|
|||
.modal-backdrop {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@
|
|||
<link href="/lib/css/angular-ui.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/lib/css/select.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/lib/css/angular-ui-switch.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/app.css" rel="stylesheet" type="text/css" />
|
||||
<!--<link href="/lib/css/awesome-bootstrap-checkbox.css" rel="stylesheet" type="text/css" />-->
|
||||
<link href="/css/nga.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/app.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body role="document" ng-cloak >
|
||||
<div ui-view="content" style="min-height: 1000px;"></div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@
|
|||
"widgets/luci.progress",
|
||||
"widgets/luci.table",
|
||||
"widgets/luci.top_bar",
|
||||
"widgets/luci.config",
|
||||
"widgets/uci.wireless.interface",
|
||||
"widgets/uci.wireless.interface.macfilter.edit",
|
||||
"widgets/uci.firewall.nat.rule.edit",
|
||||
"widgets/core.modal"
|
||||
],
|
||||
|
|
|
|||
61
luciexpress/htdocs/plugins/core/widgets/luci.config.js
Normal file
61
luciexpress/htdocs/plugins/core/widgets/luci.config.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
$juci.module("core")
|
||||
.directive("luciConfig", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<div ng-transclude></div>',
|
||||
replace: true,
|
||||
transclude: true
|
||||
};
|
||||
})
|
||||
.directive("luciConfigSection", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<div class="luci-config-section" ng-transclude></div>',
|
||||
replace: true,
|
||||
transclude: true
|
||||
};
|
||||
})
|
||||
.directive("luciConfigInfo", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<p class="luci-config-info" ng-transclude translate></p>',
|
||||
replace: true,
|
||||
transclude: true
|
||||
};
|
||||
})
|
||||
.directive("luciConfigHeading", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<h2 ng-transclude translate></h2>',
|
||||
replace: true,
|
||||
transclude: true
|
||||
};
|
||||
})
|
||||
.directive("luciConfigLines", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<table class="table" ><tbody ng-transclude></tbody></table>',
|
||||
replace: true,
|
||||
transclude: true
|
||||
};
|
||||
})
|
||||
.directive("luciConfigLine", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<tr><td class="col-xs-6"><label style="font-size: 1.2em" translate>{{title}}</label></td><td class="col-xs-6"><div class="btn-toolbar pull-right" ng-transclude></div></td></tr>',
|
||||
replace: true,
|
||||
scope: {
|
||||
title: "="
|
||||
},
|
||||
transclude: true
|
||||
};
|
||||
})
|
||||
.directive("luciConfigFooter", function(){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
template: '<div class="row"><div class="btn-toolbar pull-right" ng-transclude></div></div>',
|
||||
replace: true,
|
||||
transclude: true
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -1,41 +1,38 @@
|
|||
<div class="navbar navbar-default" ng-controller="NavigationCtrl">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand" href="#">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav" auto-active>
|
||||
<li class="dropdown" ng-repeat="item in tree.children_list track by $index">
|
||||
<a href="#!{{item.path}}" role="button" >{{item.text | translate}} </a>
|
||||
<!--<a href="#!{{item.path}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{item.text | translate}} <span class="caret"></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="item2 in item.children_list | orderBy:'text':!reverse">
|
||||
<a href="#!{{item2.path}}">{{item2.text | translate}}</a>
|
||||
</li>
|
||||
</ul>-->
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right" auto-active>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{'Theme' | translate}} <span class="caret"></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li >
|
||||
<a href="" data-theme="default" class="theme-link">Default</a>
|
||||
<a href="" data-theme="vodaphone" class="theme-link">Vodaphone</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand" href="#">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav" auto-active>
|
||||
<li class="dropdown" ng-repeat="item in tree.children_list track by $index">
|
||||
<a href="#!{{item.path}}" role="button" >{{item.text | translate}} </a>
|
||||
<!--<a href="#!{{item.path}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{item.text | translate}} <span class="caret"></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="item2 in item.children_list | orderBy:'text':!reverse">
|
||||
<a href="#!{{item2.path}}">{{item2.text | translate}}</a>
|
||||
</li>
|
||||
</ul>-->
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right" auto-active>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{'Theme' | translate}} <span class="caret"></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li >
|
||||
<a href="" data-theme="default" class="theme-link">Default</a>
|
||||
<a href="" data-theme="vodaphone" class="theme-link">Vodaphone</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,26 @@
|
|||
<div>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-6"><strong style="font-size: 1.2em">{{ interface[".name"] + ".enabled"}}</strong></div>
|
||||
<div class="col-md-6"><switch ng-model="interface.disabled" class="green" inverted></switch></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="table" ng-show="!interface.disabled">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-6"><strong style="font-size: 1.2em" translate>Wifi Name (SSID)</strong></div>
|
||||
<div class="col-md-6"><input type="text" class="form-control" placeholder="Wifi Name" ng-model="interface.ssid"/></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-9"><strong style="font-size: 1.2em" translate>Broadcast SSID</strong></div>
|
||||
<div class="col-md-3"><switch id="enabled" name="enabled" ng-model="interface.closed" class="green" inverted></switch></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-6"><strong style="font-size: 1.2em">Frequency</strong></div>
|
||||
<div class="col-md-6">
|
||||
<ui-select ng-model="interface.device"
|
||||
theme="bootstrap"
|
||||
search-enabled="false"
|
||||
>
|
||||
<ui-select-match placeholder="Choose Frequency">{{"interface."+$select.selected}}</ui-select-match>
|
||||
<ui-select-choices repeat="item in allRadios"
|
||||
refresh-delay="0">
|
||||
<div >{{"interface."+item}}</div>
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-6"><strong style="font-size: 1.2em">Protection Mode</strong></div>
|
||||
<div class="col-md-6">
|
||||
<ui-select ng-model="interface.encryption"
|
||||
theme="bootstrap"
|
||||
search-enabled="false"
|
||||
>
|
||||
<ui-select-match placeholder="Choose Protection">{{"encryption."+$select.selected}}</ui-select-match>
|
||||
<ui-select-choices repeat="item in allCryptModes"
|
||||
refresh-delay="0">
|
||||
<div >{{"encryption."+item}}</div>
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-6"><strong style="font-size: 1.2em">Wifi Password</strong></div>
|
||||
<div class="col-md-6"><input type="{{(!showPassword)?'password':'text'}}" class="form-control" placeholder="Wifi Password" ng-model="interface.key"/></div>
|
||||
<br style="clear: both"/>
|
||||
<div style="float: right;margin-top: 10px; margin-bottom: 10px;"><strong style="font-size: 1.2em;">Display Characters: <input type="checkbox" ng-model="showPassword" /></strong></div>
|
||||
<br style="clear: both"/>
|
||||
<!--<div style="float: right;"><button class="btn btn-success" >Change Password</button></div>-->
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<luci-config-section>
|
||||
<luci-config-lines>
|
||||
<luci-config-line title="configName"><switch ng-model="interface.disabled" class="green" inverted></switch></luci-config-line>
|
||||
<luci-config-line title="'Wifi Name (SSID)'"><input type="text" class="form-control" placeholder="Wifi Name" ng-model="interface.ssid"/></luci-config-line>
|
||||
<luci-config-line title="'Broadcast SSID'"><switch id="enabled" name="enabled" ng-model="interface.closed" class="green" inverted></switch></luci-config-line>
|
||||
<luci-config-line title="'Frequency'">
|
||||
<ui-select ng-model="interface.device" search-enabled="false">
|
||||
<ui-select-match placeholder="{{ 'Choose Frequency' | translate}}">{{"interface."+$select.selected}}</ui-select-match>
|
||||
<ui-select-choices repeat="item in allRadios" refresh-delay="0"><div>{{"interface."+item}}</div></ui-select-choices>
|
||||
</ui-select>
|
||||
</luci-config-line>
|
||||
<luci-config-line title="'Protection Mode'">
|
||||
<ui-select ng-model="interface.encryption" theme="bootstrap" search-enabled="false">
|
||||
<ui-select-match placeholder="{{ 'Choose Protection' | translate}}">{{"encryption."+$select.selected}}</ui-select-match>
|
||||
<ui-select-choices repeat="item in allCryptModes" refresh-delay="0"><div >{{"encryption."+item}}</div></ui-select-choices>
|
||||
</ui-select>
|
||||
</luci-config-line>
|
||||
<luci-config-line title="'Password'">
|
||||
<input type="{{(!showPassword)?'password':'text'}}" class="form-control" placeholder="Wifi Password" ng-model="interface.key"/>
|
||||
<div style="float: right;margin-top: 10px; margin-bottom: 10px;"><strong style="font-size: 1.2em;">Display Characters: <input type="checkbox" ng-model="showPassword" /></strong></div>
|
||||
</luci-config-line>
|
||||
</luci-config-lines>
|
||||
</luci-config-section>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,11 +26,14 @@ $juci.module("core")
|
|||
}]; */
|
||||
$scope.allRadios = ["wl0", "wl1", "wl0wl1"];
|
||||
$scope.allCryptModes = ["none", "wpa", "wpa2", "mixed-wpa", "wep-shared"];
|
||||
$scope.configName = "";
|
||||
|
||||
// TODO: need to have generic uci variables that reflect the gui
|
||||
$scope.$watch("interface", function(value){
|
||||
value.disabled = (value.disabled == '1')?true:false;
|
||||
value.closed = (value.closed == '1')?true:false;
|
||||
$scope.configName = $scope.interface[".name"] + ".disabled";
|
||||
|
||||
});
|
||||
/*$scope.allCryptModes = [{
|
||||
label: "Off",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<div>
|
||||
<luci-config-section>
|
||||
<luci-config-lines>
|
||||
<luci-config-line title="'MAC Filtering'">
|
||||
<switch ng-model="filterEnabled" class="green" ng-change="onFilterEnable"></switch>
|
||||
</luci-config-line>
|
||||
</luci-config-lines>
|
||||
</luci-config-section>
|
||||
<luci-config-section ng-show="filterEnabled">
|
||||
<luci-config-lines>
|
||||
<luci-config-line title="'Access for listed devices'">
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" ng-click="interface.macfilter = '1'">Allow</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" ng-click="interface.macfilter = '2'">Deny</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--<div class="btn-toolbar">
|
||||
<input type="radio" class="form-control" ng-model="interface.macfilter_mode" value="1"/> Allow
|
||||
<input type="radio" class="form-control" ng-model="interface.macfilter_mode" value="2"/> Deny
|
||||
</div>-->
|
||||
</luci-config-line>
|
||||
<luci-config-line title="'Currently added devices'">
|
||||
<table class="table">
|
||||
<tr ng-repeat="host in maclist">
|
||||
<td>
|
||||
<input type="text" class="form-control" ng-model="host.hostname"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" ng-model="host.macaddr" placeholder="xx:xx:xx:xx:xx:xx"/>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-default" ng-click="onDeleteHost(host)"><i class="fa fa-trash-o"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
<button class="btn btn-default" ng-click="onAddNewClient()"><i class="fa fa-plus"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</luci-config-line>
|
||||
<luci-config-line title="'Add currently connected hosts to the list'">
|
||||
<button class="btn btn-default" ng-click="onAddClients()"><i class="fa fa-plus"></i></button>
|
||||
</luci-config-line>
|
||||
</luci-config-lines>
|
||||
</luci-config-section>
|
||||
<modal title="'Add clients to MAC filtering list'" ng-show="showModal" on-accept="onAcceptModal()" on-dismiss="onDismissModal()" dismiss-label="Cancel" accept-label="Save">
|
||||
<luci-config>
|
||||
<luci-config-section>
|
||||
<div class="row" ng-repeat="cl in client_list">
|
||||
<div class="col-xs-6">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="cl.checked"/> {{cl.client.hostname}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label>{{cl.client.macaddr}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</luci-config-section>
|
||||
</luci-config>
|
||||
</modal>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
$juci.module("core")
|
||||
.directive("uciWirelessInterfaceMacfilterEdit", function($compile){
|
||||
var plugin_root = $juci.module("core").plugin_root;
|
||||
return {
|
||||
templateUrl: plugin_root+"/widgets/uci.wireless.interface.macfilter.edit.html",
|
||||
scope: {
|
||||
interface: "=ngModel"
|
||||
},
|
||||
controller: "uciWirelessInterfaceMacfilterEditController",
|
||||
replace: true,
|
||||
require: "^ngModel"
|
||||
};
|
||||
}).controller("uciWirelessInterfaceMacfilterEditController", function($scope, $rpc, $uci){
|
||||
|
||||
$scope.maclist = [];
|
||||
$scope.filterEnabled = 0;
|
||||
|
||||
// updates scratch model for the view
|
||||
function updateMaclist(i){
|
||||
$scope.maclist = [];
|
||||
if(i && i.maclist) {
|
||||
var clients = $scope.clients || {};
|
||||
i.maclist.map(function(x){
|
||||
var parts = x.split("|");
|
||||
$scope.maclist.push({ hostname: (clients[x]||parts[1]||""), macaddr: parts[0] });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// watch for model change
|
||||
$scope.$watch("interface", function(i){
|
||||
updateMaclist(i);
|
||||
});
|
||||
|
||||
// watch for changes in list of connected clients
|
||||
$scope.$watch("clients", function(clients){
|
||||
updateMaclist($scope.interface);
|
||||
});
|
||||
|
||||
// watch maclist for changes by the user
|
||||
$scope.$watch("maclist", function(list){
|
||||
// rebuild the maclist?
|
||||
if(list && $scope.interface){
|
||||
var interface = $scope.interface;
|
||||
interface.maclist = [];
|
||||
list.map(function(x){
|
||||
// save the hostname
|
||||
x.macaddr = x.macaddr||"";
|
||||
x.hostname = x.hostname||"";
|
||||
interface.maclist.push(x.macaddr.replace("|", "")+"|"+x.hostname.replace("|", ""));
|
||||
});
|
||||
}
|
||||
}, true);
|
||||
|
||||
$scope.$watch("filterEnabled", function(value){
|
||||
$scope.interface.macfilter = value;
|
||||
});
|
||||
$scope.$watch("interface.macfilter", function(value){
|
||||
$scope.filterEnabled = (value && value == "1");
|
||||
});
|
||||
$rpc.router.clients().done(function(clients){
|
||||
$scope.clients = {};
|
||||
$scope.client_list = [];
|
||||
Object.keys(clients).map(function(x){
|
||||
var cl = clients[x];
|
||||
$scope.clients[cl.macaddr] = cl.hostname;
|
||||
$scope.client_list.push({
|
||||
checked: false,
|
||||
client: cl
|
||||
});
|
||||
});
|
||||
console.log(JSON.stringify($scope.clients));
|
||||
$scope.$apply();
|
||||
});
|
||||
|
||||
$scope.onDeleteHost = function(host){
|
||||
$scope.maclist = ($scope.maclist||[]).filter(function(x) { return x.macaddr != host.macaddr; });
|
||||
}
|
||||
|
||||
$scope.onAddClients = function(){
|
||||
// reset all checkboxes
|
||||
if($scope.client_list){
|
||||
$scope.client_list.map(function(x){ x.checked = false; });
|
||||
}
|
||||
$scope.showModal = 1;
|
||||
}
|
||||
|
||||
$scope.onFilterEnable = function(){
|
||||
$scope.filterEnabled = !$scope.filterEnabled;
|
||||
//console.log("Filter: "+$scope.filterEnabled);
|
||||
}
|
||||
|
||||
$scope.onAddNewClient = function(){
|
||||
var interface = $scope.interface;
|
||||
if(interface){
|
||||
if(!interface.maclist) interface.maclist = [];
|
||||
$scope.maclist.push({ hostname: "", macaddr: "" });
|
||||
}
|
||||
}
|
||||
|
||||
$scope.onAcceptModal = function(){
|
||||
if($scope.client_list && $scope.maclist) {
|
||||
$scope.client_list.map(function(x){
|
||||
if(x.checked) {
|
||||
if($scope.maclist.filter(function(x) { return x.macaddr == x.client.macaddr; }).length == 0){
|
||||
$scope.maclist.push({ hostname: x.client.hostname, macaddr: x.client.macaddr });
|
||||
} else {
|
||||
console.log("MAC address "+x.client.macaddr+" is already in the list!");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
$scope.showModal = 0;
|
||||
}
|
||||
|
||||
$scope.onDismissModal = function(){
|
||||
$scope.showModal = 0;
|
||||
}
|
||||
});
|
||||
|
|
@ -1,43 +1,35 @@
|
|||
<luci-layout-with-sidebar>
|
||||
<div ng-controller="WifiGeneralPageCtrl">
|
||||
<h2>General WiFi Settings</h2>
|
||||
<p>Your EasyBox supports the industry-wide WiFi standards, enabling easy wireless connection of your devices.</p>
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-11"><strong style="font-size: 1.2em">Wifi Network</strong></div>
|
||||
<div class="col-md-1">
|
||||
<switch id="enabled" name="enabled" ng-model="wifiEnabled" ng-change="onWifiEnable" class="green"></switch>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-11"><strong style="font-size: 1.2em">Enable WiFi On/Off button on EasyBox</strong></div>
|
||||
<div class="col-md-1"><switch id="enabled" name="enabled" ng-model="wifiButtonEnabled" class="green"></switch></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="alert alert-info" ng-show="info">
|
||||
<p translate><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> {{info}}</p>
|
||||
</div>
|
||||
<div class="row" ng-show="wifiCheckEnabled()">
|
||||
<h2>Setup</h2>
|
||||
<div class="col-md-6">
|
||||
<uci-wireless-interface ng-model="main_wifi"></uci-wireless-interface>
|
||||
<luci-config-section>
|
||||
<luci-config-heading>General WiFi Settings</luci-config-heading>
|
||||
<luci-config-info>Your EasyBox supports the industry-wide WiFi standards, enabling easy wireless connection of your devices.</luci-config-info>
|
||||
<luci-config-lines>
|
||||
<luci-config-line title="'Wifi Network'">
|
||||
<switch id="enabled" name="enabled" ng-model="wifiEnabled" ng-change="onWifiEnable" class="green"></switch>
|
||||
</luci-config-line>
|
||||
<luci-config-line title="'Enable WiFi On/Off button on EasyBox'">
|
||||
<switch id="enabled" name="enabled" ng-model="wifiButtonEnabled" ng-change="onWifiEnable" class="green"></switch>
|
||||
</luci-config-line>
|
||||
</luci-config-lines>
|
||||
</luci-config-section>
|
||||
<luci-config-section ng-show="wifiCheckEnabled()">
|
||||
<luci-config-heading>Setup</luci-config-heading>
|
||||
<div class="alert alert-info" ng-show="info">
|
||||
<p translate><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> {{info}}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<uci-wireless-interface ng-model="guest_wifi"></uci-wireless-interface>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<uci-wireless-interface ng-model="main_wifi"></uci-wireless-interface>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<uci-wireless-interface ng-model="guest_wifi"></uci-wireless-interface>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn btn-lg btn-primary" ng-click="onApply()">Apply</button>
|
||||
<button class="btn btn-lg btn-default" ng-click="onCancel()">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<luci-config-footer>
|
||||
<button class="btn btn-lg btn-primary" ng-click="onApply()">Apply</button>
|
||||
<button class="btn btn-lg btn-default" ng-click="onCancel()">Cancel</button>
|
||||
</luci-config-footer>
|
||||
</luci-config-section>
|
||||
</div>
|
||||
</luci-layout-with-sidebar>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
<luci-layout-with-sidebar>
|
||||
<div ng-controller="WifiMacFilterPageCtrl">
|
||||
Mac filter
|
||||
<luci-config>
|
||||
<luci-config-heading>MAC Filter</luci-config-heading>
|
||||
<luci-config-info>To make your wireless network more secure, you can specify which devices are allowed to connect. The devices are identified by their MAC address. You can manage up to 32 devices.</luci-config-info>
|
||||
<luci-config-section>
|
||||
<luci-config-heading>str.main.wifi</luci-config-heading>
|
||||
<uci-wireless-interface-macfilter-edit ng-model="main_wifi"></uci-wifi-iface-macfilter-edit>
|
||||
</luci-config-section>
|
||||
<luci-config-section>
|
||||
<luci-config-heading>str.guest.wifi</luci-config-heading>
|
||||
<uci-wireless-interface-macfilter-edit ng-model="guest_wifi"></uci-wifi-iface-macfilter-edit>
|
||||
</luci-config-section>
|
||||
<luci-config-footer>
|
||||
<button class="btn btn-lg btn-primary" ng-click="onApply()">Apply</button>
|
||||
<button class="btn btn-lg btn-default" ng-click="onCancel()">Cancel</button>
|
||||
</luci-config-footer>
|
||||
</luci-config>
|
||||
</div>
|
||||
</luci-layout-with-sidebar>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,43 @@
|
|||
$juci.module("wifi")
|
||||
.controller("WifiMacFilterPageCtrl", function($scope){
|
||||
.controller("WifiMacFilterPageCtrl", function($scope, $uci){
|
||||
$scope.guest_wifi = { };
|
||||
$scope.main_wifi = {};
|
||||
|
||||
function load(){
|
||||
$uci.show("wireless").done(function(interfaces){
|
||||
var list = Object.keys(interfaces)
|
||||
.map(function(x){ return interfaces[x]; });
|
||||
$scope.devices = list.filter(function(x) { return x[".type"] == "wifi-device"; });
|
||||
$scope.interfaces = list.filter(function(x) { return x[".type"] == "wifi-iface"; });
|
||||
|
||||
$scope.main_wifi = $scope.interfaces[0]; //$scope.interfaces.filter(function(x) { return x[".name"] == "main"; })[0] || {};
|
||||
$scope.guest_wifi = $scope.interfaces[1]; //$scope.interfaces.filter(function(x) { return x[".name"] == "guest"; })[0] || {};
|
||||
|
||||
$scope.$apply();
|
||||
});
|
||||
} load();
|
||||
|
||||
$scope.onApply = function(){
|
||||
async.series([
|
||||
function(next){
|
||||
$uci.set("wireless."+$scope.main_wifi[".name"], $scope.main_wifi).done(function(){
|
||||
|
||||
}).always(function(){ next(); });
|
||||
},
|
||||
function(next){
|
||||
$uci.set("wireless."+$scope.guest_wifi[".name"], $scope.guest_wifi).done(function(){
|
||||
|
||||
}).always(function(){ next(); });
|
||||
}
|
||||
], function(){
|
||||
$uci.commit("wireless").done(function(){
|
||||
console.log("Saved wifi settings!");
|
||||
}).fail(function(){
|
||||
console.log("Failed to save wifi settings!");
|
||||
});
|
||||
});
|
||||
}
|
||||
$scope.onCancel = function(){
|
||||
load();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,15 @@
|
|||
<luci-layout-with-sidebar>
|
||||
<div ng-controller="WifiSchedulePageCtrl">
|
||||
<h2>Schedule</h3>
|
||||
<p>Schedule the times when your WiFi should be turned on or off automatically. Note: If WiFi is turned off, both Main and Guest WiFi are disabled</p>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-11"><strong style="font-size: 1.5em">Schedule Function</strong></div>
|
||||
<div class="col-md-1"> <switch id="enabled" name="enabled" ng-model="scheduleEnabled" class="green"></switch></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn btn-primary">Apply</button>
|
||||
<button class="btn btn-default">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<luci-config-section>
|
||||
<luci-config-heading>Schedule</luci-config-heading>
|
||||
<luci-config-info>Schedule the times when your WiFi should be turned on or off automatically. Note: If WiFi is turned off, both Main and Guest WiFi are disabled</luci-config-info>
|
||||
<luci-config-lines>
|
||||
<luci-config-line title="'Schedule Function'"><switch id="enabled" name="enabled" ng-model="scheduleEnabled" class="green"></switch></luci-config-line>
|
||||
<luci-config-lines>
|
||||
</luci-config-section>
|
||||
<luci-config-footer>
|
||||
<button class="btn btn-lg btn-primary" ng-click="onApply()">Apply</button>
|
||||
<button class="btn btn-lg btn-default" ng-click="onCancel()">Cancel</button>
|
||||
</luci-config-footer>
|
||||
</div>
|
||||
</luci-layout-with-sidebar>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
<luci-layout-with-sidebar>
|
||||
<div ng-controller="WifiSettingsPageCtrl">
|
||||
Settings
|
||||
<luci-config>
|
||||
<luci-config-section>
|
||||
<luci-config-heading>Settings</luci-config-heading>
|
||||
<luci-config-info>Below you can change parameters for the two WiFi frequencies 2.4 GHz and 5 GHz.</luci-config-info>
|
||||
<uci-wireless-device-edit ng-model="wifi24"></uci-wireless-device-edit>
|
||||
<uci-wireless-device-edit ng-model="wifi5"></uci-wireless-device-edit>
|
||||
</luci-config-section>
|
||||
<luci-config-footer>
|
||||
<button class="btn btn-lg btn-primary" ng-click="onApply()">Apply</button>
|
||||
<button class="btn btn-lg btn-default" ng-click="onCancel()">Cancel</button>
|
||||
</luci-config-footer>
|
||||
</luci-config>
|
||||
</div>
|
||||
</luci-layout-with-sidebar>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,17 @@
|
|||
<luci-layout-with-sidebar>
|
||||
<div ng-controller="WifiWPSPageCtrl">
|
||||
<h2>WPS</h3>
|
||||
<p>Using WPS it is possible to easily connect wireless devices with EasyBox on an encrypted channel. Below, you can choose and configure different connection methods.</p>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="col-md-11"><strong style="font-size: 1.5em">WPS Function</strong></div>
|
||||
<div class="col-md-1"> <switch id="enabled" name="enabled" ng-model="scheduleEnabled" class="green"></switch></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn btn-primary">Apply</button>
|
||||
<button class="btn btn-default">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<luci-config>
|
||||
<luci-config-section>
|
||||
<luci-config-heading>WPS</luci-config-heading>
|
||||
<luci-config-info>Using WPS it is possible to easily connect wireless devices with EasyBox on an encrypted channel. Below, you can choose and configure different connection methods.</luci-config-info>
|
||||
<luci-config-lines>
|
||||
<luci-config-line title="'WPS Function'"><switch id="enabled" name="enabled" ng-model="scheduleEnabled" class="green"></switch></luci-config-line>
|
||||
<luci-config-lines>
|
||||
</luci-config-section>
|
||||
<luci-config-footer>
|
||||
<button class="btn btn-lg btn-primary" ng-click="onApply()">Apply</button>
|
||||
<button class="btn btn-lg btn-default" ng-click="onCancel()">Cancel</button>
|
||||
</luci-config-footer>
|
||||
</luci-config>
|
||||
</div>
|
||||
</luci-layout-with-sidebar>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
"view": "wifi.schedule",
|
||||
"index": 20
|
||||
},
|
||||
"wifi/WPS": {
|
||||
"wifi/wps": {
|
||||
"title": "WPS",
|
||||
"acls": [ ],
|
||||
"view": "wifi.wps",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue