template design fix

client/common.js

@@ -11,16 +11,16 @@ clearSessions = function () {
     Session.set(strSessionSelectedCollection, undefined);
 };
 
-Template.registerHelper(strSessionConnection, function () {
+Template.registerHelper('getConnection', function () {
     if (Session.get(strSessionConnection)) {
         return Connections.findOne({_id: Session.get(strSessionConnection)});
     }
 });
 
-Template.registerHelper(strSessionCollectionNames, function () {
+Template.registerHelper('getCollectionNames', function () {
     return Session.get(strSessionCollectionNames);
 });
 
-Template.registerHelper(strSessionSelectedCollection, function () {
+Template.registerHelper('getSelectedCollection', function () {
     return Session.get(strSessionSelectedCollection);
 });

client/views/common/navigation.html

@@ -6,14 +6,14 @@
                     <div class="dropdown profile-element">
                         <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                             <span class="clear">
-                                {{#if collectionNames}}
+                                {{#if getCollectionNames}}
                                     <span class="block m-t-xs"> <strong
-                                            class="font-bold">{{connection.name}}</strong>
+                                            class="font-bold">{{getConnection.name}}</strong>
                                 </span>
                                 <span class="block m-t-xs">
-                                    {{connection.host}} : {{connection.port}}
+                                    {{getConnection.host}} : {{getConnection.port}}
                                 </span>
-                                    <span class="text-muted text-xs block">{{connection.databaseName}} <b
+                                    <span class="text-muted text-xs block">{{getConnection.databaseName}} <b
                                             class="caret"></b>
                                     </span>
                                 {{else}}
@@ -21,9 +21,9 @@
                                 {{/if}}
                             </span>
                         </a>
-                        {{#if collectionNames}}
+                        {{#if getCollectionNames}}
                             <ul class="dropdown-menu animated fadeInRight m-t-xs">
-                                <li><a id="btnDropDatabase" href="#"><i class="fa fa-remove"></i>  Drop database</a></li>
+                                <li><a id="btnDropDatabase" href="#"><i class="fa fa-remove"></i> Drop database</a></li>
                                 <!--<li><a href="#">Item</a></li>
                                 <li class="divider"></li>
                                 <li><a href="#">Item</a></li>-->
@@ -38,11 +38,12 @@
                     <a href="{{pathFor route='browseDB'}}"><i class="fa fa-dashboard"></i> <span class="nav-label">Browse</span>
                     </a>
                 </li>
-                {{#if collectionNames}}
+                {{#if getCollectionNames}}
                     <ul id="listCollectionNames" class="nav nav-second-level collapse in">
-                        {{#each collectionNames}}
+                        {{#each getCollectionNames}}
                             <li>
-                                <a class="navCollection" href="#"><i class="fa fa-book"></i> <span
+                                <a class="navCollection" href="{{pathFor route='browseCollection'}}"><i
+                                        class="fa fa-book"></i> <span
                                         class="nav-label">{{name}}</span>
                                 </a>
                             </li>

client/views/common/navigation.js

@@ -43,6 +43,10 @@ Template.navigation.events({
             }
         });
 
+        $('#side-menu li').each(function (index, li) {
+            $(li).removeClass('active');
+        });
+
         Session.set(strSessionSelectedCollection, name);
         $('#divJsonEditor').hide();
         $('#divAceEditor').hide();

client/views/common/top-navbar.html

@@ -13,7 +13,7 @@
             </div>
             <ul class="nav navbar-top-links navbar-right">
                 <li>
-                    {{#if collectionNames}}
+                    {{#if getCollectionNames}}
                         <a id="btnDisconnect" href="#">
                             <i class="fa fa-sign-out"></i> Disconnect
                         </a>
@@ -51,7 +51,7 @@
                         <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                     </div>
                     <button id="btnConnect" title="Select a connection" type="button" disabled="true"
-                            class="btn btn-primary">Connect Now
+                            class="btn btn-primary ladda-button" data-style="contract">Connect Now
                     </button>
                 </div>
             </div>
@@ -126,14 +126,14 @@
                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                             class="sr-only">Close</span></button>
                     <h4 class="modal-title">Edit Connection</h4>
-                    <small class="font-bold">{{connection.name}}
+                    <small class="font-bold">{{getConnection.name}}
                     </small>
                 </div>
                 <div class="modal-body">
                     <form id="formCreateConnection" class="form-horizontal">
                         <div class="form-group"><label class="col-lg-2 control-label">Connection Name</label>
                             <div class="col-lg-10">
-                                <input id="inputEditConnectionName" value="{{connection.name}}" required="true"
+                                <input id="inputEditConnectionName" value="{{getConnection.name}}" required="true"
                                        type="text"
                                        placeholder="Connection Name" class="form-control">
                             </div>
@@ -141,7 +141,7 @@
                         <div class="form-group"><label class="col-lg-2 control-label">Hostname</label>
                             <div class="col-lg-10">
                                 <input id="inputEditHost" required="true" type="text"
-                                       value="{{connection.host}}"
+                                       value="{{getConnection.host}}"
                                        placeholder="Hostname"
                                        class="form-control">
                             </div>
@@ -149,7 +149,7 @@
                         <div class="form-group"><label class="col-lg-2 control-label">Port</label>
                             <div class="col-lg-10">
                                 <input id="inputEditPort" required="true" type="number"
-                                       value="{{connection.port}}"
+                                       value="{{getConnection.port}}"
                                        placeholder="Port"
                                        class="form-control">
                             </div>
@@ -157,7 +157,7 @@
                         <div class="form-group"><label class="col-lg-2 control-label">DB Name</label>
                             <div class="col-lg-10">
                                 <input id="inputEditDatabaseName" required="true" type="text"
-                                       value="{{connection.databaseName}}"
+                                       value="{{getConnection.databaseName}}"
                                        placeholder="Database Name"
                                        class="form-control">
                             </div>
@@ -165,14 +165,14 @@
                         <div class="form-group"><label class="col-lg-2 control-label">User</label>
                             <div class="col-lg-10">
                                 <input id="inputEditUser" type="text" placeholder="User"
-                                       value="{{connection.user}}"
+                                       value="{{getConnection.user}}"
                                        class="form-control">
                             </div>
                         </div>
                         <div class="form-group"><label class="col-lg-2 control-label">Password</label>
                             <div class="col-lg-10">
                                 <input id="inputEditPassword" type="password" placeholder="Password"
-                                       value="{{connection.password}}"
+                                       value="{{getConnection.password}}"
                                        class="form-control">
                             </div>
                         </div>

client/views/common/top-navbar.js

@@ -172,15 +172,21 @@ Template.topNavbar.events({
     },
 
     'click #btnConnect': function (e) {
-        var connection = Connections.findOne({_id: Session.get(strSessionConnection)});
+        // loading button
+        var l = $('#btnConnect').ladda();
+        l.ladda('start');
 
+        var connection = Connections.findOne({_id: Session.get(strSessionConnection)});
         Meteor.call('connect', connection, function (err, result) {
             if (result.error) {
                 toastr.error("Couldn't connect: " + result.error.message);
+                l.ladda('stop');
                 return;
             }
-            Session.set(strSessionCollectionNames, result.result);
 
+            l.ladda('stop');
+
+            Session.set(strSessionCollectionNames, result.result);
             $('#connectionModal').modal('hide');
 
             swal({

client/views/pages/browse_collection.html

+<template name="browseCollection">
+    {{#if getSelectedCollection}}
+        {{> pageHeading title=getSelectedCollection }}
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>Query
+                                <small>You can either use mongodb or sql queries</small>
+                            </h5>
+                            <div class="ibox-tools">
+                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                    <i class="fa fa-wrench"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-user">
+                                    <li><a href="#"><i class="fa fa-check"></i> Mongodb Queries</a>
+                                    </li>
+                                    <li><a href="#">SQL Queries</a>
+                                    </li>
+                                </ul>
+                                <a id="btnSwitchView" href="#"
+                                   title="Switch Result View">
+                                    <i class="fa fa-exchange"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ibox-content">
+                            <div class="row">
+                                <div class="col-sm-12 b-r">
+                                    <div class="form-group input-group">
+                                        <span class="input-group-addon">db.{{getSelectedCollection}}.</span>
+                                        <input id="inputQuery" type="text" placeholder="Enter query here"
+                                               class="form-control">
+                                    </div>
+                                    <div>
+                                        <button id="btnExecuteQuery"
+                                                class="btn btn-block btn-outline btn-primary ladda-button"
+                                                type="button"
+                                                data-style="contract">
+                                            <strong>Execute</strong></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="divJsonEditor" class="row" style="display:none;margin-top: 50px;">
+                                <div class="col-sm-12 b-r">
+                                    <div id="jsoneditor" style="width: 100%">
+
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div id="divAceEditor" class="row" style="margin-top: 50px;display: none">
+                                <div class="col-sm-12 b-r">
+                                    <pre id='aceeditor' style="height: 500px;width: 100%;"></pre>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+</template>
\ No newline at end of file

client/views/pages/browse_collection.js

+/**
+ * Created by RSercan on 29.12.2015.
+ */
+var jsonEditor;
+var jsonEditorOptions = {
+    mode: "tree",
+    search: true
+};
+
+getEditor = function () {
+    if ($('.jsoneditor').length == 0) {
+        jsonEditor = new JSONEditor(document.getElementById("jsoneditor"), jsonEditorOptions);
+    }
+    return jsonEditor;
+}
+
+Template.browseCollection.onRendered(function () {
+
+});
+
+Template.browseCollection.events({
+    'click #btnSwitchView': function (e) {
+        var jsonView = $('#divJsonEditor');
+        var aceView = $('#divAceEditor');
+
+        if (jsonView.css('display') == 'none') {
+            aceView.hide();
+            jsonView.show('slow');
+        } else {
+            jsonView.hide();
+            aceView.show('slow');
+        }
+
+    },
+
+    'keypress #inputQuery': function (e) {
+        // catch enter
+        if (e.keyCode == 13) {
+            executeQuery();
+            return false;
+        }
+    },
+
+    'click #btnExecuteQuery': function (e) {
+        executeQuery();
+    }
+});
+
+executeQuery = function () {
+    // hide results
+    $('#divJsonEditor').hide();
+    $('#divAceEditor').hide();
+
+    // loading button
+    var l = $('#btnExecuteQuery').ladda();
+    l.ladda('start');
+
+    var connection = Connections.findOne({_id: Session.get(strSessionConnection)});
+    var selectedCollection = Session.get(strSessionSelectedCollection);
+    var query = 'db.' + selectedCollection + '.' + $('#inputQuery').val();
+
+    Meteor.call('executeQuery', connection, query, function (err, result) {
+        if (result.error) {
+            toastr.error("Couldn't execute query: " + result.error.message);
+            // stop loading animation
+            l.ladda('stop');
+            return;
+        }
+
+        // set json editor
+        getEditor().set(result.result);
+
+        // set ace editor
+        AceEditor.instance("aceeditor", {
+            mode: "javascript",
+            theme: 'dawn'
+        }, function (editor) {
+            editor.$blockScrolling = Infinity;
+            editor.setOptions({
+                fontSize: "12pt",
+                showPrintMargin: false
+            });
+            editor.setValue(JSON.stringify(result.result, null, '\t'), -1);
+        });
+
+        $('#divJsonEditor').show('slow');
+
+        // stop loading animation
+        l.ladda('stop');
+    });
+}
\ No newline at end of file

client/views/pages/browse_db.html

 <template name="browseDB">
 
-    {{#if selectedCollection}}
-        {{> pageHeading title=selectedCollection }}
-
-        <div class="wrapper wrapper-content animated fadeInRight">
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="ibox float-e-margins">
-                        <div class="ibox-title">
-                            <h5>Query
-                                <small>You can either use mongodb or sql queries</small>
-                            </h5>
-                            <div class="ibox-tools">
-                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                                    <i class="fa fa-wrench"></i>
-                                </a>
-                                <ul class="dropdown-menu dropdown-user">
-                                    <li><a href="#"><i class="fa fa-check"></i> Mongodb Queries</a>
-                                    </li>
-                                    <li><a href="#">SQL Queries</a>
-                                    </li>
-                                </ul>
-                                <a id="btnSwitchView" href="#"
-                                   title="Switch Result View">
-                                    <i class="fa fa-exchange"></i>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="ibox-content">
-                            <div class="row">
-                                <div class="col-sm-12 b-r">
-                                    <div class="form-group input-group">
-                                        <span class="input-group-addon">db.{{selectedCollection}}.</span>
-                                        <input id="inputQuery" type="text" placeholder="Enter query here"
-                                               class="form-control">
-                                    </div>
-                                    <div>
-                                        <button id="btnExecuteQuery"
-                                                class="btn btn-block btn-outline btn-primary ladda-button"
-                                                type="button"
-                                                data-style="contract">
-                                            <strong>Execute</strong></button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="divJsonEditor" class="row" style="display:none;margin-top: 50px;">
-                                <div class="col-sm-12 b-r">
-                                    <div id="jsoneditor" style="width: 100%">
-
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div id="divAceEditor" class="row" style="margin-top: 50px;display: none">
-                                <div class="col-sm-12 b-r">
-                                    <pre id='aceeditor' style="height: 500px;width: 100%;"></pre>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    {{else}}
-        {{> pageHeading title='Browse' }}
-
-        <div class="wrapper wrapper-content animated fadeInRight">
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="text-center m-t-lg">
-                        <h1>
-                            Welcome to Featured Mongo Client
-                        </h1>
-                        <small>
-                            You can connect a new database by pressing <strong>Connect</strong> button.
-                        </small>
-                    </div>
+    {{> pageHeading title='Browse' }}
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="text-center m-t-lg">
+                    <h1>
+                        Welcome to Featured Mongo Client
+                    </h1>
+                    <small>
+                        You can connect a new database by pressing <strong>Connect</strong> button.
+                    </small>
                 </div>
             </div>
         </div>
-    {{/if}}
+    </div>
 </template>
\ No newline at end of file

client/views/pages/browse_db.js

 /**
  * Created by RSercan on 26.12.2015.
- */
-var jsonEditor;
-var jsonEditorOptions = {
-    mode: "tree",
-    search: true
-};
-
-getEditor = function () {
-    if ($('.jsoneditor').length == 0) {
-        jsonEditor = new JSONEditor(document.getElementById("jsoneditor"), jsonEditorOptions);
-    }
-    return jsonEditor;
-}
-
-Template.browseDB.helpers({
-    'collectionNames': function () {
-        return Session.get(strSessionCollectionNames);
-    }
-});
-
-Template.browseDB.events({
-    'click #btnSwitchView': function (e) {
-        var jsonView = $('#divJsonEditor');
-        var aceView = $('#divAceEditor');
-
-        if (jsonView.css('display') == 'none') {
-            aceView.hide();
-            jsonView.show('slow');
-        } else {
-            jsonView.hide();
-            aceView.show('slow');
-        }
-
-    },
-
-    'keypress #inputQuery': function (e) {
-        // catch enter
-        if (e.keyCode == 13) {
-            executeQuery();
-            return false;
-        }
-    },
-
-    'click #btnExecuteQuery': function (e) {
-        executeQuery();
-    }
-});
-
-executeQuery = function () {
-    // hide results
-    $('#divJsonEditor').hide();
-    $('#divAceEditor').hide();
-
-
-    // loading button
-    var l = $('#btnExecuteQuery').ladda();
-    l.ladda('start');
-
-    var connection = Connections.findOne({_id: Session.get(strSessionConnection)});
-    var selectedCollection = Session.get(strSessionSelectedCollection);
-    var query = 'db.' + selectedCollection + '.' + $('#inputQuery').val();
-
-    Meteor.call('executeQuery', connection, query, function (err, result) {
-        if (result.error) {
-            toastr.error("Couldn't execute query: " + result.error.message);
-            // stop loading animation
-            l.ladda('stop');
-            return;
-        }
-
-        // set json editor
-        getEditor().set(result.result);
-
-        // set ace editor
-        AceEditor.instance("aceeditor", {
-            mode: "javascript",
-            theme: 'dawn'
-        }, function (editor) {
-            editor.$blockScrolling = Infinity;
-            editor.setOptions({
-                fontSize: "12pt",
-                showPrintMargin: false
-            });
-            editor.setValue(JSON.stringify(result.result, null, '\t'), -1);
-        });
-
-        $('#divJsonEditor').show('slow');
-
-        // stop loading animation
-        l.ladda('stop');
-    });
-}
\ No newline at end of file
+ */
\ No newline at end of file

lib/query_types.js

+/**
+ * Created by RSercan on 29.12.2015.
+ */
+QUERY_TYPES = {
+    FIND: "find",
+    FIND_AND_MODIFY: "findAndModify",
+    FIND_AND_REMOVE: "findAndRemove",
+    FINDONE: "findOne",
+    FINDONE_AND_DELETE: "findOneAndDelete",
+    FINDONE_AND_REPLACE: "findOneAndReplace",
+    FINDONE_AND_UPDATE: "findOneAndUpdate"
+
+}
\ No newline at end of file

lib/router.js

@@ -12,6 +12,12 @@ Router.route('/browseDB', {
     }
 });
 
+Router.route('/browseCollection', {
+    waitOn: function () {
+        return [Meteor.subscribe('connections')];
+    }
+});
+
 Router.route('/', {
     template: 'browseDB',
     waitOn: function () {

server/mongodb_methods.js

@@ -9,10 +9,15 @@ Meteor.methods({
 
         var collectionNames = Async.runSync(function (done) {
             mongodbApi.connect(connectionUrl, function (err, db) {
-                db.listCollections().toArray(function (err, collections) {
-                    db.close();
-                    done(err, collections);
-                });
+                if (db == null || db == undefined) {
+                    console.log('could not connect, db is null');
+                    done(err, db);
+                } else {
+                    db.listCollections().toArray(function (err, collections) {
+                        db.close();
+                        done(err, collections);
+                    });
+                }
             });
         });