Backbone app barely working

gratipay · Sep 16, 2015 · be20530 · be20530
1 parent 3fbded9
commit be20530
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 0 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/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>