Small Nest.js-based project
You can not 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.6 KiB

<html>
<head>
<script>
const postData = async (url, data) => {
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
}
const wrap = (asyncFunction) => (e) => {
e.preventDefault()
asyncFunction().catch((err) => alert(err))
}
const submitJob = wrap(async () => {
document.getElementById('inputJobId').value = ''
const response = await postData('/screenshots', {
pageUrl: document.getElementById('inputPageUrl').value,
imageType: document.getElementById('inputImageType').value,
})
if (!response.ok) {
alert(`${response.status} ${response.statusText}`)
return
}
const { jobId } = await response.json()
document.getElementById('inputJobId').value = jobId
})
const checkJob = wrap(async () => {
document.getElementById('imageJobResult').src = 'about:blank'
const response = await fetch(`/screenshots/${document.getElementById('inputJobId').value}`)
if (!response.ok) {
alert(`${response.status} ${response.statusText}`)
return
}
const { status } = await response.json()
document.getElementById('placeholderJobStatus').innerText = status
if (status === 'completed') {
document.getElementById('imageJobResult').src = `/screenshots/${document.getElementById('inputJobId').value}/result`
}
})
</script>
</head>
<body>
<h3>Create a new job</h3>
<form action="#" onsubmit="submitJob(event)">
<table>
<tr>
<td>URL</td>
<td><input type="text" name="pageUrl" value="https://suricrasia.online/" id="inputPageUrl"></td>
</tr>
<tr>
<td>Type</td>
<td><input type="text" name="imageType" value="png" id="inputImageType"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit"></td>
</tr>
</table>
</form>
<h3>Check job status</h3>
<form action="#" onsubmit="checkJob(event)">
<table>
<tr>
<td>Job ID</td>
<td><input type="text" name="jobId" id="inputJobId"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit"></td>
</tr>
<tr>
<td>Status</td>
<td><span id="placeholderJobStatus"></span></td>
</tr>
<tr>
<td>Result</td>
<td><img src="about:blank" id="imageJobResult"></td>
</tr>
</table>
</form>
</body>
</html>