From c66e164c8d91c544eec08cb295382e1c9127ea64 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Tue, 14 Jul 2015 04:01:28 +0200
Subject: [PATCH] Begin to use AngularJS routing mechanisms.

---
 accountant/frontend/__init__.py               | 29 ++++---------------
 accountant/frontend/static/js/app.js          | 20 +++++++++++--
 accountant/frontend/static/js/entries.js      | 17 ++++++-----
 accountant/frontend/static/js/scheduler.js    | 22 +++++---------
 .../{ => static}/templates/accounts.html      | 13 +++------
 .../{ => static}/templates/entries.html       | 25 +++++-----------
 .../{ => static}/templates/scheduler.html     | 13 ++++-----
 accountant/frontend/templates/layout.html     | 18 +++++++-----
 8 files changed, 67 insertions(+), 90 deletions(-)
 rename accountant/frontend/{ => static}/templates/accounts.html (94%)
 rename accountant/frontend/{ => static}/templates/entries.html (94%)
 rename accountant/frontend/{ => static}/templates/scheduler.html (92%)

diff --git a/accountant/frontend/__init__.py b/accountant/frontend/__init__.py
index bb30311..ae78e2c 100644
--- a/accountant/frontend/__init__.py
+++ b/accountant/frontend/__init__.py
@@ -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')
diff --git a/accountant/frontend/static/js/app.js b/accountant/frontend/static/js/app.js
index ad66a35..60b56e0 100644
--- a/accountant/frontend/static/js/app.js
+++ b/accountant/frontend/static/js/app.js
@@ -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);
+})
+;
diff --git a/accountant/frontend/static/js/entries.js b/accountant/frontend/static/js/entries.js
index 40cc316..6e0139d 100644
--- a/accountant/frontend/static/js/entries.js
+++ b/accountant/frontend/static/js/entries.js
@@ -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);
 }]);
diff --git a/accountant/frontend/static/js/scheduler.js b/accountant/frontend/static/js/scheduler.js
index be28d3f..f7908b7 100644
--- a/accountant/frontend/static/js/scheduler.js
+++ b/accountant/frontend/static/js/scheduler.js
@@ -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);
 });
diff --git a/accountant/frontend/templates/accounts.html b/accountant/frontend/static/templates/accounts.html
similarity index 94%
rename from accountant/frontend/templates/accounts.html
rename to accountant/frontend/static/templates/accounts.html
index 3cfffb4..0b615d3 100644
--- a/accountant/frontend/templates/accounts.html
+++ b/accountant/frontend/static/templates/accounts.html
@@ -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 %}
diff --git a/accountant/frontend/templates/entries.html b/accountant/frontend/static/templates/entries.html
similarity index 94%
rename from accountant/frontend/templates/entries.html
rename to accountant/frontend/static/templates/entries.html
index 672ed88..30d8254 100644
--- a/accountant/frontend/templates/entries.html
+++ b/accountant/frontend/static/templates/entries.html
@@ -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 %}
diff --git a/accountant/frontend/templates/scheduler.html b/accountant/frontend/static/templates/scheduler.html
similarity index 92%
rename from accountant/frontend/templates/scheduler.html
rename to accountant/frontend/static/templates/scheduler.html
index de39d08..111bf10 100644
--- a/accountant/frontend/templates/scheduler.html
+++ b/accountant/frontend/static/templates/scheduler.html
@@ -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 %}
diff --git a/accountant/frontend/templates/layout.html b/accountant/frontend/templates/layout.html
index 0ed7c53..3d40b66 100644
--- a/accountant/frontend/templates/layout.html
+++ b/accountant/frontend/templates/layout.html
@@ -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>