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>