|
|
|
|
@ -1,8 +1,8 @@
|
|
|
|
|
{% extends 'common/master.html' %}
|
|
|
|
|
{% extends 'common/plain.html' %}
|
|
|
|
|
{% block body %}
|
|
|
|
|
<h1>Type In Your Code</h1>
|
|
|
|
|
{{ form.non_field_errors }}
|
|
|
|
|
<form action="{% url 'download' %}" method="POST">
|
|
|
|
|
<form action="{% url 'download' %}" method="POST" id="codeform">
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
<p>
|
|
|
|
|
<label for="{{ form.address.id_for_label }}" class="sr-only">{{ form.address.label }}</label>
|
|
|
|
|
@ -19,6 +19,7 @@
|
|
|
|
|
<label for="{{ form.email.id_for_label }}" class="sr-only">{{ form.email.label }}</label>
|
|
|
|
|
{{ form.email }}
|
|
|
|
|
</p>
|
|
|
|
|
<div id="statusbox" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
|
<input type="submit" value="Submit">
|
|
|
|
|
</form>
|
|
|
|
|
<style>
|
|
|
|
|
@ -34,14 +35,114 @@
|
|
|
|
|
right: 0;
|
|
|
|
|
background-color: white;
|
|
|
|
|
}
|
|
|
|
|
#addrlist :hover {
|
|
|
|
|
#addrlist li {
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
}
|
|
|
|
|
#addrlist li:hover,
|
|
|
|
|
#addrlist li.fake-hover {
|
|
|
|
|
background-color: lightgrey;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
background-color: black;
|
|
|
|
|
}
|
|
|
|
|
h1 {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
input {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
input[type=submit] {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
const ADDR_BOX = document.getElementById('{{ form.address.id_for_label }}');
|
|
|
|
|
const SEARCH_URL = '/download/search/';
|
|
|
|
|
const ADDR_LIST = document.getElementById('addrlist');
|
|
|
|
|
const STATUS_BOX = document.getElementById('statusbox');
|
|
|
|
|
const FORM = document.getElementById("codeform");
|
|
|
|
|
const SUBMIT_BUTTON = FORM.querySelector("input[type=submit]");
|
|
|
|
|
// from W3CSchools
|
|
|
|
|
function getCookie(cname) {
|
|
|
|
|
var name = cname + "=";
|
|
|
|
|
var decodedCookie = decodeURIComponent(document.cookie);
|
|
|
|
|
var ca = decodedCookie.split(';');
|
|
|
|
|
for(var i = 0; i <ca.length; i++) {
|
|
|
|
|
var c = ca[i];
|
|
|
|
|
while (c.charAt(0) == ' ') {
|
|
|
|
|
c = c.substring(1);
|
|
|
|
|
}
|
|
|
|
|
if (c.indexOf(name) == 0) {
|
|
|
|
|
return c.substring(name.length, c.length);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return "";
|
|
|
|
|
}
|
|
|
|
|
// form MDN
|
|
|
|
|
|
|
|
|
|
function sendData( data ) {
|
|
|
|
|
const XHR = new XMLHttpRequest(),
|
|
|
|
|
FD = new FormData(FORM);
|
|
|
|
|
|
|
|
|
|
// Push our data into our FormData object
|
|
|
|
|
for( name in data ) {
|
|
|
|
|
FD.append( name, data[ name ] );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Define what happens on successful data submission
|
|
|
|
|
XHR.addEventListener( 'load', function( event ) {
|
|
|
|
|
resp = JSON.parse(event.target.response);
|
|
|
|
|
if (resp.status === 'OK') {
|
|
|
|
|
STATUS_BOX.style.color = 'white';
|
|
|
|
|
STATUS_BOX.innerText = 'Success! Please check your inbox.';
|
|
|
|
|
SUBMIT_BUTTON.value = 'Success!';
|
|
|
|
|
} else {
|
|
|
|
|
STATUS_BOX.innerText = 'Error: ' + resp.message;
|
|
|
|
|
STATUS_BOX.style.color = 'red';
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
|
|
// Define what happens in case of error
|
|
|
|
|
XHR.addEventListener(' error', function( event ) {
|
|
|
|
|
alert( 'Oops! Something went wrong.' );
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
|
|
// Set up our request
|
|
|
|
|
XHR.open( 'POST', "{% url 'download' %}");
|
|
|
|
|
XHR.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
|
|
|
|
|
|
|
|
|
|
// Send our FormData object; HTTP headers are set automatically
|
|
|
|
|
XHR.send( FD );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const remFakeHover = () => {
|
|
|
|
|
for (ele of ADDR_LIST.getElementsByTagName('li')) {
|
|
|
|
|
ele.classList.remove('fake-hover');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const fakeHover = (i) => {
|
|
|
|
|
remFakeHover();
|
|
|
|
|
let ele = ADDR_LIST.getElementsByTagName('li')[i];
|
|
|
|
|
ele.classList.add('fake-hover');
|
|
|
|
|
}
|
|
|
|
|
var selected_item = -1;
|
|
|
|
|
ADDR_BOX.onkeydown = async (e) => {
|
|
|
|
|
console.log(selected_item);
|
|
|
|
|
let update = false;
|
|
|
|
|
if (e.key === 'ArrowDown') {
|
|
|
|
|
selected_item++;
|
|
|
|
|
update = true;
|
|
|
|
|
} else if (e.key === 'ArrowUp') {
|
|
|
|
|
selected_item--;
|
|
|
|
|
update = true;
|
|
|
|
|
} else if (e.key === 'Enter' || e.key === 'Space') {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
ADDR_LIST.getElementsByTagName('li')[selected_item].click();
|
|
|
|
|
}
|
|
|
|
|
if (update) {
|
|
|
|
|
fakeHover(selected_item);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
ADDR_BOX.oninput = async (e) => {
|
|
|
|
|
const ADDR_INPUT = e.target.value;
|
|
|
|
|
console.log(e.target.value);
|
|
|
|
|
@ -50,7 +151,10 @@
|
|
|
|
|
let addresses = await response.json();
|
|
|
|
|
console.log(addresses);
|
|
|
|
|
ADDR_LIST.innerHTML = '';
|
|
|
|
|
for (address of addresses) {
|
|
|
|
|
let ul = document.createElement('ul');
|
|
|
|
|
ul.classList.add('semantic');
|
|
|
|
|
for (var i = 0; i < addresses.length; i++) {
|
|
|
|
|
let address = addresses[i];
|
|
|
|
|
let li = document.createElement('li');
|
|
|
|
|
li.innerText = address.address;
|
|
|
|
|
li.onclick = function(e) {
|
|
|
|
|
@ -61,9 +165,14 @@
|
|
|
|
|
// focus on next input box; depends on layout
|
|
|
|
|
document.getElementById('{{ form.code.id_for_label }}').focus();
|
|
|
|
|
}
|
|
|
|
|
ADDR_LIST.appendChild(li);
|
|
|
|
|
ul.appendChild(li);
|
|
|
|
|
}
|
|
|
|
|
ADDR_LIST.appendChild(ul);
|
|
|
|
|
}
|
|
|
|
|
FORM.addEventListener('submit', (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
sendData();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
Tait Hoyem
3 years ago