make show rhythm fancier

2 files changed, 18 insertions, 2 deletions

diff --git a/www/index.html b/www/index.html
index eb8e3d2..68b2d36 100644
--- a/www/index.html
+++ b/www/index.html
@@ -160,7 +160,10 @@
             <strong>Tag:</strong> <span id="show-dow"></span>
           </div>
           <div class="col-md-2">
-            <strong>Rythmus:</strong> <span id="show-rhythm"></span>
+            <strong>Rythmus:</strong> <span id="show-rhythm-w1" class="label label-default">1</span>
+                                      <span id="show-rhythm-w2" class="label label-default">2</span>
+                                      <span id="show-rhythm-w3" class="label label-default">3</span>
+                                      <span id="show-rhythm-w4" class="label label-default">4</span>
           </div>
           <div class="col-md-2">
             <strong>Startzeit:</strong> <span id="show-starttime"></span>
diff --git a/www/js/shows.js b/www/js/shows.js
index 8fcba8b..1086620 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -189,10 +189,23 @@ Rdxport.ShowView = function(model) {
 Rdxport.ShowView.prototype.render = function() {
   $('#show-title').text(this.model.title);
   $('#show-dow').text(weekday[this.model.dayofweek]);
-  $('#show-rhythm').text(this.model.rhythm);
   $('#show-starttime').text(this.model.starttime);
   $('#show-length').text(this.model.length + ' Min.');
 
+  for(var w = 0; w < 4; w++) {
+    if(this.model.rhythm.charAt(w) == '1') {
+      var s = $('#show-rhythm-w' + (w+1)).attr('class', 'label')
+      switch(w+1) {
+	case 1: s.addClass('label-info'); break;
+	case 2: s.addClass('label-warning'); break;
+	case 3: s.addClass('label-success'); break;
+	case 4: s.addClass('label-danger'); break;
+      }
+    } else {
+      $('#show-rhythm-w' + (w+1)).attr('class', 'label label-default')
+    }
+  }
+
   var $tableBody = $('#app-shows table tbody');
   $('tr', $tableBody).remove();