Complete refactory on client side code

debomatic-webui/public/javascripts/debomatic-webui.js → debomatic-webui/public/javascripts/main.js

@@ -22,92 +22,44 @@ function get_path(path) {
 }
 
 function select_navbar_voice(data) {
-  $('#distributions li').removeClass('active')
-  $('#distribution-' + data.distribution.name).addClass('active')
-}
 
-function build_hash(data) {
-  hash = "#"
-  if (data.distribution && data.distribution.name) {
-    hash = hash + data.distribution.name
-    if (data.package && data.package.name && data.package.version) {
-      hash = hash + '/' + data.package.name + "/" + data.package.version
-      if (data.file && data.file.name)
-      hash = hash + '/' + data.file.name
-    }
-  }
-  return hash
 }
 
 function update_breadcrumb(hash) {
-  new_html = ''
-  new_hash = '#'
-  info = hash.split('/')
-  for (var i = 0; i < info.length ; i++) {
-    new_hash += info[i]
-    if (i == (info.length - 1))
-      new_html += '<li class="active">' + info[i] + '</li>'
-    else
-      new_html += '<li><a href="' + new_hash + '">' + info[i] + '</a>'
-    new_hash += '/'
-  }
-  $('.breadcrumb').html(new_html)
+
 }
 
 var socket = io.connect('//localhost:3000');
+var old_data = Utils.from_hash_to_data()
 
 socket.on('distributions', function(distributions) {
-  $('#distributions ul').html('');
-  distributions.forEach(function (name){
-    $('#distributions ul').append('<li id="distribution-' + name +'"><a href="#' + name + '">' + name + '</li>');
-  });
+  Page.navbar.update(distributions)
 });
 
 socket.on('distribution_packages', function(data){
-  $('#packages ul').html('')
-  tmp = data
-  tmp.file = null
-  data.distribution.packages.forEach(function(p){
-    tmp.package = p
-    div = $('#packages ul').append('<li><a href="' + build_hash(tmp) + '">'+ p.name + ' <span>'+p.version+'</span></a></li>')
-  })
+  Page.packages.set(data)
 })
 
 socket.on('package_file_list', function(data){
-  $('#files ul').html('');
-  $('#debs ul').html('');
-  $('#archives ul').html('')
-  tmp = data
-  data.package.files.forEach(function(f){
-    tmp.file = f
-    $('#files ul').append('<li><a name="'+ f.orig_name +'" href="'+ build_hash(tmp) + '">' + f.name + '</a></li>')
-  })
-  
-  data.package.debs.forEach(function(f){
-    $('#debs ul').append('<li><a name="'+ f.orig_name +'" href="' + f.path + '">' + f.name  +'</a> <span>.' + f.label + '</span></li>')
-  })
-  
-  data.package.archives.forEach(function(f){
-    $('#archives ul').append('<li><a name="'+ f.orig_name +'" href="' + f.path + '">' + f.name  +'</a></li>')
-  })
+  Page.files.set(data)
 })
 
 socket.on('file', function (data) {
-  $('#file .title').html(data.file.orig_name)
-  $("#file pre").html(data.file.content)
+  Page.file.set(data)
 })
 
 socket.on('file_newcontent', function(data) {
-  new_html =  $("#file").html() + data.file.new_content
-  $("#file").html(new_html)
+  Page.file.append(data)
 })
 
 socket.on('error', function() { console.error(arguments) });
 
 $(window).on('hashchange', function() {
-  get_path(window.location.hash.replace('#',''));
+  data = Utils.from_hash_to_data()
+  Page.update(data, old_data)
+  old_data = data
 });
 
 $(window).on('load', function (){
-  get_path(window.location.hash.replace('#',''));
+  Page.update(old_data)
 });

debomatic-webui/public/javascripts/page.js

+var Page = {
+
+  title: {
+    set: function(data) {
+      if (! data)
+        data = Utils.from_hash_to_data()
+      label = ''
+      if (Utils.check_data_file(data))
+        label = data.package.name + '_' + data.package.version + '.' + data.file.name
+      else if (Utils.check_data_package(data))
+        label = data.package.name + '_' + data.package.version
+      else if (Utils.check_data_distribution(data))
+        label = data.distribution.name
+      $('#title').html(label)
+    },
+    clean: function() {
+      $('#title').html('')
+    }
+  },
+
+  packages: {
+    set: function (data) {
+      $('#packages ul').html('')
+      tmp = data
+      tmp.file = null
+      data.distribution.packages.forEach(function(p){
+        tmp.package = p
+        div = $('#packages ul').append('<li><a href="' + Utils.from_data_to_hash(tmp) + '">'+ p.name + ' <span>'+p.version+'</span></a></li>')
+      })
+    },
+    
+    clean: function () {
+      $('#packages ul').html('')
+    },
+    get: function (data) {
+      if (! data)
+        data = Utils.from_hash_to_data()
+      if (Utils.check_data_distribution(data))
+        socket.emit("get_distribution_packages", data)
+    }
+  },
+
+  files: {
+    set: function (data) {
+      Page.files.clean()
+      tmp = data
+      if (data.package.files) {
+        data.package.files.forEach(function(f){
+          tmp.file = f
+          $('#logs ul').append('<li><a name="'+ f.orig_name +'" href="'+ Utils.from_data_to_hash(tmp) + '">' + f.name + '</a></li>')
+        })
+      }
+      
+      if (data.package.debs) {
+        data.package.debs.forEach(function(f){
+          $('#debs ul').append('<li><a name="'+ f.orig_name +'" href="' + f.path + '">' + f.name  +'</a> <span>.' + f.label + '</span></li>')
+        })
+      }
+      
+      if (data.package.archives) {
+        data.package.archives.forEach(function(f){
+          $('#archives ul').append('<li><a name="'+ f.orig_name +'" href="' + f.path + '">' + f.name  +'</a></li>')
+        })
+      }
+      $('#files').show()
+    },
+    clean: function() {
+      $('#logs ul').html('');
+      $('#debs ul').html('');
+      $('#archives ul').html('')
+      $('#files').hide()
+    },
+    get: function (data) {
+      if (! data)
+        data = Utils.from_hash_to_data()
+      if (Utils.check_data_package(data))
+        socket.emit("get_package_file_list", data)
+    }
+  },
+  
+  file: {
+    set: function(data) {
+      $("#file pre").html(data.file.content)
+      $("#file").show()
+    },
+    clean: function() {
+      $('#file pre').html('')
+      $('#file').hide()
+    },
+    append: function(data) {
+      new_html =  $("#file pre").html() + data.file.new_content
+      $("#file pre").html(new_html)
+    },
+    get: function(data) {
+      if (! data)
+        data = Utils.from_hash_to_data()
+      if (Utils.check_data_file(data))
+        socket.emit("get_file", data)
+    }
+  },
+  
+  breadcrumb: {
+    update: function(hash) {
+      if (! hash )
+        hash = window.location.hash
+      hash = hash.replace('#', '')
+      new_html = ''
+      new_hash = '#'
+      info = hash.split('/')
+      for (var i = 0; i < info.length ; i++) {
+        new_hash += info[i]
+        if (i == (info.length - 1))
+          new_html += '<li class="active">' + info[i] + '</li>'
+        else
+          new_html += '<li><a href="' + new_hash + '">' + info[i] + '</a>'
+        new_hash += '/'
+      }
+      $('.breadcrumb').html(new_html)
+    }
+  },
+  
+  navbar: {
+    select: function (data) {
+      if (! data)
+        data = Utils.from_hash_to_data()
+
+      $('#distributions li').removeClass('active')
+      $('#distribution-' + data.distribution.name).addClass('active')
+    },
+    update: function (distributions) {
+      $('#distributions ul').html('');
+      distributions.forEach(function (name){
+        $('#distributions ul').append('<li id="distribution-' + name +'"><a href="#' + name + '">' + name + '</li>');
+      });
+      Page.navbar.select()
+    },
+  },
+  
+  clean: function() {
+    Page.title.clean()
+    Page.packages.clean()
+    Page.files.clean()
+    Page.file.clean()
+    Page.navbar.select()
+    Page.breadcrumb.update()
+  },
+  
+  update: function(data, old_data) {
+    if (! old_data ) {
+      if (! data )
+        Page.populate()
+      else
+        Page.populate(data)
+      return;
+    }
+    else {
+      if (! Utils.check_data_distribution(old_data) ||
+          ! Utils.check_data_distribution(data) ||
+          data.distribution.name != old_data.distribution.name) 
+      {
+        Page.clean()
+        Page.populate(data)
+      }
+      else if (
+        ! Utils.check_data_package(old_data) ||
+        ! Utils.check_data_package(data) ||
+        data.package.name != old_data.package.name ||
+        data.package.version != old_data.package.version )
+      {
+        Page.file.clean()
+        Page.files.get(data)
+      }
+      else if (
+        ! Utils.check_data_file(old_data) ||
+        ! Utils.check_data_file(data) ||
+        data.file.name != old_data.file.name
+      )
+      {
+        Page.file.get()
+      }
+      Page.title.set(data)
+      Page.breadcrumb.update()
+    }
+  },
+  
+  populate: function (data) {
+    Page.clean()
+    if (! data )
+      data = Utils.from_hash_to_data()
+    Page.packages.get(data)
+    Page.files.get(data)
+    Page.file.get(data)
+    Page.navbar.select()
+    Page.breadcrumb.update()
+    Page.title.set(data)
+  }
+}

debomatic-webui/public/javascripts/utils.js

+var Utils = {
+  from_hash_to_data: function (hash) {
+    if (! hash )
+      hash = window.location.hash
+    hash = hash.replace('#', '')
+    info = hash.split('/');
+    data = {}
+    if (info.length >= 1) {
+      data.distribution = {}
+      data.distribution.name = info[0];
+    }
+    if (info.length >= 3){
+      data.package = {}
+      data.package.name = info[1];
+      data.package.version = info[2];
+    }
+    if (info.length >= 4) {
+      data.file = {}
+      data.file.name = info[3]
+    }
+    return data
+  },
+  
+  from_data_to_hash: function (data) {
+    hash = "#"
+    if (Utils.check_data_distribution(data)) {
+      hash = hash + data.distribution.name
+      if (Utils.check_data_package(data)) {
+        hash = hash + '/' + data.package.name + "/" + data.package.version
+        if (Utils.check_data_file(data))
+          hash = hash + '/' + data.file.name
+      }
+    }
+  return hash
+  },
+  
+  check_data_distribution: function(data) {
+    return data && data.distribution && data.distribution.name
+  },
+  
+  check_data_package: function(data) {
+    return Utils.check_data_distribution(data) && data.package && data.package.name && data.package.version
+  },
+  
+  check_data_file: function(data) {
+    return Utils.check_data_package(data) && data.file && data.file.name
+  },
+}

debomatic-webui/views/index.ejs

@@ -23,28 +23,30 @@
           <ul></ul>
         </nav>
         
-        <section>
-          <nav id="files">
-            <h3>Files</h2>
+        <section id="files">
+          <h3 class="title">Files</h3>
+          <nav id="logs">
             <ul class=""></ul>
           </nav>
           <nav id="archives">
-            <h3>Archives</h2>
+            <h4>Archives</h4>
             <ul></ul>
           </nav>
           <nav id="debs">
-            <h3>Debs</h2>
+            <h4>Debs</h4>
             <ul></ul>
           </nav>
         </section>
 
       </aside>
 
-      <section id="file" class="col-md-9">
+      <section class="col-md-9">
         <header>
-          <h1 class="title"></h1>
+          <h1 id="title"></h1>
         </header>
-        <pre></pre>
+        <div id="file">
+          <pre></pre>
+        </div>
       </section>
     </article>
   <footer><%= footer %></footer>

debomatic-webui/views/layout.ejs

@@ -9,7 +9,10 @@
     <script src='//code.jquery.com/jquery-1.7.2.min.js'></script>
     <script src='//localhost:3000/socket.io/socket.io.js'></script>
     <script src="/libs/bootstrap/3.1.1/js/bootstrap.min.js"></script>
-    <script src='/javascripts/debomatic-webui.js'></script>
+
+    <script src='/javascripts/utils.js'></script>
+    <script src='/javascripts/page.js'></script>
+    <script src='/javascripts/main.js'></script>
   </head>
   <body>
     <%- body %>