PROGRESS BAR IN RAILS WITH DELAYED JOBS


Progress Bar in Rails Delayed Jobs :-

I am giving you some steps for showing the Jobs Progress Bar without reloading the page :-

route.rb

map.resources :jobs, :member=>{:job_status => :get}

Controller :-

class JobsController < InheritedResources::Base
    def job_status
    @job = Delayed::Job.find(params[:id])
    respond_to do |format|
      format.json do
        render :json => @job
      end
    end
  end
end

Add new field in Delayed job file :-

class Addtofielddelayedjob < ActiveRecord::Migration
  def self.up
      add_column :delayed_jobs, :max_job, :string, :default => ''
    add_column :delayed_jobs, :current_job, :string, :default => ''
    add_column :delayed_jobs, :job_status, :string
  end

  def self.down
      remove_column :delayed_jobs, :max_job
    remove_column :delayed_jobs, :current_job
    remove_column :delayed_jobs, :job_status
  end
end


Library file :-

class NewJob
    def perform
        datas.each_with_index do |data, index|
            content.........

             last_job = Delayed::Job.last
             last_job.max_job      =   datas.count
             last_job.current_job  =   index + 1
             last_job.job_status   =   "processing"
             last_job.save
        end
    end
end


Then go to the job show page that the job is available:-

show.html.erb:-

    #progressbar
       %span#loading{:style => "width: #{@job.current_job.to_f / @job.max_job.to_f * 100}%;"}
       #load


:javascript

  function progress_bar(){
    var progress = setInterval(function() {
      var $percentage = $('#load');
      var $bar  = $('#loading');

      $.get("#{@job.id}/job_status.json", function(data){
        if (data.job.status == "done") {
          location.reload();
        } else {
          prog_val = data.job.current_job / data.job.max_job * 100;
          $percentage.text(Math.trunc(prog_val)+"%");
          $bar.width(Math.trunc(prog_val) +"%");
        }
      });
    }, 800);
  }
 
  $(document).ready(function() {
    $.getJSON("#{@job.id}/job_status.json", function(data) {
      if (data.job.job_status == "processing") {
        progress_bar();
      }
    });
  });



:css

  body {
    color: #333;
  }
  #progressbar{
    height: 20px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3f4c6b+0,3f4c6b+100;Blue+Grey+Flat */
    background: #3f4c6b; /* Old browsers */
    background: -moz-linear-gradient(top, #3f4c6b 0%, #3f4c6b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3f4c6b 0%,#3f4c6b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #3f4c6b 0%,#3f4c6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
    border-radius: 15px;
    border: 1px solid #ccc;
    margin: 15px 0 0 0;
    padding: 2px;
    position: relative;
  }
  #loading{
    transition: all 500ms ease;
    height: 20px;
    //width: calc(100% - 10px);
    border-radius: 15px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100;Orange+3D+%235 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
    background: #6db3f2; /* Old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

    position: absolute;
    margin: 0;
    display: inline-block;
    animation: load 15s ease infinite;
  }
  #load{
    font-family: Arial;
    font-weight: normal;
    text-align: center;
    left: 0;
    right: 0;
    position: absolute;
    top: 5px;
    font-size: 13px;
    color: #fff;
  }

Comments

IT said…
I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting ruby on rails online training

Popular posts from this blog

psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

CARRIERWAVE - UPLOAD ANY MEDIA (AUDIO , VIDEO AND IMAGE ) FILE IN RAILS

SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

RAILS: UPLOADING PHOTOS VIA AMAZON S3 AND PAPERCLIP (UPLOADING FILES TO S3 IN RUBY WITH PAPERCLIP)

SEARCHING USING AJAX IN RAILS

UPLOAD ANY MEDIA FILE IN RAILS USING PAPERCLIP

UNINITIALIZED CONSTANT PAPERCLIP::STORAGE::S3::AWS

CURL COMMAND ON RUBY ON RAILS

CHECK PASSENGER RUBY PATH