Notification in Vue

Question

Notification in Vue

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have an application in vue js, which registers a task, I would like to be notified 5 minutes before the task happens, I have the following code.

    function getData(){
    let data = new Date();
    let dia = data.getDate();
      if (dia.toString().length == 1){
      dia = "0"+dia;
      }
    let mes = data.getMonth() + 1; 
      if (mes.toString().length == 1){
        mes = "0"+mes;
      }
    let ano = data.getFullYear();

    let dataFull = dia + '/' + mes + '/' + ano;

    let hora = data.getHours();
      if (hora.toString().length == 1){
        hora = "0"+hora;
      }
    let minuto = data.getMinutes();
      if (minuto.toString().length == 1){
        minuto = "0"+minuto;
      }
    let horaFull = hora + ':' + minuto;
    let horaAlarm =  hora + ':' + (minuto - 5);
    return {
      dia: dia,
      mes: mes,
      ano: ano,
      hora: hora,
      minuto: minuto,
      dataFull: dataFull,
      horaFull: horaFull,
      horaAlarm: horaAlarm
    }
}

    document.addEventListener('DOMContentLoaded', function(){
  if(Notification.permission !== 'granted')
    Notification.requestPermission(); 
});

if(getData().horaFull == getData().horaAlarm){
var notification = new Notification('Titulo teste',{
  ico: 'https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
  body: falta 5 minutos para sua tarefa
});
}

But he never falls on (if) anyone can help me ???

javascript vue.js

asked by anonymous 29.01.2018 / 13:13

2 answers

working with decimal {5,2} rails How to fill a Dropdown List with ASP MVC

score 1 · Answer 1

Well, I tested it and got interesting with a setTimeout, it's up to you to improve the usage in your code:

let time = (1000 * 100) * 5;
setTimeout(()=>{
   let notification = new Notification('Titulo teste',{
   body: falta 5 minutos para sua tarefa
 });
}, time)

score 1 · Answer 2

You can create the notification immediately, but schedule it for a moment in the future.

var addNotification = document.getElementById("add_notification");
addNotification.addEventListener("click", function (event) {
  Notification.requestPermission().then(function(permission) { 
    if (permission === "granted") {
      var now = new Date()
      var data = new Date()
      data.setSeconds(now.getSeconds() + 30)
      var options = {
        body: 'Mensagem programada para as ${data} e criada as ${now}',
        timestamp: data
      }
      new Notification('Notificação',options);
    }
  });
})

<button id="add_notification">Add Notificação</button>

If you really need to control the app notification scheduling, I suggest you do the following:

Add Vuex to your application

Add a module for notifications

When loading the module, look for the Storage notifications, overdue alerts and schedule the future through window.setTimeout. PouchDb might come in handy.

Create an action to add the notification to the state and register it in the storage, and finally, its agent with the help of window.setTimeout.

Once the notification is executed, remember to remove them from state and storage.