basic bootstrap styles
This commit is contained in:
@@ -1,79 +1,111 @@
|
||||
<div>
|
||||
<div>
|
||||
<div id="accountSelector"><select ng-model='account' ng-change='refreshList()' ng-options="account.name for account in accounts track by account.id"></select></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div><select ng-model='account' ng-change='refreshList()' ng-options="account.name for account in accounts track by account.id"></select></div>
|
||||
|
||||
<div ng-show="lastSubmission" class='ui-state-highlight' style='text-align: center; padding: 0.5ex; width: 30em; margin:auto; margin-bottom: 2em;'>
|
||||
{{lastSubmission.date | date:'dd.MM.yyyy'}}
|
||||
<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}} €</span>
|
||||
|
||||
<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<form name="form" ng-submit="postTransaction()">
|
||||
<table border='0' cellpadding='1' style='margin: auto;'>
|
||||
<tr>
|
||||
<td align='right'>Betrag:</td>
|
||||
<td><input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus"
|
||||
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>
|
||||
<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' ng-model='transaction.creditor' ng-value='none' type='radio' checked='checked' />Keine</label -->
|
||||
<!-- label ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' ng-model='$parent.transaction.creditor' ng-value='{{user.name}}' type='radio' />{{user.name}}</label -->
|
||||
<div class="col-md-offset-1 col-md-10 col-xs-12">
|
||||
|
||||
<br />
|
||||
|
||||
<div ng-show="lastSubmission" class='ui-state-highlight lastSubmission col-xs-offset-1'>
|
||||
{{lastSubmission.date | date:'dd.MM.yyyy'}}
|
||||
<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}} €</span>
|
||||
|
||||
<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<form name="form" ng-submit="postTransaction()" class="col-md-offset-4 col-xs-offset-1">
|
||||
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-xs-2 input-heading">Betrag:</div>
|
||||
<div class="col-md-11 col-xs-10">
|
||||
<input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus"
|
||||
ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
|
||||
is not valid!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />Keine</label>
|
||||
<label class='userLabel' ng-repeat="user in accountUsers"><input name='expenseBy' ng-model='$parent.transaction.creditor' type='radio' value="{{user._links.self.href}}" />{{user.name}}</label>
|
||||
</td>
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-xs-2 input-heading">Notiz:</div>
|
||||
<div class="col-md-11 col-xs-10">
|
||||
<input ng-model='transaction.description' type='text' size='20' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</tr>
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-xs-2 input-heading">Auslage:</div>
|
||||
<div class="col-md-11 col-xs-10">
|
||||
<!-- label class='userLabel'><input name='expenseBy' ng-model='transaction.creditor' ng-value='none' type='radio' checked='checked' />Keine</label -->
|
||||
<!-- label ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' ng-model='$parent.transaction.creditor' ng-value='{{user.name}}' type='radio' />{{user.name}}</label -->
|
||||
|
||||
<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />Keine </label>
|
||||
<label class='userLabel' ng-repeat="user in accountUsers"><input name='expenseBy' ng-model='$parent.transaction.creditor' type='radio' value="{{user._links.self.href}}" />{{user.name}} </label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center">
|
||||
<input type="submit" ng-disabled="form.amount.$error.pattern" class="btn btn-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<table class="listing">
|
||||
<tr>
|
||||
<td align='center' colspan='2'><input type="submit" ng-disabled="form.amount.$error.pattern" /></td>
|
||||
<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}} €</td>
|
||||
<td>{{transaction.description}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<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}} €</td>
|
||||
<td>{{transaction.description}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
|
||||
<a href="" ng-click="moreTransactions()">more</a>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2em; text-align: center;">
|
||||
<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}} €<br/></span>
|
||||
</div>
|
||||
|
||||
<!-- div>
|
||||
<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
|
||||
</div -->
|
||||
<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
|
||||
<a href="" ng-click="moreTransactions()">more</a>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2em; text-align: center;">
|
||||
<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}} €<br/></span>
|
||||
</div>
|
||||
|
||||
<!-- div>
|
||||
<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
|
||||
</div -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user