make jingle view great again

3 files changed, 14 insertions, 10 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)
       );
 };
diff --git a/www/js/shows.js b/www/js/shows.js
index eb6fc20..84d49a5 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -153,7 +153,7 @@ function shows_importCart(cart) {
 // <td>
 //   <button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-arrow-up"></span></button>
 //   <button class="btn btn-info btn-xs disabled"><span class="glyphicon glyphicon-arrow-down"></span></button>
-//   <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
+//   <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
 // </td>
 
 function shows_newCartEntry(elem) {
@@ -168,7 +168,7 @@ function shows_newCartEntry(elem) {
   var buttons = cart_exists ?
         '<button class="btn btn-danger btn-xs" onclick="shows_deleteCart(' + elem + ');">' +
            '<span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Löschen</button>' :
-        '<button class="btn btn-success btn-xs" onclick="shows_importCart(' + elem + ');">' +
+        '<button class="btn btn-primary btn-xs" onclick="shows_importCart(' + elem + ');">' +
            '<span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>';
 
   return $('<tr>').append($('<td>').text(elem))
diff --git a/www/js/utils.js b/www/js/utils.js
index 1359b39..fab6736 100644
--- a/www/js/utils.js
+++ b/www/js/utils.js
@@ -57,10 +57,10 @@ var weekday_short = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');
 
 function format_datetime(d) {
   if(Object.prototype.toString.call(d) !== '[object Date]') {
-    return d;
+    return '-';
   }
   if (d.toString() === 'Invalid Date') {
-    return d;
+    return '-';
   }
   var datetimestr = weekday_short[d.getDay()];
   datetimestr += ' ' + Number(d.getDate()).pad(2);