|
|
|
|
<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> </td>
|
|
|
|
|
<td><input type="submit" value="Create job"></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> </td>
|
|
|
|
|
<td><input type="submit" value="Check status / load image"></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>
|
