accountant-ui/src/html/index.html

261 lines
13 KiB
HTML
Raw Normal View History

2013-01-07 18:42:02 +01:00
<!DOCTYPE html>
<html lang="fr">
<head>
2013-01-25 22:20:38 +01:00
<!-- Title -->
2013-01-07 18:42:02 +01:00
<title>Entries</title>
2013-01-25 22:20:38 +01:00
<!-- Bootstrap CSS -->
2013-01-07 18:42:02 +01:00
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
2013-01-25 22:20:38 +01:00
<!-- Bootstrap datepicker plugin CSS -->
2013-01-07 18:42:02 +01:00
<link href="datepicker/css/datepicker.css" rel="stylesheet" media="screen">
2013-01-25 22:20:38 +01:00
<!-- JQPlot CSS -->
<link href="jqplot/jquery.jqplot.min.css" rel="stylesheet" type="text/css">
2013-01-07 18:42:02 +01:00
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
2013-01-25 22:20:38 +01:00
<!-- Navbar with accounts -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
2013-01-25 22:20:38 +01:00
<!-- Title -->
<a class="brand" href="#">&nbsp;Comptes</a>
2013-01-25 22:20:38 +01:00
<!-- Account list -->
<div class="nav" data-bind="foreach: accounts, value: account">
<div class="btn-group">
2013-01-25 22:20:38 +01:00
<!-- Account button -->
<button class="btn btn-nav" data-bind="css: { active: $data === $root.account() }, click: $parent.selectAccount"><span data-bind="text: name"></span>&nbsp;(<span data-bind="text: current, css: {'text-error': $data.current < 0 }"></span>)</button>
2013-01-25 22:20:38 +01:00
<!-- Dropdown button -->
<button class="btn btn-nav dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></button>
2013-01-25 22:20:38 +01:00
<!-- 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>
</ul>
</div>
</div>
2013-01-25 22:20:38 +01:00
<!-- New account button -->
<div class="btn btn-nav">
<a data-bind="click: $root.addAccount" href="#"><i class="icon-plus"></i></a>
</div>
</div>
</div>
2013-01-07 18:42:02 +01:00
2013-01-25 22:20:38 +01:00
<!-- 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>
</ul>
</div>
</div>
2013-01-07 18:42:02 +01:00
2013-01-25 22:20:38 +01:00
<!-- Emtpy row with top margin to avoid data under the fixed top navbar -->
2013-01-13 00:48:09 +01:00
<div class="row-fluid" style="margin-top: 46px"></div>
2013-01-07 18:42:02 +01:00
2013-01-25 22:20:38 +01:00
<!-- Chart row -->
2013-01-13 00:48:09 +01:00
<div class="row-fluid">
2013-01-25 22:20:38 +01:00
<!-- Sold evolution chart placeholder -->
<div class="span8">
<div id="entries-chart-placeholder" data-bind="chart: $root.entriesChart"></div>
</div>
2013-01-07 18:42:02 +01:00
2013-01-25 22:20:38 +01:00
<!-- Expense category piechart -->
<div class="span4">
<div id="expense-categories-chart-placeholder" data-bind="pieChart: $root.expenseCategoriesChart"></div>
</div>
</div>
2013-01-25 22:20:38 +01:00
<!-- Message placeholder -->
2013-01-13 00:48:09 +01:00
<div class="row-fluid">
<div id="message-placeholder"></div>
</div>
2013-01-25 22:20:38 +01:00
<!-- Row with entry table -->
2013-01-13 00:48:09 +01:00
<div class="row-fluid">
2013-01-08 18:50:47 +01:00
<table class="table table-striped table-condensed table-hover">
2013-01-25 22:20:38 +01:00
<!-- Head of the table containing column headers and size -->
2013-01-08 18:50:47 +01:00
<thead>
<tr>
2013-01-09 23:58:47 +01:00
<th style="width: 100px">Date de valeur</th>
<th style="width: 100px">Date de l'op&eacute;ration</th>
2013-01-10 00:00:08 +01:00
<th>Libell&eacute; de l'op&eacute;ration</th>
2013-01-09 23:58:47 +01:00
<th style="width: 50px">Montant</th>
<th style="width: 50px">Solde</th>
<th style="width: 50px">Solde point&eacute;</th>
<th style="width: 100px">Cat&eacute;gorie</th>
2013-01-08 18:50:47 +01:00
<th style="width: 60px">Actions</th>
</tr>
</thead>
2013-01-25 22:20:38 +01:00
<!-- Body of the table containing the entries -->
<tbody data-bind="template:{name: templateToUse, foreach: entries}"></tbody>
2013-01-08 18:50:47 +01:00
</table>
</div>
2013-01-25 22:20:38 +01:00
<!-- Emtpy row with bottom margin to avoid data undur the fixed bottom navbar -->
2013-01-13 00:48:09 +01:00
<div class="row-fluid" style="margin-bottom: 21px"></div>
2013-01-07 18:42:02 +01:00
</div>
</div>
</div>
2013-01-25 22:20:38 +01:00
<!-- Confirm entry removal modal dialog -->
<div id="remove-confirm" class="modal hide fade">
2013-01-25 22:20:38 +01:00
<!-- Dialog header with title -->
<div class="modal-header">
<h3>Confirmer la suppression</h3>
</div>
2013-01-25 22:20:38 +01:00
<!-- Dialog body -->
<div class="modal-body">
<p>Confirmez-vous la suppression de cette entr&eacute;e ?</p>
</div>
2013-01-25 22:20:38 +01:00
<!-- 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>
2013-01-25 22:20:38 +01:00
<!-- Confirm account removal modal dialog -->
<div id="remove-account-confirm" class="modal hide fade">
2013-01-25 22:20:38 +01:00
<!-- Dialog header with title -->
<div class="modal-header">
<h3>Confirmer la suppression</h3>
</div>
2013-01-25 22:20:38 +01:00
<!-- Dialog body -->
<div class="modal-body">
<p>Confirmez-vous la suppression de ce compte ?</p>
</div>
2013-01-25 22:20:38 +01:00
<!-- 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>
2013-01-25 22:20:38 +01:00
<!-- Account edit modal dialog -->
<div id="edit-account" class="modal hide fade">
2013-01-25 22:20:38 +01:00
<!-- Dialog header with title -->
<div class="modal-header">
<h3>&Eacute;diter le compte</h3>
</div>
2013-01-25 22:20:38 +01:00
<!-- Dialog body -->
<div class="modal-body">
<form class="form-horizontal" data-bind="with: editingAccount">
<div class="control-group">
2013-01-25 22:20:38 +01:00
<!-- 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>
2013-01-25 22:20:38 +01:00
<!-- Authorized overdraft field -->
2013-01-24 20:44:09 +01:00
<label class="control-label" for="inputAuthorizedOverdraft">D&eacute;couvert authoris&eacute;</label>
<div class="controls">
<input type="text" id="inputAuthorizedOverdraft" data-bind="value: authorized_overdraft"></input>
</div>
</div>
</form>
</div>
2013-01-25 22:20:38 +01:00
<!-- 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>
2013-01-25 22:20:38 +01:00
<!-- Displayed item template -->
2013-01-07 18:42:02 +01:00
<script id="itemsTmpl" type="text/html">
2013-01-25 22:40:43 +01:00
<tr class="form-inline" data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
<td data-bind="text: value_date"></td>
<td data-bind="text: operation_date"></td>
2013-01-07 18:42:02 +01:00
<td data-bind="text: label"></td>
<td data-bind="text: value, css: {'text-error': value() < 0 }"></td>
2013-01-24 20:44:09 +01:00
<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: operation_date() ? pointedsold : '', css: {'text-warning': pointedsold() < 0 && pointedsold() >= $root.account().authorized_overdraft(), 'text-error': pointedsold() < $root.account().authorized_overdraft() }"></td>
<td data-bind="text: category"></td>
2013-01-07 18:42:02 +01:00
<td class="buttons">
<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>
</td>
</tr>
</script>
2013-01-25 22:20:38 +01:00
<!-- New item template -->
2013-01-24 21:19:07 +01:00
<script id="newTmpl" type="text/html">
2013-01-25 22:40:43 +01:00
<tr class="form-inline">
2013-01-24 21:19:07 +01:00
<td><div class="date"><input type="text" class="input-small" data-bind="value: value_date" data-date-format="yyyy-mm-dd" id="new_value_date"></input></div></td>
<td><div class="input-append date"><input type="text" class="input-small" data-bind="value: operation_date" data-date-format="yyyy-mm-dd" id="new_operation_date"></input><button class="btn" type="button" data-bind="click: function(item) { item.operation_date(null)}"><i class="icon-remove"></i></button></div></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></td>
<td><input type="text" class="input-small" data-bind="value: category, typeahead: {source: $root.categories }"/></td>
2013-01-24 21:19:07 +01:00
<td class="buttons">
<a class="btn btn-mini btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-plus"></i></a>
<a class="btn btn-mini" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
2013-01-25 22:20:38 +01:00
<!-- Edit item template -->
2013-01-07 18:42:02 +01:00
<script id="editTmpl" type="text/html">
2013-01-25 22:40:43 +01:00
<tr class="form-inline" data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
<td><div class="date"><input type="text" class="input-small" data-bind="value: value_date" data-date-format="yyyy-mm-dd" id="value_date"></input></div></td>
<td><div class="input-append date"><input type="text" class="input-small" data-bind="value: operation_date" data-date-format="yyyy-mm-dd" id="operation_date"></input><button class="btn" type="button" data-bind="click: function(item) { item.operation_date(null)}"><i class="icon-remove"></i></button></div></td>
2013-01-07 18:42:02 +01:00
<td><input type="text" class="input-xxlarge" data-bind="value: label"/></td>
<td><input type="text" class="input-mini" data-bind="value: value"/></td>
2013-01-25 01:02:00 +01:00
<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: operation_date() ? pointedsold : '', css: {'text-warning': pointedsold() < 0 && pointedsold() >= $root.account().authorized_overdraft(), 'text-error': pointedsold() < $root.account().authorized_overdraft() }"></td>
<td><input type="text" class="input-small" data-bind="value: category, typeahead: {source: $root.categories }" /></td>
2013-01-07 18:42:02 +01:00
<td class="buttons">
2013-01-24 21:19:07 +01:00
<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>
2013-01-07 18:42:02 +01:00
</td>
</tr>
</script>
2013-01-25 22:20:38 +01:00
<!-- JQuery Javascript library -->
<script type="text/javascript" src="jquery/jquery.js"></script>
2013-01-25 22:20:38 +01:00
<!-- Bootstrap Javascript library -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
2013-01-25 22:20:38 +01:00
<!-- Bootstrap datepicker module -->
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
2013-01-25 22:20:38 +01:00
<!-- Knockoutjs.com Javascript library -->
<script type="text/javascript" src="knockout/knockout.js"></script>
<script type="text/javascript" src="knockout/knockout-mapping.min.js"></script>
2013-01-25 22:20:38 +01:00
<!-- JQPlot Javascript library and needed modules -->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.ohlcRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
2013-01-07 18:42:02 +01:00
2013-01-25 22:20:38 +01:00
<!-- Custom Javascript library for date manipulation -->
<script type="text/javascript" src="js/date.js"></script>
2013-01-25 22:20:38 +01:00
<!-- Custom Javascript library for entries -->
<script type="text/javascript" src="js/entries.js"></script>
2013-01-07 18:42:02 +01:00
</body>
</html>