Untitled

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/combine/npm/jszip@3/dist/jszip.min.js,npm/jquery@3"></script>
<title>Ghetto PCIO Editor</title>

<div id="tools">
  <input type="file" id="file"/><br>
  X: <input id="x"/><input type="button" value="Set!" class="set"/><br>
  Y: <input id="y"/><input type="button" value="Set!" class="set"/><br>
  <input type="button" value="Save!" id="save"/>
</div>
<div id="room"></div>

<style>
  #x, #y {
    width: 50px;
  }
  #room {
    position: absolute;
    top: 0;
    left: 300px;
    width: 800px;
    height: 500px;
    border: 1px solid black;
  }
  .widget {
    position: absolute;
    background: black;
    opacity: 0.5;
  }
  .selected.widget {
    opacity: 1;
  }
  .type-board {
    background: #ccc;
    z-index: 0 !important;
  }
  .type-automationButton { background: pink }
</style>

<script>
  var zipFile;
  var widgets;

  var defaultSizes = {
    automationButton: [ 75, 75 ]
  };
  $("#file").on("change", function(evt) {
    zipFile = evt.target.files[0];
    JSZip.loadAsync(zipFile).then(function(zip) {
      return zip.files["widgets.json"].async("text");
    }).then(function(content) {
      widgets = JSON.parse(content)
      drawWidgets(widgets);
    }, function (e) {
      console.log("error loading zip file", e);
    });
  });
  $("#room").on("click", ".widget", function() {
    if(!$(".selected").length)
      fillDetails(this);
    $(this).toggleClass("selected");
  })

  $(".set").on("click", function() {
    var field = $(this).prev().prop("id");
    $(".selected").each(function() {
      widgets[$(this).data("index")][field] = $("#" + field).val();
    });
    drawWidgets(widgets);
  });

  $("#save").on("click", function() {
    JSZip.loadAsync(zipFile).then(function(zip) {
      zip.file("widgets.json", JSON.stringify(widgets));

      zip.generateAsync({type:"base64"}).then(function (base64) {
        downloadURI("data:application/zip;base64," + base64, zipFile.name);
      }, function (e) {
        console.log("error saving zip file", e);
      });
    });
  });

  function drawWidgets(ws) {
    $("#room").empty();
    for(var i in ws) {
      var w = ws[i];
      if(w.type != "card") {
        console.log(w.type, w.x, w.y);
        var width  = w.width  || defaultSizes[w.type] && defaultSizes[w.type][0] || 40;
        var height = w.height || defaultSizes[w.type] && defaultSizes[w.type][1] || 40;
        $("#room").append("<div data-index='" + i + "' class='widget type-" + w.type + "' style='top: " + w.y/2 + "px; left: " + w.x/2 + "px; width: " + width/2 + "px; height: " + height/2 + "px; z-index: " + w.z + "'></div>");
      }
    }
  }

  function fillDetails(w) {
    $("#x").val(widgets[$(w).data("index")].x);
    $("#y").val(widgets[$(w).data("index")].y);
  }

  function downloadURI(uri, name) {
    // https://stackoverflow.com/a/15832662
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
  }
</script>