[Spice-devel] [PATCH spice-html5 1/2] Add progress bar for file transfer

[Pavel Grunt]

---
 filexfer.js     | 29 +++++++++++++++++++++++++++++
 main.js         |  4 ++++
 spice.html      |  5 +++++
 spice_auto.html |  4 ++++
 4 files changed, 42 insertions(+)

diff --git a/filexfer.js b/filexfer.js
index 2ba0671..2887e14 100644
--- a/filexfer.js
+++ b/filexfer.js
@@ -24,6 +24,35 @@ function SpiceFileXferTask(id, file)
     this.file = file;
 }
 
+SpiceFileXferTask.prototype.create_progressbar = function()
+{
+    this.progressbar_container = document.createElement("div");
+    this.progressbar = document.createElement("progress");
+
+    this.progressbar.setAttribute('max', this.file.size);
+    this.progressbar.setAttribute('value', 0);
+    this.progressbar.style.width = '100%';
+    this.progressbar.style.margin = '4px auto';
+    this.progressbar.style.display = 'inline-block';
+    this.progressbar_container.style.width = '90%';
+    this.progressbar_container.style.margin = 'auto';
+    this.progressbar_container.style.padding = '4px';
+    this.progressbar_container.textContent = this.file.name;
+    this.progressbar_container.appendChild(this.progressbar);
+    document.getElementById('spice-xfer-area').appendChild(this.progressbar_container);
+}
+
+SpiceFileXferTask.prototype.update_progressbar = function(value)
+{
+    this.progressbar.setAttribute('value', value);
+}
+
+SpiceFileXferTask.prototype.remove_progressbar = function()
+{
+    if (this.progressbar_container && this.progressbar_container.parentNode)
+        this.progressbar_container.parentNode.removeChild(this.progressbar_container);
+}
+
 function handle_file_dragover(e)
 {
     e.stopPropagation();
diff --git a/main.js b/main.js
index f6006e6..f9a463b 100644
--- a/main.js
+++ b/main.js
@@ -289,6 +289,7 @@ SpiceMainConn.prototype.file_xfer_start = function(file)
 
     task_id = this.file_xfer_task_id++;
     task = new SpiceFileXferTask(task_id, file);
+    task.create_progressbar();
     this.file_xfer_tasks[task_id] = task;
     xfer_start = new VDAgentFileXferStartMessage(task_id, file.name, file.size);
     this.send_agent_message(VD_AGENT_FILE_XFER_START, xfer_start);
@@ -355,6 +356,7 @@ SpiceMainConn.prototype.file_xfer_read = function(file_xfer_task, start_byte)
                                                        e.target.result);
         _this.send_agent_message(VD_AGENT_FILE_XFER_DATA, xfer_data);
         _this.file_xfer_read(file_xfer_task, eb);
+        file_xfer_task.update_progressbar(eb);
     };
 
     slice = file_xfer_task.file.slice(sb, eb);
@@ -368,6 +370,8 @@ SpiceMainConn.prototype.file_xfer_completed = function(file_xfer_task, error)
     else
         this.log_info("transfer of '" + file_xfer_task.file.name +"' was successful");
 
+    file_xfer_task.remove_progressbar();
+
     delete this.file_xfer_tasks[file_xfer_task.id];
 }
 
diff --git a/spice.html b/spice.html
index 000f23d..f2f9ed0 100644
--- a/spice.html
+++ b/spice.html
@@ -113,6 +113,8 @@
                 document.getElementById('connectButton').onclick = connect;
                 if (window.File && window.FileReader && window.FileList && window.Blob)
                 {
+                    var spice_xfer_area = document.getElementById('spice-xfer-area');
+                    document.getElementById('spice-area').removeChild(spice_xfer_area);
                     document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false);
                     document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false);
                 }
@@ -128,6 +130,9 @@
 
                 if (window.File && window.FileReader && window.FileList && window.Blob)
                 {
+                    var spice_xfer_area = document.createElement("div");
+                    spice_xfer_area.setAttribute('id', 'spice-xfer-area');
+                    document.getElementById('spice-area').appendChild(spice_xfer_area);
                     document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false);
                     document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false);
                 }
diff --git a/spice_auto.html b/spice_auto.html
index 689b066..d374054 100644
--- a/spice_auto.html
+++ b/spice_auto.html
@@ -149,6 +149,8 @@
                 }
                 if (window.File && window.FileReader && window.FileList && window.Blob)
                 {
+                    var spice_xfer_area = document.getElementById('spice-xfer-area');
+                    document.getElementById('spice-area').removeChild(spice_xfer_area);
                     document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false);
                     document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false);
                 }
@@ -164,6 +166,8 @@
 
                 if (window.File && window.FileReader && window.FileList && window.Blob)
                 {
+                    var spice_xfer_area = document.createElement("div");
+                    spice_xfer_area.setAttribute('id', 'spice-xfer-area');
                     document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false);
                     document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false);
                 }
-- 
1.9.3