use nav-pills and select package and file on change location.hash

debomatic-webui/public/javascripts/page.js

@@ -27,6 +27,7 @@ var Page = {
         tmp.package = p
         $('#packages ul').append('<li id="package-' + p.orig_name + '"><a href="' + Utils.from_data_to_hash(tmp) + '">'+ p.name + ' <span>'+p.version+'</span></a></li>')
       })
+      Page.select()
     },
     
     clean: function () {
@@ -48,27 +49,38 @@ var Page = {
         selected_file = Utils.check_data_file(data)
         data.package.files.forEach(function(f){
           tmp.file = f
-          $('#logs ul').append('<li id="file-'+ f.orig_name +'"><a title="'+ f.orig_name +'" href="'+ Utils.from_data_to_hash(tmp) + '">' + f.name + '</a></li>')
+          file = $('<li id="file-'+ f.orig_name +'"><a title="'+ f.orig_name +'" href="'+ Utils.from_data_to_hash(tmp) + '">' + f.name + '</a></li>')
+          file.on("click", function(){
+            Page.files.select(this)
           })
+          $('#logs ul').append(file)
+        })
+        $('#logs').show()
+        Page.select()
       }
       
       if (data.package.debs) {
         data.package.debs.forEach(function(f){
           $('#debs ul').append('<li><a title="'+ f.orig_name +'" href="' + f.path + '">' + f.name  +'</a> <span>.' + f.label + '</span></li>')
         })
+        $('#debs').show()
       }
       
       if (data.package.archives) {
         data.package.archives.forEach(function(f){
           $('#archives ul').append('<li><a title="'+ f.orig_name +'" href="' + f.path + '">' + f.name  +'</a></li>')
         })
+        $('#archives').show()
       }
       $('#files').show()
     },
     clean: function() {
       $('#logs ul').html('');
+      $('#logs').hide()
       $('#debs ul').html('');
+      $('#debs').hide();
       $('#archives ul').html('')
+      $('#archives').hide()
       $('#files').hide()
     },
     get: function (data) {
@@ -76,6 +88,10 @@ var Page = {
         data = Utils.from_hash_to_data()
       if (Utils.check_data_package(data))
         socket.emit("get_package_file_list", data)
+    },
+    select: function(file) {
+      $("#logs li").removeClass('active')
+      $(file).addClass('active')
     }
   },
   
@@ -83,6 +99,7 @@ var Page = {
     set: function(data) {
       $("#file pre").html(data.file.content)
       $("#file").show()
+      Page.select()
     },
     clean: function() {
       $('#file pre').html('')
@@ -121,28 +138,39 @@ var Page = {
   },
   
   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()
     },
   },
 
+  select: function(data) {
+      if (! data)
+        data = Utils.from_hash_to_data()
+      if (Utils.check_data_distribution(data)) {
+        $('#distributions li').removeClass('active')
+        $("#distributions li[id='distribution-"  + data.distribution.name + "']").addClass('active')
+        
+        if (Utils.check_data_package(data)) {
+          $('#packages li').removeClass('active')
+          $("#packages li[id='package-"+ data.package.orig_name + "']").addClass('active')
+          
+          if (Utils.check_data_file(data)) {
+            $('#logs li').removeClass('active');
+            $("#logs li[id='file-" + data.file.orig_name + "']").addClass('active')
+          }
+        }
+      }
+  },
+  
   clean: function() {
     Page.title.clean()
     Page.packages.clean()
     Page.files.clean()
     Page.file.clean()
-    Page.navbar.select()
+    Page.select()
     Page.breadcrumb.update()
   },
   
@@ -165,10 +193,12 @@ var Page = {
       else if (
         ! Utils.check_data_package(old_data) ||
         ! Utils.check_data_package(data) ||
-        data.package.orig_name != data.package.orig_name )
+        data.package.orig_name != old_data.package.orig_name )
       {
         Page.file.clean()
         Page.files.get(data)
+        // I will always get dataestamp from package
+        window.location.hash += '/datestamp'
       }
       else if (
         ! Utils.check_data_file(old_data) ||
@@ -180,6 +210,7 @@ var Page = {
       }
       Page.title.set(data)
       Page.breadcrumb.update()
+      Page.select(data)
     }
   },
   
@@ -190,7 +221,7 @@ var Page = {
     Page.packages.get(data)
     Page.files.get(data)
     Page.file.get(data)
-    Page.navbar.select()
+    Page.select(data)
     Page.breadcrumb.update()
     Page.title.set(data)
   }

debomatic-webui/views/index.ejs

@@ -20,13 +20,13 @@
       <aside class="col-md-3">
         <nav id="packages">
           <h1>Packages</h1>
-          <ul></ul>
+          <ul class="nav nav-pills nav-stacked"></ul>
         </nav>
         
         <section id="files">
           <h3 class="title">Files</h3>
           <nav id="logs">
-            <ul class=""></ul>
+            <ul class="nav nav-pills nav-stacked"></ul>
           </nav>
           <nav id="archives">
             <h4>Archives</h4>