Begin to use AngularJS routing mechanisms.

This commit is contained in:
Alexis Lahouze 2015-07-14 04:01:28 +02:00
parent eaf96c4b34
commit c66e164c8d
8 changed files with 67 additions and 90 deletions

View File

@ -1,4 +1,4 @@
from flask import Blueprint, redirect, render_template, jsonify from flask import Blueprint, render_template
frontend = Blueprint( frontend = Blueprint(
'frontend', 'frontend',
@ -8,26 +8,7 @@ frontend = Blueprint(
) )
@frontend.route('/') @frontend.route('/', defaults={'path': 'accounts'})
def root(): @frontend.route('/<path:path>')
return redirect('entries') def index(path):
return render_template('layout.html')
@frontend.route('/entries')
def entries():
return render_template('entries.html')
@frontend.route('/scheduler')
def scheduler():
return render_template('scheduler.html')
@frontend.route('/accounts')
def accounts():
return render_template('accounts.html')
@frontend.errorhandler(BaseException)
def default_errorhandler(error):
return jsonify(title="Error", text="Error %s" % str(error)), 500

View File

@ -20,7 +20,7 @@ var accountantApp = angular.module("accountantApp", [
"highcharts-ng" "highcharts-ng"
]) ])
.config(function($interpolateProvider, $httpProvider) { .config(function($interpolateProvider, $httpProvider, $routeProvider, $locationProvider) {
$interpolateProvider.startSymbol('[['); $interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]'); $interpolateProvider.endSymbol(']]');
@ -47,4 +47,20 @@ var accountantApp = angular.module("accountantApp", [
} }
}; };
}); });
$routeProvider.when('/account/:accountId/entries', {
templateUrl: 'static/templates/entries.html',
controller: 'EntryController'
}).when('/account/:accountId/scheduler', {
templateUrl: 'static/templates/scheduler.html',
controller: 'SchedulerController'
}).when('/accounts', {
templateUrl: 'static/templates/accounts.html',
controller: 'AccountController'
}).when('/', {
redirectTo: 'accounts'
}); });
$locationProvider.html5Mode(true);
})
;

View File

@ -26,8 +26,8 @@ accountantApp
.controller( .controller(
"EntryController", [ "EntryController", [
"$scope", "$http", "$rootScope", "$filter", "Entries", "$scope", "$http", "$rootScope", "$filter", "$routeParams", "Entries",
function($scope, $http, $rootScope, $filter, Entries) { function($scope, $http, $rootScope, $filter, $routeParams, Entries) {
// Range for entries. // Range for entries.
$scope.begin = moment.utc().startOf('month'); $scope.begin = moment.utc().startOf('month');
$scope.end = moment.utc().endOf('month'); $scope.end = moment.utc().endOf('month');
@ -272,24 +272,23 @@ accountantApp
* Hook on account selected event to display account status. * Hook on account selected event to display account status.
*/ */
$rootScope.$on("accountSelectedEvent", function(event, args) { $rootScope.$on("accountSelectedEvent", function(event, args) {
$scope.account = args.account; $scope.getAccountStatus($routeParams.accountId);
$scope.getAccountStatus();
}); });
$rootScope.$on("rangeSelectedEvent", function(event, args) { $rootScope.$on("rangeSelectedEvent", function(event, args) {
$scope.getAccountStatus(); $scope.getAccountStatus($routeParams.accountId);
}); });
$scope.getAccountStatus = function() { $scope.getAccountStatus = function(accountId) {
$scope.categoriesChartConfig.loading = true; $scope.categoriesChartConfig.loading = true;
$http.get("/api/accounts/" + $scope.account.id, { $http.get("/api/accounts/" + accountId, {
params: { params: {
begin: $scope.begin.format('YYYY-MM-DD'), begin: $scope.begin.format('YYYY-MM-DD'),
end: $scope.end.format('YYYY-MM-DD') end: $scope.end.format('YYYY-MM-DD')
} }
}).success(function(account) { }).success(function(account) {
$scope.account = account;
$scope.categoriesChartConfig.loading = false; $scope.categoriesChartConfig.loading = false;
$scope.$emit("accountLoadedEvent", account); $scope.$emit("accountLoadedEvent", account);
@ -513,4 +512,6 @@ accountantApp
modalScope.dismiss(); modalScope.dismiss();
} }
}; };
$scope.getAccountStatus($routeParams.accountId);
}]); }]);

View File

@ -15,28 +15,20 @@
along with Accountant. If not, see <http://www.gnu.org/licenses/>. along with Accountant. If not, see <http://www.gnu.org/licenses/>.
*/ */
accountantApp.controller( accountantApp.controller(
"SchedulerController", function($scope, $http, $rootScope, $filter) { "SchedulerController", function($scope, $http, $rootScope, $filter, $routeParams) {
// Operations store and selection // Operations store and selection
$scope.operations = []; $scope.operations = [];
$scope.selectedOperation = null; $scope.selectedOperation = null;
$scope.account = null;
// Placeholder for saved value to cancel entry edition // Placeholder for saved value to cancel entry edition
$scope.savedOperation = null; $scope.savedOperation = null;
$scope.loadOperations = function(account) { $scope.loadOperations = function(accountId) {
// Clean up selected entry. // Clean up selected entry.
$scope.selectedOperation = null; $scope.selectedOperation = null;
$scope.savedOperation = null; $scope.savedOperation = null;
if(account) { $http.get("/api/scheduled_operations/" + accountId).success($scope.loadOperations_success);
$scope.account = account;
$http.get("/api/scheduled_operations/" + account.id).success($scope.loadOperations_success);
} else {
$scope.loadOperations_success(null);
}
}; };
$scope.loadOperations_success = function(data) { $scope.loadOperations_success = function(data) {
@ -92,7 +84,7 @@ accountantApp.controller(
$scope.saveOperation = function(operation) { $scope.saveOperation = function(operation) {
if(!operation.account_id) { if(!operation.account_id) {
operation.account_id = $scope.account.id; operation.account_id = $routeParams.accountId;
} }
// prepare the Ajax xall to save the sceduled operation. // prepare the Ajax xall to save the sceduled operation.
@ -138,7 +130,7 @@ accountantApp.controller(
operation.label = null; operation.label = null;
operation.value = null; operation.value = null;
operation.category = null; operation.category = null;
operation.account_id = $scope.account.id; operation.account_id = $routeParams.accountId;
} else if ($scope.isEditing(operation)) { } else if ($scope.isEditing(operation)) {
if($scope.savedOperation) { if($scope.savedOperation) {
operation.id = $scope.savedOperation.id; operation.id = $scope.savedOperation.id;
@ -193,6 +185,8 @@ accountantApp.controller(
}; };
$rootScope.$on("accountSelectedEvent", function(event, args){ $rootScope.$on("accountSelectedEvent", function(event, args){
$scope.loadOperations(args.account); $scope.loadOperations(args.account.id);
}); });
$scope.loadOperations($routeParams.accountId);
}); });

View File

@ -1,4 +1,4 @@
{# <!--
This file is part of Accountant. This file is part of Accountant.
Accountant is free software: you can redistribute it and/or modify Accountant is free software: you can redistribute it and/or modify
@ -13,13 +13,10 @@
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with Accountant. If not, see <http://www.gnu.org/licenses/>. along with Accountant. If not, see <http://www.gnu.org/licenses/>.
#} -->
{# vim: set tw=80 ts=2 sw=2 sts=2: #} <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
{% extends "layout.html" %}
{% block body %}
<!-- Row with entry table --> <!-- Row with entry table -->
<div class="row" ng-controller="AccountController"> <div class="row">
<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 --> <!-- Head of the table containing column headers and size -->
<thead> <thead>
@ -77,5 +74,3 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{% endblock %}

View File

@ -1,5 +1,4 @@
{# vim: set tw=80 ts=2 sw=2 sts=2: #} <!--
{#
This file is part of Accountant. This file is part of Accountant.
Accountant is free software: you can redistribute it and/or modify Accountant is free software: you can redistribute it and/or modify
@ -14,11 +13,8 @@
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with Accountant. If not, see <http://www.gnu.org/licenses/>. along with Accountant. If not, see <http://www.gnu.org/licenses/>.
#} -->
{% extends "layout.html" %} <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
{% block body %}
<div ng-controller="EntryController">
<!-- Chart row --> <!-- Chart row -->
<div class="row"> <div class="row">
<!-- Sold evolution chart placeholder --> <!-- Sold evolution chart placeholder -->
@ -45,7 +41,7 @@
<!-- Body of the table containing the entries --> <!-- Body of the table containing the entries -->
<tbody> <tbody>
{# The new entry row. #} <!-- The new entry row. -->
<tr class="form-inline"> <tr class="form-inline">
<td class="col-md-1"> <td class="col-md-1">
<input type="text" class="form-control input-sm" ng-model="newEntry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/> <input type="text" class="form-control input-sm" ng-model="newEntry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
@ -88,7 +84,7 @@
</td> </td>
</tr> </tr>
{# Row for an editing entry. #} <!-- Row for an editing entry. -->
<tr id="entry_[[entry.id]]" class="form-inline" <tr id="entry_[[entry.id]]" class="form-inline"
ng-class="entryRowClass(entry)" ng-repeat-start="entry in entries" ng-class="entryRowClass(entry)" ng-repeat-start="entry in entries"
ng-if="isEditing(entry)"> ng-if="isEditing(entry)">
@ -131,7 +127,7 @@
</td> </td>
</tr> </tr>
{# Row for a displayed entry. #} <!-- Row for a displayed entry. -->
<tr id="entry_[[entry.id]]" <tr id="entry_[[entry.id]]"
ng-class="entryRowClass(entry)" ng-repeat-end ng-class="entryRowClass(entry)" ng-repeat-end
ng-if="isDisplaying(entry)"> ng-if="isDisplaying(entry)">
@ -156,7 +152,7 @@
</td> </td>
<td class="col-md-2"> <td class="col-md-2">
{# Button group for a saved entry. #} <!-- Button group for a saved entry. -->
<div class="btn-group" ng-if="isSaved(entry)"> <div class="btn-group" ng-if="isSaved(entry)">
<button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit"> <button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
<span class="fa fa-pencil-square-o"></span> <span class="fa fa-pencil-square-o"></span>
@ -173,7 +169,7 @@
</button> </button>
</div> </div>
{# Button group for an unsaved (scheduled) entry. #} <!-- Button group for an unsaved (scheduled) entry. -->
<div class="btn-group" ng-if="!isSaved(entry)"> <div class="btn-group" ng-if="!isSaved(entry)">
<button class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save"> <button class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
<span class="fa fa-plus"></span> <span class="fa fa-plus"></span>
@ -194,8 +190,3 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{% include "remove_entry.html" %}
</div>
{% endblock %}

View File

@ -1,4 +1,4 @@
{# <!--
This file is part of Accountant. This file is part of Accountant.
Accountant is free software: you can redistribute it and/or modify Accountant is free software: you can redistribute it and/or modify
@ -13,12 +13,10 @@
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with Accountant. If not, see <http://www.gnu.org/licenses/>. along with Accountant. If not, see <http://www.gnu.org/licenses/>.
#} -->
{# vim: set tw=80 ts=2 sw=2 sts=2: #} <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
{% extends "layout.html" %}
{% block body %}
<!-- Row with entry table --> <!-- Row with entry table -->
<div class="row" ng-controller="SchedulerController"> <div class="row">
<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 --> <!-- Head of the table containing column headers and size -->
<thead> <thead>
@ -88,7 +86,7 @@
<span class="fa fa-pencil-square-o"></span> <span class="fa fa-pencil-square-o"></span>
</button> </button>
<button class="btn btn-xs btn-default" bs-modal="'{{ url_for('frontend.static', filename='templates/operation_remove.html') }}'" title="remove"> <button class="btn btn-xs btn-default" bs-modal="static/templates/operation_remove.html" title="remove">
<span class="fa fa-trash"></span> <span class="fa fa-trash"></span>
</button> </button>
</div> </div>
@ -97,4 +95,3 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{% endblock %}

View File

@ -21,18 +21,20 @@
<!-- Title --> <!-- Title -->
<title>Entries</title> <title>Entries</title>
<base href="{{ url_for('.index') }}">
<!-- third-party.css --> <!-- third-party.css -->
<link href="{{ url_for('frontend.static', filename='build/css/vendor.css') }}" rel="stylesheet"> <!--<link href="{{ url_for('frontend.static', filename='build/css/vendor.css') }}" rel="stylesheet">-->
<link href="static/build/css/vendor.css" rel="stylesheet">
<!-- main css --> <!-- main css -->
<link href="{{ url_for('frontend.static', filename='css/main.css') }}" rel="stylesheet"> <link href="static/css/main.css" rel="stylesheet">
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Vendor javascripts. --> <!-- Vendor javascripts. -->
<script type="text/javascript" src="{{ url_for('frontend.static', filename="build/js/vendor.js") }}"></script> <script type="text/javascript" src="static/build/js/vendor.js"></script>
</head> </head>
<body style="padding-bottom: 50px; padding-top: 70px"> <body style="padding-bottom: 50px; padding-top: 70px">
@ -48,12 +50,12 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<!-- Entries --> <!-- Entries -->
<li class="{% if request.path == '/entries' %}active{% endif %}"> <li class="{% if request.path == '/entries' %}active{% endif %}">
<a href="entries">Opérations</a> <a href="account/[[ selectedAccount.id ]]/entries">Opérations</a>
</li> </li>
<!-- Scheduler --> <!-- Scheduler -->
<li class="{% if request.path == '/scheduler' %}active{% endif %}"> <li class="{% if request.path == '/scheduler' %}active{% endif %}">
<a href="scheduler">Planification</a> <a href="account/[[ selectedAccount.id ]]/scheduler">Planification</a>
</li> </li>
<!-- Accounts --> <!-- Accounts -->
@ -91,11 +93,11 @@
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid">
{% block body %}{% endblock %} <div ng-view></div>
</div> </div>
<!-- Custom Javascript library for entries --> <!-- Custom Javascript library for entries -->
<script type="text/javascript" src="{{ url_for('frontend.static', filename='build/js/app.js') }}"></script> <script type="text/javascript" src="static/build/js/app.js"></script>
</body> </body>
</html> </html>