changed <select> based music pool selector to bootstrap dropdown

5 files changed, 49 insertions, 25 deletions

diff --git a/www/index.html b/www/index.html
index 1d891a8..56130cc 100644
--- a/www/index.html
+++ b/www/index.html
@@ -197,14 +197,22 @@
       <div id="app-musicpools" class="container-fluid app-tab">
         <div class="alertbox"></div>
         <div class="row">
-          <form class="well form-inline">
-            <!-- todo: fix html error: h3 is not allowed in label -->
-            <label class="control-label" for="musicpool-selector">
-              <h3>Musikpool auswählen</h3>
-            </label>&nbsp;&nbsp;
-            <select id="musicpool-selector" class="main-selector">
-            </select>
-          </form>
+          <div class="col-md-12" id="musicpool-header-spacer">
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-3">
+            <div class="dropdown">
+              <button type="button" class="btn btn-lg btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Musikpool auswählen <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu" id="musicpool-selector">
+              </ul>
+            </div>
+          </div>
+          <div class="col-md-9">
+            <h2 id="musicpool-title"></h2>
+          </div>
         </div>
         <div class="musicpoolContainer">
 
@@ -213,7 +221,7 @@
 
       <div id="app-musicgrid" class="container-fluid app-tab">
         <div class="alertbox"></div>
-        <h1>Musikgrid</h1>
+        <h2 id="musicgrid-title">Musikgrid</h2>
         <table class="table table-striped">
           <thead>
           <tr>
@@ -300,7 +308,7 @@
 
       <div class="row group jingleGroupTemplate">
         <div class="col-md-12">
-          <h2></h2>
+          <h2 class="jingle-title"></h2>
           <table class="table table-striped">
             <thead>
             <tr>
@@ -323,7 +331,6 @@
 
       <div class="row musicpool musicpoolTemplate">
         <div class="col-md-12">
-          <h2></h2>
           <table class="table table-striped">
             <thead>
             <tr>
diff --git a/www/js/musicpools.js b/www/js/musicpools.js
index 9d21427..5b3d491 100644
--- a/www/js/musicpools.js
+++ b/www/js/musicpools.js
@@ -96,14 +96,21 @@ Rdxport.MusicpoolsView.prototype.updateSelector = function() {
   var $musicpoolSelector = $('#musicpool-selector');
 
   $musicpoolSelector.off();
-  $('option', $musicpoolSelector).remove();
+  $('li', $musicpoolSelector).remove();
 
   $(this.model.groups).sort(function(a, b) {
     return a.title.toLowerCase() >= b.title.toLowerCase()
   }).each(function(index, musicpool) {
-    var name = musicpool.title + ' (' + musicpool.clock + ')';
-    $musicpoolSelector.append($('<option>').attr('value', musicpool.clock).text(name));
+    var name = '<strong>' + musicpool.title + '</strong> (' + musicpool.clock + ')';
+    var link = $('<a>').attr('href', '#').html(name).click(function() {
+      self.setCurrentPoolId(musicpool.clock);
+      self.getCurrentPoolView().model.fetchCarts();
+    });
+    $musicpoolSelector.append($('<li>').append(link));
   });
+  if($musicpoolSelector.children().length == 0) {
+    $musicpoolSelector.append($('<li>').append($('<a>').text('Keinen Musikpool gefunden!')));
+  }
 
   // todo: maybe integrate this into setCurrentShowId?
   if (!this.currentPoolId) {
@@ -114,12 +121,6 @@ Rdxport.MusicpoolsView.prototype.updateSelector = function() {
       this.setCurrentPoolId(this.model.groups[0].id);
     }
   }
-  $('option[value="' + this.currentPoolId + '"]', $musicpoolSelector).attr('selected', 'selected');
-
-  $musicpoolSelector.on('change', function() {
-    self.setCurrentPoolId($('option:selected', $musicpoolSelector).attr('value'));
-    self.getCurrentPoolView().model.fetchCarts();
-  });
 
   this.getCurrentPoolView().model.fetchCarts();
 };
@@ -156,7 +157,7 @@ Rdxport.MusicpoolView.prototype.render = function() {
   this.$el = $('#hiddenTemplates .musicpoolTemplate').clone().removeClass('musicpoolTemplate');
   $('#app-musicpools .musicpoolContainer').html(this.$el);
 
-  $('h2', this.$el).text(this.model.title);
+  $('#musicpool-title').text(this.model.title);
   $('table tbody tr', this.$el).remove();
 
   this.cartViews = [];
diff --git a/www/styles/jingles.css b/www/styles/jingles.css
index 1dc50c1..d8d5116 100644
--- a/www/styles/jingles.css
+++ b/www/styles/jingles.css
@@ -21,10 +21,14 @@
  */
 
 #app-jingles .group {
-    margin-bottom: 40px;
+  margin-bottom: 40px;
 }
 
 #app-jingles table .btn {
-    margin-top: 0.3em;
-    margin-left: 0.6em;
+  margin-top: 0.3em;
+  margin-left: 0.6em;
+}
+
+h2.jingle-title {
+  font-weight: bold;
 }
diff --git a/www/styles/musicgrid.css b/www/styles/musicgrid.css
index 44e72c0..53e2c01 100644
--- a/www/styles/musicgrid.css
+++ b/www/styles/musicgrid.css
@@ -21,5 +21,9 @@
  */
 
 #app-musicgrid {
-    padding: 0;
+  padding: 0;
+}
+
+#musicgrid-title {
+  font-weight: bold;
 }
diff --git a/www/styles/musicpools.css b/www/styles/musicpools.css
index beca7bc..c0652f1 100644
--- a/www/styles/musicpools.css
+++ b/www/styles/musicpools.css
@@ -19,3 +19,11 @@
  *  You should have received a copy of the GNU Affero General Public License
  *  along with rhwebimport. If not, see <http://www.gnu.org/licenses/>.
  */
+
+#musicpool-title {
+  font-weight: bold;
+}
+
+#musicpool-header-spacer {
+  margin-top: 1.3em;
+}