alahouze/accountant
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Migrated to bootstrap 3.0.x

Browse Source
This commit is contained in:
Alexis Lahouze
2013-12-06 20:36:26 +01:00
parent a300db9845
commit 5dd9543b38
12 changed files with 257 additions and 12105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/templates/index.html
View File

@ -16,25 +16,22 @@
#}
{% extends "layout.html" %}
{% block body %}
<div ng-controller="EntryController">
<!-- Chart row -->
<div class="row-fluid">
<div class="row">
<!-- Sold evolution chart placeholder -->
<div class="span7">
<div id="entries-chart-placeholder">
<svg style='height:300px'/>
</div>
<div class="col-md-7">
<svg id="entries-chart-placeholder" style="stroke-width: 1px"/>
</div>
<!-- Expense category piechart -->
<div class="span3">
<div id="expense-categories-chart-placeholder">
<svg style='height:300px'/>
</div>
<div class="col-md-3">
<svg id="expense-categories-chart-placeholder" style='height:300px'/>
</div>
<!-- Balance -->
<div class="span2" ng-controller="EntryController">
<div class="row-fluid">
<div class="col-md-2">
<div class="row">
<table class="table">
<tr><td>Dépenses&nbsp;:</td><td>[[accountStatus.expenses]]</td></tr>
<tr><td>Recettes&nbsp;:</td><td>[[accountStatus.revenues]]</td></tr>
@ -45,8 +42,8 @@
</div>
<!-- Row with entry table -->
<div class="row-fluid">
<table class="table table-striped table-condensed table-hover" ng-controller="EntryController">
<div class="row">
<table class="table table-condensed table-hover">
<!-- Head of the table containing column headers and size -->
<thead>
<tr>
@ -55,7 +52,7 @@
<th style="width: 50px">Montant</th>
<th style="width: 50px">Solde</th>
<th style="width: 100px">Cat&eacute;gorie</th>
<th style="width: 60px">Actions</th>
<th style="width: 80px">Actions</th>
</tr>
</thead>
@ -64,67 +61,102 @@
<tr id="entry_[[entry.id]]" class="form-inline" ng-class="entryRowClass(entry)" ng-repeat="entry in entries">
<td>
<small>
<input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
<input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
<span ng-show="isDisplaying(entry)">[[entry.operation_date]]</span>
</small>
</td>
<td>
<small>
<input ng-show="isEditing(entry)" type="text" class="input-xxlarge" ng-model="entry.label"/>
<input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.label"/>
<span ng-show="isDisplaying(entry)">[[entry.label]]</span>
</small>
</td>
<td>
<small>
<input ng-show="isEditing(entry)" type="text" class="input-mini" ng-model="entry.value"/>
<input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.value"/>
<span ng-show="isDisplaying(entry)">[[entry.value]]</span>
</small>
</td>
<td ng-class="entryValueClass(entry.sold)">
<small>
[[entry.sold]]
</small>
</td>
<td>
<small>
<input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.category" bs-typeahead="categories"/>
<!--<input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.category" bs-typeahead="categories"/>-->
<input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.category"/>
<span ng-show="isDisplaying(entry)">[[entry.category]]</span>
</small>
</td>
<td>
<div class="btn-group" ng-show="isEditing(entry)">
<a class="btn btn-mini btn-success" ng-click="saveEntry(entry)" href="#" 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="#" 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="#" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
<button type="button" class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
<span ng-class="iconSaveClass(entry)"></span>
</button>
<button type="button" class="btn btn-xs btn-default" ng-click="cancelEditEntry(entry)" title="Cancel">
<span ng-class="iconCancelClass(entry)"></span>
</button>
<button type="button" class="btn btn-xs btn-default" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" title="point">
<span class="fa fa-check"></span>
</button>
</div>
<div class="btn-group" ng-show="isDisplaying(entry) && isSaved(entry)">
<a class="btn btn-mini" ng-click="editEntry(entry)" href="#" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
<a class="btn btn-mini" bs-modal="'{{ url_for('frontend.static', filename='templates/entry_remove.html') }}'" href="#" 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="#" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
<button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
<span class="fa fa-pencil-square-o"></span>
</button>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target="#remove_entry" title="remove">
<span class="fa fa-trash-o"></span>
</button>
<button class="btn btn-xs btn-default" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" title="point">
<span class="fa fa-check"></span>
</button>
</div>
<div class="btn-group" ng-show="isDisplaying(entry) && !isSaved(entry)">
<a class="btn btn-mini btn-success" ng-click="saveEntry(entry)" href="#" title="Save"><i ng-class="iconSaveClass(entry)"><span style="display: none">Save</span></i></a>
<a class="btn btn-mini" ng-click="editEntry(entry)" href="#" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
<a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
<button class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
<span ng-class="iconSaveClass(entry)"></span>
</button>
<button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
<span class="fa fa-pencil-square-o"></span>
</button>
<button class="btn btn-xs btn-default" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" title="point">
<span class="fa fa-check"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
{% include "remove_entry.html" %}
</div>
{% endblock %}
{% block footer %}
<!-- Navbar with the months of the selected account -->
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner" ng-controller="MonthController">
<ul class="nav">
<li ng-repeat="month in months" ng-class="monthClass(month)"><a href="#" ng-click="selectMonth(month)">[[month.year]]-[[month.month]]</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation" ng-controller="MonthController">
<ul class="nav navbar-nav">
<li ng-repeat="month in months" ng-class="monthClass(month)"><a href="#" ng-click="selectMonth(month)">[[month.year]]-[[month.month]]</a></li>
</ul>
</div>
{% endblock %}
<!-- Custom Javascript library for entries -->
{% block js %}
<script type="text/javascript" src="{{ url_for('frontend.static', filename='js/months.js') }}"></script>

39
frontend/templates/layout.html
View File

@ -20,14 +20,18 @@
<!-- Title -->
<title>Entries</title>
<!-- Awesome fonts -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Bootstrap datepicker plugin CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.1.3/css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- NVD3 CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.css" rel="stylesheet">
<!-- Pines Notify JQuery plugin -->
<link href="{{ url_for('frontend.static', filename='third-party/pines-notify/jquery.pnotify.default.css') }}" rel="stylesheet">
@ -36,13 +40,14 @@
<link href="{{ url_for('frontend.static', filename='css/main.css') }}" rel="stylesheet">
</head>
<body style="padding-bottom:21px; padding-top: 40px">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner" ng-controller="AccountController">
<a class="brand" href="/">&nbsp;Accountant</a>
<body style="padding-bottom: 50px; padding-top: 70px">
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation" ng-controller="AccountController">
<div class="navbar-header">
<a class="navbar-brand" href="/">&nbsp;Accountant</a>
</div>
<!-- Navbar with accounts and menu -->
<ul class="nav">
<ul class="nav navbar-nav">
<li class="{% if request.path == '/index.html' %}active{% endif %}"><a href="index.html">Opérations</a></li>
<li class="{% if request.path == '/scheduler.html' %}active{% endif %}"><a href="scheduler.html">Planification</a></li>
@ -71,8 +76,8 @@
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="container">
<div class="row">
{% block body %}{% endblock %}
</div>
</div>
@ -82,22 +87,20 @@
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Bootstrap Javascript library -->
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- Bootstrap datepicker module -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script>
<!-- Angular Javascript library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.4/angular-strap.js"></script>
<!-- D3 Plotting framework -->
<!--script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.js"></script-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<!-- NVD3 framework -->
<!--script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.js"></script-->
<script type="text/javascript" src="{{ url_for('frontend.static', filename='third-party/nv.d3/nv.d3.js') }}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.js"></script>
<!-- Pines Notify JQuery plugin -->
<script type="text/javascript" src="{{ url_for('frontend.static', filename='third-party/pines-notify/jquery.pnotify.min.js') }}"></script>
@ -112,10 +115,16 @@ angular.module('$strap').config(function($interpolateProvider, $httpProvider) {
$httpProvider.responseInterceptors.push(['$rootScope', '$q', function(scope, $q) {
function success(response) {
console.debug(response)
if(response.data.ok == false) {
return $q.reject(response)
}
// TODO Intercept validation error.
return response;
}
function error(response) {
// TODO Intercept Authentication Required error
$.pnotify({
type: "error",
title: response.data.title,

39
frontend/templates/remove_entry.html Normal file
View File

@ -0,0 +1,39 @@
<!--
This file is part of Accountant.
Accountant is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Foobar is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
-->
<div class="modal fade" id="remove_entry" role="dialog" aria-labeled-by="remove_entry_header" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Dialog header with title -->
<div class="modal-header">
<button class="close" ng-click="dismiss()" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="remove_entry_header">Supprimer l'entr&eacute;e [[entry.label]]</h4>
</div>
<!-- Dialog body -->
<div class="modal-body">
<p>Confirmez-vous la suppression de cette entr&eacute;e ?</p>
</div>
<!-- Dialog footer with buttons -->
<div class="modal-footer">
<button href="#" class="btn btn-primary" ng-click="dismiss()">Non</button>
<button href="#" class="btn btn-default" ng-click="removeEntry(entry, this)">Oui</button>
</div>
</div>
</div>
</div>

50
frontend/templates/scheduler.html
View File

@ -17,15 +17,15 @@
{% extends "layout.html" %}
{% block body %}
<!-- Row with entry table -->
<div class="row-fluid" ng-controller="SchedulerController">
<div class="row" ng-controller="SchedulerController">
<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 d&eacute;but</th>
<th style="width: 100px">Date de fin</th>
<th style="width: 50px">Jour</th>
<th style="width: 50px">Fr&eacute;q.</th>
<th style="width: 120px">Date de d&eacute;but</th>
<th style="width: 120px">Date de fin</th>
<th style="width: 20px">Jour</th>
<th style="width: 20px">Fr&eacute;q.</th>
<th>Libell&eacute; de l'op&eacute;ration</th>
<th style="width: 50px">Montant</th>
<th style="width: 100px">Cat&eacute;gorie</th>
@ -37,41 +37,59 @@
<tbody>
<tr id="operation_[[operation.id]]" class="form-inline" ng-class="operationRowClass(operation.sold)" ng-repeat="operation in operations">
<td>
<input ng-show="isEditing(operation)" type="text" class="input-small" ng-model="operation.start_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.start_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
<span ng-show="isDisplaying(operation)">[[operation.start_date]]</span>
</td>
<td>
<input ng-show="isEditing(operation)" type="text" class="input-small" ng-model="operation.stop_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.stop_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
<span ng-show="isDisplaying(operation)">[[operation.stop_date]]</span>
</td>
<td>
<input ng-show="isEditing(operation)" type="text" class="input-mini" ng-model="operation.day"/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.day"/>
<span ng-show="isDisplaying(operation)">[[operation.day]]</span>
</td>
<td>
<input ng-show="isEditing(operation)" type="text" class="input-mini" ng-model="operation.frequency"/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.frequency"/>
<span ng-show="isDisplaying(operation)">[[operation.frequency]]</span>
</td>
<td>
<input ng-show="isEditing(operation)" type="text" class="input-xxlarge" ng-model="operation.label"/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.label"/>
<span ng-show="isDisplaying(operation)">[[operation.label]]</span>
</td>
<td>
<input ng-show="isEditing(operation)" type="text" class="input-mini" ng-model="operation.value"/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.value"/>
<span ng-show="isDisplaying(operation)">[[operation.value]]</span>
</td>
<td>
<input ng-show="isEditing(operation)" type="text" class="input-small" ng-model="operation.category" bs-typeahead="categories"/>
<input ng-show="isEditing(operation)" type="text" class="form-control input-sm" ng-model="operation.category" bs-typeahead="categories"/>
<span ng-show="isDisplaying(operation)">[[operation.category]]</span>
</td>
<td>
<div class="btn-group" ng-show="isEditing(operation)">
<a class="btn btn-mini btn-success" ng-click="saveOperation(operation)" href="#operation_[[operation.id]]" title="Save"><i ng-class="iconSaveClass(operation)"><span style="display: none">Save</span></i></a>
<a class="btn btn-mini" ng-click="cancelEditOperation(operation)" href="#operation_[[operation.id]]" title="Cancel"><i ng-class="iconCancelClass(operation)"><span style="display: none">Cancel</span></i></a>
<button class="btn btn-xs btn-success" ng-click="saveOperation(operation)" title="Save">
<span ng-class="iconSaveClass(operation)"></span>
</button>
<button class="btn btn-xs btn-default" ng-click="cancelEditOperation(operation)" title="Cancel">
<span ng-class="iconCancelClass(operation)"></span>
</button>
</div>
<div class="btn-group" ng-show="isDisplaying(operation)">
<a class="btn btn-mini" ng-click="editOperation(operation)" href="#operation_[[operation.id]]" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
<a class="btn btn-mini" bs-modal="'{{ url_for('frontend.static', filename='templates/operation_remove.html') }}'" href="#operation_[[operation.id]]" title="remove"><i class="icon-trash"><span style="display: none">Remove</span></i></a>
<button class="btn btn-xs btn-default" ng-click="editOperation(operation)" title="edit">
<span class="fa fa-pencil-square-o"></span>
</button>
<button class="btn btn-xs btn-default" bs-modal="'{{ url_for('frontend.static', filename='templates/operation_remove.html') }}'" title="remove">
<span class="fa fa-trash-o"></span>
</button>
</div>
</td>
</tr>