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

[Jeremy White]

Ack series, pushed, and nice!

Cheers,

Jeremy

On 01/16/2015 08:29 AM, Pavel Grunt wrote:
> ---
>  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);
>                  }
>