From 3bf7d9ceb407c9f26d4120d66af1c4c3efcc54ef Mon Sep 17 00:00:00 2001
From: rgrp <rufus.pollock@okfn.org>
Date: Wed, 9 Nov 2011 01:41:49 +0000
Subject: [PATCH] [view,demo][m]: (refs #12) new DataExplorer parent view to
 hold the main app.

---
 demo/index.html | 19 +++-------
 demo/js/app.js  | 33 ++++++++++--------
 src/view.js     | 92 ++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 115 insertions(+), 29 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index be9b7193..990697f2 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,20 +16,11 @@
 </head> 
 <body class="bod">
   <div class="container">
-    <div class="dataexplorer-tableview-nav">
-      <form>
-        <label for="source">Source</label>
-        <input type="text" name="source" size="50" />
-        <input type="submit" name="" value="Update" />
-        <br />
-        <span class="dataexplorer-tableview-nav-toggle">
-          <input type="radio" id="dataexplorer-tableview-nav-grid" name="dataexplorer-tableview-nav-toggle" value="grid" checked="checked" />
-          <label for="dataexplorer-tableview-nav-grid">Grid</label>
-          <input type="radio" id="dataexplorer-tableview-nav-graph" name="dataexplorer-tableview-nav-toggle" value="chart" />
-          <label for="dataexplorer-tableview-nav-graph">Graph</label>
-        </span>
-      </form>
-    </div>
+    <form class="webstore-load">
+      <label for="source">Source</label>
+      <input type="text" name="source" size="50" />
+      <input type="submit" name="" value="Update" />
+    </form>
     <!-- <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
     <ul class="menu">
     </ul>
diff --git a/demo/js/app.js b/demo/js/app.js
index 3ca759f8..9a3caa98 100755
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -1,14 +1,19 @@
 $(function() {
-  var demoUrl = 'http://webstore.test.ckan.org/rufuspollock/demo/data';
-  $('.dataexplorer-tableview-nav form input[name="source"]').val(demoUrl);
+  // do not like all these window globals ...
+  window.$container = $('.container');
   var dataset = demoDataset();
-  dataset.fetch().then(function() {
-    var dataTable = new recline.DataTable({
-      model: dataset
-    })
-    $('.container').append(dataTable.el)
+  window.dataExplorer = new recline.DataExplorer({
+    model: dataset
+  });
+  window.$container.append(window.dataExplorer.el);
+  setupLoadFromWebstore(function(dataset) {
+    window.dataExplorer.remove();
+    window.dataExplorer = null;
+    window.dataExplorer = new recline.DataExplorer({
+      model: dataset,
+    });
+    window.$container.append(window.dataExplorer.el);
   });
-  setupLoadFromWebstore();
 })
 
 function demoDataset() {
@@ -40,8 +45,11 @@ function demoDataset() {
   return dataset;
 }
 
-function setupLoadFromWebstore() {
-  $('.dataexplorer-tableview-nav form').submit(function(e) {
+function setupLoadFromWebstore(callback) {
+  // pre-populate webstore load form with an example url
+  var demoUrl = 'http://webstore.test.ckan.org/rufuspollock/demo/data';
+  $('form.webstore-load input[name="source"]').val(demoUrl);
+  $('form.webstore-load').submit(function(e) {
     e.preventDefault();
     var $form = $(e.target);
     var source = $form.find('input[name="source"]').val();
@@ -50,10 +58,7 @@ function setupLoadFromWebstore() {
     });
     recline.setBackend(backend);
     var dataset = backend.getDataset();
-    var dataTable = new recline.DataTable({
-      model: dataset
-    })
-    $('.container').append(dataTable.el)
+    callback(dataset);
   });
 }
 
diff --git a/src/view.js b/src/view.js
index 271fd983..671336af 100644
--- a/src/view.js
+++ b/src/view.js
@@ -1,5 +1,37 @@
 this.recline = this.recline || {};
 
+recline.DataExplorer = Backbone.View.extend({
+  tagName: 'div',
+  className: 'data-explorer',
+  template: ' \
+    <div class="dataexplorer-tableview-nav"> \
+      <span class="dataexplorer-tableview-nav-toggle"> \
+        <input type="radio" id="dataexplorer-tableview-nav-grid" name="dataexplorer-tableview-nav-toggle" value="grid" checked="checked" /> \
+        <label for="dataexplorer-tableview-nav-grid">Grid</label> \
+        <input type="radio" id="dataexplorer-tableview-nav-graph" name="dataexplorer-tableview-nav-toggle" value="chart" /> \
+        <label for="dataexplorer-tableview-nav-graph">Graph</label> \
+      </span> \
+    </div> \
+  ',
+
+  events: {
+  },
+
+  initialize: function() {
+    this.el = $(this.el);
+    this.render();
+    // initialize of dataTable calls render
+    this.dataTable = new recline.DataTable({
+      model: this.model
+    });
+    this.el.append(this.dataTable.el)
+  },
+
+  render: function() {
+    $(this.el).html($(this.template));
+  }
+});
+
 recline.DataTable = Backbone.View.extend({
 
   tagName:  "div",
@@ -8,7 +40,6 @@ recline.DataTable = Backbone.View.extend({
   // template: TODO ???
 
   events: {
-
   },
 
   initialize: function() {
@@ -39,3 +70,62 @@ recline.DataTable = Backbone.View.extend({
     return this;
   }
 });
+
+recline.FlotGraph = Backbone.View.extend({
+
+  tagName:  "div",
+  className: "data-graph-container",
+
+  // TODO: normalize css
+  template: ' \
+  <div class="dataexplorer-tableview-panel dataexplorer-tableview-graph"></div> \
+  <div class="dataexplorer-tableview-editor"> \
+    <div class="dataexplorer-tableview-editor-info dataexplorer-tableview-editor-hide-info"> \
+      <h1><span></span>Help</h1> \
+      <p>To create a chart select a column (group) to use as the x-axis \
+         then another column (Series A) to plot against it.</p> \
+      <p>You can add add \
+         additional series by clicking the "Add series" button</p> \
+      <p>Please note you must be logged in to save charts.</p> \
+    </div> \
+    <form> \
+      <ul> \
+        <li class="dataexplorer-tableview-editor-type"> \
+          <label>Graph Type</label> \
+          <select></select> \
+        </li> \
+        <li class="dataexplorer-tableview-editor-group"> \
+          <label>Group Column (x-axis)</label> \
+          <select></select> \
+        </li> \
+        <li class="dataexplorer-tableview-editor-series"> \
+          <label>Series <span>A (y-axis)</span></label> \
+          <select></select> \
+        </li> \
+      </ul> \
+      <div class="dataexplorer-tableview-editor-buttons"> \
+        <button class="dataexplorer-tableview-editor-add">Add Series</button> \
+      </div> \
+      <div class="dataexplorer-tableview-editor-buttons dataexplorer-tableview-editor-submit"> \
+        <button class="dataexplorer-tableview-editor-save">Save</button> \
+        <input type="hidden" class="dataexplorer-tableview-editor-id" value="chart-1" /> \
+      </div> \
+    </form> \
+  </div> \
+</div> \
+',
+
+  events: {
+  },
+
+  initialize: function() {
+  },
+  toTemplateJSON: function() {
+    return {};
+  },
+  render: function() {
+    htmls = $.mustache(this.template, this.toTemplateJSON());
+    $(this.el).html(htmls);
+    return this;
+  }
+});
