Rewrote frontend with AngularJS framework.
This commit is contained in:
Alexis Lahouze
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<html lang="fr" ng-app="$strap">
|
||||
<head>
|
||||
<!-- Title -->
|
||||
<title>Entries</title>
|
||||
@ -20,38 +20,39 @@
|
||||
<div class="span12">
|
||||
<!-- Navbar with accounts -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="navbar-inner" ng-controller="AccountController">
|
||||
<!-- Title -->
|
||||
<a class="brand" href="#"> Comptes</a>
|
||||
|
||||
<!-- Account list -->
|
||||
<div class="nav" data-bind="foreach: accounts, value: account">
|
||||
<div class="nav" ng-repeat="account in accounts">
|
||||
<div class="btn-group">
|
||||
<!-- Account button -->
|
||||
<button class="btn btn-nav" data-bind="css: { active: $data === $root.account() }, click: $parent.selectAccount"><span data-bind="text: name"></span> (<span data-bind="text: current, css: {'text-warning': $data.current < 0 && $data.current >= $data.authorized_overdraft, 'text-error': $data.current < $data.authorized_overdraft }"></span> / <span data-bind="text: pointed"></span>)</button>
|
||||
<button class="btn btn-nav" ng-class="accountClass(account)" ng-click="selectAccount(account)">{{account.name}} (<span ng-class="valueClass(account, account.current)">{{account.current}}</span> / <span ng-class="valueClass(account, account.pointed)">{{account.pointed}}</span>)</button>
|
||||
<!-- Dropdown button -->
|
||||
<button class="btn btn-nav dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" data-bind="click: $root.editAccount">Modifier</a></li>
|
||||
<li><a href="#" data-bind="click: $root.removeAccount">Supprimer</a></li>
|
||||
<li><a href="#" ng-click="editAccount(account)" bs-modal="'templates/account_edit.html'">Modifier</a></li>
|
||||
<li><a href="#" bs-modal="'templates/account_remove.html'">Supprimer</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New account button -->
|
||||
<div class="btn btn-nav">
|
||||
<a data-bind="click: $root.addAccount" href="#"><i class="icon-plus"></i></a>
|
||||
<a bs-modal="'templates/account_new.html'" href="#"><i class="icon-plus"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navbar with the months of the selected account -->
|
||||
<div class="navbar navbar-fixed-bottom">
|
||||
<div class="navbar-inner">
|
||||
<ul data-bind="foreach: months()" class="nav">
|
||||
<li data-bind="css: {'active': $data == $root.month()}"><a href="#" data-bind="click: $parent.selectMonth"><span data-bind="text: $data.year"></span>-<span data-bind="text: $data.month"></span></a></li>
|
||||
<div class="navbar-inner" ng-controller="MonthController">
|
||||
<ul ng-repeat="month in months" class="nav">
|
||||
<li ng-class="monthClass(month)"><a href="#" ng-click="selectMonth(month)">{{month.year}}-{{month.month}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,12 +64,12 @@
|
||||
<div class="row-fluid">
|
||||
<!-- Sold evolution chart placeholder -->
|
||||
<div class="span8">
|
||||
<div id="entries-chart-placeholder" data-bind="chart: $root.entriesChart"></div>
|
||||
<div id="entries-chart-placeholder"></div>
|
||||
</div>
|
||||
|
||||
<!-- Expense category piechart -->
|
||||
<div class="span4">
|
||||
<div id="expense-categories-chart-placeholder" data-bind="pieChart: $root.expenseCategoriesChart"></div>
|
||||
<div id="expense-categories-chart-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -78,13 +79,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Row with entry table -->
|
||||
<div class="row-fluid">
|
||||
<div class="row-fluid" ng-controller="EntryController">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<!-- Head of the table containing column headers and size -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px">Date de valeur</th>
|
||||
<!--<th style="width: 100px">Date de l'op.</th>-->
|
||||
<th style="width: 100px">Date d'op.</th>
|
||||
<th>Libellé de l'opération</th>
|
||||
<th style="width: 50px">Montant</th>
|
||||
<th style="width: 50px">Solde</th>
|
||||
@ -94,156 +94,48 @@
|
||||
</thead>
|
||||
|
||||
<!-- Body of the table containing the entries -->
|
||||
<tbody data-bind="template:{name: templateToUse, foreach: entries}"></tbody>
|
||||
<tbody>
|
||||
<tr id="entry_{{entry.id}}" class="form-inline" ng-class="entryRowClass(entry.sold)" ng-repeat="entry in entries">
|
||||
<td>
|
||||
<input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
|
||||
<span ng-show="isDisplaying(entry)">{{entry.operation_date}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<input ng-show="isEditing(entry)" type="text" class="input-xxlarge" ng-model="entry.label"/>
|
||||
<span ng-show="isDisplaying(entry)">{{entry.label}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<input ng-show="isEditing(entry)" type="text" class="input-mini" ng-model="entry.value"/>
|
||||
<span ng-show="isDisplaying(entry)">{{entry.value}}</span>
|
||||
</td>
|
||||
<td ng-class="entryValueClass(entry.sold)">{{entry.sold}}</td>
|
||||
<td>
|
||||
<input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.category" bs-typeahead="categories"/>
|
||||
<span ng-show="isDisplaying(entry)">{{entry.category}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group" ng-show="isEditing(entry)">
|
||||
<a class="btn btn-mini btn-success" ng-click="saveEntry(entry)" href="#entry_{{entry.id}}" title="Save"><i ng-class="iconSaveClass(entry)"><span style="display: none">Save</span></i></a>
|
||||
<a class="btn btn-mini" ng-click="cancelEditEntry(entry)" href="#entry_{{entry.id}}" title="Cancel"><i ng-class="iconCancelClass(entry)"><span style="display: none">Cancel</span></i></a>
|
||||
<a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#entry_{{entry.id}}" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
|
||||
</div>
|
||||
<div class="btn-group" ng-show="isDisplaying(entry)">
|
||||
<a class="btn btn-mini" ng-click="editEntry(entry)" href="#entry_{{entry.id}}" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
|
||||
<a class="btn btn-mini" bs-modal="'templates/entry_remove.html'" href="#entry_{{entry.id}}" title="remove"><i class="icon-trash"><span style="display: none">Remove</span></i></a>
|
||||
<a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#entry_{{entry.id}}" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Emtpy row with bottom margin to avoid data undur the fixed bottom navbar -->
|
||||
<!-- Emtpy row with bottom margin to avoid data under the fixed bottom navbar -->
|
||||
<div class="row-fluid" style="margin-bottom: 21px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm entry removal modal dialog -->
|
||||
<div id="remove-confirm" class="modal hide fade">
|
||||
<!-- Dialog header with title -->
|
||||
<div class="modal-header">
|
||||
<h3>Confirmer la suppression</h3>
|
||||
</div>
|
||||
|
||||
<!-- Dialog body -->
|
||||
<div class="modal-body">
|
||||
<p>Confirmez-vous la suppression de cette entrée ?</p>
|
||||
</div>
|
||||
|
||||
<!-- Dialog footer with buttons -->
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
|
||||
<a href="#" class="btn" data-bind="click: confirmRemove">Oui</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm account removal modal dialog -->
|
||||
<div id="remove-account-confirm" class="modal hide fade">
|
||||
<!-- Dialog header with title -->
|
||||
<div class="modal-header">
|
||||
<h3>Confirmer la suppression</h3>
|
||||
</div>
|
||||
|
||||
<!-- Dialog body -->
|
||||
<div class="modal-body">
|
||||
<p>Confirmez-vous la suppression de ce compte ?</p>
|
||||
</div>
|
||||
|
||||
<!-- Dialog footer with buttons -->
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
|
||||
<a href="#" class="btn" data-bind="click: confirmAccountRemove">Oui</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account edit modal dialog -->
|
||||
<div id="edit-account" class="modal hide fade">
|
||||
<!-- Dialog header with title -->
|
||||
<div class="modal-header">
|
||||
<h3>Éditer le compte</h3>
|
||||
</div>
|
||||
|
||||
<!-- Dialog body -->
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" data-bind="with: editingAccount">
|
||||
<div class="control-group">
|
||||
<!-- Account name field -->
|
||||
<label class="control-label" for="inputName">Nom du compte</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputName" data-bind="value: name"></input>
|
||||
</div>
|
||||
|
||||
<!-- Authorized overdraft field -->
|
||||
<label class="control-label" for="inputAuthorizedOverdraft">Découvert authorisé</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputAuthorizedOverdraft" data-bind="value: authorized_overdraft"></input>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog footer with buttons -->
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn btn-primary" data-bind="click: saveAccount">OK</a>
|
||||
<a href="#" class="btn" data-bind="click: cancelEditAccount">Annuler</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Displayed item template -->
|
||||
<script id="itemsTmpl" type="text/html">
|
||||
<tr data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
|
||||
<td data-bind="text: operation_date"></td>
|
||||
|
||||
<td data-bind="text: label"></td>
|
||||
|
||||
<td data-bind="text: value, css: {'text-error': value() < 0 }"></td>
|
||||
|
||||
<td data-bind="text: sold, css: {'text-warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'text-error': sold() < $root.account().authorized_overdraft() }"></td>
|
||||
|
||||
<td data-bind="text: category"></td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-mini" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-edit"></i></a>
|
||||
<a class="btn btn-mini" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
|
||||
<a class="btn btn-mini" data-bind="css: {'active': pointed}, click: $root.pointEntry" href="#" title="point"><i class="icon-pencil"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<!-- New item template -->
|
||||
<script id="newTmpl" type="text/html">
|
||||
<tr class="form-inline">
|
||||
<td><input type="text" class="input-small" data-bind="value: operation_date" data-date-format="yyyy-mm-dd" id="new_operation_date" /></td>
|
||||
|
||||
<td><input type="text" class="input-xxlarge" data-bind="value: label"/></td>
|
||||
|
||||
<td><input type="text" class="input-mini" data-bind="value: value"/></td>
|
||||
|
||||
<td></td>
|
||||
|
||||
<td><input type="text" class="input-small" data-bind="value: category, typeahead: {source: $root.categories }"/></td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-mini btn-success" data-bind="click: $root.save" href="#" title="Add"><i class="icon-plus"></i></a>
|
||||
<a class="btn btn-mini" data-bind="click: $root.cancel" href="#" title="Clear"><i class="icon-remove"></i></a>
|
||||
<a class="btn btn-mini" data-bind="css: {'active': pointed}, click: $root.pointEntry" href="#" title="point"><i class="icon-pencil"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<!-- Edit item template -->
|
||||
<script id="editTmpl" type="text/html">
|
||||
<tr class="form-inline" data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
|
||||
<td><input type="text" class="input-small" data-bind="value: operation_date" data-date-format="yyyy-mm-dd" id="operation_date" /></td>
|
||||
|
||||
<td><input type="text" class="input-xxlarge" data-bind="value: label"/></td>
|
||||
|
||||
<td><input type="text" class="input-mini" data-bind="value: value"/></td>
|
||||
|
||||
<td data-bind="text: sold, css: {'text-warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'text-error': sold() < $root.account().authorized_overdraft() }"></td>
|
||||
|
||||
<td><input type="text" class="input-small" data-bind="value: category, typeahead: {source: $root.categories }" /></td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-mini btn-success" data-bind="click: $root.save" href="#" title="Save"><i class="icon-ok"></i></a>
|
||||
<a class="btn btn-mini" data-bind="click: $root.cancel" href="#" title="Cancel"><i class="icon-ban-circle"></i></a>
|
||||
<a class="btn btn-mini" data-bind="css: {'active': pointed}, click: $root.pointEntry" href="#" title="point"><i class="icon-pencil"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<!-- JQuery Javascript library -->
|
||||
<script type="text/javascript" src="jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="jquery/jquery-migrate.min.js"></script>
|
||||
@ -253,9 +145,10 @@
|
||||
<!-- Bootstrap datepicker module -->
|
||||
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
|
||||
|
||||
<!-- Knockoutjs.com Javascript library -->
|
||||
<script type="text/javascript" src="knockout/knockout.min.js"></script>
|
||||
<script type="text/javascript" src="knockout/knockout-mapping.min.js"></script>
|
||||
<!-- Angular Javascript library -->
|
||||
<!--<script type="text/javascript" src="angular/angular.min.js"></script>-->
|
||||
<script type="text/javascript" src="angular/angular.min.js"></script>
|
||||
<script type="text/javascript" src="angular/angular-strap.min.js"></script>
|
||||
|
||||
<!-- JQPlot Javascript library and needed modules -->
|
||||
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
|
||||
@ -268,9 +161,11 @@
|
||||
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
|
||||
|
||||
<!-- Custom Javascript library for date manipulation -->
|
||||
<script type="text/javascript" src="js/date.js"></script>
|
||||
<!--<script type="text/javascript" src="js/date.js"></script>-->
|
||||
|
||||
<!-- Custom Javascript library for entries -->
|
||||
<script type="text/javascript" src="js/months.js"></script>
|
||||
<script type="text/javascript" src="js/accounts.js"></script>
|
||||
<script type="text/javascript" src="js/entries.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user