make jingle view great again

1 files changed, 10 insertions, 6 deletions

diff --git a/www/js/jingles.js b/www/js/jingles.js
index 20b27c5..70d84f9 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -170,12 +170,15 @@ Rivendell.JingleCutView = function(model) {
 };
 
 Rivendell.JingleCutView.prototype.render = function() {
-  var moveButton = $('<button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-arrow-right"></span>&nbsp;&nbsp;Verschieben</button>');
+  var status = $('<span class="label"></span>');
+  var moveButton = $('<button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-transfer"></span>&nbsp;&nbsp;Verschieben</button>');
   var activateButton;
   if (this.model.active) {
-    activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-minus"></span>&nbsp;&nbsp;Deactivieren</button>');
+    activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-ban-circle"></span>&nbsp;&nbsp;Deaktivieren</button>');
+    status.addClass('label-success').html('<span class="glyphicon glyphicon-ok"></span>');
   } else {
-    activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;Aktivieren</button>');
+    activateButton = $('<button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;Aktivieren</button>');
+    status.addClass('label-danger').html('<span class="glyphicon glyphicon-ban-circle"></span>');
   }
   var deleteButton = $('<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Löschen</button>');
 
@@ -192,14 +195,15 @@ Rivendell.JingleCutView.prototype.render = function() {
 
   this.$el = $('<tr>')
       .attr('id', 'jingle-' + this.model.cartNumber + '-' + this.model.number)
+      .append($('<td>').append(status))
       .append($('<td>').text(this.model.name))
       .append($('<td>').text(this.model.description))
+      .append($('<td>').text(msToTimeString(this.model.length)))
+      .append($('<td>').text(format_datetime(new Date(this.model.originDatetime))))
       .append(
-          $('<td>')
+          $('<td>').addClass('text-center')
               .append(moveButton)
-              .append('&nbsp;')
               .append(activateButton)
-              .append('&nbsp;')
               .append(deleteButton)
       );
 };