Commented index.html
This commit is contained in:
parent
688755c542
commit
c83b49658a
@ -1,10 +1,16 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
|
<!-- Title -->
|
||||||
<title>Entries</title>
|
<title>Entries</title>
|
||||||
<!-- Bootstrap -->
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||||
|
|
||||||
|
<!-- Bootstrap datepicker plugin CSS -->
|
||||||
<link href="datepicker/css/datepicker.css" rel="stylesheet" media="screen">
|
<link href="datepicker/css/datepicker.css" rel="stylesheet" media="screen">
|
||||||
|
|
||||||
|
<!-- JQPlot CSS -->
|
||||||
<link href="jqplot/jquery.jqplot.min.css" rel="stylesheet" type="text/css">
|
<link href="jqplot/jquery.jqplot.min.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,15 +18,21 @@
|
|||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
|
<!-- Navbar with accounts -->
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
|
<!-- Title -->
|
||||||
<a class="brand" href="#"> Comptes</a>
|
<a class="brand" href="#"> Comptes</a>
|
||||||
|
|
||||||
|
<!-- Account list -->
|
||||||
<div class="nav" data-bind="foreach: accounts, value: account">
|
<div class="nav" data-bind="foreach: accounts, value: account">
|
||||||
<div class="btn-group">
|
<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-error': $data.current < 0 }"></span>)</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-error': $data.current < 0 }"></span>)</button>
|
||||||
|
<!-- Dropdown button -->
|
||||||
<button class="btn btn-nav dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></button>
|
<button class="btn btn-nav dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></button>
|
||||||
|
|
||||||
|
<!-- Dropdown menu -->
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#" data-bind="click: $root.editAccount">Modifier</a></li>
|
<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="#" data-bind="click: $root.removeAccount">Supprimer</a></li>
|
||||||
@ -28,12 +40,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- New account button -->
|
||||||
<div class="btn btn-nav">
|
<div class="btn btn-nav">
|
||||||
<a data-bind="click: $root.addAccount" href="#"><i class="icon-plus"></i></a>
|
<a data-bind="click: $root.addAccount" href="#"><i class="icon-plus"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Navbar with the months of the selected account -->
|
||||||
<div class="navbar navbar-fixed-bottom">
|
<div class="navbar navbar-fixed-bottom">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<ul data-bind="foreach: months()" class="nav">
|
<ul data-bind="foreach: months()" class="nav">
|
||||||
@ -42,24 +56,31 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Emtpy row with top margin to avoid data under the fixed top navbar -->
|
||||||
<div class="row-fluid" style="margin-top: 46px"></div>
|
<div class="row-fluid" style="margin-top: 46px"></div>
|
||||||
|
|
||||||
|
<!-- Chart row -->
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
|
<!-- Sold evolution chart placeholder -->
|
||||||
<div class="span8">
|
<div class="span8">
|
||||||
<div id="entries-chart-placeholder" data-bind="chart: $root.entriesChart"></div>
|
<div id="entries-chart-placeholder" data-bind="chart: $root.entriesChart"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Expense category piechart -->
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<div id="expense-categories-chart-placeholder" data-bind="pieChart: $root.expenseCategoriesChart"></div>
|
<div id="expense-categories-chart-placeholder" data-bind="pieChart: $root.expenseCategoriesChart"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Message placeholder -->
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div id="message-placeholder"></div>
|
<div id="message-placeholder"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Row with entry table -->
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<table class="table table-striped table-condensed table-hover">
|
<table class="table table-striped table-condensed table-hover">
|
||||||
|
<!-- Head of the table containing column headers and size -->
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 100px">Date de valeur</th>
|
<th style="width: 100px">Date de valeur</th>
|
||||||
@ -73,53 +94,73 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody data-bind="template:{name: templateToUse, foreach: entries}">
|
<!-- Body of the table containing the entries -->
|
||||||
</tbody>
|
<tbody data-bind="template:{name: templateToUse, foreach: entries}"></tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Emtpy row with bottom margin to avoid data undur the fixed bottom navbar -->
|
||||||
<div class="row-fluid" style="margin-bottom: 21px"></div>
|
<div class="row-fluid" style="margin-bottom: 21px"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Confirm entry removal modal dialog -->
|
||||||
<div id="remove-confirm" class="modal hide fade">
|
<div id="remove-confirm" class="modal hide fade">
|
||||||
|
<!-- Dialog header with title -->
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>Confirmer la suppression</h3>
|
<h3>Confirmer la suppression</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog body -->
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Confirmez-vous la suppression de cette entrée ?</p>
|
<p>Confirmez-vous la suppression de cette entrée ?</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog footer with buttons -->
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
|
<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
|
||||||
<a href="#" class="btn" data-bind="click: confirmRemove">Oui</a>
|
<a href="#" class="btn" data-bind="click: confirmRemove">Oui</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Confirm account removal modal dialog -->
|
||||||
<div id="remove-account-confirm" class="modal hide fade">
|
<div id="remove-account-confirm" class="modal hide fade">
|
||||||
|
<!-- Dialog header with title -->
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>Confirmer la suppression</h3>
|
<h3>Confirmer la suppression</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog body -->
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Confirmez-vous la suppression de ce compte ?</p>
|
<p>Confirmez-vous la suppression de ce compte ?</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog footer with buttons -->
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
|
<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
|
||||||
<a href="#" class="btn" data-bind="click: confirmAccountRemove">Oui</a>
|
<a href="#" class="btn" data-bind="click: confirmAccountRemove">Oui</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Account edit modal dialog -->
|
||||||
<div id="edit-account" class="modal hide fade">
|
<div id="edit-account" class="modal hide fade">
|
||||||
|
<!-- Dialog header with title -->
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>Éditer le compte</h3>
|
<h3>Éditer le compte</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog body -->
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="form-horizontal" data-bind="with: editingAccount">
|
<form class="form-horizontal" data-bind="with: editingAccount">
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
|
<!-- Account name field -->
|
||||||
<label class="control-label" for="inputName">Nom du compte</label>
|
<label class="control-label" for="inputName">Nom du compte</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="text" id="inputName" data-bind="value: name"></input>
|
<input type="text" id="inputName" data-bind="value: name"></input>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Authorized overdraft field -->
|
||||||
<label class="control-label" for="inputAuthorizedOverdraft">Découvert authorisé</label>
|
<label class="control-label" for="inputAuthorizedOverdraft">Découvert authorisé</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="text" id="inputAuthorizedOverdraft" data-bind="value: authorized_overdraft"></input>
|
<input type="text" id="inputAuthorizedOverdraft" data-bind="value: authorized_overdraft"></input>
|
||||||
@ -127,12 +168,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog footer with buttons -->
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="#" class="btn btn-primary" data-bind="click: saveAccount">OK</a>
|
<a href="#" class="btn btn-primary" data-bind="click: saveAccount">OK</a>
|
||||||
<a href="#" class="btn" data-bind="click: cancelEditAccount">Annuler</a>
|
<a href="#" class="btn" data-bind="click: cancelEditAccount">Annuler</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Displayed item template -->
|
||||||
<script id="itemsTmpl" type="text/html">
|
<script id="itemsTmpl" type="text/html">
|
||||||
<tr data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
|
<tr 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: value_date"></td>
|
||||||
@ -149,6 +193,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- New item template -->
|
||||||
<script id="newTmpl" type="text/html">
|
<script id="newTmpl" type="text/html">
|
||||||
<tr>
|
<tr>
|
||||||
<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="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>
|
||||||
@ -165,7 +210,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Edit item template -->
|
||||||
<script id="editTmpl" type="text/html">
|
<script id="editTmpl" type="text/html">
|
||||||
<tr data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
|
<tr 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="date"><input type="text" class="input-small" data-bind="value: value_date" data-date-format="yyyy-mm-dd" id="value_date"></input></div></td>
|
||||||
@ -182,13 +227,19 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- JQuery Javascript library -->
|
||||||
<script type="text/javascript" src="jquery/jquery.js"></script>
|
<script type="text/javascript" src="jquery/jquery.js"></script>
|
||||||
|
|
||||||
|
<!-- Bootstrap Javascript library -->
|
||||||
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
|
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<!-- Bootstrap datepicker module -->
|
||||||
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
|
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
|
||||||
|
|
||||||
|
<!-- Knockoutjs.com Javascript library -->
|
||||||
<script type="text/javascript" src="knockout/knockout.js"></script>
|
<script type="text/javascript" src="knockout/knockout.js"></script>
|
||||||
<script type="text/javascript" src="knockout/knockout-mapping.min.js"></script>
|
<script type="text/javascript" src="knockout/knockout-mapping.min.js"></script>
|
||||||
|
|
||||||
|
<!-- JQPlot Javascript library and needed modules -->
|
||||||
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
|
<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.dateAxisRenderer.js"></script>
|
||||||
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
||||||
@ -199,7 +250,10 @@
|
|||||||
<script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.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>
|
<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/entries.js"></script>
|
<script type="text/javascript" src="js/entries.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user