user interface for withdrawals

2016-04-17 13:56:37 +02:00
parent 64b971e4ac
commit 51f70c3b45
3 changed files with 79 additions and 51 deletions
@@ -1,51 +1,57 @@
 <div>
 	<div>
 		<div><select ng-model='account' ng-change='refreshList()' ng-options="account.name for account in accounts track by account.id"></select></div>
-		<div>
-			<form name="form" ng-submit="postTransaction()">
-				<div>
-					Betrag: <input name="amount" ng-model='transaction.amount' type='text' required ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" />
-				</div>
-				<span ng-show="form.amount.$error.pattern">The value is not valid!</span>
-				<div>
-					Kategorie: <select ng-model='transaction.category' size='1'
-						ng-options="category.name for category in categories track by category._links.self.href">
-					</select>
-				</div>
-				<div>
-					Datum: <input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required />
-				</div>
-				<div>
-					Notiz: <input ng-model='transaction.description' type='text' size='20' />
-				</div>
-				<div>
-					Auslage: <label><input name='expenseBy' type='radio' checked='checked' />Keine</label>
-					<label ng-repeat="user in accountUsers"><input name='expenseBy' type='radio' />{{user.name}}</label>
-				</div>
-				<div>
-					<input type="submit" ng-disabled="form.amount.$error.pattern" />
-				</div>
-			</form>
-
-			<table class="listing">
+		<form name="form" ng-submit="postTransaction()">
+			<table border='0' cellpadding='1' style='margin: auto;'>
 				<tr>
-					<th>Datum</th>
-					<th>Kategorie</th>
-					<th>Betrag</th>
-					<th>Beschreibung</th>
+					<td align='right'>Betrag:</td>
+					<td><input name="amount" ng-model='transaction.amount' type='text' required
+						ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
+							is not valid!</span></td>
 				</tr>
-				<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
-					<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
-					<td>{{transaction.category.name}}</td>
-					<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
-					<td>{{transaction.description}}</td>
+				<tr>
+					<td align='right'>Kategorie:</td>
+					<td><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></td>
+				</tr>
+				<tr>
+					<td align='right'>Datum:</td>
+					<td><input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required /></td>
+				</tr>
+				<tr>
+					<td align='right'>Notiz:</td>
+					<td><input ng-model='transaction.description' type='text' size='20' /></td>
+				</tr>
+				<tr>
+					<td align='right'>Auslage:</td>
+					<td><label class='userLabel'><input name='expenseBy' type='radio' checked='checked' />Keine</label> <label
+						ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' type='radio' />{{user.name}}</label></td>
+				</tr>
+				<tr>
+					<td align='center' colspan='2'><input type="submit" ng-disabled="form.amount.$error.pattern" /></td>
 				</tr>
 			</table>
+		</form>

-			<!-- div>
-				<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
-			</div -->
+		<table class="listing">
+			<tr>
+				<th>Datum</th>
+				<th>Kategorie</th>
+				<th>Betrag</th>
+				<th>Beschreibung</th>
+			</tr>
+			<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
+				<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
+				<td>{{transaction.category.name}}</td>
+				<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
+				<td>{{transaction.description}}</td>
+			</tr>
+		</table>
+
+		<!-- div>
+			<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
+		</div -->
 			
-		</div>
 	</div>
 </div>