105 lines
4.1 KiB
HTML
105 lines
4.1 KiB
HTML
{% extends 'index.html' %}
|
|
{% block content %}
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form id='manage_form' method="POST">
|
|
<div class="form-group">
|
|
<select class="form-control" name="participant" id="participant">
|
|
<option>--</option>
|
|
{% for p in part_keys %}
|
|
<option>{{ p }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div id="main-div">
|
|
<div class="form-group">
|
|
<label for="number">Number:</label>
|
|
<br>
|
|
<input id="number" name="number" type="number" value="1" min="1" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="age">Age:</label>
|
|
<br>
|
|
<input id="age" name="age" type="number" value="18" max="99" min="18" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Gender:</label>
|
|
<br>
|
|
<select class="form-control" name="gender" id="gender">
|
|
<option>Male</option>
|
|
<option>Female</option>
|
|
<option>Other</option>
|
|
<option>Prefer not to say</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Handedness:</label>
|
|
<br>
|
|
<select class="form-control" name="handedness" id="handedness">
|
|
<option>Right handed</option>
|
|
<option>Left handed</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="comment">Notes:</label>
|
|
<textarea class="form-control" rows="6" id="general_notes" name="general_notes"></textarea>
|
|
</div>
|
|
<div class="form-group d-flex justify-content-center">
|
|
<button id="save" type="button" disabled class="btn btn-primary mx-3">Save</button>
|
|
<button id="delete" type="button" disabled class="btn btn-danger mx-3">Delete</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function(){
|
|
// Initialise socketio with a namespace called "main"
|
|
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');
|
|
|
|
$('#main-div').find('input, textarea, button, select').attr('disabled','disabled');
|
|
$('#participant').on('change', function() {
|
|
if(this.value != '--') {
|
|
$('#save').removeAttr('disabled')
|
|
$('#delete').removeAttr('disabled')
|
|
$('#main-div').find('input, textarea, button, select').removeAttr('disabled');
|
|
socket.emit("get_part_info", this.value);
|
|
}
|
|
else {
|
|
$('#save').attr('disabled','disabled');
|
|
$('#delete').attr('disabled','disabled');
|
|
$('#main-div').find('input, textarea, button, select').attr('disabled','disabled');
|
|
}
|
|
});
|
|
|
|
$('#save').click(function(event) {
|
|
var form_data = {
|
|
number: $('#number').val(),
|
|
age: $('#age').val(),
|
|
gender: $('#gender').val(),
|
|
handedness: $('#handedness').val(),
|
|
general_notes: $('#general_notes').val()
|
|
}
|
|
socket.emit('update_participant_info', form_data);
|
|
});
|
|
|
|
$('#delete').click(function(event) {
|
|
var r = confirm("Are you sure you want to delete the participant permenantly?");
|
|
if (r == true) {
|
|
socket.emit("delete_participant", $('#participant').val());
|
|
$("#participant option:selected").remove();
|
|
$('#main-div').find('input, textarea, button, select').attr('disabled','disabled');
|
|
}
|
|
});
|
|
|
|
socket.on('part_info', function(msg) {
|
|
for(var key in msg) {
|
|
$('#'+key).val(msg[key]);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|