225 lines
8.5 KiB
HTML
225 lines
8.5 KiB
HTML
<div class="container">
|
|
<div class="row">
|
|
|
|
<div ng-show="accounts.length > 1">
|
|
<select
|
|
ng-model='account'
|
|
ng-change='initList()'
|
|
ng-options="account.name for account in accounts track by account.id"></select>
|
|
</div>
|
|
|
|
<div class="col-md-offset-4 col-md-4 col-xs-12">
|
|
|
|
<div ng-show="lastSubmission" class="lastSubmission col-xs-offset-1 alert alert-info" role="alert">
|
|
{{lastSubmission.date | date:'dd.MM.yyyy'}}
|
|
<span ng-class="{ 'color-green': lastSubmission.amount.charAt(0) == '+', 'color-red': lastSubmission.amount.charAt(0) == '-' }">{{lastSubmission.amount}} €</span>
|
|
|
|
<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
|
|
</div>
|
|
|
|
<div class="row" style="margin: 2em 2ex 2ex 2ex;">
|
|
<form name="form" ng-submit="submitTransaction()">
|
|
|
|
<div class="row form-group">
|
|
<label for="amountInput">Betrag</label>
|
|
<input id="amountInput"
|
|
name="amount"
|
|
ng-model='transaction.amount'
|
|
type='text'
|
|
required
|
|
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>
|
|
|
|
<div class="row form-group">
|
|
<label for="categorySelect">Kategorie</label>
|
|
<select
|
|
id="categorySelect"
|
|
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 class="row form-group">
|
|
<label for="dateInput">Datum</label>
|
|
<input
|
|
id="dateInput"
|
|
ng-model='transaction.date'
|
|
type='date'
|
|
placeholder="yyyy-MM-dd"
|
|
required
|
|
class="form-control" />
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="descriptionInput">Notiz</label>
|
|
<input
|
|
id="descriptionInput"
|
|
ng-model="transaction.description"
|
|
uib-typeahead="suggestion for suggestion in updateSuggestions($viewValue)"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="row form-group" ng-show="accountUsers.length > 1">
|
|
<label for="expenseInput">Auslage</label>
|
|
<div>
|
|
<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>
|
|
|
|
<div class="row form-group" style="text-align: center;">
|
|
<button id="transactionSubmit" type="submit" class="btn btn-primary" ng-disabled="form.amount.$error.pattern">
|
|
<span ng-show="waitingForSubmission"><i class="glyphicon glyphicon-refresh spinning"></i> </span>
|
|
Senden
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<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="openDetails(transaction)" class="clickable">
|
|
<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
|
|
<td>{{transaction.category.name}}</td>
|
|
<td align="right" class="{{transaction.creditor.name ? 'creditor-' + transaction.creditor.id : ''}}"><span ng-class="transaction.amount.charAt(0) === '+' ? 'color-green' : 'color-black'">{{transaction.amount}} €</span></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>
|
|
|
|
<div class="row">
|
|
<div ng-show="accountUsers.length > 1" style="margin-top: 2em; text-align: center;">
|
|
<span ng-repeat="user in accountUsers" ng-click="openOutstandings(user)" class="clickable">{{user.name}} {{user.outstandingAmount}} €<br/></span>
|
|
</div>
|
|
|
|
|
|
<!-- Template for UI Bootstrap modal, see https://angular-ui.github.io/bootstrap/#/modal -->
|
|
<script type="text/ng-template" id="detailsTemplate.html">
|
|
<div class="modal-body">
|
|
<form name="detailsForm" style="padding:2ex;">
|
|
|
|
<div class="row form-group">
|
|
<label for="amountInput">Betrag</label>
|
|
<input id="amountInput"
|
|
name="amount"
|
|
ng-model='transaction.amount'
|
|
type='text'
|
|
required
|
|
autocomplete="off"
|
|
autofocus="autofocus"
|
|
ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/"
|
|
class="form-control" />
|
|
<span ng-show="detailsForm.amount.$error.pattern"><br/>The value is not valid!</span>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="categorySelect">Kategorie</label>
|
|
<select
|
|
id="categorySelect"
|
|
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 class="row form-group">
|
|
<label for="dateInput">Datum</label>
|
|
<input
|
|
id="dateInput"
|
|
ng-model='transaction.date'
|
|
type='date'
|
|
placeholder="yyyy-MM-dd"
|
|
required
|
|
class="form-control" />
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="descriptionInput">Notiz</label>
|
|
<input
|
|
id="descriptionInput"
|
|
ng-model="transaction.description"
|
|
autocomplete="off"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="row form-group" ng-show="accountUsers.length > 1">
|
|
<label for="expenseInput">Auslage</label>
|
|
<div>
|
|
<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>
|
|
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div style="float:left">
|
|
<button class="btn btn-danger" ng-click="deleteTransaction()">Löschen</button>
|
|
</div>
|
|
<div style="float:right">
|
|
<button class="btn btn-primary" ng-disabled="detailsForm.amount.$error.pattern" type="button" ng-click="ok()">OK</button>
|
|
<button class="btn btn-warning" type="button" ng-click="cancel()">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
<!-- pre style="font-size: 75%; color: black;">{{transaction | json}}</pre -->
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="outstandingsTemplate.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">{{accountUser.name}} <span ng-class="accountUser.outstandingSum >= 0 ? 'color-green' : 'color-red'">{{accountUser.outstandingAmount}} €</span></h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div ng-show="accountUser.outstandings.length > 0">
|
|
<table class="listing">
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Kategorie</th>
|
|
<th>Betrag</th>
|
|
<th>Beschreibung</th>
|
|
</tr>
|
|
<tr ng-repeat="outstanding in accountUser.outstandings">
|
|
<td>{{outstanding.date | date:'dd.MM.yyyy'}}</td>
|
|
<td>{{outstanding.category}}</td>
|
|
<td align="right"><span ng-class="outstanding.amount.charAt(0) === '+' ? 'color-green' : 'color-red'">{{outstanding.amount}} €</span></td>
|
|
<td>{{outstanding.description}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div ng-show="accountUser.outstandings.length == 0">
|
|
<i>Keine Auslagen oder Entnahmen für {{accountUser.name}}</i>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div style="float:left">
|
|
<button class="btn btn-danger" ng-click="clearOutstandings()">Zurücksetzen</button>
|
|
</div>
|
|
<div style="float:right">
|
|
<button class="btn btn-default" type="button" ng-click="close()">Schließen</button>
|
|
</div>
|
|
</div>
|
|
<!-- pre style="font-size: 75%; color: black;">{{transaction | json}}</pre -->
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |