Use tagsinput plugin for a better user experience.

The check create/edit form now displays tags in a textarea using the
jquery.tagsinput plugin (https://github.com/xoxco/jQuery-Tags-Input).

Took advantage of the need to add a custom CSS for one page to introduce
the `renderCssTags()` helper, and move the `route` view param to a
dynamic view helper (removes redundant declarations).

app/dashboard/app.js

@@ -25,18 +25,39 @@ app.configure('production', function(){
   app.use(express.errorHandler());
 });
 
+app.helpers({
+  renderCssTags: function (all) {
+    if (all != undefined) {
+      return all.map(function(css) {
+        return '<link rel="stylesheet" href="' + app.route + '/stylesheets/' + css + '">';
+      }).join('\n ');
+    } else {
+      return '';
+    }
+  }
+});
+
+app.dynamicHelpers({
+  addedCss: function(req, res) {
+    return [];
+  },
+  route: function() {
+    return app.route;
+  }
+});
+
 // Routes
 
 app.get('/events', function(req, res) {
-  res.render('events', { route: app.route  });
+  res.render('events');
 });
 
 app.get('/checks', function(req, res) {
-  res.render('checks', { route: app.route, info: req.flash('info')  });
+  res.render('checks', { info: req.flash('info')  });
 });
 
 app.get('/check', function(req, res) {
-  res.render('check_new', { route: app.route, check: new Check() });
+  res.render('check_new', { check: new Check() });
 });
 
 app.post('/check', function(req, res) {
@@ -54,7 +75,7 @@ app.get('/check/:id', function(req, res, next) {
   Check.findOne({ _id: req.params.id }, function(err, check) {
     if (err) return next(err);
     if (!check) return next(new Error('failed to load check ' + req.params.id));
-    res.render('check', { route: app.route, check: check, info: req.flash('info') });
+    res.render('check', { check: check, info: req.flash('info') });
   });
 });
 
@@ -82,14 +103,14 @@ app.delete('/check/:id', function(req, res, next) {
 });
 
 app.get('/tags', function(req, res) {
-  res.render('tags', { route: app.route });
+  res.render('tags');
 });
 
 app.get('/tag/:name', function(req, res, next) {
   Tag.findOne({ name: req.params.name }, function(err, tag) {
     if (err) return next(err);
     if (!tag) return next(new Error('failed to load tag ' + req.params.name));
-    res.render('tag', { route: app.route, tag: tag });
+    res.render('tag', { tag: tag });
   });
 });
 

app/dashboard/public/stylesheets/style.css

@@ -110,4 +110,6 @@ table .headerSortUp:after {
   filter: alpha(opacity=60);
   -moz-opacity: 0.6;
   opacity: 0.6;
-}
+}
+
+div.tagsinput span.tag span { text-decoration: underline; cursor: pointer;}

app/dashboard/views/_check_details.ejs

@@ -1,3 +1,4 @@
+<% addedCss.push('jquery.tagsinput.css') %>
 <div class="tab-pane" id="admin">
   <form id="check_form" method="post" class="form-horizontal">
     <input type="hidden" name="_method" value="<%= (check.isNew) ? 'post' : 'put' %>" />
@@ -32,8 +33,7 @@
       <div class="control-group">
         <label class="control-label">Tags</label>
         <div class="controls">
-          <input type="text" name="check[tags]" value="<%= check.tags.join(', ') %>" class="span2" placeholder=""/>
-          <span class="help-inline" id="check_tags">Comma-separated list of tags</span>
+          <textarea name="check[tags]" rows="2"/><%= check.tags.join(', ') %></textarea>
         </div>
       </div>
       <% if (check.lastTested) { %>
@@ -56,6 +56,7 @@
     </fieldset>
   </form>
 </div>
+<script src="<%= route %>/javascripts/jquery.tagsinput.min.js"></script>
 <script>
 var intervalFieldSelector = 'form input[name="check\\[interval\\]"]';
 function updatePollingIntervalTooltip() {
@@ -81,12 +82,11 @@ $(document).ready(function() {
       field.val('http://' + field.val());
     } 
   });
-  var tagLinks  = [];
-  $('#check_form input[name*="tags"]').val().split(', ').forEach(function(tag) {
-    if (tag) tagLinks.push('<a href="/dashboard/tag/' + tag + '">' + tag + '</a>');
+  var tagField = $('#check_form textarea');
+  var tags = tagField.val().split(', ');
+  tagField.tagsInput();
+  $('.tagsinput span.tag span').live('click', function() {
+    window.location = '/dashboard/tag/' + $(this).text();
   });
-  if (tagLinks.length > 0) {
-    $('#check_tags').html(tagLinks.join(', '));
-  };
 });
 </script>

app/dashboard/views/layout.ejs

@@ -5,6 +5,7 @@
     <title>Uptime</title>
     <link rel="stylesheet" href="<%= route %>/stylesheets/bootstrap.css">
     <link rel="stylesheet" href="<%= route %>/stylesheets/style.css">
+    <%- renderCssTags(addedCss) %>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>