restructure jingles

2 files changed, 124 insertions, 115 deletions

diff --git a/www/index.html b/www/index.html
index 2d4b2c8..c51b479 100644
--- a/www/index.html
+++ b/www/index.html
@@ -148,7 +148,7 @@
       <div id="app-jingles" class="container-fluid">
         <div class="alertbox"></div>
         <div class="row-fluid">
-          <div class="span5">
+          <div class="span6">
             <div class="row-fluid">
               <div class="span12" id="jingles-jingAllgem">
                 <h2></h2>
@@ -170,7 +170,7 @@
               </div>
             </div>
           </div>
-          <div class="span5">
+          <div class="span6">
             <div class="row-fluid">
               <div class="span12" id="jingles-jingAnlass">
                 <h2></h2>
diff --git a/www/js/jingles.js b/www/js/jingles.js
index 9284fd6..91be555 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -19,137 +19,146 @@
  *  along with rhwebimport. If not, see <http://www.gnu.org/licenses/>.
  */
 
-var jingles_group_list = [];
-var jingles_group_carts = {};
+var JingleGroupList = function() {
+  this.groups = [];
 
-function jingles_newCartEntry(cut) {
+  $(this).on('change', this.render);
 
-  return $('<tr>').append($('<td>').text(cut.name))
-    .append($('<td>').text(cut.title))
-    .append($('<td>'))//.text(msToTimeString(cart.length)))
-    .append($('<td>'))//.text(cart.imported))
-    .append($('<td>'))//.text(cart.playcnt))
-    .append($('<td>'))//.text(cart.lastplayed))
-    .append($('<td>'));//.css('text-align', 'center').append(buttons))
-    //.attr("id", "show-cart-" + elem);
-}
+  this.fetchGroups();
+};
 
-function jingles_updateCartListing() {
-  $('#jingles-jingAllgem table tbody').find('tr').remove();
-  $('#jingles-jingAnlass table tbody').find('tr').remove();
-  $.each(jingles_group_carts, function(key, cart) {
-    console.log(cart);
-    if (cart.group.name === 'jingAllgem') {
-      $.each(cart.cutList, function(key, cut) {
-        $('#jingles-jingAllgem table > tbody:last').append(jingles_newCartEntry(cut));
-      });
-    } else if (cart.group.name === 'jingAnlass') {
-      $.each(cart.cutList, function(key, cut) {
-        $('#jingles-jingAnlass table > tbody:last').append(jingles_newCartEntry(cut));
-      });
-    }
-  });
-}
+JingleGroupList.prototype.fetchGroups = function() {
+  console.log('fetchGroups JingleGroupList');
 
-function jingles_updateGroupCartList(data, status, req) {
-  var cartlist = $(data).find("cartList");
-  var carts = cartlist.children();
-  carts.each(function() {
-      var number = $(this).find('number').text();
-      var cart = {
-        title: $(this).find('title').text(),
-        group: {
-          name: $(this).find('groupName').text(),
-        },
-        cutList: [],
-        //length: Number($(cut).find('length').text()),
-        //imported: new Date($(cut).find('originDatetime').text()),
-        //playcnt: $(cut).find('playCounter').text(),
-        //lastplayed: new Date($(cut).find('lastPlayDatetime').text()),
-      };
-      var cutList = $(this).find("cutList");
-      cutList.each(function() {
-        cart.cutList.push({
-          name: $(this).find('cutName').text(),
-          title: $(this).find('description').text(),
+  var self = this;
+  data = { LOGIN_NAME: auth_username, PASSWORD: auth_token };
+  $.post("/rh-bin/listdropboxes.cgi", data, function(groupsXml, status, req) {
+    var dbs = $(groupsXml).find("dropboxList").children();
+    dbs.each(function(index, groupXml) {
+      type = $(groupXml).find('type').text();
+      if (type == 'jingle') {
+        var jingleGroup = new JingleGroup(
+          $(groupXml).find('jingle-title').text(),
+          $(groupXml).find('group').text(),
+          $(groupXml).find('group-description').text(),
+          $(groupXml).find('group-low-cart').text(),
+          $(groupXml).find('group-high-cart').text(),
+          $(groupXml).find('normalization-level').text(),
+          $(groupXml).find('autotrim-level').text()
+        );
+        $(jingleGroup).on('change', function() {
+          $(self).trigger('change');
         });
-      });
+        self.groups.push(jingleGroup);
+      }
+    });
+  }, "xml");
+};
+
+JingleGroupList.prototype.render = function() {
+  console.log('render JingleGroupList');
 
-      //cart.imported = isNaN(cart.imported) ? '-' : cart.imported;
-      //cart.lastplayed = isNaN(cart.lastplayed) ? '-' : cart.lastplayed;
-      jingles_group_carts[number] = cart;
-    }
+  $.each(this.groups, function(index, group) {
+    group.render();
+  });
+};
+
+var JingleGroup = function(title, groupName, description, lowcart, highcart, normlevel, trimlevel) {
+  this.title = title;
+  this.groupName = groupName;
+  this.description = description;
+  this.lowcart = lowcart;
+  this.highcart = highcart;
+  this.normlevel = normlevel;
+  this.trimlevel = trimlevel;
+
+  this.mainCart = null;
+  this.deleteCart = null;
+
+  this.fetchCarts();
+};
+
+JingleGroup.prototype.render = function() {
+  console.log('render JingleGroup');
+
+  if (this.groupName === 'jingAllgem') {
+    $('#jingles-jingAllgem table tbody').find('tr').remove();
+    $.each(this.mainCart.cuts, function(index, cut) {
+      $('#jingles-jingAllgem table > tbody').append(cut.$el());
+    });
+  } else if (this.groupName === 'jingAllgem') {
+    $('#jingles-jingAnlass table tbody').find('tr').remove();
+    $.each(this.mainCart.cuts, function(index, cut) {
+      $('#jingles-jingAnlass table > tbody').append(cut.$el());
+    });
+  }
+};
+
+JingleGroup.prototype.fetchCarts = function() {
+  console.log('fetchGroups JingleGroup');
+  var self = this;
+  data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: this.lowcart, INCLUDE_CUTS: 1 };
+  gcd = $.post("/rd-bin/rdxport.cgi", data, function(cartXml) {
+    self.mainCart = self.createCartFromXml(cartXml);
+    $(self).trigger('change');
+  }, "xml");
+  data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: this.highcart, INCLUDE_CUTS: 1 };
+  gcd = $.post("/rd-bin/rdxport.cgi", data, function(cartXml) {
+    self.deleteCart = self.createCartFromXml(cartXml);
+  }, "xml");
+};
+
+JingleGroup.prototype.createCartFromXml = function(cartXml) {
+  var cart = new JingleCart(
+    $(cartXml).find('title').text(),
+    $(cartXml).find('groupName').text()
   );
-  console.log(jingles_group_carts);
-  jingles_updateCartListing();
-}
 
-function jingles_show() {
-  jingAllgem = $.grep(jingles_group_list, function(elem) {
-    return elem.group.name == 'jingAllgem';
-  })[0];
-  jingAnlass = $.grep(jingles_group_list, function(elem) {
-    return elem.group.name == 'jingAnlass';
-  })[0];
+  var cuts = $(cartXml).find("cutList").children();
+  cuts.each(function(index, cutXml) {
+    cart.addCut(new JingleCut(
+      $(cutXml).find('cutName').text(),
+      $(cutXml).find('description').text()
+    ));
+  });
 
-  if(jingAllgem) {
-    $('#jingles-jingAllgem h2').text(jingAllgem.title);
+  return cart;
+};
 
-    jingles_group_carts = {};
-    data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: jingAllgem.group.lowcart, INCLUDE_CUTS: 1 };
-    gcd = $.post("/rd-bin/rdxport.cgi", data, jingles_updateGroupCartList, "xml");
-  }
 
-  if(jingAnlass) {
-    $('#jingles-jingAnlass h2').text(jingAnlass.title);
+var JingleCart = function(title, groupName) {
+  this.title = title;
+  this.groupName = groupName;
 
-    jingles_group_carts = {};
-    data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: jingAnlass.group.lowcart, INCLUDE_CUTS: 1 };
-    gcd = $.post("/rd-bin/rdxport.cgi", data, jingles_updateGroupCartList, "xml");
-  }
+  this.cuts = [];
+};
 
+JingleCart.prototype.addCut = function(cut) {
+  this.cuts.push(cut);
+};
 
-}
+var JingleCut = function(name, description) {
+  this.name = name;
+  this.description = description;
+};
 
-function jingle_groups_updateList(data, status, req) {
-  jingles_group_list = [];
-  $('#jingle-selector').find('option').remove();
-  var dblist = $(data).find("dropboxList");
-  var dbs = dblist.children();
-  dbs.each(function() {
-    type = $(this).find('type').text();
-    if (type == 'jingle') {
-      var jingle_group = {
-        title: $(this).find('jingle-title').text(),
-        group: {
-          name: $(this).find('group').text(),
-          description: $(this).find('group-description').text(),
-          lowcart: $(this).find('group-low-cart').text(),
-          highcart: $(this).find('group-high-cart').text(),
-        },
-        normlevel: $(this).find('normalization-level').text(),
-        trimlevel: $(this).find('autotrim-level').text(),
-      };
-
-      var name = jingle_group.title;
-      $('#jingle-selector').append($('<option>').attr('value', jingle_group.id).text(name));
-
-      jingles_group_list.push(jingle_group);
-    }
-  });
-  jingles_show();
-}
+JingleCut.prototype.$el = function() {
+  return $('<tr>').append($('<td>').text(this.name))
+    .append($('<td>').text(this.description))
+    .append($('<td>'))//.text(msToTimeString(cart.length)))
+    .append($('<td>'))//.text(cart.imported))
+    .append($('<td>'))//.text(cart.playcnt))
+    .append($('<td>'))//.text(cart.lastplayed))
+    .append($('<td>'));//.css('text-align', 'center').append(buttons))
+  //.attr("id", "show-cart-" + elem);
+};
+
+var jinglesGroupList = null;
 
 function jingles_init() {
-  jingles_group_list = [];
-  jingles_group_carts = {};
-  data = { LOGIN_NAME: auth_username, PASSWORD: auth_token };
-  $.post("/rh-bin/listdropboxes.cgi", data, jingle_groups_updateList, "xml");
+  jinglesGroupList = new JingleGroupList();
 }
 
 function jingles_cleanup() {
-  sessionStorage.removeItem("jingles_currentid");
-  delete jingles_currentid;
-  jingles_group_list = [];
-  jingles_group_carts = {};
+  jinglesGroupList = null;
 }