JSFiddle - React, Tailwind, and code Playground

by Luiz Silva

HTML

<div>Nome: <input type="text" id="nome"/></div>
<div>Data: <input type="date" id="data"/></div>
<button id="enviar">Enviar</button> 
<hr/>
PendĂŞncias: 
<div id="pendencias"></div>
<hr/>
<button id="processar">Processar</button>

JavaScript

var submitQueue = (function() {
  var key = "my-form-queue";
  
  function fetchQueue() {
  	var storedQueue = localStorage.getItem(key);
    console.log('Recuperando... ', storedQueue);
    return storedQueue === null ? [] : JSON.parse(storedQueue);
  }
  function saveQueue(queue) {
    var serializedQueue = JSON.stringify(queue);
    console.log('Armazenando... ', serializedQueue);
  	localStorage.setItem(key, serializedQueue);
  }
  
	return {
    push: function(obj) {
     	var queue = fetchQueue();
      queue.push(obj);
      saveQueue(queue);
    },
    take: function() {
     	var queue = fetchQueue();
      var first = queue.shift();
      saveQueue(queue);
      return first;
    },
    peek: function() {
    	return fetchQueue();
    }
  }
})();

function exibirPendencias() {
	var pendencias = document.querySelector('#pendencias');
  var itensPendentes = submitQueue.peek();
  var html = '<ol>';
  itensPendentes.forEach(function(item) {
  	html += '<li>Nome: ' + item.name + ', Data: ' +  item.date + '</li>';
  });
  pendencias.innerHTML = html + '</ol>';
}
exibirPendencias();

document.querySelector('#enviar').addEventListener('click', function() {
	var nome = document.querySelector('#nome').value;
	var data = document.querySelector('#data').value;
  if (nome && data) {
  	submitQueue.push({ name: nome, date: data });
  }
  exibirPendencias();
});

document.querySelector('#processar').addEventListener('click', function() {
	var proximoItem = submitQueue.take();
  alert("Enviando " + proximoItem.name + " / " + proximoItem.date);
  exibirPendencias();
});