|
|
<!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>
|
