
/**
 * mongo-view.js
 **/

var App = Spine.Controller.sub({

  db_name: null,
  collection: null,
  item: null,

  // initialize app
  init: function(params) {
    var self = this;
    // setup routes
    this.routes({
      '/': function() {
        self.setupConnect()
      },
      '/database/:database': function(params) {
        self.retrieveCollections(params.database)
      },
      '/database/:database/': function(params) {
        self.retrieveCollections(params.database)
      },
      '/database/:database/collection/:collection': function(params) {
        self.retrieveCollection(params.database, params.collection);
      },
      '/database/:database/collection/:collection/': function(params) {
        self.retrieveCollection(params.database, params.collection);
      },
      '/database/:database/collection/:collection/:id': function(params) {
        self.retrieveItem(params.database, params.collection, params.id);
      },
      '/database/:database/collection/:collection/:id/': function(params) {
        self.retrieveItem(params.database, params.collection, params.id);
      },
    });
    // setup routes
    Spine.Route.setup();
    // preserve html5 history
    Spine.Route.setup({
      history: true
    });
  },

  // clear content
  clear: function() {
    $('#content').html('');
  },

  // render connect form partial
  setupConnect: function() {
    var self = this;
    self.clear();
    var json = { MONGO_DB : 'mongodb://localhost/dash' };
    $.get('/partials/connect.html', function(template) {
      var html = $.mustache(template, json);
      $('#content').append(html);
      // connection form submit
      $('#connect-btn').click(function(e) {  
        self.connect($('#connection-string').val());    
      });
    });
  },

  // connect to mongo and initialize session
  connect: function(mongoString) {
    var self = this;
    $.get('/api/connect/', $('#connection-form').serialize(), function(data) {
      var db_name = data['db_name'];
      self.db_name = db_name;
      self.navigate('/database/' + db_name + '/');
    });
  },

  // retrieve collections for db
  retrieveCollections: function(db_name) {
    var self = this;
    self.clear();
    $.get('/api/database/' + db_name, function(data) {
      var json = {
        collections : data,
        howMany     : data.length - 1,
        linker      : function() { 
          return '/database/' + db_name + '/collection/' + this.name + '/';
        }
      };
      $.get('/partials/collections.html', function(template) {
        var html = $.mustache(template, json);
        $('#content').append(html);
      });
    });
  },

  // retrieve single collection
  retrieveCollection: function(db_name, collection) {
    var self = this;
    self.clear();
    $.get('/api/database/' + db_name + '/collection/' + collection, function(data) {
      var json = {
        howMany        : data.length,
        collection     : data,
        collectionName : collection
      };
      $.get('/partials/collection.html', function(template) {
        var html = $.mustache(template, json);
        $('#content').append(html);
      });
    });
  },

  // retrieve single collection
  retrieveItem: function(db_name, collection, id) {
    var self = this;
    self.clear();
    $.get('/api/database/' + db_name + '/collection/' + collection + '/' + id, function(data) {
      var json = {
        id       : id,
        item     : data,
        collectionName : collection,
        generateRow : function() {
          var html = '';
          var props = this;
          for (key in props) {
            html += '<div class="holder">';
            html += '<div class="key left">';
            html += key
            html += '</div>'
            html += '<div class="prop right">';
            html += props[key];
            html += '</div>';
            html += '</div>';
          };
          return html;
        }
      }
      $.get('/partials/item.html', function(template) {
        var html = $.mustache(template, json);
        $('#content').append(html);
      });
    });
  }
  
});

$(document).ready(function() {
  
  // initialize app
  var app = new App({
    start : new Date().getTime()
  });

  // setup ajax indicator text
  $('body').append($('<div id="indicator"></div>'));
  $('#indicator').html('<h1>Loading...</h1>');
  $('#indicator').css({
    bottom: '150px',
    left: '20px',
    width: '200px',
    height: '50px',
    zIndex: 99,
    opacity: 1.0,
    display: 'none',
    fontSize: '13px',
    fontFamily: 'Helvetica',
    letterSpacing: '-1px',
    position: 'absolute',
  });

  // setup ajax
  $(document).ajaxStart(function() {
    $('#indicator').fadeIn(750);
  }).ajaxStop(function() {
    $('#indicator').fadeOut(750);
  }).ajaxError(function(e, jqxhr, settings, message) {
    var suppressErrorAlert = true;
    if (jqxhr.status === 599) {
      window.location = '/';
      return suppressErrorAlert;
    } else {
      window.location = '/';
      return suppressErrorAlert;
    };
  });

});

/* EOF */
@@ -1236,29 +1236,122 @@
 rue%0A    %7D);%0A
+    // navigate via spine%0A    $.fn.navTo = function(path) %7B%0A      self.navigate(path);%0A    %7D%0A
   %7D,%0A
-
 %0A  // clear 
@@ -1965,24 +1965,82 @@
 elf = this;%0A
+    $('#indicator h1').text('connecting to database...');%0A
     $.get('/
@@ -2345,32 +2345,102 @@
   self.clear();%0A
+    $('#indicator h1').text('retrieving collections for ' + db_name);%0A
     $.get('/api/
@@ -2982,32 +2982,101 @@
   self.clear();%0A
+    $('#indicator h1').text('retrieving collection: ' + collection);%0A
     $.get('/api/
@@ -3267,16 +3267,151 @@
 llection
+,%0A        linker      : function() %7B %0A          return '/database/' + db_name + '/collection/' + collection + '/' + this._id;%0A        %7D
 %0A      %7D
@@ -3700,24 +3700,79 @@
 lf.clear();%0A
+    $('#indicator h1').text('retrieving item: ' + id);%0A
     $.get('/
@@ -4615,19 +4615,17 @@
 ion() %7B%0A
-  
 %0A
+
   // ini
@@ -4804,302 +4804,26 @@
 r').
-html('%3Ch1%3ELoading...%3C/h1%3E');%0A  $('#indicator').css(%7B%0A    bottom: '150px',%0A    left: '20px',%0A    width: '200px',%0A    height: '50px',%0A    zIndex: 99,%0A    opacity: 1.0,%0A    display: 'none',%0A    fontSize: '13px',%0A    fontFamily: 'Helvetica',%0A    letterSpacing: '-1px',%0A    position: 'absolute',%0A  %7D
+append('%3Ch1%3E%3C/h1%3E'
 );%0A%0A

use navTo fn to maintain state