added list support and JSON formatting to values within lists and hashes

BarkingMouseStudio · Apr 11, 2011 · 04e4368 · 04e4368
1 parent 71b8c7c
commit 04e4368
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
   <title>redis.io</title>
 
   <link href="favicon.png" rel="shortcut icon" />
+
   <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
 
   <script src="scripts/deps/underscore.js"></script>
@@ -14,7 +15,11 @@
   <script src="main.js"></script>
 
   <script type="text/template" id="key-template">
-    <li><a href="#<%= command %> <%= reply %>"><%= reply %></a> <span><%= type %></span> <a href='#DEL <%= reply %>'>[DEL]</a></li>
+    <li>
+      <a href="#<%= command %> <%= reply %><% if (command === 'LRANGE') { %> 0 -1<% } %>"><%= reply %></a>
+      <span><%= type %></span>
+      <a href='#DEL <%= reply %>' class="confirm">[DEL?]</a>
+    </li>
   </script>
   <script type="text/template" id="string-template">
     <li>
@@ -26,9 +31,16 @@
   <script type="text/template" id="hash-template">
     <li>
       <% _.each(reply, function(val, key) { %>
-        <div><strong><%= key %>:</strong> <%= val %></div>
+        <div class="hash-row"><div class="hash-key"><%= key %>:</div> <pre class="hash-val"><%= val %></pre></div>
+      <% }); %>
+      <a href='#KEYS *'>[KEYS *]</a>
+    </li>
+  </script>
+  <script type="text/template" id="list-template">
+    <li>
+      <% _.each(reply, function(val, key) { %>
+        <div class="hash-row"><div class="hash-key"><%= key %>:</div> <pre class="hash-val"><%= val %></pre></div>
       <% }); %>
-      <br />
       <a href='#KEYS *'>[KEYS *]</a>
     </li>
   </script>
@@ -39,6 +51,8 @@
     <h1><a href="http://redis.io/" title="redis.io" target="_blank"><img src="redis-logo.png" alt="redis.io" /></a></h1>
   </header>
   <section id="results">
+    <h2 id="title"></h2>
+    <h3 id="subtitle"></h3>
     <ul id="results"></ul>
   </section>
 </body>

diff --git a/main.coffee b/main.coffee
@@ -4,14 +4,22 @@ $ ->
     'key': _.template(document.getElementById('key-template').innerHTML)
     'string': _.template(document.getElementById('string-template').innerHTML)
     'hash': _.template(document.getElementById('hash-template').innerHTML)
+    'list': _.template(document.getElementById('list-template').innerHTML)
 
   socket = new io.Socket(location.hostname)
   socket.connect()
 
   $results = $('ul#results')
+  title_el = document.getElementById('title')
+  subtitle_el = document.getElementById('subtitle')
   command_el = document.getElementById('command');
 
   socket.on 'message', (message) ->
+    console.log message
+
+    title_el.innerHTML = message.title
+    subtitle_el.innerHTML = message.reply_type
+
     $results.append templates[message.reply_type](message)
     return
 
@@ -26,20 +34,18 @@ $ ->
     $results.empty()
     command = 'KEYS *' if not command
     location.hash = command
-    command_el.value = command
     socket.send(command)
 
   $('a').live 'click', (e) ->
-    command = parse_command(e.target.href)
-    send_command(command)
+    return false if e.target.className is 'confirm' and not confirm('Are you sure?')
+    send_command parse_command e.target.href
     return
 
-  command = parse_command(location.href)
-  send_command(command)
-
   command_el.addEventListener 'keypress', (e) ->
     return if e.keyCode isnt 13
-    command = e.target.value
-    send_command(command)
+    send_command(e.target.value)
+    e.target.value = ''
     return
 
+  send_command parse_command location.href
+
diff --git a/main.js b/main.js
@@ -1,16 +1,22 @@
 (function() {
   $(function() {
-    var $results, command, command_el, parse_command, send_command, socket, templates;
+    var $results, command_el, parse_command, send_command, socket, subtitle_el, templates, title_el;
     templates = {
       'key': _.template(document.getElementById('key-template').innerHTML),
       'string': _.template(document.getElementById('string-template').innerHTML),
-      'hash': _.template(document.getElementById('hash-template').innerHTML)
+      'hash': _.template(document.getElementById('hash-template').innerHTML),
+      'list': _.template(document.getElementById('list-template').innerHTML)
     };
     socket = new io.Socket(location.hostname);
     socket.connect();
     $results = $('ul#results');
+    title_el = document.getElementById('title');
+    subtitle_el = document.getElementById('subtitle');
     command_el = document.getElementById('command');
     socket.on('message', function(message) {
+      console.log(message);
+      title_el.innerHTML = message.title;
+      subtitle_el.innerHTML = message.reply_type;
       $results.append(templates[message.reply_type](message));
     });
     parse_command = function(href) {
@@ -31,22 +37,21 @@
         command = 'KEYS *';
       }
       location.hash = command;
-      command_el.value = command;
       return socket.send(command);
     };
     $('a').live('click', function(e) {
-      var command;
-      command = parse_command(e.target.href);
-      send_command(command);
+      if (e.target.className === 'confirm' && !confirm('Are you sure?')) {
+        return false;
+      }
+      send_command(parse_command(e.target.href));
     });
-    command = parse_command(location.href);
-    send_command(command);
-    return command_el.addEventListener('keypress', function(e) {
+    command_el.addEventListener('keypress', function(e) {
       if (e.keyCode !== 13) {
         return;
       }
-      command = e.target.value;
-      send_command(command);
+      send_command(e.target.value);
+      e.target.value = '';
     });
+    return send_command(parse_command(location.href));
   });
 }).call(this);
diff --git a/server.coffee b/server.coffee
@@ -26,15 +26,17 @@ reply_types =
   'DEL': 'string'
   'SET': 'string'
   'HSET': 'string'
+  'LRANGE': 'list'
 
 command_map =
   'string': 'GET'
   'hash': 'HGETALL'
+  'list': 'LRANGE'
 
 format_json = (data, indent = '') ->
   return data if _.isNumber(data)
 
-  new_indent = '  '
+  next_indent = '  '
 
   is_array = _.isArray(data)
 
@@ -57,13 +59,13 @@ format_json = (data, indent = '') ->
     html += ', ' if i > 0
 
     if is_array
-      html += '\n' + indent + new_indent
+      html += '\n' + indent + next_indent
     else
-      html += '\n' + indent + new_indent + '<strong>\"' + key + '\":</strong> '
+      html += '\n' + indent + next_indent + '<strong>\"' + key + '\":</strong> '
 
     switch typeof val
       when 'object'
-        html += format_json(val, indent + new_indent)
+        html += format_json(val, indent + next_indent)
       when 'string'
         html += '\"' + JSON.stringify(val).replace(/^"|"$/g, '').replace(/'/g, "\\'").replace(/\\"/g, '"') + '\"'
       when 'number'
@@ -99,6 +101,7 @@ socket.on 'connection', (client) ->
             client.send
               reply: key
               type: type
+              title: message
               command: command_map[type]
               reply_type: reply_type
           return
@@ -107,8 +110,17 @@ socket.on 'connection', (client) ->
           try
             json_reply = JSON.parse(reply)
             reply = format_json(json_reply)
+        if reply_type is 'hash' or reply_type is 'list'
+          json_reply = {}
+          _.each reply, (val, key) ->
+            try
+              val = format_json(JSON.parse(val))
+            json_reply[key] = val
+            return
+          reply = json_reply
 
         client.send
+          title: message
           reply: reply
           reply_type: reply_type or 'string'
 

diff --git a/server.js b/server.js
@@ -23,21 +23,23 @@
     'HGETALL': 'hash',
     'DEL': 'string',
     'SET': 'string',
-    'HSET': 'string'
+    'HSET': 'string',
+    'LRANGE': 'list'
   };
   command_map = {
     'string': 'GET',
-    'hash': 'HGETALL'
+    'hash': 'HGETALL',
+    'list': 'LRANGE'
   };
   format_json = function(data, indent) {
-    var closing_brace, html, i, is_array, new_indent;
+    var closing_brace, html, i, is_array, next_indent;
     if (indent == null) {
       indent = '';
     }
     if (_.isNumber(data)) {
       return data;
     }
-    new_indent = '  ';
+    next_indent = '  ';
     is_array = _.isArray(data);
     if (is_array) {
       if (data.length === 0) {
@@ -60,13 +62,13 @@
         html += ', ';
       }
       if (is_array) {
-        html += '\n' + indent + new_indent;
+        html += '\n' + indent + next_indent;
       } else {
-        html += '\n' + indent + new_indent + '<strong>\"' + key + '\":</strong> ';
+        html += '\n' + indent + next_indent + '<strong>\"' + key + '\":</strong> ';
       }
       switch (typeof val) {
         case 'object':
-          html += format_json(val, indent + new_indent);
+          html += format_json(val, indent + next_indent);
           break;
         case 'string':
           html += '\"' + JSON.stringify(val).replace(/^"|"$/g, '').replace(/'/g, "\\'").replace(/\\"/g, '"') + '\"';
@@ -105,6 +107,7 @@
               return client.send({
                 reply: key,
                 type: type,
+                title: message,
                 command: command_map[type],
                 reply_type: reply_type
               });
@@ -117,7 +120,18 @@
               reply = format_json(json_reply);
             } catch (_e) {}
           }
+          if (reply_type === 'hash' || reply_type === 'list') {
+            json_reply = {};
+            _.each(reply, function(val, key) {
+              try {
+                val = format_json(JSON.parse(val));
+              } catch (_e) {}
+              json_reply[key] = val;
+            });
+            reply = json_reply;
+          }
           return client.send({
+            title: message,
             reply: reply,
             reply_type: reply_type || 'string'
           });

diff --git a/styles.css b/styles.css
@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: Monaco, Menlo, monospace;
+  font-family: Menlo, Monaco, Consolas, monospace;
   font-size: 12px;
   background: #f0f0f0;
 }
@@ -16,6 +16,12 @@ ul {
   margin: 0;
   padding: 0;
 }
+h2 {
+  color: #444;
+}
+h3 {
+  color: #888;
+}
 header#main-header {
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #373737), color-stop(0, #000));
   padding: 10px 10%;
@@ -32,9 +38,11 @@ header#main-header h1 {
 header#main-header input#command {
   border: none;
   padding: 6px;
-  width: 40%;
   float: left;
   border-radius: 4px;
+  position: absolute;
+  left: 10%;
+  right: 300px;
 }
 section#results {
   margin: 10px 10%;
@@ -57,10 +65,31 @@ ul#results li a {
 ul#results li span,
 ul#results li div,
 ul#results li pre {
-  font-size: 10px;
-  color: #555;
+  font-size: 11px;
+  color: #444;
 }
-
 pre {
-  font-family: Monaco, Menlo, monospace;
-}
+  font-family: Menlo, Monaco, Consolas, monospace;
+  margin: 0;
+}
+.hash-row {
+  overflow: hidden;
+  padding: 0 0 10px;
+  margin: 0 0 10px;
+  border-bottom: 1px solid #eee;
+}
+.hash-key {
+  font-weight: bold;
+  float: left;
+  margin: 0 10px 0 0;
+  padding: 11px 0 0;
+}
+.hash-val {
+  float: left;
+}
+pre {
+  border: 1px solid #eee;
+  background: #fff;
+  border-radius: 5px;
+  padding: 10px;
+}