Refactored playlist.js (partially done)

Added searchbox on the playlist page
Some layout css fiddeling.

admin-root/hdr.html

@@ -6,10 +6,8 @@
   <link rel="stylesheet" type="text/css" href="mt-daapd.css" />
   @ispage status.html:<meta http-equiv="refresh" content="10" />:@
   @ispage smart.html:<script type="text/javascript" src="smart.js"></script>:@
-  @ispage playlist.html:<script type="text/javascript" src="lib-js/prototype.js">:@
+  @ispage playlist.html:<script type="text/javascript" src="lib-js/prototype.js"></script>:@
-  @ispage playlist.html:</script>:@
+  @ispage playlist.html:<script type="text/javascript" src="lib-js/script.aculo.us/builder.js"></script>:@
-  @ispage playlist.html:<script type="text/javascript" src=:@
-  @ispage playlist.html:"lib-js/script.aculo.us/builder.js"></script>:@
   @ispage playlist.html:<script type="text/javascript" src="playlist.js"></script>:@
   <script type="text/javascript" src="mt-daapd.js"></script>
 </head>

admin-root/playlist.html

@@ -10,15 +10,7 @@ select {
 #songs_data td {
   text-align: left;
 }
-#genre_div {
+#genre_div, #artist_div, #album_div {
-  float: left;
-  padding-left: 2ex;
-}
-#artist_div {
-  float: left;
-  padding-left: 2ex;
-}
-#album_div {
   float: left;
   padding-left: 2ex;
 }
@@ -37,11 +29,11 @@ select {
 </style>
 <div id="search_div">
 <label for="search">search</label>
-<input type="text" name="search" id="search" size="30" />
+<input type="text" name="search" id="search" size="30" title="search songs, artists, albums, genres" />
 </div>
 <div style="clear: both;"><!-- buggy IE div --></div>
 <div id="source_div">
-  Source<br />
+  <label for="source">Source<br /></label>
   <select id="source" name="select" size="20">
 
     <option value="1">Library</option>

admin-root/playlist.js

@@ -5,33 +5,67 @@ Ajax.Responders.register({  onCreate: function () {$('busymsg').style.visibility
 function initPlaylist() {
   new Ajax.Request('/databases/1/containers?output=xml',{method: 'get',onComplete:rsSource});
   Query.send('genres');
-  Query.send('artists');
+  Event.observe('search','keypress',Search.keyPress);
-  Query.send('albums');
+  Event.observe('source','change',EventHandler.sourceChange);
-
+  Event.observe('genres','change',EventHandler.genresChange);
-  Event.observe('source','change',sourceChange);
+  Event.observe('artists','change',EventHandler.artistsChange);
-  Event.observe('genres','change',genresArtistsAlbumsChange);
+  Event.observe('albums','change',EventHandler.albumsChange);
-  Event.observe('artists','change',genresArtistsAlbumsChange);
+}
-  Event.observe('albums','change',genresArtistsAlbumsChange);
+var Search = {
+  keyPress:  function (e) {
+    if (e.keyCode == Event.KEY_RETURN) {
+      EventHandler.search();  
+    }
+  }
+}
+var EventHandler = {
+  sourceChange: function (e) {
+    alert('Playlist id:'+$('source').value);  
+  },
+  search: function () {
+    Query.setSearchString($('search').value);
+    Query.send('genres'); 
+  },
+  genresChange: function (e) {
+    EventHandler.setSelected('genres');
+    Query.send('artists');
+  },
+  artistsChange: function (e) {
+    EventHandler.setSelected('artists');
+    Query.send('albums');
+  },
+  albumsChange: function (e) {
+    EventHandler.setSelected('albums');
+    Query.send('songs');
+  },
+  setSelected: function (type) {
+    var options = $A($(type).options);
+    Query.clearSelection(type);
+    if ($(type).value != 'all') {
+      options.each(function (option) {
+        if (option.selected) {
+           Query.addSelection(type,option.value);
+        }
+      });
+    }
+  }
 }
 var Query = {
-   genres: new Array(),
+   genres: [],
-   artists:new Array(),
+   artists:[],
-   albums: new Array(),
+   albums: [],
-   clearSelections: function (type) {
+   searchString: 'blue',
-     this[type] = new Array();
+   clearSelection: function (type) {
-     if ('genres' == type) {
+     this[type] = [];
-       this.artists = new Array();
-       this.albums = new Array();  
-     }
-     if ('artists' == type) {
-       this.albums = new Array();  
-     }
    },
    addSelection: function (type,value){
      this[type].push(value);
    },
+   setSearchString: function (string) {
+     this.searchString = string;  
+   },
    getUrl: function (type) {
-     var query=new Array();
+     var query=[];
      switch (type) {
        case 'artists':
          if (this.genres.length > 0) {
@@ -55,10 +89,18 @@ var Query = {
          }
          break;
      }
-     if (query.length > 0) {
+     if (this.searchString) {
-       return '&query=' + query.join(',');
+       var search = [];
-     } else {
+       var string = this.searchString;
-       return ''; 
+       ['daap.songgenre','daap.songartist','daap.songalbum','dmap.itemname'].each(function (item) {
+         search.push("'" + item +':*' + string + "*'");  
+       });
+       if (query.length > 0) {
+//           alert('&query=(' +search.join(',') +')+(' + query.join(',')+ ')');
+         return '&query=(' +search.join(',') +')+(' + query.join(',')+ ')';
+       } else {
+         return '&query=' + search.join(','); 
+       }
      }
    },
    send: function (type) {
@@ -68,15 +110,15 @@ var Query = {
      switch (type) {
        case 'genres':
          url = '/databases/1/browse/genres';
-         handler = rsGenresArtistsAlbums;
+         handler = ResponseHandler.genreAlbumArtist;
          break;
        case 'artists':
          url = '/databases/1/browse/artists';
-         handler = rsGenresArtistsAlbums;
+         handler = ResponseHandler.genreAlbumArtist;
          break;
        case 'albums':
          url = '/databases/1/browse/albums';
-         handler = rsGenresArtistsAlbums;
+         handler = ResponseHandler.genreAlbumArtist;
          break;
        case 'songs':
          url = '/databases/1/items';
@@ -88,13 +130,51 @@ var Query = {
      new Ajax.Request(url ,{method: 'get',onComplete:handler});
    }
 };
+var ResponseHandler = {
+  genreAlbumArtist: function (request) {
+    var type;
+    if (request.responseXML.getElementsByTagName('daap.browsegenrelisting').length > 0) {
+      type = 'genres';
+    }
+    if (request.responseXML.getElementsByTagName('daap.browseartistlisting').length > 0) {
+      type = 'artists';
+    }
+    if (request.responseXML.getElementsByTagName('daap.browsealbumlisting').length > 0) {
+      type = 'albums';
+    }
+  
+    var items = $A(request.responseXML.getElementsByTagName('dmap.listingitem'));
+    items = items.collect(function (el) {
+      return Element.textContent(el);
+    }).sort();
+    var select = $(type);
+    Element.removeChildren(select);
 
+    var o = document.createElement('option');
+    o.value = 'all';
+    o.appendChild(document.createTextNode('All (' + items.length + ' ' + type + ')'));
+    select.appendChild(o);
+    addOptions(select,items);
+    select.value='all';
+    switch (type) {
+      case 'genres':
+        Query.send('artists');
+        break;
+      case 'artists':
+        Query.send('albums');
+        break;
+      case 'albums':
+        Query.send('songs');
+        break;
+    }
+  }
+}
 
 function rsSource(request) {
   var items = $A(request.responseXML.getElementsByTagName('dmap.listingitem'));
   var sourceSelect = $('source');
-  var smartPlaylists = new Array();
+  var smartPlaylists = [];
-  var staticPlaylists = new Array();
+  var staticPlaylists = [];
   Element.removeChildren(sourceSelect);
 
   items.each(function (item,index) {
@@ -132,59 +212,6 @@ function rsSource(request) {
   sourceSelect.value = 1;
 }
 
-function genresArtistsAlbumsChange(e) {
-  var type = Event.element(e).id;
-  var options = $A($(type).options);
-  Query.clearSelections(type);
-  if ($(type).value != 'all') {
-    options.each(function (option) {
-      if (option.selected) {
-         Query.addSelection(type,option.value);
-      }
-    });
-  }
-  switch (type) {
-    case 'genres':
-      Query.send('artists');
-      Query.send('albums');
-      Query.send('songs');
-      break;
-    case 'artists':
-      Query.send('albums');
-      Query.send('songs');
-      break;
-    case 'albums':
-      Query.send('songs');
-      break;
-  }
-}
-function rsGenresArtistsAlbums(request) {
-  var type;
-  if (request.responseXML.getElementsByTagName('daap.browsegenrelisting').length > 0) {
-    type = 'genres';
-  }
-  if (request.responseXML.getElementsByTagName('daap.browseartistlisting').length > 0) {
-    type = 'artists';
-  }
-  if (request.responseXML.getElementsByTagName('daap.browsealbumlisting').length > 0) {
-    type = 'albums';
-  }
-  
-  var items = $A(request.responseXML.getElementsByTagName('dmap.listingitem'));
-  items = items.collect(function (el) {
-    return Element.textContent(el);
-  }).sort();
-  var select = $(type);
-  Element.removeChildren(select);
-
-  var o = document.createElement('option');
-  o.value = 'all';
-  o.appendChild(document.createTextNode('All (' + items.length + ' ' + type + ')'));
-  select.appendChild(o);
-  addOptions(select,items);
-  select.value='all';
-}
-
 function rsSongs(request) {
   var items = $A(request.responseXML.getElementsByTagName('dmap.listingitem'));
   var songsTable = $('songs_data');
@@ -226,9 +253,6 @@ function addOptions(element,options) {
     element.appendChild(node);
   });
 }
-function sourceChange(e) {
-  alert('Playlist id:'+$('source').value);  
-}
 Object.extend(Element, {
   removeChildren: function(element) {
   while(element.hasChildNodes()) {