Backbone app barely working

gratipay · Sep 16, 2015 · e9f4881 · e9f4881
1 parent 3b1098a
commit e9f4881
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 79 deletions.
diff --git a/sql/branch.sql b/sql/branch.sql
@@ -0,0 +1,7 @@
+BEGIN;
+
+    CREATE TABLE accounts
+    (
+     );
+
+END;
diff --git a/www/assets/backbone-min.js b/www/assets/backbone-min.js
diff --git a/www/assets/dashboard.js b/www/assets/dashboard.js
@@ -0,0 +1,49 @@
+Dashboard = {};
+
+Dashboard.accounts = Backbone.View.extend({
+    el: '.foo',
+    initialize: function() {
+        this.$table = this.$('table');
+        this.data = new Dashboard.accounts.Accounts();
+        this.data.fetch({reset:true});
+        this.listenTo(this.data, 'reset', this.addAll);
+    },
+    addOne: function (account) {
+        var view = new Dashboard.accounts.Row({model: account});
+        var el = view.render().el;
+        this.$table.append(el);
+    },
+    addAll: function () {
+        this.$table.html('');
+        this.data.each(this.addOne, this);
+    }
+});
+
+Dashboard.accounts.Row = Backbone.View.extend({
+    template: _.template('<tr><td><%= number %></td><td><%= name %></td><td><%= kind %></td></tr>'),
+    render: function() {
+        console.log(this);
+        this.$el.html(this.template(this.model.toJSON()));
+        return this;
+    }
+});
+
+Dashboard.accounts.Account = Backbone.Model.extend({
+    defaults: {
+        number: null,
+        name: null,
+        kind: null
+    }
+});
+
+Dashboard.accounts.Accounts = Backbone.Collection.extend({
+    url: '/dashboard/accounts/',
+    model: Dashboard.accounts.Account,
+    parse: function(data) {
+        return data.accounts;
+    }
+});
+
+Dashboard.init = function() {
+    new Dashboard.accounts();
+};
diff --git a/www/assets/underscore-min.js b/www/assets/underscore-min.js
diff --git a/www/dashboard/accounts/index.spt b/www/dashboard/accounts/index.spt
@@ -0,0 +1,38 @@
+from aspen import Response
+[---]
+if user.ANON:
+    raise Response(401)
+if not user.ADMIN:
+    raise Response(403)
+
+out = {"accounts": [ {"number": "100", "name": "accounts receivable", "kind": "asset"}
+                   , {"number": "200", "name": "accounts payable", "kind": "liability"}
+                    ]}
+[---] application/json via json_dump
+out
+[---] text/html
+<!doctype html>
+<html>
+<head>
+    <title>Chart of Accounts</title>
+    <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 class="foo">
+    <h1>Chart of Accounts</h1>
+    <table></table>
+
+    <script type="text/template" id="account-row">
+        <tr>
+            <td><%= number %></td>
+            <td><%= name %></td>
+            <td><%= kind %></td>
+        </tr>
+    </script>
+</body>
+</html>
diff --git a/www/dashboard/index.spt b/www/dashboard/index.spt
@@ -1,84 +1,13 @@
 from aspen import Response
-
 [---]
+if user.ANON:
+    raise Response(401)
 if not user.ADMIN:
     raise Response(403)
-
-
-unreviewed = website.db.all("""
-
-    SELECT username
-         , balance
-      FROM participants
-     WHERE is_suspicious IS NULL
-       AND balanced_customer_href IS NOT NULL
-       AND NOT is_closed
-  ORDER BY claimed_time
-
-""")
-
-title = _("Fraud Review Dashboard")
 [---] text/html
-<script src="{{ website.asset('jquery.min.js') }}"></script>
-<script src="{{ website.asset('gratipay.js') }}"></script>
-<style>
-    table {
-        width: auto;
-    }
-    td, th {
-        text-align: left;
-        vertical-align: top;
-    }
-    iframe {
-        width: 70%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        background: white;
-    }
-</style>
-<script>
-    $(document).ready(function()
-    {
-        Gratipay.forms.initCSRF();
-
-        function error(a,b,c)
-        {
-            console.log(a,b,c);
-            alert("Failed!");
-        }
-
-        $('button').click(function()
-        {
-            var row = $(this).parent();
-            var to = $(this).text() !== 'Good';
-            var username = row.attr('username');
-            var url = "/~" + username + "/toggle-is-suspicious.json";
-
-            function success()
-            {
-                row.remove();
-                $('iframe').attr('src', '');
-            }
-
-            jQuery.ajax({ url: url
-                        , type: "POST"
-                        , dataType: "json"
-                        , data: {to: to}
-                        , success: success
-                        , error: error
-                         })
-        });
-    });
-</script>
-<h3>Unreviewed Accounts (N = {{ len(unreviewed) }})</h3>
-{% for account in unreviewed %}
-<div username="{{ account.username }}">
-    <button class="good small selected">Good</button>
-    <button class="bad small">Bad</button>
-    &nbsp;
-    <a href="/{{ account.username }}/" target="drill-down">{{ account.username }}</a>
-</div>
-{% endfor %}
-<iframe name="drill-down"></iframe>
+<h1>Dashboard</h1>
+<ul>
+    <li><a href="accounts">Chart of Accounts</a></li>
+    <li><a href="ledger">General Ledger</a></li>
+    <li><a href="user-review">User Review</a></li>
+</ul>
diff --git a/www/dashboard/ledger.spt b/www/dashboard/ledger.spt
@@ -0,0 +1,21 @@
+from aspen import Response
+[---]
+if user.ANON:
+    raise Response(401)
+if not user.ADMIN:
+    raise Response(403)
+[---] text/html
+<!doctype html>
+<html ng-app>
+  <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
+  </head>
+  <body>
+    <div>
+      <label>Name:</label>
+      <input type="text" ng-model="yourName" placeholder="Enter a name here">
+      <hr>
+      <h1>Hello {{yourName}}!</h1>
+    </div>
+  </body>
+</html>
diff --git a/www/dashboard/user-review.spt b/www/dashboard/user-review.spt
@@ -0,0 +1,84 @@
+from aspen import Response
+
+[---]
+if not user.ADMIN:
+    raise Response(403)
+
+
+unreviewed = website.db.all("""
+
+    SELECT username
+         , balance
+      FROM participants
+     WHERE is_suspicious IS NULL
+       AND balanced_customer_href IS NOT NULL
+       AND NOT is_closed
+  ORDER BY claimed_time
+
+""")
+
+title = _("Fraud Review Dashboard")
+[---] text/html
+<script src="{{ website.asset('jquery.min.js') }}"></script>
+<script src="{{ website.asset('gratipay.js') }}"></script>
+<style>
+    table {
+        width: auto;
+    }
+    td, th {
+        text-align: left;
+        vertical-align: top;
+    }
+    iframe {
+        width: 70%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        right: 0;
+        background: white;
+    }
+</style>
+<script>
+    $(document).ready(function()
+    {
+        Gratipay.forms.initCSRF();
+
+        function error(a,b,c)
+        {
+            console.log(a,b,c);
+            alert("Failed!");
+        }
+
+        $('button').click(function()
+        {
+            var row = $(this).parent();
+            var to = $(this).text() !== 'Good';
+            var username = row.attr('username');
+            var url = "/~" + username + "/toggle-is-suspicious.json";
+
+            function success()
+            {
+                row.remove();
+                $('iframe').attr('src', '');
+            }
+
+            jQuery.ajax({ url: url
+                        , type: "POST"
+                        , dataType: "json"
+                        , data: {to: to}
+                        , success: success
+                        , error: error
+                         })
+        });
+    });
+</script>
+<h3>Unreviewed Accounts (N = {{ len(unreviewed) }})</h3>
+{% for account in unreviewed %}
+<div username="{{ account.username }}">
+    <button class="good small selected">Good</button>
+    <button class="bad small">Bad</button>
+    &nbsp;
+    <a href="/{{ account.username }}/" target="drill-down">{{ account.username }}</a>
+</div>
+{% endfor %}
+<iframe name="drill-down"></iframe>