JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<div class="linha">
  <label for="filtros">Filtros:</label>
  <select id="filtros">
    <option value="0">Novo Filtro</option>
  </select>  
</div>
<div class="linha">
  <fieldset id="filtro">
  <label>
    Time A:
    <input id="timeA" type="text" list="times" />
  </label>
  x
  <label>
    Time B:
    <input id="timeB" type="text" list="times" />
  </label>
  <input id="salvar" type="button" value="Salvar" />
  </fieldset>
</div>
<datalist id="times">
  <option>Ice Blood</option>
  <option>Renascitur</option>
  <option>JPHS</option>
  <option>Fitnns</option>
</datalist>

CSS

.linha {
  margin-bottom: 5px;
}

fieldset {
  padding: 0px;
  margin: 0px;
  border: 0px none transparent;
}

JavaScript

var filtros = document.getElementById("filtros");
var filtro = document.getElementById("filtro");
var timeA = document.getElementById("timeA");
var timeB = document.getElementById("timeB");
var salvar = document.getElementById("salvar");
var selected = null;

var dbName = "filtros";
var db = null;
var request = indexedDB.open(dbName);

request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore(dbName, { keyPath: "id", autoIncrement: true });
  objectStore.createIndex("times", ["timeA", "timeB"], { unique: true });
  objectStore.createIndex("selected", "selected", { unique: false });
};

request.onsuccess = function(event) {
  db = request.result;
  var objectStore = db.transaction(dbName).objectStore(dbName);
  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;   
    if (cursor) {
      var option = document.createElement("option");
      option.value = cursor.key;
      option.textContent = cursor.value.timeA + " x " + cursor.value.timeB;
      filtros.appendChild(option);
      if (cursor.value.selected) {      
        selected = cursor.value;
        filtros.selectedIndex = filtros.options.length - 1;
        filtro.disabled = "disabled";
        timeA.value = selected.timeA;
        timeB.value = selected.timeB;
      }
      cursor.continue();
    }
  };
};

var atualizarFiltro = function () {
  var newSelected = parseInt(filtros.options[filtros.selectedIndex].value);
  filtro.disabled = newSelected != 0;  
  
  if (newSelected != 0) {
    var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
    var request = objectStore.get(newSelected)
    request.onsuccess = function(event) {
      var selected = request.result;
      timeA.value = selected.timeA;
      timeB.value = selected.timeB;
      selected.selected = true;
      objectStore.put(selected);
    };
  } else {
    timeA.value = "";
    timeB.value = "";
 ...