Skip to content

Commit 0e48c95

Browse files
efixlerefixler
authored
Refactor test console ahead of upcoming auth changes (#6)
- Use Alpine JS to submit form - Replace iframe with div - Update CSS box model
1 parent 968f80e commit 0e48c95

File tree

1 file changed

+87
-66
lines changed

1 file changed

+87
-66
lines changed

‎internal/server/templates/index.html

Lines changed: 87 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,92 +4,113 @@
44
<meta charset="utf-8" />
55
<title>scrape</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
78
<style>
9+
body, html {
10+
margin: 0;
11+
padding: 0;
12+
height: 100vh;
13+
}
14+
.page-container {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 0.6rem;
18+
box-sizing: border-box;
19+
height: 100%;
20+
padding: 0.6rem;
21+
}
22+
.controls-container {
23+
background-color: #fff;
24+
box-sizing: border-box;
25+
}
26+
.response-container {
27+
width: 100%;
28+
min-width: 768px;
29+
flex: 1;
30+
overflow: auto;
31+
border: 0.1rem inset #ccc;
32+
padding-block: 0.2rem;
33+
padding-inline: 0.4rem;
34+
box-sizing: border-box;
35+
user-select: text;
36+
}
37+
pre {
38+
white-space: pre-wrap;
39+
width: 100%;
40+
}
841
label {
942
display: block;
10-
font: 1rem 'Verdana'
43+
font-family: Verdana, Arial, Helvetica, sans-serif;
44+
font-size: 1.0rem;
1145
}
1246
input,
1347
label {
1448
margin: 0.2rem 0;
1549
}
16-
.data-iframe {
17-
position: relative;
18-
top: 16px;
19-
width: 98%;
20-
min-width: 768px;
21-
height: calc(100vh - 108px);
22-
}
2350
</style>
2451
</head>
2552
<body>
26-
<p>
27-
<form id="urlForm" action="/extract" method="POST" name="scrape" target="data-iframe">
53+
<div class="page-container">
54+
<div class="controls-container">
55+
<form x-data="formHandler" @submit.prevent="handleSubmit">
2856
<label for="url">Enter a URL:</label>
29-
<input type="submit" value="Hit It">
30-
<input type="url" name="url" id="url" value="https://" size="96" maxlength="200" pattern="https?://.*" required title="URL">
31-
<select title="URL Type" id="actionSelect" onchange="updateFormAction()">
57+
<select title="URL Type" x-model="formAction">
3258
<option value="/extract">Page</option>
3359
<option value="/extract/headless">Headless</option>
3460
<option value="/feed">Feed</option>
3561
</select>
36-
<input type="hidden" name="token" value="{{AuthToken}}">
62+
<input type="url" name="url" id="url" value="https://" size="96" maxlength="200" pattern="https?://.*" required title="URL">
63+
<input type="submit" value="Hit It">
64+
<!-- <label for="token">Token:</label> -->
65+
<input type="hidden" name="token" size="101" maxlength="255" value="{{AuthToken}}" placeholder="Enter your access token">
3766
<input type="hidden" name="pp" value="1">
3867
</form>
39-
</p>
40-
<script>
41-
function updateFormAction() {
42-
var selected = document.getElementById("actionSelect").value;
43-
document.getElementById("urlForm").action = selected;
44-
}
45-
</script>
68+
</div><!-- controls-container -->
69+
<div class="response-container">
70+
<pre x-ref="responseContent" id="responseContent"></pre>
71+
</div>
72+
</div><!-- page-container -->
4673
<script type="text/javascript">
47-
document.addEventListener('DOMContentLoaded', function() {
48-
const iframe = document.getElementById('data');
49-
iframe.contentDocument.body.innerHTML = '';
50-
const preElement = document.createElement('pre');
51-
preElement.style.whiteSpace = 'pre-wrap';
52-
preElement.style.width = '100%';
53-
iframe.contentDocument.body.appendChild(preElement);
54-
const form = document.getElementById('urlForm');
55-
form.addEventListener('submit', async function(event) {
56-
event.preventDefault();
57-
const action = form.action;
58-
const headers = new Headers();
59-
const token = form.token.value;
60-
if (token) {
61-
headers.append('Authorization', `Bearer ${token}`);
62-
}
63-
const formData = new FormData(form);
64-
formData.delete('token');
65-
try {
66-
const response = await fetch(action, {
67-
method: 'POST',
68-
headers: headers,
69-
body: formData
70-
})
71-
if (response.ok) {
72-
const json = await response.json();
73-
const jsonStr = JSON.stringify(json, null, 2);
74-
preElement.textContent = jsonStr;
75-
} else {
76-
const text = await response.text();
77-
preElement.textContent = `Error ${response.status}:\n${text}`;
78-
throw new Error(`${response.status} - ${text}`);
74+
function formHandler() {
75+
return {
76+
formAction: '/extract',
77+
async handleSubmit(event) {
78+
const form = event.target;
79+
const headers = new Headers();
80+
const token = form.token.value;
81+
if (token) {
82+
headers.append('Authorization', `Bearer ${token}`);
83+
}
84+
const formData = new FormData(form);
85+
formData.delete('token');
86+
try {
87+
const response = await fetch(this.formAction, {
88+
method: 'POST',
89+
headers: headers,
90+
body: formData
91+
})
92+
93+
if (response.ok) {
94+
const json = await response.json();
95+
const jsonStr = JSON.stringify(json, null, 2);
96+
this.updateContent(jsonStr);
97+
} else {
98+
const text = await response.text();
99+
this.updateContent(`Error ${response.status}:\n${text}`);
100+
throw new Error(`${response.status} - ${text}`);
101+
}
102+
} catch (error) {
103+
console.error(error);
104+
}
105+
},
106+
updateContent(content) {
107+
document.getElementById('responseContent').textContent = content;
108+
// following should work but doesn't
109+
// this.$refs.responseContent.textContent = content;
79110
}
80-
} catch (error) {
81-
console.error(error);
82111
}
83-
});
84-
});
85-
</script>
86-
<div>
87-
<iframe
88-
id="data"
89-
title="Scrape Results"
90-
name="data-iframe"
91-
class="data-iframe"
92-
>
93-
</div>
112+
}
113+
</script>
114+
94115
</body>
95116
</html>

0 commit comments

Comments
 (0)