Command prompt

Procfile

@@ -1,2 +1,2 @@
-redis:    redis-server
-monitor:  rake run
+redis: redis-server
+futon: rake run

index.js

@@ -0,0 +1,8 @@
+
+require('./lib/lib/config');
+
+var argv        = process.argv.splice(2);
+var listen_port = parseInt(argv[0]) || 5985;
+
+logger.info("RedisFuton start", listen_port);
+new FutonServer().start(listen_port);

public/app/app.js

@@ -4,11 +4,27 @@
 
 /* App Module */
 
-angular.module('futon', []).
+var app = angular.module('futon', []).
   config(['$routeProvider', function($routeProvider) {
   $routeProvider.
       when('/info', {templateUrl: '/template/info.html',   controller: InfoCtrl}).
-      when('/command', {templateUrl: '/template/command.html',   controller: CommandCtrl}).
       when('/database', {templateUrl: '/template/database.html',   controller: DatabaseCtrl}).
       otherwise({redirectTo: '/info'});
 }]);
+
+
+app.directive('onKeyup', function() {
+  return function(scope, elm, attrs) {
+    //Evaluate the variable that was passed
+    //In this case we're just passing a variable that points
+    //to a function we'll call each keyup
+    var keyupFn = scope.$eval(attrs.onKeyup);
+    elm.bind('keyup', function(evt) {
+      //$apply makes sure that angular knows 
+      //we're changing something
+      scope.$apply(function() {
+        keyupFn.call(scope, evt.which);
+      });
+    });
+  };
+});

public/app/controllers.js

@@ -17,6 +17,8 @@ function NavCtrl($scope, $http, $rootScope) {
   $scope.getCurrentDatabase = function() {
     return $rootScope.database;
   }; 
+
+
 }
 
 function InfoCtrl($scope, $http, $rootScope) {
@@ -48,19 +50,75 @@ function DatabaseCtrl($scope, $http, $rootScope) {
   $scope.getDatabase = function() {
     return $rootScope.database;
   };  
-}
 
-//MainCtrl.$inject = ['$scope', '$http'];
 
+  var escape_quote = function (str) {
+    if (str.charAt(0) === "\"" && str.charAt(str.length - 1) === "\"") {
+      return str.substr(1, str.length - 2);
+    }
+    else {
+      return str;
+    }
+  }
+
+  $scope.toggleCommand = function () {
+    if (jQuery("#command_slider").hasClass("hidden")) {
+      jQuery("#command_slider").toggleClass("hidden");
+      jQuery("#command_slider").slideDown("slow");
+    }
+    else {
+      jQuery("#command_slider").slideUp("slow", function(){
+        jQuery("#command_slider").toggleClass("hidden");
+      });
+    }
+
+  };
+
+  $scope.prev_commands = [];
+  $scope.next_commands = [];
 
+  $scope.execute = function() {
+    var list    = $scope.command.split(" ");
+    var command = list.shift();
+    list        = _.map(list, function(ele) {
+      return escape_quote(ele);
+    });
 
-function CommandCtrl($scope, $http, $rootScope) {
+    var data    = {command: command, args: list};
 
-  $scope.result = "{}";
-  $scope.command = "keys *";
-  $scope.executeCommand = function(command) {
     console.log("execute: " + command);
+    $http.post("/redis/command", data).success(function(data){
+      var val = data.resp;
+      try {
+        var obj       = angular.fromJson(val);
+        $scope.result = JSON.stringify(obj, null, 2);
+      }
+      catch(e) {
+        $scope.result = val; 
+      }
+
+      $scope.prev_commands.push($scope.command);
+      $scope.command  = "";
+      $scope.refresh_data();
+    });
+  };
+
+  var ARROW_UP = 38, ARROW_DOWN = 40;
+  $scope.keypressCallback = function(key) {
+    if (key === ARROW_UP && $scope.prev_commands.length > 0 ) {
+      // show the previous command..
+      $scope.next_commands.push($scope.command);
+      $scope.command = $scope.prev_commands.pop();
+    }
+    else if (key === ARROW_DOWN && $scope.next_commands.length > 0) {
+      $scope.prev_commands.push($scope.command);
+      $scope.command = $scope.next_commands.pop();
+    }
   };
+
 }
 
+//MainCtrl.$inject = ['$scope', '$http'];
+
+
 

public/css/angular-ui.css

@@ -0,0 +1,50 @@
+/**
+ * import components to builds angular-ui.css
+ */
+
+/* ui-reset */
+
+.ui-resetwrap {
+  position: relative;
+  display: inline-block;
+}
+
+.ui-reset {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  display: none;
+  height: 100%;
+  cursor: pointer;
+}
+
+.ui-resetwrap:hover .ui-reset {
+  display: block;
+}
+
+/* ui-currency */
+
+.ui-currency-pos {
+  color: green;
+}
+
+.ui-currency-neg {
+  color: red;
+}
+
+.ui-currency-zero {
+  color: blue;
+}
+
+.ui-currency-pos.ui-bignum,
+.ui-currency-neg.ui-smallnum {
+  font-size: 110%;
+}
+
+/* highlight */
+
+.ui-match {
+  background: yellow;
+}
+

public/css/app.css

@@ -3,6 +3,7 @@
 body {
   color: #222; 
   font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
+  font-size: 12px;
 }
 
 /* Special class on .container surrounding .navbar, used for positioning it into place. */
@@ -22,6 +23,9 @@ body {
 /* Remove border and change up box shadow for more contrast */
 .navbar .navbar-inner {
   border: 2;
+  -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+          border-radius: 0px;
   -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.8);
      -moz-box-shadow: 0 3px 5px rgba(0,0,0,.8);
           box-shadow: 0 3px 5px rgba(0,0,0,.8);
@@ -44,47 +48,60 @@ body {
 }
 
 .query-filter {
-  width: 150px;
-  margin-bottom: 10px;
-  -webkit-border-radius: 4px;
-      -moz-border-radius: 4px;
-          border-radius: 4px;
+  width: 170px;
+  font-size: 16px;
+  margin-left: 0px;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  -o-border-radius: 6px;
+  border-radius: 6px;
+  height: 30px;
 }
 
 .left-control {
   padding-right: 10px;
 }
 
-/*CommandCtrl*/
-.command_input, #commands {
-  width: 430px;
-  margin-left: 10px;
-  margin-right: 9px;
+#command_console label {
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+#command_console input[type='submit'] {
+  font-size: 16px;
+  font-weight: bold;
+  width: 120px;
+  height: 30px;
+  margin-bottom: 0px;
+}
+
+#command_console input[type='text'] {
+  width: 75%;
   font-size: 14px;
-  border: 1px;
-  border-style: solid;
-  border-color: #777;
-  padding: 10px 10px 10px 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 0px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -o-border-radius: 6px;
   border-radius: 6px;
+  height: 20px;
 }
 
-.result_pre {
-  display: block;
-  margin: 10px;
-  width: 800px;
-  text-align:left; /* for IE */
-  margin:0 auto; /* for the rest */
-  border: 2px solid #336699;
-  background-color: #222222;
-  color: #eeeeee;
-  padding: 10px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
-  box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
+
+#command_slider .hidden {  
+  visibility:hidden;
+  display: none;
+  height: 0px;
 }
 
+.control .control-button {
+  margin-top: 5px;
+  width: 150px;
+  height: 25px;
+}