laser/side-by-side.html

## side-by-side.html
<html>
  <head>
    <title>Side by Side Tool</title>
  </head>
  <body>
    <div id="foo">
      <label>
        <select name="outputType">
          <option value="gen">Gen</option>
          <option value="comp">Comp</option>
        </select>
      </label>
      <label>
        Design Names
        <input type="text" name="designNames">
      </label>
      <label>
        Install Id
        <input type="text" name="installId">
      </label>
      <label>
        Account Plan Id
        <input type="text" name="accountPlanId">
      </label>
      <button id="submit">Submit</button>
    </div>
    <script>
      (function() {
        document.getElementById("submit").addEventListener("click", preventDefaultAndThen(makeRequest));

        function preventDefaultAndThen(f) {
          return function(e) {
            e.preventDefault();
            f();
          }
        }

        function makeRequest() {
          var httpRequest = new XMLHttpRequest();

          httpRequest.onreadystatechange = function() {
            console.log(arguments);
            debugger;
          }

          httpRequest.open("GET", "/omc/dynamicDesignImages/sideBySideJson.ipv?");
          httpRequest.send();
        }

        function onXhrReadyStateChange(xhr) {
          debugger;
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              console.log(xhr.responseText);
            } else {
              console.log("There was a problem with the request.");
            }
          }
        }
      }())
    </script>
  </body>
</html>
	<html>
	<head>
	<title>Side by Side Tool</title>
	</head>
	<body>
	<div id="foo">
	<label>
	<select name="outputType">
	<option value="gen">Gen</option>
	<option value="comp">Comp</option>
	</select>
	</label>
	<label>
	Design Names
	<input type="text" name="designNames">
	</label>
	<label>
	Install Id
	<input type="text" name="installId">
	</label>
	<label>
	Account Plan Id
	<input type="text" name="accountPlanId">
	</label>
	<button id="submit">Submit</button>
	</div>
	<script>
	(function() {
	document.getElementById("submit").addEventListener("click", preventDefaultAndThen(makeRequest));

	function preventDefaultAndThen(f) {
	return function(e) {
	e.preventDefault();
	f();
	}
	}

	function makeRequest() {
	var httpRequest = new XMLHttpRequest();

	httpRequest.onreadystatechange = function() {
	console.log(arguments);
	debugger;
	}

	httpRequest.open("GET", "/omc/dynamicDesignImages/sideBySideJson.ipv?");
	httpRequest.send();
	}

	function onXhrReadyStateChange(xhr) {
	debugger;
	if (xhr.readyState === XMLHttpRequest.DONE) {
	if (xhr.status === 200) {
	console.log(xhr.responseText);
	} else {
	console.log("There was a problem with the request.");
	}
	}
	}
	}())
	</script>
	</body>
	</html>