<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  <!-- jquery, popper.js, bootstrap4 beta -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
	<div>

  <!-- SPECIFY NEW CONFIG DETAILS -->
    <h2>SPECIFY NEW CONFIG DETAILS</h2>
    <form action="/newWidget" class='form' method="post">
      {% for key, value in conf_defaults.iteritems() %}
        {{key}}: 
        {% if value['datatype'] == 'text' %}
          <input type="text" name="{{key}}" value="{{value['default']}}">
        {% endif %}
        {% if value['datatype'] == 'number' %}
          <input type="number" name="{{key}}" value="{{value['default']}}" min="{{value['min']}}" max="{{value['max']}}">
        {% endif %}
        <br>
        <br>
      {% endfor %}
      <input type="submit" value="Submit">
    </form>

	</div>


<script>

  /**
   * Retrieves input data from a form and returns it as a JSON object.
   * @param  {HTMLFormControlsCollection} elements  the form elements
   * @return {Object}                               form data as an object literal
   */

  const isValidElement = element => {
    return element.name && element.value;
  };

  const formToJSON = elements => [].reduce.call(elements, (data, element) => {
    if (isValidElement(element)) {
      data[element.name] = element.value;
    }
    return data;
  }, {});

  const handleFormSubmit = event => {
    // Stop the form from submitting since we’re handling that with AJAX.
    event.preventDefault();
    // Call our function to get the form data.
    const data = formToJSON(form.elements);
    /**
    // Demo only: print the form data onscreen as a formatted JSON object.
    const dataContainer = document.getElementsByClassName('results__display')[0];
    // Use `JSON.stringify()` to make the output valid, human-readable JSON.
    dataContainer.textContent = JSON.stringify(data, null, "  ");
    // ...this is where we’d actually do something with the form data...
    **/
    var textContent = JSON.stringify(data, null, "  ");

    var request = new XMLHttpRequest();
    request.open('POST', '/newWidget', true);
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(textContent);

  };


  /*
   * This is where things actually get started. We find the form element using
   * its class name, then attach the `handleFormSubmit()` function to the
   * `submit` event.
   */
  const form = document.getElementsByClassName('form')[0];
  form.addEventListener('submit', handleFormSubmit);

</script>

</body>
</html>
