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;
  }
Post a Comment

Popular posts from this blog

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

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

SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

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

HOW TO CALL RAILS API FROM SIMPLE HTML PAGE.

Building native extensions. This could take a while... ERROR: Error installing mysql: ERROR: Failed to build gem native extension.

CREATE API FOR USER SIGN UP, LOGIN AND CREATE PUBLISHER WITH CURRENT USER

UPLOAD ANY MEDIA FILE IN RAILS USING PAPERCLIP