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',
@ -8,26 +8,7 @@ frontend = Blueprint(
)
@frontend.route('/')
def root():
return redirect('entries')
@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
@frontend.route('/', defaults={'path': 'accounts'})
@frontend.route('/<path:path>')
def index(path):
return render_template('layout.html')

View File

@ -20,7 +20,7 @@ var accountantApp = angular.module("accountantApp", [
"highcharts-ng"
])
.config(function($interpolateProvider, $httpProvider) {
.config(function($interpolateProvider, $httpProvider, $routeProvider, $locationProvider) {
$interpolateProvider.startSymbol('[[');
$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(
"EntryController", [
"$scope", "$http", "$rootScope", "$filter", "Entries",
function($scope, $http, $rootScope, $filter, Entries) {
"$scope", "$http", "$rootScope", "$filter", "$routeParams", "Entries",
function($scope, $http, $rootScope, $filter, $routeParams, Entries) {
// Range for entries.
$scope.begin = moment.utc().startOf('month');
$scope.end = moment.utc().endOf('month');
@ -272,24 +272,23 @@ accountantApp
* Hook on account selected event to display account status.
*/
$rootScope.$on("accountSelectedEvent", function(event, args) {
$scope.account = args.account;
$scope.getAccountStatus();
$scope.getAccountStatus($routeParams.accountId);
});
$rootScope.$on("rangeSelectedEvent", function(event, args) {
$scope.getAccountStatus();
$scope.getAccountStatus($routeParams.accountId);
});
$scope.getAccountStatus = function() {
$scope.getAccountStatus = function(accountId) {
$scope.categoriesChartConfig.loading = true;
$http.get("/api/accounts/" + $scope.account.id, {
$http.get("/api/accounts/" + accountId, {
params: {
begin: $scope.begin.format('YYYY-MM-DD'),
end: $scope.end.format('YYYY-MM-DD')
}
}).success(function(account) {
$scope.account = account;
$scope.categoriesChartConfig.loading = false;
$scope.$emit("accountLoadedEvent", account);
@ -513,4 +512,6 @@ accountantApp
modalScope.dismiss();
}
};
$scope.getAccountStatus($routeParams.accountId);
}]);

View File

@ -15,28 +15,20 @@
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
*/
accountantApp.controller(
"SchedulerController", function($scope, $http, $rootScope, $filter) {
"SchedulerController", function($scope, $http, $rootScope, $filter, $routeParams) {
// Operations store and selection
$scope.operations = [];
$scope.selectedOperation = null;
$scope.account = null;
// Placeholder for saved value to cancel entry edition
$scope.savedOperation = null;
$scope.loadOperations = function(account) {
$scope.loadOperations = function(accountId) {
// Clean up selected entry.
$scope.selectedOperation = null;
$scope.savedOperation = null;
if(account) {
$scope.account = account;
$http.get("/api/scheduled_operations/" + account.id).success($scope.loadOperations_success);
} else {
$scope.loadOperations_success(null);
}
$http.get("/api/scheduled_operations/" + accountId).success($scope.loadOperations_success);
};
$scope.loadOperations_success = function(data) {
@ -92,7 +84,7 @@ accountantApp.controller(
$scope.saveOperation = function(operation) {
if(!operation.account_id) {
operation.account_id = $scope.account.id;
operation.account_id = $routeParams.accountId;
}
// prepare the Ajax xall to save the sceduled operation.
@ -138,7 +130,7 @@ accountantApp.controller(
operation.label = null;
operation.value = null;
operation.category = null;
operation.account_id = $scope.account.id;
operation.account_id = $routeParams.accountId;
} else if ($scope.isEditing(operation)) {
if($scope.savedOperation) {
operation.id = $scope.savedOperation.id;
@ -193,6 +185,8 @@ accountantApp.controller(
};
$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.
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
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
#}
{# vim: set tw=80 ts=2 sw=2 sts=2: #}
{% extends "layout.html" %}
{% block body %}
-->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<!-- Row with entry table -->
<div class="row" ng-controller="AccountController">
<div class="row">
<table class="table table-striped table-condensed table-hover">
<!-- Head of the table containing column headers and size -->
<thead>
@ -77,5 +74,3 @@
</tbody>
</table>
</div>
{% endblock %}

View File

@ -1,5 +1,4 @@
{# vim: set tw=80 ts=2 sw=2 sts=2: #}
{#
<!--
This file is part of Accountant.
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
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
#}
{% extends "layout.html" %}
{% block body %}
<div ng-controller="EntryController">
-->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<!-- Chart row -->
<div class="row">
<!-- Sold evolution chart placeholder -->
@ -45,7 +41,7 @@
<!-- Body of the table containing the entries -->
<tbody>
{# The new entry row. #}
<!-- The new entry row. -->
<tr class="form-inline">
<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/>
@ -88,7 +84,7 @@
</td>
</tr>
{# Row for an editing entry. #}
<!-- Row for an editing entry. -->
<tr id="entry_[[entry.id]]" class="form-inline"
ng-class="entryRowClass(entry)" ng-repeat-start="entry in entries"
ng-if="isEditing(entry)">
@ -131,7 +127,7 @@
</td>
</tr>
{# Row for a displayed entry. #}
<!-- Row for a displayed entry. -->
<tr id="entry_[[entry.id]]"
ng-class="entryRowClass(entry)" ng-repeat-end
ng-if="isDisplaying(entry)">
@ -156,7 +152,7 @@
</td>
<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)">
<button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
<span class="fa fa-pencil-square-o"></span>
@ -173,7 +169,7 @@
</button>
</div>
{# Button group for an unsaved (scheduled) entry. #}
<!-- Button group for an unsaved (scheduled) entry. -->
<div class="btn-group" ng-if="!isSaved(entry)">
<button class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
<span class="fa fa-plus"></span>
@ -194,8 +190,3 @@
</tbody>
</table>
</div>
{% include "remove_entry.html" %}
</div>
{% endblock %}

View File

@ -1,4 +1,4 @@
{#
<!--
This file is part of Accountant.
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
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
#}
{# vim: set tw=80 ts=2 sw=2 sts=2: #}
{% extends "layout.html" %}
{% block body %}
-->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<!-- Row with entry table -->
<div class="row" ng-controller="SchedulerController">
<div class="row">
<table class="table table-striped table-condensed table-hover">
<!-- Head of the table containing column headers and size -->
<thead>
@ -88,7 +86,7 @@
<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">
<button class="btn btn-xs btn-default" bs-modal="static/templates/operation_remove.html" title="remove">
<span class="fa fa-trash"></span>
</button>
</div>
@ -97,4 +95,3 @@
</tbody>
</table>
</div>
{% endblock %}

View File

@ -21,18 +21,20 @@
<!-- Title -->
<title>Entries</title>
<base href="{{ url_for('.index') }}">
<!-- 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 -->
<link href="{{ url_for('frontend.static', filename='css/main.css') }}" rel="stylesheet">
<link href="static/css/main.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- 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>
<body style="padding-bottom: 50px; padding-top: 70px">
@ -48,12 +50,12 @@
<ul class="nav navbar-nav">
<!-- Entries -->
<li class="{% if request.path == '/entries' %}active{% endif %}">
<a href="entries">Opérations</a>
<a href="account/[[ selectedAccount.id ]]/entries">Opérations</a>
</li>
<!-- Scheduler -->
<li class="{% if request.path == '/scheduler' %}active{% endif %}">
<a href="scheduler">Planification</a>
<a href="account/[[ selectedAccount.id ]]/scheduler">Planification</a>
</li>
<!-- Accounts -->
@ -91,11 +93,11 @@
</nav>
<div class="container-fluid">
{% block body %}{% endblock %}
<div ng-view></div>
</div>
<!-- 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>
</html>