angular-ui

src/main/resources/static/index.html

@@ -17,8 +17,6 @@
 <script src="js/angular-animate.min.js"></script>
 <script src="js/angular-touch.min.js"></script>
 
-<script src="js/autocomplete.min.js"></script>
-
 
 <script src="js/jquery-2.1.4.min.js"></script>
 <script src="js/bootstrap.min.js"></script>

src/main/resources/static/js/app.js

@@ -1,4 +1,4 @@
-var transactionsApp = angular.module('transactionsApp', ['ui.bootstrap', 'ngRoute', 'transactionControllers', 'autocomplete' ]);
+var transactionsApp = angular.module('transactionsApp', ['ui.bootstrap', 'ngRoute', 'transactionControllers' ]);
 
 transactionsApp.config([ '$routeProvider', function($routeProvider) {
 	$routeProvider.when('/list', {

src/main/resources/static/js/autocomplete.min.js

@@ -1 +0,0 @@
-var app=angular.module("autocomplete",[]);app.directive("autocomplete",function(){var e=-1;return{restrict:"E",scope:{searchParam:"=ngModel",suggestions:"=data",onType:"=onType",onSelect:"=onSelect",autocompleteRequired:"="},controller:["$scope",function(e){e.selectedIndex=-1,e.initLock=!0,e.setIndex=function(t){e.selectedIndex=parseInt(t)},this.setIndex=function(t){e.setIndex(t),e.$apply()},e.getIndex=function(t){return e.selectedIndex};var t=!0;e.completing=!1,e.$watch("searchParam",function(n,i){i===n||!i&&e.initLock||(t&&"undefined"!=typeof e.searchParam&&null!==e.searchParam&&(e.completing=!0,e.searchFilter=e.searchParam,e.selectedIndex=-1),e.onType&&e.onType(e.searchParam))}),this.preSelect=function(n){t=!1,e.$apply(),t=!0},e.preSelect=this.preSelect,this.preSelectOff=function(){t=!0},e.preSelectOff=this.preSelectOff,e.select=function(n){n&&(e.searchParam=n,e.searchFilter=n,e.onSelect&&e.onSelect(n)),t=!1,e.completing=!1,setTimeout(function(){t=!0},1e3),e.setIndex(-1)}}],link:function(t,n,i){setTimeout(function(){t.initLock=!1,t.$apply()},250);var a="";t.attrs={placeholder:"start typing...","class":"",id:"",inputclass:"",inputid:""};for(var r in i)a=r.replace("attr","").toLowerCase(),0===r.indexOf("attr")&&(t.attrs[a]=i[r]);i.clickActivation&&(n[0].onclick=function(e){t.searchParam||setTimeout(function(){t.completing=!0,t.$apply()},200)});var l={left:37,up:38,right:39,down:40,enter:13,esc:27,tab:9};document.addEventListener("keydown",function(e){var n=e.keyCode||e.which;switch(n){case l.esc:t.select(),t.setIndex(-1),t.$apply(),e.preventDefault()}},!0),document.addEventListener("blur",function(e){setTimeout(function(){t.select(),t.setIndex(-1),t.$apply()},150)},!0),n[0].addEventListener("keydown",function(n){var i=n.keyCode||n.which,a=angular.element(this).find("li").length;if(t.completing&&0!=a)switch(i){case l.up:if(e=t.getIndex()-1,-1>e)e=a-1;else if(e>=a){e=-1,t.setIndex(e),t.preSelectOff();break}t.setIndex(e),-1!==e&&t.preSelect(angular.element(angular.element(this).find("li")[e]).text()),t.$apply();break;case l.down:if(e=t.getIndex()+1,-1>e)e=a-1;else if(e>=a){e=-1,t.setIndex(e),t.preSelectOff(),t.$apply();break}t.setIndex(e),-1!==e&&t.preSelect(angular.element(angular.element(this).find("li")[e]).text());break;case l.left:break;case l.right:case l.enter:case l.tab:e=t.getIndex(),-1!==e?(t.select(angular.element(angular.element(this).find("li")[e]).text()),i==l.enter&&n.preventDefault()):i==l.enter&&t.select(),t.setIndex(-1),t.$apply();break;case l.esc:t.select(),t.setIndex(-1),t.$apply(),n.preventDefault();break;default:return}})},template:'        <div class="autocomplete {{ attrs.class }}" id="{{ attrs.id }}">          <input            type="text"            ng-model="searchParam"            placeholder="{{ attrs.placeholder }}"            class="{{ attrs.inputclass }}"            id="{{ attrs.inputid }}"            ng-required="{{ autocompleteRequired }}" />          <ul ng-show="completing && (suggestions | filter:searchFilter).length > 0">            <li              suggestion              ng-repeat="suggestion in suggestions | filter:searchFilter | orderBy:\'toString()\' track by $index"              index="{{ $index }}"              val="{{ suggestion }}"              ng-class="{ active: ($index === selectedIndex) }"              ng-click="select(suggestion)"              ng-bind-html="suggestion | highlight:searchParam"></li>          </ul>        </div>'}}),app.filter("highlight",["$sce",function(e){return function(t,n){if("function"==typeof t)return"";if(n){var i="("+n.split(/\ /).join(" |")+"|"+n.split(/\ /).join("|")+")",a=new RegExp(i,"gi");i.length&&(t=t.replace(a,'<span class="highlight">$1</span>'))}return e.trustAsHtml(t)}}]),app.directive("suggestion",function(){return{restrict:"A",require:"^autocomplete",link:function(e,t,n,i){t.bind("mouseenter",function(){i.preSelect(n.val),i.setIndex(n.index)}),t.bind("mouseleave",function(){i.preSelectOff()})}}});

src/main/resources/static/js/controllers.js

@@ -218,30 +218,13 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 		}
 	};
 	
-	$scope.updateSuggestions = function(typed) {
+	$scope.updateSuggestions = function(val) {
-		var suggestions = $resource('http://localhost:8080/transactions/search/descriptions', { accountId: $scope.account.id, prefix: typed.toLowerCase() }).get();
-		suggestions.$promise.then(function(data) {
-			console.log(suggestions);
-			
-			var newSuggestions = new Array(suggestions._embedded.transactions.length);
-			for (i = 0; i < suggestions._embedded.transactions.length; i++) {
-				newSuggestions[i] = suggestions._embedded.transactions[i].description;
-			}
-			
-			$scope.descriptionSuggestions = newSuggestions;
-		});
-	}
-	
-	$scope.getLocation = function(val) {
 		var suggestions = $resource('http://localhost:8080/transactions/search/descriptions', { accountId: $scope.account.id, prefix: val.toLowerCase() }).get();
 		return suggestions.$promise.then(function(data) {
-			console.log(suggestions);
-			
 			var newSuggestions = new Array(suggestions._embedded.transactions.length);
 			for (i = 0; i < suggestions._embedded.transactions.length; i++) {
 				newSuggestions[i] = suggestions._embedded.transactions[i].description;
 			}
-			
 			return newSuggestions;
 		});
 	};	

src/main/resources/static/partials/transaction-list.html

@@ -19,13 +19,17 @@
 				
 					<br />
 				
-					<div class="row">
+					<div class="row form-group">
-						<div class="col-md-1 col-xs-2 input-heading">Betrag:</div>
+						<label for="inputAmount">Betrag:</label>
-						<div class="col-md-11 col-xs-10">
+						<input id="inputAmount"	
-							<input name="amount" ng-model='transaction.amount' type='text' required autocomplete="off" autofocus="autofocus"
+							ng-model='transaction.amount'
-									ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
+							type='text'
-										is not valid!</span>
+							required
-						</div>
+							autocomplete="off"
+							autofocus="autofocus"
+							ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/"
+							class="form-control" />
+						<span ng-show="form.amount.$error.pattern"><br/>The value is not valid!</span>
 					</div>
 					
 					<br />
@@ -33,7 +37,11 @@
 					<div class="row">
 						<div class="col-md-1 col-xs-2 input-heading">Kategorie:</div>
 						<div class="col-md-11 col-xs-10">
-							<select ng-model='transaction.category' size='1' ng-options="category.name for category in categories track by category._links.self.href" ng-change='checkCategory()'></select>
+							<select
+								ng-model='transaction.category'
+								size='1' ng-options="category.name for category in categories track by category._links.self.href"
+								ng-change='checkCategory()'
+								class="form-control"></select>
 						</div>
 					</div>
 					
@@ -42,7 +50,11 @@
 					<div class="row">
 						<div class="col-md-1 col-xs-2 input-heading">Datum:</div>
 						<div class="col-md-11 col-xs-10">
-							<input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required />
+							<input ng-model='transaction.date'
+								type='date'
+								placeholder="yyyy-MM-dd"
+								required
+								class="form-control" />
 						</div>
 					</div>
 					
@@ -51,20 +63,10 @@
 					<div class="row">
 						<div class="col-md-1 col-xs-2 input-heading">Notiz:</div>
 						<div class="col-md-11 col-xs-10">
-							<autocomplete ng-model="transaction.description" data="descriptionSuggestions" on-type="updateSuggestions"></autocomplete>
+							<input ng-model="transaction.description"
-							<!-- input ng-model='transaction.description' type='text' size='20' / -->
+								uib-typeahead="address for address in updateSuggestions($viewValue)"
-						</div>
+								typeahead-loading="loadingLocations"
-					</div>
+								class="form-control">
-
-					<div>
-						<h4>Asynchronous results</h4>
-						<pre>Model: {{asyncSelected | json}}</pre>
-						<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http"
-							uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations"
-							typeahead-no-results="noResults" class="form-control"> <i ng-show="loadingLocations"
-							class="glyphicon glyphicon-refresh"></i>
-						<div ng-show="noResults">
-							<i class="glyphicon glyphicon-remove"></i> No Results Found
 						</div>
 					</div>
 
@@ -115,7 +117,7 @@
 			<div style="margin-top: 2em; text-align: center;">
 				<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
 			</div>
-	
+
 			<!-- div>
 				<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
 			</div -->