Begin to use AngularJS routing mechanisms.
This commit is contained in:
Alexis Lahouze
parent
eaf96c4b34
commit
c66e164c8d
@ -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')
|
||||
|
||||
@ -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);
|
||||
})
|
||||
;
|
||||
|
||||
@ -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);
|
||||
}]);
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user