From eb7f227206917505c5142e2cb0948b39b9f450f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Schr=C3=B6der?= Date: Wed, 29 Apr 2015 17:04:19 +0200 Subject: [PATCH] Added wireless device editor and macfilter editor --- luciexpress/htdocs/css/app.css | 10 ++ luciexpress/htdocs/index.html | 3 +- luciexpress/htdocs/plugins/core/plugin.json | 2 + .../plugins/core/widgets/luci.config.js | 61 +++++++++ .../plugins/core/widgets/luci.navbar.html | 73 ++++++----- .../widgets/uci.wireless.device.edit.html | 0 .../core/widgets/uci.wireless.device.edit.js | 0 .../core/widgets/uci.wireless.interface.html | 90 ++++--------- .../core/widgets/uci.wireless.interface.js | 3 + ...uci.wireless.interface.macfilter.edit.html | 67 ++++++++++ .../uci.wireless.interface.macfilter.edit.js | 119 ++++++++++++++++++ .../plugins/wifi/pages/wifi.general.html | 64 +++++----- .../plugins/wifi/pages/wifi.mac_filter.html | 17 ++- .../plugins/wifi/pages/wifi.mac_filter.js | 41 +++++- .../plugins/wifi/pages/wifi.schedule.html | 27 ++-- .../plugins/wifi/pages/wifi.settings.html | 13 +- .../htdocs/plugins/wifi/pages/wifi.wps.html | 29 ++--- luciexpress/share/menu.d/wifi.json | 2 +- 18 files changed, 444 insertions(+), 177 deletions(-) create mode 100644 luciexpress/htdocs/plugins/core/widgets/luci.config.js create mode 100644 luciexpress/htdocs/plugins/core/widgets/uci.wireless.device.edit.html create mode 100644 luciexpress/htdocs/plugins/core/widgets/uci.wireless.device.edit.js create mode 100644 luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.html create mode 100644 luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.js diff --git a/luciexpress/htdocs/css/app.css b/luciexpress/htdocs/css/app.css index a67a1bb94..1c53bc9e5 100644 --- a/luciexpress/htdocs/css/app.css +++ b/luciexpress/htdocs/css/app.css @@ -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; +} diff --git a/luciexpress/htdocs/index.html b/luciexpress/htdocs/index.html index ff4991075..d8d37b67e 100644 --- a/luciexpress/htdocs/index.html +++ b/luciexpress/htdocs/index.html @@ -11,8 +11,9 @@ - + +
diff --git a/luciexpress/htdocs/plugins/core/plugin.json b/luciexpress/htdocs/plugins/core/plugin.json index ccc313411..5666ab5a9 100644 --- a/luciexpress/htdocs/plugins/core/plugin.json +++ b/luciexpress/htdocs/plugins/core/plugin.json @@ -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" ], diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.config.js b/luciexpress/htdocs/plugins/core/widgets/luci.config.js new file mode 100644 index 000000000..3390bfe00 --- /dev/null +++ b/luciexpress/htdocs/plugins/core/widgets/luci.config.js @@ -0,0 +1,61 @@ +$juci.module("core") +.directive("luciConfig", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '
', + replace: true, + transclude: true + }; +}) +.directive("luciConfigSection", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '
', + replace: true, + transclude: true + }; +}) +.directive("luciConfigInfo", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '

', + replace: true, + transclude: true + }; +}) +.directive("luciConfigHeading", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '

', + replace: true, + transclude: true + }; +}) +.directive("luciConfigLines", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '
', + replace: true, + transclude: true + }; +}) +.directive("luciConfigLine", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '
', + replace: true, + scope: { + title: "=" + }, + transclude: true + }; +}) +.directive("luciConfigFooter", function(){ + var plugin_root = $juci.module("core").plugin_root; + return { + template: '
', + replace: true, + transclude: true + }; +}); + diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.navbar.html b/luciexpress/htdocs/plugins/core/widgets/luci.navbar.html index 25d75c084..d8e3e2c75 100644 --- a/luciexpress/htdocs/plugins/core/widgets/luci.navbar.html +++ b/luciexpress/htdocs/plugins/core/widgets/luci.navbar.html @@ -1,41 +1,38 @@
-
-
- - - - - -
- +
+ + + + + +
+
diff --git a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.device.edit.html b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.device.edit.html new file mode 100644 index 000000000..e69de29bb diff --git a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.device.edit.js b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.device.edit.js new file mode 100644 index 000000000..e69de29bb diff --git a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.html b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.html index 5b914cf09..88f4308a4 100644 --- a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.html +++ b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.html @@ -1,68 +1,26 @@
- - - - -
-
{{ interface[".name"] + ".enabled"}}
-
-
- - - - - - - - - - - - - - - - -
-
Wifi Name (SSID)
-
-
-
Broadcast SSID
-
-
-
Frequency
-
- - {{"interface."+$select.selected}} - -
{{"interface."+item}}
- - -
-
-
Protection Mode
-
- - {{"encryption."+$select.selected}} - -
{{"encryption."+item}}
- - -
-
-
Wifi Password
-
-
-
Display Characters:
-
- -
+ + + + + + + + {{"interface."+$select.selected}} +
{{"interface."+item}}
 + + + + + {{"encryption."+$select.selected}} +
{{"encryption."+item}}
 + + + + +
Display Characters:
+ + +
+ diff --git a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.js b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.js index 9b0f1a00a..bf54d3f0e 100644 --- a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.js +++ b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.js @@ -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", diff --git a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.html b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.html new file mode 100644 index 000000000..593965c45 --- /dev/null +++ b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.html @@ -0,0 +1,67 @@ +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+ + + + + +
+ +
+ + + + + + + + + +
+
+ +
+
+ +
+
+ + + +
+ diff --git a/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.js b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.js new file mode 100644 index 000000000..7ad1e4876 --- /dev/null +++ b/luciexpress/htdocs/plugins/core/widgets/uci.wireless.interface.macfilter.edit.js @@ -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; + } +}); diff --git a/luciexpress/htdocs/plugins/wifi/pages/wifi.general.html b/luciexpress/htdocs/plugins/wifi/pages/wifi.general.html index daf7fc77e..4a93ff004 100644 --- a/luciexpress/htdocs/plugins/wifi/pages/wifi.general.html +++ b/luciexpress/htdocs/plugins/wifi/pages/wifi.general.html @@ -1,43 +1,35 @@
-

General WiFi Settings

-

Your EasyBox supports the industry-wide WiFi standards, enabling easy wireless connection of your devices.

- - - - - - - -
-
Wifi Network
-
- -
-
-
Enable WiFi On/Off button on EasyBox
-
-
-
-

{{info}}

-
-
-

Setup

-
- + + General WiFi Settings + Your EasyBox supports the industry-wide WiFi standards, enabling easy wireless connection of your devices. + + + + + + + + + + + Setup +
+

{{info}}

-
- +
+
+ +
+
+ +
-
- - - - -
- - -
+ + + + +
diff --git a/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.html b/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.html index 47f228b16..36d47e7be 100644 --- a/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.html +++ b/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.html @@ -1,5 +1,20 @@
- Mac filter + + MAC Filter + 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. + + str.main.wifi + + + + str.guest.wifi + + + + + + +
diff --git a/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.js b/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.js index fe725484e..be6fec4a5 100644 --- a/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.js +++ b/luciexpress/htdocs/plugins/wifi/pages/wifi.mac_filter.js @@ -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(); + } }); diff --git a/luciexpress/htdocs/plugins/wifi/pages/wifi.schedule.html b/luciexpress/htdocs/plugins/wifi/pages/wifi.schedule.html index 8d6e664da..8c903ef97 100644 --- a/luciexpress/htdocs/plugins/wifi/pages/wifi.schedule.html +++ b/luciexpress/htdocs/plugins/wifi/pages/wifi.schedule.html @@ -1,20 +1,15 @@
-

Schedule

-

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

- - - - - - - -
-
Schedule Function
-
-
- - -
+ + Schedule + 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 + + + + + + + +
diff --git a/luciexpress/htdocs/plugins/wifi/pages/wifi.settings.html b/luciexpress/htdocs/plugins/wifi/pages/wifi.settings.html index 995a12afa..088ab69d0 100644 --- a/luciexpress/htdocs/plugins/wifi/pages/wifi.settings.html +++ b/luciexpress/htdocs/plugins/wifi/pages/wifi.settings.html @@ -1,5 +1,16 @@
- Settings + + + Settings + Below you can change parameters for the two WiFi frequencies 2.4 GHz and 5 GHz. + + + + + + + +
diff --git a/luciexpress/htdocs/plugins/wifi/pages/wifi.wps.html b/luciexpress/htdocs/plugins/wifi/pages/wifi.wps.html index 680da25f9..8723b8fd7 100644 --- a/luciexpress/htdocs/plugins/wifi/pages/wifi.wps.html +++ b/luciexpress/htdocs/plugins/wifi/pages/wifi.wps.html @@ -1,20 +1,17 @@
-

WPS

-

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.

- - - - - - - -
-
WPS Function
-
-
- - -
+ + + WPS + 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. + + + + + + + + +
diff --git a/luciexpress/share/menu.d/wifi.json b/luciexpress/share/menu.d/wifi.json index 6d30ba754..fae0d461d 100644 --- a/luciexpress/share/menu.d/wifi.json +++ b/luciexpress/share/menu.d/wifi.json @@ -16,7 +16,7 @@ "view": "wifi.schedule", "index": 20 }, - "wifi/WPS": { + "wifi/wps": { "title": "WPS", "acls": [ ], "view": "wifi.wps",