make jingle view great again

6 files changed, 32 insertions, 15 deletions

diff --git a/www/index.html b/www/index.html
index 835d928..57ed2f7 100644
--- a/www/index.html
+++ b/www/index.html
@@ -310,9 +310,12 @@
           <table class="table table-striped">
             <thead>
             <tr>
+              <th></th>
               <th>Cut #</th>
               <th>Titel</th>
-              <th>Aktionen</th>
+              <th>Länge</th>
+              <th>importiert</th>
+              <th class="text-center">Aktionen</th>
             </tr>
             </thead>
             <tbody>
@@ -320,7 +323,7 @@
             <tfoot>
             </tfoot>
           </table>
-          <button class="uploadButton btn btn-success"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
+          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
         </div>
       </div>
 
@@ -344,19 +347,20 @@
             <tfoot>
             </tfoot>
           </table>
-          <button class="uploadButton btn btn-success"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
+          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
         </div>
       </div>
 
       <table>
         <tr class="progressBar progressBarTemplate jingles">
+	  <td><span class="label label-default"><span class="glyphicon glyphicon-transfer"></span></span></td>
           <td class="file-bytes">
             beginne...
           </td>
-          <td>
+          <td colspan="3">
             <div class="progress"><div class="progress-bar" style="width: 0%;"></div></div>
           </td>
-          <td>
+          <td class="text-center">
             <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Abbrechen</button>
           </td>
         </tr>
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);
diff --git a/www/styles/jingles.css b/www/styles/jingles.css
index 8fb1f55..1dc50c1 100644
--- a/www/styles/jingles.css
+++ b/www/styles/jingles.css
@@ -23,3 +23,8 @@
 #app-jingles .group {
     margin-bottom: 40px;
 }
+
+#app-jingles table .btn {
+    margin-top: 0.3em;
+    margin-left: 0.6em;
+}
diff --git a/www/styles/main-style.css b/www/styles/main-style.css
index 17925fb..8a4793f 100644
--- a/www/styles/main-style.css
+++ b/www/styles/main-style.css
@@ -93,3 +93,7 @@ body {
 #uploadModal div.modal-body form div.dz-preview {
     display: none;
 }
+
+.text-center {
+    text-align: center;
+}