How can I pop up modal for each hour?-CodePudding

I want to show popup modal for each hour like it is starts from 10 to 6, to write logged in users report. It should works like if it is 10 o' clock popup will come and user write their report and close it. after 1 hour i.e. 11 o' clock again popup will show.

I am using laravel 7, javascript and jquery. Any of these language it is convenient for me. please help me.

this the code I used so far

** javascript code to popup modal **

setInterval(function () {
       get_task_data();
    }, 3600000);
  
    
    $.ajaxSetup({
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
    });

   function get_task_data() {
    
        $.ajax({
            url: '{{ route('project.employee.task') }}',
            type:'GET',
            data: { }
        }).done(function(data){
             $('#myModal .modal-body').append(data);
            $('#myModal').modal('show');
        });
    }

But I want to popup modal exactly 10 0' clock , 11 o' clock and so on till 6 0'clock.

Edited

I want to send 'desktop notification' for each hour "Please send your report" something like this. How can I do it?

CodePudding user response：

If you ok, you can use Window setInterval() method

How to use ?

setInterval(function(){ 
    // Call your modal popup init function here__
}, 3600000);

3600000 = 3600 seconds = 60 minute = 1 hour

Learn more about set interval Click here

Following example, code will use to show the alert popup in each one hour

setInterval(function(){ 
    alert("Hello");
}, 3600000);

Updated Code Snippet

This code will use to display popup modal exactly 10 0' clock , 11 o' clock and so on till 6 0'clock.

var currentDate = new Date(); // get your current date and time__
var curentHour = currentDate.getHours(); // get Hours of your current time__
var curentMinutes = currentDate.getMinutes(); // get minutes of your current time__

var intervalId = null;
var varCounter = 0; // count the display times, and set initial value
var displayTimes = 9; // between 10'O clock to 6'O clock modal has to display 9 times

// stop function arround 6'O clock 
var varModal = function(){
     if(varCounter < 10) {
          varCounter  ; // you can remove this code
          alert(varCounter   'time'); // you can remove this code
         
          /* your code goes here */
          
     } else {
          // stop modal duisplay after 9 times, it's mea after on 6'O clock 
          clearInterval(intervalId);
          alert('Stop will start on next day'); // you can remove this code
     }
};

/*
* display modal arround 10'O clock, 
* This function will trigger after each one hour, 
* So you have to set value 9, then only it'trigger arround 10'O clock
* -------
* If you want to trigger this modal arround 9'O clock, you have to check with value 8
*/
  
  
if(curentHour >= 9 && curentMinutes > 0){
  intervalId = setInterval(varModal, 3600000);
}

CodePudding user response：

Use an interval with something like 100/200ms delay then check if the curr minutes are 0. In order to avoid multiple calls check if the current H-m is different from the last called.

let last = null;
setInterval(function() {
  const d = new Date();
  const curr_hm = `${d.getHours()}-${d.getMinutes()}`;
  if (d.getMinutes() == 0 && curr_hm != last) {
    console.log('Do task here!');
    last = curr_hm;
  }
}, 200);