Implement routing

We want a single Dashboard js app that includes both the general ledger and chart of accounts.
gratipay · Sep 16, 2015 · 02c4ec0 · 02c4ec0
1 parent e4f4b60
commit 02c4ec0
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 80 deletions.
diff --git a/www/assets/dashboard.css.spt b/www/assets/dashboard.css.spt
@@ -0,0 +1,7 @@
+[---]
+[---] text/css via scss
+#dashboard {
+    section {
+        display: none;
+    }
+}
diff --git a/www/assets/dashboard.js b/www/assets/dashboard.js
@@ -1,5 +1,21 @@
 Dashboard = {models: {}, views: {}, collections: {}};
 
+Dashboard.Router = Backbone.Router.extend({
+    routes: {'ledger': 'ledger', 'accounts': 'accounts'},
+    ledger: function() {
+        $('section').hide();
+        $('#general-ledger').show();
+    },
+    accounts: function() {
+        $('section').hide();
+        $('#chart-of-accounts').show();
+    }
+});
+
+
+// Models
+// ======
+
 Dashboard.models.Account = Backbone.Model.extend({
     defaults: {
         number: null,
@@ -8,21 +24,54 @@ Dashboard.models.Account = Backbone.Model.extend({
     }
 });
 
+
+// Collections
+// ===========
+
 Dashboard.collections.Accounts = Backbone.Collection.extend({
-    url: '/dashboard/accounts/',
+    url: '/v2/accounts/',
     model: Dashboard.models.Account,
     parse: function(data) {
         return data.accounts;
     }
 });
 
+
+// Views
+// =====
+
+Dashboard.views.Main = Backbone.View.extend({
+    el: 'body',
+    initialize: function() {
+        new Dashboard.views.GeneralLedger;
+        new Dashboard.views.ChartOfAccounts;
+
+        this.router = new Dashboard.Router;
+        Backbone.history.start({pushState: true, root: "/dashboard/"});
+    },
+    events: {
+        'click #navigation a': 'loadSection'
+    },
+    loadSection: function(e) {
+        this.router.navigate($(e.currentTarget).attr('href'), {trigger: true});
+        e.preventDefault();
+    },
+});
+
+Dashboard.views.GeneralLedger = Backbone.View.extend({
+    el: '#general-ledger',
+    initialize: function() {
+        this.$tbody= this.$('tbody');
+    },
+});
+
 Dashboard.views.ChartOfAccounts = Backbone.View.extend({
     el: '#chart-of-accounts',
     initialize: function() {
         this.$tbody= this.$('tbody');
         this.data = new Dashboard.collections.Accounts();
-        this.data.fetch({reset:true});
         this.listenTo(this.data, 'reset', this.addAll);
+        this.data.fetch({reset:true});
     },
     addOne: function (account) {
         var view = new Dashboard.views.AccountRow({model: account});
@@ -46,6 +95,10 @@ Dashboard.views.AccountRow = Backbone.View.extend({
     }
 });
 
+
+// Entrypoint
+// ==========
+
 Dashboard.init = function() {
-    new Dashboard.views.ChartOfAccounts();
+    new Dashboard.views.Main();
 };
diff --git a/www/dashboard/%index.spt b/www/dashboard/%index.spt
@@ -0,0 +1,57 @@
+from aspen import Response
+[---]
+if user.ANON:
+    raise Response(401)
+if not user.ADMIN:
+    raise Response(403)
+[---] text/html
+<!doctype html>
+<html>
+    <title>Dashboard</title>
+    <link rel="stylesheet" type="text/css" href="{{ website.asset('dashboard.css') }}" />
+    <script src="{{ website.asset('jquery.min.js') }}"></script>
+    <script src="{{ website.asset('underscore-min.js') }}"></script>
+    <script src="{{ website.asset('backbone-min.js') }}"></script>
+    <script src="{{ website.asset('dashboard.js') }}"></script>
+    <script>
+        $(document).ready(Dashboard.init);
+    </script>
+</head>
+<body id="dashboard">
+    <h1>Dashboard</h1>
+    <ul id="navigation">
+        <li><a href="ledger">General Ledger</a></li>
+        <li><a href="accounts">Chart of Accounts</a></li>
+    </ul>
+
+    <section id="general-ledger">
+        <h2>General Ledger</h2>
+        <table>
+            <thead>
+                <th>Account</th>
+                <th>Debits</th>
+                <th>Credits</th>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </section>
+
+    <section id="chart-of-accounts">
+        <h2>Chart of Accounts</h2>
+        <table>
+            <thead>
+                <th>Number</th>
+                <th>Name</th>
+                <th>Type</th>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </section>
+
+    <script type="text/template" id="AccountRow">
+        <td><%= number %></td>
+        <td><%= name %></td>
+        <td><%= type %></td>
+    </script>
+</body>
+</html>
diff --git a/www/dashboard/accounts/index.spt b/www/dashboard/accounts/index.spt
diff --git a/www/dashboard/index.spt b/www/dashboard/index.spt
diff --git a/www/dashboard/ledger.spt b/www/dashboard/ledger.spt
diff --git a/www/v2/accounts/index.spt b/www/v2/accounts/index.spt
@@ -0,0 +1,12 @@
+from aspen import Response
+[---]
+if user.ANON:
+    raise Response(401)
+if not user.ADMIN:
+    raise Response(403)
+
+out = {"accounts": [ {"number": "100", "name": "accounts receivable", "type": "asset"}
+                   , {"number": "200", "name": "accounts payable", "type": "liability"}
+                    ]}
+[---] application/json via json_dump
+out