შეტყობინება ინტერნეტთან კავშირის შესახებ Bootstrap 4 & javascript


<div class="toast" style="position: absolute; top: 25px; right: 25px;">
    <div class="toast-header">
        <i class="bi bi-wifi"></i>&nbsp;&nbsp;&nbsp;
        <strong class="mr-auto"><span class="text-success">ინტერნეტთან კავშირი აღდგა</span></strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        ინტერნეტი ჩართულია.
    </div>
</div>

<script>

var status = 'online';
var current_status = 'online';

function check_internet_connection()
{
    if(navigator.onLine)
    {
        status = 'online';
    }
    else
    {
        status = 'offline';
    }

    if(current_status != status)
    {
        if(status == 'online')
        {
            $('i.bi').addClass('bi-wifi');
            $('i.bi').removeClass('bi-wifi-off');
            $('.mr-auto').html("<span class='text-success'>ინტერნეტთან კავშირი აღდგა</span>");
            $('.toast-body').text('ინტერნეტი ჩართულია.');
        }
        else
        {
            $('i.bi').addClass('bi-wifi-off');
            $('i.bi').removeClass('bi-wifi');
            $('.mr-auto').html("<span class='text-danger'>ინტერნეტთან კავშირი განწყდა</span>");
            $('.toast-body').text('შეამოწმეთ შეერთება.')
        }

        current_status = status;

        $('.toast').toast({
            autohide: false
        });

        $('.toast').toast('show');
    }
}

check_internet_connection();

setInterval(function(){
    check_internet_connection();
}, 1000);

</script>
    ინტერნეტთან კავშირი აღდგა
ინტერნეტი ჩართულია.