handle new file size when receive package info event

debomatic-webui/public/javascripts/page_distribution.js

@@ -270,8 +270,8 @@ function Page_Distrubion(socket) {
                     var html_file = $('<li id="file-' + f.orig_name + '">' +
                         '<a title="' + f.orig_name + '" href="' +
                         Utils.from_view_to_hash(tmp) + '">' +
-                        '<span class="status pull-right"></span>' +
-                        f.name + '</a></li>');
+                        '<span class="tags pull-right"></span>' +
+                        '<span class="name">' + f.name + '</span></a></li>');
                     html_file.on('click', function () {
                         files.select(this);
                     });
@@ -286,7 +286,7 @@ function Page_Distrubion(socket) {
                 view.package.debs = Utils.clone(socket_data.package.debs);
                 // update.html
                 socket_data.package.debs.forEach(function (f) {
-                    $('#debs ul').append('<li><a title="' + f.orig_name + '" href="' + f.path + '">' +
+                    $('#debs ul').append('<li id="file-' + f.orig_name + '"><a title="' + f.orig_name + '" href="' + f.path + '">' +
                         f.name + '</a> <span>.' + f.extension + '</span></li>');
                 });
                 $('#debs').show();
@@ -297,7 +297,7 @@ function Page_Distrubion(socket) {
                 view.package.sources = Utils.clone(socket_data.package.sources);
                 // update html
                 socket_data.package.sources.forEach(function (f) {
-                    $('#sources ul').append('<li><a title="' + f.orig_name + '" href="' + f.path + '">' + f.name + '</a></li>');
+                    $('#sources ul').append('<li id="file-' + f.orig_name + '"><a title="' + f.orig_name + '" href="' + f.path + '">' + f.name + '</a></li>');
                 });
                 $('#sources').show();
             }
@@ -338,8 +338,13 @@ function Page_Distrubion(socket) {
         show: function () {
             $('#files').show();
         },
-        set_status: function (file, status) {
-            $('#logs li[id="file-' + file + '"] .status').html(status);
+        set_tags: function (file, tags) {
+            console.log(file, tags);
+            $('li[id="file-' + file + '"] .tags').html(tags);
+        },
+        set_size: function (file, size) {
+            //console.log(file, size);
+            $('[id="file-' + file + '"] a').append('<span class="size">' + size + '</span>');
         }
     };
 
@@ -367,11 +372,15 @@ function Page_Distrubion(socket) {
                 return result;
             }
 
-            if (socket_data.hasOwnProperty('tags')) {
-                var tags = socket_data.tags;
-                for (var file in tags) {
-                    if (tags.hasOwnProperty(file))
-                        files.set_status(file, tags[file]);
+            if (socket_data.hasOwnProperty('files')) {
+                var s_files = socket_data.files;
+                for (var file in s_files) {
+                    if (s_files.hasOwnProperty(file)) {
+                        if (s_files[file].hasOwnProperty('tags'))
+                            files.set_tags(file, s_files[file].tags);
+                        if (s_files[file].hasOwnProperty('size'))
+                            files.set_size(file, s_files[file].size);
+                    }
                 }
             }
 

debomatic-webui/public/stylesheets/style.css

@@ -141,6 +141,22 @@ footer .info {
   margin-top: -3px;
 }
 
+#files .size {
+  margin: 0 8px;
+  font-size: 70%;
+  color: rgba(0,0,0,0.3);
+  float: right;
+}
+
+#logs .size {
+  float: none;
+}
+
+#logs .name {
+  min-width: 75px;
+  display: inline-block;
+}
+
 #status span {
   font-weight: bold;
   font-size: small;