implemented single-page application for manual testing

2 years ago · 581d21d316
parent a586a0fbc7
commit 581d21d316
2 changed files with 97 additions and 0 deletions
--- a/client/index.html
+++ b/client/index.html
@ -1,3 +1,4 @@
 <p><a href="/api">API docs</a></p>
 <p><a href="/api-json">OpenAPI specification</a></p>
 <p><a href="/spa">Single-page application</a></p>
 <p><a href="/simpleform">Simple form</a></p>
--- a/client/spa/index.html
+++ b/client/spa/index.html
@ -0,0 +1,96 @@
 <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>