From 7b7fd75c21970dab6fc0fa57199d9391158178cb Mon Sep 17 00:00:00 2001
From: Noel Wuyts <noel@cloudcolony.eu>
Date: Fri, 29 May 2015 12:05:29 +0200
Subject: [PATCH] remove ugly ui-select

---
 .../plugins/core/widgets/luci.select.js       | 14 ++++----
 .../plugins/core/widgets/luci.top_bar.html    | 14 +-------
 .../plugins/core/widgets/luci.top_bar.js      | 33 +++++++++++--------
 .../htdocs/themes/vodafone/vodafone.js        |  2 +-
 4 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.select.js b/luciexpress/htdocs/plugins/core/widgets/luci.select.js
index 555abda24..3b680226e 100644
--- a/luciexpress/htdocs/plugins/core/widgets/luci.select.js
+++ b/luciexpress/htdocs/plugins/core/widgets/luci.select.js
@@ -19,7 +19,7 @@ $juci.module("core")
 				html += '<div class="dropdown dropdown-toggle" data-toggle="dropdown" ><a class="dropdown-toggle" role="button" data-toggle="dropdown"  href="javascript:;">{{((selectedItem||{}).label || placeholder) | translate}}<b class="caret"></b></a>';
 				break;
 			default:
-				html += '<div class="btn-group" style="white-space: nowrap;"><button class="btn btn-default button-label {{size_class}}" style="display: inline-block; float:none;">{{selectedText | translate}}</button><button class="btn btn-default dropdown-toggle" style="display: inline-block; float:none;" data-toggle="dropdown"><span class="caret"></span></button>';
+				html += '<div class="btn-group" style="white-space: nowrap;"><button class="btn btn-default button-label {{size_class}}" style="display: inline-block; float:none;">{{selectedText}}</button><button class="btn btn-default dropdown-toggle" style="display: inline-block; float:none;" data-toggle="dropdown"><span class="caret"></span></button>';
 				break;
 		}
 		html += '<ul class="dropdown-menu"><li ng-repeat="item in itemList"><a tabindex="-1" data-ng-click="selectVal(item)" href="">{{item.label}}</a></li></ul></div>';
@@ -36,17 +36,17 @@ $juci.module("core")
 		scope.$watch("items", function(value){
 			if(value){
 				scope.itemList = value.map(function(x){
-					//console.log(JSON.stringify(x)+" "+JSON.stringify(scope.selectedItem)); 
+					//console.log(JSON.stringify(x)+" "+JSON.stringify(scope.selectedItem));
 					if(typeof x == "object" && "value" in x){
 						if(scope.selectedItem != undefined && scope.selectedItem.value == x.value)
 							scope.selectedText = scope.selectedItem.label || scope.placeholder;
 						else if(scope.selectedItem == x.value){
 							scope.selectedText = x.label || scope.placeholder; 
-						} 
-						//alert(JSON.stringify(x)+" "+JSON.stringify(scope.selectedItem));
+						}
+						//console.log(JSON.stringify(x)+" "+JSON.stringify(scope.selectedItem));
 						return { label: x.label, value: x.value }; 
 					} else {
-						if(scope.selectedItem == x){
+                        if(scope.selectedItem == x){
 							scope.selectedText = scope.selectedItem || scope.placeholder; 
 						}
 						return { label: x, value: x }; 
@@ -55,7 +55,7 @@ $juci.module("core")
 			}
 		}); 
 		scope.$watch("selectedItem", function(value){
-			//console.log("Selected item: "+JSON.stringify(value)); 
+			//console.log("Selected item: "+JSON.stringify(value));
 			if(value != undefined && (typeof value) == "object") {
 				if("value" in value) scope.selectedText = value.value; 
 				else scope.selectedText = scope.placeholder; 
@@ -78,7 +78,7 @@ $juci.module("core")
 					$('button.button-label', element).html(item.label);
 					break;
 			}
-			//console.log("DROPDOWN: "+JSON.stringify(scope.selectedItem)+", "+item.value); 
+			//console.log("DROPDOWN: "+JSON.stringify(scope.selectedItem)+", "+item.value);
 			var value = item; 
 			if("value" in item) 
 				value = item.value; 
diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html b/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html
index d5fbda218..ff9179ff9 100644
--- a/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html
+++ b/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html
@@ -1,21 +1,9 @@
-
 <div class="top-bar">
 	<div class="container">
 		<div class="row">
 			<div class="col-xs-5" style="font-size: 28px; padding-top: 10px;">{{ model }}</div>
 			<div style="float: right; margin-top: 10px; ">
-				<ui-select ng-model="selectedMode"
-						 theme="bootstrap"
-						 search-enabled="false"
-						 on-select="onChangeMode($item, $model)"
-						 style="width: 150px;"
-				>
-						<ui-select-match placeholder="{{'Basic'|translate}}">{{$select.selected.label}}</ui-select-match>
-						<ui-select-choices repeat="mode in guiModes"
-										 refresh-delay="0">
-							<div >{{mode.label}}</div>
-						</ui-select-choices>
-				</ui-select>
+				<luci-select ng-model="selectedModeValue" ng-items="guiModes" on-change="onChangeMode()"></luci-select>
 			</div>
 		</div>
 	</div>
diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.js b/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.js
index 0b806e77f..b828094b7 100644
--- a/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.js
+++ b/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.js
@@ -19,24 +19,29 @@ $juci.module("core")
 		$scope.$apply(); 
 	}); 
 	$scope.guiModes = [
-		{id: "basic", label: gettext("Basic Mode")},
-		{id: "expert", label: gettext("Expert Mode")},
-		{id: "logout", label: gettext("Log out")}
+		{label: gettext("Basic Mode"), value: "basic"},
+		{label: gettext("Expert Mode"), value: "expert"},
+		{label: gettext("Log out"), value: "logout"}
 	]; 
 	Object.keys($scope.guiModes).map(function(k){
-		var m = $scope.guiModes[k]; 
-		if(m.id == $config.mode) $scope.selectedMode = m;
+		var m = $scope.guiModes[k];
+        if (!$config.mode) {
+            $config.mode = "basic"; // by default
+        }
+		if(m.value == $config.mode) $scope.selectedModeValue = m;
 	});  
-	$scope.onChangeMode = function(item){
-		var selected = item.id; 
-		if(selected == "logout") {
-			$rpc.$logout().always(function(){
-				$window.location.href="/"; 
-			}); 
+	$scope.onChangeMode = function(){
+		var selected = $scope.selectedModeValue;
+        console.log("selected value", selected);
+        if(selected == "logout") {
+            console.log("logging out");
+            $rpc.$logout().always(function(){
+				$window.location.href="/";
+			});
 		} else {
-			$localStorage.setItem("mode", selected); 
-			$config.mode = selected; 
-			$state.reload(); 
+			$localStorage.setItem("mode", selected);
+			$config.mode = selected;
+			$state.reload();
 		}
 	};
 }); 
diff --git a/luciexpress/htdocs/themes/vodafone/vodafone.js b/luciexpress/htdocs/themes/vodafone/vodafone.js
index 88cf7bdd7..6ba09eb4c 100644
--- a/luciexpress/htdocs/themes/vodafone/vodafone.js
+++ b/luciexpress/htdocs/themes/vodafone/vodafone.js
@@ -5,7 +5,7 @@ angular.module("luci").config(function($provide){
 		"luciLayoutSingleColumnDirective": "/widgets/luci.layout.single_column.html", 
 		"luciLayoutWithSidebarDirective": "/widgets/luci.layout.with_sidebar.html", 
 		"luciNavbarDirective": "/widgets/luci.navbar.html",
-		"luciTopBarDirective": "/widgets/luci.top_bar.html"
+		//"luciTopBarDirective": "/widgets/luci.top_bar.html"
 	}; 
 	var plugin_root = "/themes/vodafone/"; 
 	Object.keys(overrides).map(function(k){