initial menu view rendering and spreadsheet api work

.gitignore

@@ -3,3 +3,4 @@ build
 node_modules
 .DS_Store
 server/db
+client/*/template.js

Makefile

@@ -1,12 +1,13 @@
 
+MANIFESTS = $(wildcard client/*/component.json)
 SRC = $(wildcard client/*/*.js)
 HTML = $(wildcard client/*/*.html)
 TEMPLATES = $(HTML:.html=.js)
 
 build: components $(SRC) $(TEMPLATES)
 	@component build --dev
 
-components: component.json
+components: $(MANIFESTS)
 	@component install --dev
 
 %.js: %.html

app.js

@@ -4,56 +4,32 @@
  */
 
 var express = require('express');
-// var build = require('./server/build');
-var levelup = require('level');
+var build = require('./server/build');
+var spreadsheets = require('./server/spreadsheets');
 var app = express();
 
-// level db
-var db = levelup(__dirname + '/server/db', { "valueEncoding": "json" });
-
 // configure
 
 app.use(express.favicon());
 app.use(express.logger('dev'));
 app.use(express.bodyParser());
-// app.use(express.static(__dirname + '/build'));
+app.use(express.static(__dirname + '/build'));
 
 // spreadsheets
 
-// app.get('/spreadsheet/all', spreadsheets.all);
-// app.get('/spreadsheet/:id', spreadsheets.show);
-// app.post('/spreadsheet', spreadsheets.create);
+app.get('/api/v1/spreadsheet/all', spreadsheets.all);
+app.get('/api/v1/spreadsheet/:id', spreadsheets.show);
+// app.post('/api/v1/spreadsheet', spreadsheets.create);
 // app.put('/spreadsheet/:id', spreadsheets.update);
 // app.del('/spreadsheet/:id', spreadsheets.remove);
 
-app.get('/spreadsheet/all', function (req, res) {
-  getData('spreadsheet', function (data) {
-    res.json(200, { "spreadsheets": data });
-  });
-});
-
 // catch-all
 
-// app.all('*', build, function(req, res) {
-//   res.sendfile('index.html');
-// });
+app.all('*', build, function(req, res) {
+  res.sendfile('index.html');
+});
 
 // bind
 
 app.listen(3000);
 console.log('listening on 3000');
-
-
-// helper methods
-
-function getData(key, callback) {
-  var data = [];
-  db.createReadStream({ start: key + '!', end: key + '!\xff' })
-    .on('data', function (value) {
-      data.push(value.value)
-    })
-    .on('close', function () {
-      console.log(data);
-      callback(data);
-    });
-};

client/boot/component.json

@@ -1,8 +1,13 @@
 {
   "name": "boot",
   "description": "Main app boot component",
-  "dependencies": {},
+  "dependencies": {
+    "visionmedia/superagent": "*"
+  },
   "scripts": ["index.js"],
   "styles": ["style.css"],
-  "local": ["spreadsheet"]
+  "local": [
+    "spreadsheet",
+    "menu-view"
+  ]
 }

client/boot/index.js

@@ -3,4 +3,41 @@
  * Module dependencies.
  */
 
-console.log('Hello World');
+var request = require('superagent');
+var MenuView = require('menu-view');
+var Spreadsheet = require('spreadsheet');
+
+// get dom content
+var content = document.querySelector('#content');
+
+var store = {
+  spreadsheets: []
+};
+
+var spreadsheetMenu;
+
+// get all spreadsheets
+
+request
+  .get('/api/v1/spreadsheet/all')
+  .end(function (err, res) {
+    if (err) console.log(err);
+    parseSpreadsheets(res.body["spreadsheets"]);
+    createMenu();
+  });
+
+function parseSpreadsheets(spreadsheets) {
+  // clear existing spreadsheets
+  store.spreadsheets = [];
+
+  spreadsheets.forEach(function (data) {
+    var model = new Spreadsheet(data)
+    store.spreadsheets.push(model);
+  });
+};
+
+function createMenu() {
+  spreadsheetMenu = new MenuView(store.spreadsheets);
+  content.appendChild(spreadsheetMenu.el);
+  spreadsheetMenu.render();
+}

client/menu-item-view/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "menu-item-view",
+  "description": "Menu item view",
+  "version": "0.0.1",
+  "dependencies": {
+    "component/domify": "*",
+    "component/reactive": "*"
+  },
+  "scripts": [ 
+    "index.js", 
+    "template.js"
+  ]
+}

client/menu-item-view/index.js

@@ -0,0 +1,21 @@
+
+/**
+ * Module dependencies.
+ */
+
+var domify = require('domify');
+var reactive = require('reactive');
+var html = require('./template');
+
+/**
+ * Export Menu
+ */
+
+module.exports = MenuItem;
+
+function MenuItem(model) {
+
+  var template = domify(html);
+  this.el = reactive(template, model, this).el;
+
+};

client/menu-item-view/template.html

@@ -0,0 +1 @@
+<li>{name}</li>

client/menu-view/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "menu-view",
+  "description": "Menu view",
+  "version": "0.0.1",
+  "dependencies": {
+    "component/domify": "*"
+  },
+  "scripts": [ 
+    "index.js", 
+    "template.js"
+  ],
+  "local": [ "menu-item-view" ]
+}

client/menu-view/index.js

@@ -0,0 +1,32 @@
+
+/**
+ * Module dependencies.
+ */
+
+var domify = require('domify');
+var html = require('./template');
+var MenuItemView = require('menu-item-view');
+
+/**
+ * Export Menu
+ */
+
+module.exports = Menu;
+
+function Menu(collection) {
+
+  this.collection = collection;
+  this.el = domify(html);
+
+};
+
+
+Menu.prototype.render = function () {
+  var self = this;
+
+  this.collection.forEach(function (model) {
+    var item = new MenuItemView(model);
+    self.el.appendChild(item.el);
+  });
+
+};

client/menu-view/template.html

@@ -0,0 +1 @@
+<ul class="menu"></ul>

client/spreadsheet/component.json

@@ -3,8 +3,7 @@
   "description": "Spreadsheet model",
   "version": "0.0.1",
   "dependencies": {
-    "component/model": "0.1.0",
-    "component/model-timestamps": "0.0.1"
+    "component/model": "0.1.0"
   },
   "scripts": [ "index.js" ]
 }

client/spreadsheet/index.js

@@ -4,13 +4,13 @@
  */
 
 var model = require('model');
-// var timestamps = require('model-timestamps');
 
 /**
  * Spreadsheet model.
  */
 
 module.exports = model('Spreadsheet')
-  // .use(timestamps)
   .attr('name')
+  .attr('created_at')
+  .attr('updated_at');
 

index.html

@@ -8,6 +8,7 @@
     <section id="content">
       <h1>Sharesheet</h1>
     </section>
+
     <script src="build.js"></script>
     <script>
       require('boot');

server/spreadsheets.js

@@ -1,42 +1,39 @@
-/**
- * Faux db.
- */
 
-var spreadsheets = [];
+var levelup = require('level');
 
+// level db
+var db = levelup(__dirname + '/db', { "valueEncoding": "json" });
 
-var test = {
-  id: 0,
-  name: "test",
-  data: [
-    ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
-    ["2009", 0, 2941, 4303, 354, 5814],
-    ["2010", 5, 2905, 2867, 412, 5284],
-    ["2011", 4, 2517, 4822, 552, 6127],
-    ["2012", 2, 2422, 5399, 776, 4151]
-  ]
-};
+// /**
+//  * Faux db.
+//  */
 
-spreadsheets.push(test);
+// var spreadsheets = [];
 
-/**
- * Index of `id` in db.
- */
 
-function indexOf(id) {
-  for (var i = 0, len = spreadsheets.length; i < len; ++i) {
-    if (id == spreadsheets[i].id) {
-      return i;
-    }
-  }
-}
+// var test = {
+//   id: 0,
+//   name: "test",
+//   data: [
+//     ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
+//     ["2009", 0, 2941, 4303, 354, 5814],
+//     ["2010", 5, 2905, 2867, 412, 5284],
+//     ["2011", 4, 2517, 4822, 552, 6127],
+//     ["2012", 2, 2422, 5399, 776, 4151]
+//   ]
+// };
+
+// spreadsheets.push(test);
 
 /**
  * GET all spreadsheets.
  */
 
 exports.all = function(req, res){
-  res.send(spreadsheets);
+  find(function (err, value) {
+    if (err) console.log(err);
+    res.json(200, { "spreadsheets": value });
+  });
 };
 
 /**
@@ -45,10 +42,20 @@ exports.all = function(req, res){
 
 exports.show = function(req, res){
   var id = req.params.id;
-  var i = indexOf(id);
-  var spreadsheet = spreadsheets[i];
-  if (!spreadsheet) return res.send(404, 'spreadsheet does not exist');
-  res.send(spreadsheet);
+
+  db.get('spreadsheet!'+id, function (err, value) {
+
+    if (err) {
+      if (err.notFound) {
+        return res.send(404, 'spreadsheet does not exist');
+      }
+      console.log(err);
+      return res.send(400, err);
+    }
+
+    res.json(200, { "spreadsheet": value });
+
+  });
 };
 
 /**
@@ -86,3 +93,31 @@ exports.update = function(req, res){
   spreadsheet.name = body.name;
   res.send(200);
 };
+
+
+/**
+ * Index of `id` in db.
+ */
+
+function indexOf(id) {
+  for (var i = 0, len = spreadsheets.length; i < len; ++i) {
+    if (id == spreadsheets[i].id) {
+      return i;
+    }
+  }
+}
+
+/**
+ * Find all spreadsheets in db.
+ */
+
+function find(callback) {
+  var data = [];
+  db.createReadStream({ start: 'spreadsheet!', end: 'spreadsheet!\xff' })
+    .on('data', function (value) {
+      data.push(value.value)
+    })
+    .on('close', function () {
+      callback(null, data);
+    });
+};