1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.
    Dismiss Notice

Best way to add a progress bar in List view

Discussion in 'Professional Support' started by javier94, Jun 7, 2018.

  1. javier94

    javier94 Member

    Level: Community
    I'm experimenting and i would like add an a progress bar that you can see in a list view as if i were like an element.. i have try to create a button.. to see what happend but the button element.. i can not see in the list view...

    first.. which kind of element i have to use
    second.. i have to use a plugin.. which one..
    third.. i can associate the progress bar to a date element? would be possible??

    in the template there is a class for a progress bar, but maybe i can not use.. i have not see add class in any element..

    So which would be the best way to do that..

    attached the list view.. i would like to do..
     
  2. troester

    troester Administrator Staff Member

    Level: Community
    I think you can use a calc element.
    Calculating a value depending on your date element (I don't know what you need) and then displaying the bar with something like

    Code (Text):
    $value = ...;
    return '<div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
          <span class="sr-only">' . $value . '% Complete</span>
        </div>';
    https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
     
    cheesegrits likes this.
  3. javier94

    javier94 Member

    Level: Community
    hello,

    yes the calculating for the progress will depend on a date element..

    i have see the stacked progress bar .. in the url you write me.. i think would work..

    and the calculation will be... if element date time = have "end" data 25/06/2018 ..

    will be green till 6 days to the end date
    change to orange during 5, 4, 3, days till the end of date
    chante to red during day 2, 1, 0 till end of date

    how can i add this details to the calculation ? any suggestion?

    thanks

    Javier
     
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    Something like this, which gets the days difference, calculates that as a percentage of 6, and sets a background classd ...

    https://getbootstrap.com/docs/4.1/components/progress/#backgrounds

    ... according to the days.

    Code (Text):

    // get the date from the 'raw' placeholder
    $myDate = '{yourtable___yourdateelement_raw}';
    // make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
    if (FabrikWorker::isDate($myDate)) {
       // use DateTime to get the days diff
       $myDate = new DateTime($myDate);
       $today = new DateTime();
       $diff = $myDate->diff($today);
       // if days is >6, just set it to 6
       $days = $diff->days >= 6 ? 6 : $diff->days;
       // get the percentage
       $percent = round(($days / 6) * 100), 1);
       // flip the percentage into the value we show
       $value = 100 - $percent;
       // set the bg class
       if ($days >= 6) {
          $color = 'bg-success';
       }
       else if ($days <= 5 && $days >= 3) {
          $color = 'bg-warning';
       }
       else {
          $color = 'bg-danger';
       }
       // render it
       return '<div class="progress">
        <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
          <span class="sr-only">' . $value . '% Complete</span>
        </div>';  
    }
    // if it wasn't a date, return empty
    return '';
     
    -- hugh
     
  5. javier94

    javier94 Member

    Level: Community
    the code that you gave to me .. is not working.. i can not see nothing .. i think is because the yootheme pro template is not bootstrap template or something happend..

    i try to make some changes to obtain something..

    you can see here ... https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

    as you can see i can see the progress bar.. but something is missing...

    as i told you previously.. in my template there are only three class

    btn-danger is red
    btn-primary is blue
    btn-secondary is green

    in the same progress bar.. 3 colors... 1.- Green 2.- orange (or blue) 3.- red as progress bar is based on date..

    green color means --> from today till 6 days to the ended date
    orange color means --> from 6 days to ended date till 2 days to ended date
    red color means --> from 2 days till the end date

    once date is ended. --> all the progress bar would be one color... red color..

    for that I'm using a calc element from fabrik the following code...

    $myDate = '{job_a_offer___fi_proces_raw}';
    $today = strtotime('now');
    $date1 = strtotime($myDate);
    $diff=$today-$date1;
    $days=floor($diff / (606024));
    $percent=round((($days/6)*100),1);
    $value = 100; //- $percent;
    if ($days >= -2) {$color = 'btn-danger';}
    else{$color = 'btn-primary';}
    return '<div>

    <progress class="btn-secondary" value="80" max="100"></progress></div>';

    would you help me to finish please, i have some troubles with class


    thanks in advance..

    javier
     
  6. troester

    troester Administrator Staff Member

    Level: Community
    You are displaying a static progress bar (always blue and 80%, no "readable"=accessable text at all);

    You must include colors and values dynamically as in the code @cheesegrits gave you.
     
  7. javier94

    javier94 Member

    Level: Community
    ok.. i have change the code and start with the code cheesegrits gave me.

    Now i have this..
    ----------------------------------------------------------------------------------------
    // get the date from the 'raw' placeholder
    $myDate = '{job_a_offer___fi_proces_raw}';
    // make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
    if (FabrikWorker::isDate($myDate)) {
    // use DateTime to get the days diff
    $myDate = new DateTime($myDate);
    $today = new DateTime();
    $diff = $myDate->diff($today);
    // if days is >6, just set it to 6
    $days = $diff->days >= 6 ? 6 : $diff->days;
    // get the percentage
    $percent = round(($days / 6) * 100), 1);
    // flip the percentage into the value we show
    $value = 100 - $percent;
    // set the bg class
    if ($days >= 6) {
    $color = 'btn-secondary';
    }
    else if ($days <= 5 && $days >= 3) {
    $color = 'btn-primary';
    }
    else {
    $color = 'btn-danger';
    }
    // render it
    return '<div class="progress">
    <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
    <span class="sr-only">' . $value . '% Complete</span>
    </div>';
    }
    // if it wasn't a date, return empty
    return '';
    ----------------------------------------------------------------------------
    so i can not see nothing because my template from yootheme don´t use bootstrap so i have change colors for the colors i have..

    i have change bg-success --> btn-secondary
    i have change bg-warning--> btn-primary
    i have change bg-danger --> btn-danger

    changing colors.. i still can not see nothing..

    Maybe i have to give a value .. but i can not see where..

    in the $days = $diff-> days >=6 ? 6 : $diff->days; --> is the only line that the "6 ? 6" --> i think maybe is weir but i dont know much about..

    so any suggestion??

    thanks

    Javier
     
  8. troester

    troester Administrator Staff Member

    Level: Community
    There's no progress bar at all in your page source.
    It seems
    FabrikWorker::isDate($myDate) is false so it's returning '';
    You may put something in there for testing e.g.
    return 'no valid date: '. $myDate;

    You can also include
    var_dump($some-variable);
    or install jDump extension and do
    dump($some-variable,'some text');

    for debugging.
     
  9. javier94

    javier94 Member

    Level: Community
    lets try..

    the progress bar should appear here
    https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

    last item "progreso proceso" is where should appear the progress bar...

    following your instructions i have added the code you gave me... in the second return.. i'm not sure if is ok..

    // render it
    return '<div class="progress">
    <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
    <span class="sr-only">' . $value . '% Complete</span>
    </div>';
    }
    // if it wasn't a date, return empty
    return 'no valid date: '. $myDate; --> (here your suggestion..)


    also i have instaled jdump extension component + plugin and activate plugin ... but when you say write --> dump($some-variable,'some text'); --> i dont know where to write this.. in the component i just see a pop up button i clicked there.. appears a new window but i can not write nothing..

    I wait for your comments..

    thanks!

    Javier
     
  10. troester

    troester Administrator Staff Member

    Level: Community
    There's a typo in your code:
    it must be
    $percent = round( (($days / 6) * 100), 1);
     
  11. javier94

    javier94 Member

    Level: Community
    i have put the missed (

    all the code is..

    // get the date from the 'raw' placeholder
    $myDate = '{job_a_offer___fi_proces_raw}';
    // make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
    if (FabrikWorker::isDate($myDate)) {
    // use DateTime to get the days diff
    $myDate = new DateTime($myDate);
    $today = new DateTime();
    $diff = $myDate->diff($today);
    // if days is >6, just set it to 6
    $days = $diff->days >= 6 ? 6 : $diff->days;
    // get the percentage
    $percent = round((($days / 6) * 100), 1);
    // flip the percentage into the value we show
    $value = 100 - $percent;
    // set the bg class
    if ($days >= 6) {
    $color = 'btn-secondary';
    }
    else if ($days <= 5 && $days >= 3) {
    $color = 'btn-primary';
    }
    else {
    $color = 'btn-danger';
    }
    // render it
    return '<div class="progress">
    <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
    <span class="sr-only">' . $value . '% Complete</span>
    </div>';
    }
    // if it wasn't a date, return empty
    return;

    -----

    if you check the progress bar..

    https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

    something is doing.. you can see a 0% but progress bar didn´t appear .. we are close i think ...

    if can help you. i don´t now the template class for progress bar is here

    https://getuikit.com/docs/progress

    yootheme use ulkit

    thanks!
     
  12. troester

    troester Administrator Staff Member

    Level: Community
    0% means: progress bar width =0, so you won't see anything.
    Additionally there's no "btn-secondary" CSS defined in your template
    Make sure you get some meaningfull values for testing.
     
  13. javier94

    javier94 Member

    Level: Community
    in the style template --> i have found the attached image.. maybe can help.. to see the CSS styles

    View attachment 17345
    As you say the datas for testing are the table and the element.. and are coming from;


    1.- and DB where the element is : job_a_offer
    2.- and element complete name: job_a_offer___fi_proces ( now date is 30-08-2018) is not blanked as cheesegrits told to me)



    i have change colors in the code.. but is not working.. so the code.. now is..

    // get the date from the 'raw' placeholder
    $myDate = '{job_a_offer___fi_proces_raw}';
    // make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
    if (FabrikWorker::isDate($myDate)) {
    // use DateTime to get the days diff
    $myDate = new DateTime($myDate);
    $today = new DateTime();
    $diff = $myDate->diff($today);
    // if days is >6, just set it to 6
    $days = $diff->days >= 6 ? 6 : $diff->days;
    // get the percentage
    $percent = round((($days / 6) * 100), 1);
    // flip the percentage into the value we show
    $value = 100 - $percent;
    // set the bg class
    if ($days >= 6) {
    $color = 'Success';
    }
    else if ($days <= 5 && $days >= 3) {
    $color = 'Warning';
    }
    else {
    $color = 'Danger';
    }
    // render it
    return '<div class="progress">
    <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
    <span class="sr-only">' . $value . '% Complete</span>
    </div>';
    }
    // if it wasn't a date, return empty
    return;

    ---------------
    I'm not sure if is the way to do it...
     
  14. troester

    troester Administrator Staff Member

    Level: Community
    If your template doesn't define classes like "Danger" (and as far as I see it doesn't) you won't get any background color.
    ("Danger" in your screenshot is only a text, same with "Secondary")

    But as long as your value is 0 your won't see anything anyway.

    The complete example is relying on bootstrap, I don't know how your ukit template is doing progress bar stuff. It seems it's working with JS so you can't just set CSS for styling.
    You can try to set it directly:
    ...
    $color ="green"; //or some #xyz
    ...

    return '<div class="progress">
    <div class="progress-bar ' . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' . $color . '">
    <span class="sr-only">' . $value . '% Complete</span>
    </div>';
     
  15. javier94

    javier94 Member

    Level: Community
    well, we have two troubles for the moment..

    the 0% remains the same --> so i think the code is not working.. if till the end of data remains 1 month.. the 0% should be "x" but not cero i think.. so in the code should be a mistake
    the color for the bar--> the ulkit css style is giving troubles --> I'm gonna check with yootheme support if the can help to us with this..

    yootheme support answer me this..

    https://www.yootheme.com/support/question/122211

    after read the yootheme support question i have created the CSS style as can you see here in the attached image View attachment 17348

    So the color trouble should be resolved... but i can not see nothing.. i have try diferent things but i can not see nothing..

    the code now remains like this.
    ---------------------------------------------------------
    // get the date from the 'raw' placeholder
    $myDate = '{job_a_offer___fi_proces_raw}';
    // make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
    if (FabrikWorker::isDate($myDate)) {
    // use DateTime to get the days diff
    $myDate = new DateTime($myDate);
    $today = new DateTime();
    $diff = $myDate->diff($today);
    // if days is >6, just set it to 6
    $days = $diff->days >= 6 ? 6 : $diff->days;
    // get the percentage
    $percent = round((($days / 6) * 100), 1);
    // flip the percentage into the value we show
    $value = 100 - $percent;
    // set the bg class
    if ($days >= 6) {
    $color = 'green'; (change to css style )
    }
    else if ($days <= 5 && $days >= 3) {
    $color = 'orange'; (change to css style )
    }
    else {
    $color = 'red'; (change to css style )
    }
    // render it
    return '<div class="progress">
    <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' .$color . '">
    <span class="sr-only">' . $value . '% Complete</span>
    </div>';
    }
    // if it wasn't a date, return empty
    return;
    ---------------------------------------------------
    maybe adding the css style we have to change something
     
    Last edited: Jul 13, 2018
  16. troester

    troester Administrator Staff Member

    Level: Community
    The "get the %-value from date" code is working fine on my site (copy/paste of your code + replacing the date element placeholder).
    Does
    '{job_a_offer___fi_proces_raw}'
    really contain the date you are expecting?

    Debug with var_dump or dump.
     
  17. javier94

    javier94 Member

    Level: Community
    attached the element image where the element used is.......
    View attachment 17349
    this is the element where take the date.. and if you see here...

    https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

    in the Column "Fi process" have a date... 30/08 and 31/08 --> so element i'm sure is ok.. name is --> job_a_offer___fi_proces .. and cheesegrits told me add "_raw"

    $myDate = '{job_a_offer___fi_proces_raw}'; --> this is code so i think is the same.. the trouble is not here...!
     
  18. troester

    troester Administrator Staff Member

    Level: Community
    ok, digging into php dateDiff:

    $diff->days is returning the absolute number of days (always positive)
    $diff->invert is 1 if the diff is negative, 0 if it's positive

    So you have to play with this to get your positive or negative days.

    For just testing the progress bar stuff use dates like 15-07-2018 or 09-07-2018 (I don't know what you exectly want to see on which date difference).
     
  19. javier94

    javier94 Member

    Level: Community
    ok.. i'll tell you the date difference... because i think cheesegrits make the code thinking about this...

    we have a Final date progress --> the date element is the end date to finalice the process

    so the idea is... that the progress bar show the following.

    in green color ... from today .....till 6 days before the end date
    in orange color.. from 5 days before the end date .. to 3 days till the end date
    in red color ... from 3 days before end date.... till end date...

    so the progress bar will show.. from today.. the progress till the end of date..

    Following this .. if i try with a date older than today will not work the cheesegrits code

    but i will change to the date you told me to check if something is happen.

    https://iocleane-cp22.webjoomla.es/...leccio-ajuntament-ca/veure-documents-admin-ca

    now is working something... as you can see..

    but the trouble is... the progress bar is in one bar... 3 colors depending of today date till end date ...... green+orange+red

    so.. if we are in 15/07 --> we want to see.. green.. orange.. and red.. because are 3 days till the end of date.. red color should appear.. 83% would be correct.. if we have 2 days till the end date...

    so. if we are in 9/07--> i'm not sure why es orange.. because time is ended.. all the progress bar should show.. and the three colors in the progress bar.. and didn´t understand why is 33% maybe should negative because end date is older than today..

    why the bar doesn´t show the 3 colors.. ??
     
  20. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    All the code I've given you just creates a single color, I didn't realize you wanted different colors.

    In Bootstrap, if you want multiple colors, you can build a "stacked" bar, see:

    https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=stacked-progress-bar
    https://getbootstrap.com/docs/4.1/components/progress/

    (Bootstrap v4 calls them "multiple")

    ... which involves calculating the percentage for each of the three sections.

    I'm not very familiar with UIKit, but from the documentation I can find:

    https://getuikit.com/v2/docs/progress.html

    ... it doesn't look like they support "stacked" progress bars like that.

    Do you have any examples of a UIKit site which shows stacked progress bars?

    -- hugh
     

Share This Page