checklist.html

checklist.html

<div>
  <div>function(type, change) {</div>
  <div>
    <textarea id='code' style="width: 49%; height: 300px;"></textarea>
    <textarea id='changes' style="width: 49%; height: 300px;"></textarea>
  </div>
  <div>}</div>
  <input id="go" type="submit" onClick="go()" />
  <div id="checklist"></div>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>

    function go() {
      var code = $('#code').val();
      var changes = $('#changes').val();
      checklist = {};
      localStorage.setItem('code', code);
      localStorage.setItem('changes', changes);
      localStorage.setItem('checklist', JSON.stringify(checklist));
      render();
    }
    function render() {
      var code = localStorage.getItem("code");
      var changes = localStorage.getItem("changes");
      var bootChecklist = localStorage.getItem("checklist");
      $('#code').val(code);
      $('#changes').val(changes);
      var checklist = JSON.parse(bootChecklist || "{}");
      console.log(checklist);

      all = changes.split("\n").map(function(change) {
        var type = change.match(/^\S+/);
        if (!type) { return []; }

        var ret = {}
        var codestr = "var res = " + code + "[" + JSON.stringify(type[0].split()[0]) + "]; res";
        ret[change] = eval(codestr);
        return ret;
      }).filter(function(res) { return res.length != 0; });

      var c = $('#checklist')
      c.html(''); 
      all.map(function(obj, i) {
        var key = Object.keys(obj)[0]
        c.append($('<p>' + key + '</p>')); 
        (obj[key] || []).map(function(check, j) {
          var checked = !!checklist['' + i + '_' + j]
          var checkname = "checkboxNumber_" + i + '_' + j;
          var div = $('<div>');
          div.append($('<input onClick="checkChanged(this)" id="' + checkname + '" type="checkbox" /><label for="' + checkname +'">' + check + '</label>'));
          $(div).find('input').prop('checked', checked);
          c.append(div)
        }); 
      })
    }
    function checkChanged(e) {
      var checks = JSON.parse(localStorage.getItem("checklist"));
      var parts = $(e).attr('id').split('_')
      checks["" + parts[1] + '_' + parts[2]] = $(e).is(':checked');

      localStorage.setItem('checklist', JSON.stringify(checks));
      console.log(checks);
    } 
    render();
  </script>
</div>