ui.js

$(function () {

  buildPage();
  chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    console.log(message);
    if (message.action == "refreshPage") buildPage();
  });
});

function showSaveMessage() {
  $("#flash").show();
  $("#flash").html("Option Saved");
  setTimeout(function () {
    $("#flash").fadeOut("slow");
  }, 1000);
}


function buildPage() {


  // Fetch manifest.json
  let extVer = null;

  fetch('manifest.json')
    .then(response => response.json())
    .then(data => {
      // Access the properties in the manifest.json file
      console.log('Version:', data.version);
      extVer = data.version;
      // You can do more with other properties as needed
      $('#version').text("Ver " + extVer);
    })
    .catch(error => console.error('Error fetching manifest.json:', error));



  chrome.storage.local.get({
    timers: [],
    idCounter: 0,
    soundType: "tts",
    notitype: "chromenoti",
    historySuggestionType: "time"
  }, function (object) {
    $("#timers > tbody:last tr.record").remove();
    for (var i = 0; i < Math.min(object.timers.length, 10); i++) {
      console.log(object.timers);
      var timer = object.timers[i];
      $("#timers > tbody:last")
        .append("<tr class='record'>"
          + "<td>" + timer.desc + "</td>"
          + "<td>" + moment(timer.currentTime).calendar() + "</td>"
          + "<td>" + moment(timer.notificationTime).calendar() + " (" + moment(timer.notificationTime).fromNow() + ")</td>"
          + "<td toid='" + timer.tid + "' class='remove-button " + timer.status + "'> " + timer.status + "</td>"
          + "</tr>");
      $('tr').last().addClass(timer.status);
      if (timer.status == 'ongoing') {
        $(".remove-button").last().text("Ongoing");
      } else if (timer.status == 'done') {
        $(".remove-button").last().text("Done");
      } else if (timer.status == 'snoozed') {
        $(".remove-button").last().text("Snoozed");
      } else if (timer.status == 'reached') {
        $(".remove-button").last().text("Reached");
      } else if (timer.status == 'cancelled') {
        $(".remove-button").last().text("Cancelled");
      }
    }

    $('.remove-button').click(function () {
//      if ($(this).parent().hasClass('ongoing') == false) return;
      if (confirm("To Cancel Timer? ")) {
        var curi = parseInt($(this).attr('toid'));
        console.log(curi)
        chrome.runtime.sendMessage({ action: 'clearTimeOut', dat: curi });
      }
    });

    $('#clear-button').off('click');
    $('#clear-button').on('click', function () {
      if (confirm("Sure to stop all timers?"))
        chrome.runtime.sendMessage({ action: 'clearAllTimer' });
    });
    //    $("#stats").html("<li># of timers you created: " + object.idCounter + "</li>");

    if (object.notitype == "windownoti") {
      $("input#windownoti").attr("checked", true);
    } else if (object.notitype == "chromenoti") {
      $("input#chromenoti").attr("checked", true);
    } else {
      $("input#chromenoti").attr("checked", true);
    }

    $("input#windownoti").change(function () {
      chrome.storage.local.set({ notitype: "windownoti" });
      showSaveMessage();
    });
    $("input#chromenoti").change(function () {
      chrome.storage.local.set({ notitype: "chromenoti" });
      showSaveMessage();
    });




    if (object.soundType == "tts") {
      $("input#tts").attr("checked", true);
    } else if (object.soundType == "mute") {
      $("input#mute").attr("checked", true);
    } else {
      $("input#bell").attr("checked", true);
    }

    $("input#tts").change(function () {
      chrome.storage.local.set({ soundType: "tts" });
      showSaveMessage();
    });
    $("input#mute").change(function () {
      chrome.storage.local.set({ soundType: "mute" });
      showSaveMessage();
    });
    $("input#bell").change(function () {
      chrome.storage.local.set({ soundType: "bell" });
      showSaveMessage();
    });

    if (object.historySuggestionType === "time") {
      $("input#time").attr("checked", true);
    } else {
      $("input#count").attr("checked", true);
    }

    $("input#time").change(function () {
      chrome.storage.local.set({ historySuggestionType: "time" });
      showSaveMessage();
    });
    $("input#count").change(function () {
      chrome.storage.local.set({ historySuggestionType: "count" });
      showSaveMessage();
    });


  });
  //Other refinement
  $('h2').click(function () {
    $(this).nextUntil('h2').toggle();
  });
}