fix - added fading for individual notifications

[balaajimuthukumar]

There was a bug where all the categories of notifications had same fading time when there is a need to display multiple notifications. Checked for linting errors

[pep8speaks]

Hello @balaajimuthukumar! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:

• In the file shopyo/shopyoapi/html.py:

Line 25:80: E501 line too long (111 > 79 characters) Line 34:17: E225 missing whitespace around operator Line 34:80: E501 line too long (89 > 79 characters) Line 35:80: E501 line too long (89 > 79 characters) Line 36:80: E501 line too long (81 > 79 characters) Line 37:80: E501 line too long (81 > 79 characters)

Comment last updated at 2021-02-14 05:07:39 UTC

[Abdur-rahmaanJ]

@balaajimuthukumar assign a random number to the id then use same in script

[balaajimuthukumar]

@Abdur-rahmaanJ Sorry bro my commit was not clear I assigned the category of notification as the id for all the notification elements. Is it mandatory to use numerical id to identify the elements or is it just a suggestion for my comment?

[rehmanis]

@balaajimuthukumar what I meant in https://github.com/Abdur-rahmaanJ/shopyo/pull/328 was that each alert (regardless of type) should have the same duration for fading but the start time could be different. For example, you login and you see a notification and so the timer starts and reaches 3 secs, then another notification comes at t = 3 secs. Now this new notification should also run for the same duration (example for 5 secs i.e should run until t = 8 sec) but it will only run for 2 secs so both notification will fade at t=5 regardless. Its not a big deal since we rarely have such instances. The correct way would be to have a unique id for each alert on a given route but that might be hard to do with the way we have currently set up notifications.

[Abdur-rahmaanJ]

@balaajimuthukumar you might have many many akerts on one page. assigning unique ids ensures that each one fades in each own time else all fade at once

can you also add a keyword argument named fade. if true script code included else no

[balaajimuthukumar]

@Abdur-rahmaanJ sure thing bro ill do it! This is the current code. Currently, I am facing linting and merge conflicts issues while commiting so i'll come to it after that issue! Could use some help meanwhile i'll try to check what's going on.

''' python def notify(message, alert_type="primary"): """ Used with flash flash(notify('blabla'))

Parameters
----------
message: str
    message to be displayed

alert_type: str
    bootstrap class

Returns
-------
None
"""
alert = """
<div id={alert_type} class="shopyo-alert alert alert-{alert_type} alert-dismissible fade show" role="alert"
    style="opacity: 0.98;">
  {message}

  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
""".format(message=message, alert_type=alert_type)
scriptFade ="""<script>setTimeout(function() {$('#success').fadeOut('fast');}, 2000);
</script><script>setTimeout(function() {$('#danger').fadeOut(7000);}, 7000);</script>
<script>setTimeout(function() {$('#warning').fadeOut(8500);}, 8500);</script>
<script>setTimeout(function() {$('#info').fadeOut(8500);}, 8500);</script>"""

return alert+scriptFade'''

[Abdur-rahmaanJ]

def notify(message, fade=False, fadetime=5000, alert_type="primary"):
    """
    Used with flash
        flash(notify('blabla'))

    Parameters
    ----------
    message: str
        message to be displayed

    alert_type: str
        bootstrap class

    Returns
    -------
    None
    """
    alert = """
    <div class="shopyo-alert alert alert-{alert_type} alert-dismissible fade show" role="alert"
        style="opacity: 0.98;" id="alert-id-{alert_id}">
      {message}

      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    """.format(
        message=message, alert_type=alert_type, alert_id=random_string_func_to_be_defined
    )

    script_fade = """ 
    <script>
          setTimeout(function() {
            $('#flashed-messages').fadeOut('fast');
        }, {}); // <-- time in milliseconds (5 secs)
    </script>
    """.format(fadetime)
    if fade:
        return alert + script_fade
    else:
        return alert

something like that

[balaajimuthukumar]

@Abdur-rahmaanJ sure bro thank you!