You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.8 KiB
HTML
97 lines
2.8 KiB
HTML
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<style>
|
||
|
|
[data-message] {
|
||
|
|
display: none;
|
||
|
|
font-size: var(--font-size-smaller);
|
||
|
|
line-height: var(--line-height--smaller);
|
||
|
|
font-style: italic;
|
||
|
|
margin: var(--line-height--smaller) 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-message][data-active] {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Grafting a tree</h1>
|
||
|
|
<p>
|
||
|
|
<form action="{{ BASEURL }}/graft" method="POST">
|
||
|
|
Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="4" /> years.
|
||
|
|
<button type="submit">Graft</button>
|
||
|
|
</form>
|
||
|
|
</p>
|
||
|
|
<p data-message="working">
|
||
|
|
Grafting your tree. This might take a while.
|
||
|
|
</p>
|
||
|
|
<p data-message="error">
|
||
|
|
Something went wrong.
|
||
|
|
</p>
|
||
|
|
<script>
|
||
|
|
function getFilename (headers, fallback) {
|
||
|
|
if (headers.has('Content-Disposition')) {
|
||
|
|
header = headers.get('Content-Disposition')
|
||
|
|
matches = header.match(/filename="(.+)"/)
|
||
|
|
|
||
|
|
if (matches.length == 2) {
|
||
|
|
return matches[1]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return fallback;
|
||
|
|
}
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
if (fetch) {
|
||
|
|
var form = document.querySelector('form'),
|
||
|
|
button = form.querySelector('button'),
|
||
|
|
messageWorking = document.querySelector('[data-message="working"]'),
|
||
|
|
messageError = document.querySelector('[data-message="error"]');
|
||
|
|
|
||
|
|
form.addEventListener('submit', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
button.disabled = true;
|
||
|
|
delete messageError.dataset.active;
|
||
|
|
messageWorking.dataset.active = true;
|
||
|
|
const data = new FormData(form);
|
||
|
|
|
||
|
|
fetch(form.action, {
|
||
|
|
method: "POST",
|
||
|
|
body: data
|
||
|
|
}).then(function (r) {
|
||
|
|
console.log(r);
|
||
|
|
r.blob().then(function (blob) {
|
||
|
|
var filename = getFilename(r.headers, 'Grafted-tree.pdf');
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.setAttribute('href', URL.createObjectURL(blob));
|
||
|
|
a.setAttribute('download', filename);
|
||
|
|
|
||
|
|
if (document.createEvent) {
|
||
|
|
const event = document.createEvent('MouseEvents');
|
||
|
|
event.initEvent('click', true, true);
|
||
|
|
a.dispatchEvent(event);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
a.click();
|
||
|
|
}
|
||
|
|
delete messageWorking.dataset.active;
|
||
|
|
button.disabled = false;
|
||
|
|
});
|
||
|
|
}).catch(function() {
|
||
|
|
delete messageWorking.dataset.active;
|
||
|
|
messageError.dataset.active = true;
|
||
|
|
button.disabled = false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|