foreverpyrite/screw-bardo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewritten to use TailwindCSS and HTMX 🔥

Browse Source
This commit is contained in:
ForeverPyrite
2025-05-08 01:35:18 -04:00
parent 14b320bbde
commit b5a2b4e6d1
19 changed files with 590 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
app/website/static/script.js
View File

@@ -1,88 +1,71 @@
document.addEventListener("DOMContentLoaded", () => {
const responseArea = document.getElementById('response-area');
const responseSection = document.getElementById('response-section');
const submitButton = document.getElementById('submit');
const urlForm = document.getElementById('url-form');
const urlBox = document.getElementById('url_box');
urlForm.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form from submitting the traditional way
const url = urlBox.value.trim();
if (!url) {
responseArea.innerText = 'Please enter a URL.';
return;
}
// Clear the input and update UI
urlBox.value = "";
submitButton.disabled = true;
responseArea.innerText = 'Processing...';
// Process the URL
fetch('/process_url', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ url: url })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(text => {
if (text === "Processing started. Check /stream_output for updates.") {
streamOutput(responseArea);
} else {
responseArea.innerText = text;
submitButton.disabled = false;
}
})
.catch(error => {
console.error('Error processing URL:', error);
responseArea.innerText = 'Error processing URL: ' + error.message;
submitButton.disabled = false;
});
});
function streamOutput(responseArea) {
// Fetch the streaming output
fetch('/stream_output')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
responseArea.innerHTML = "";
function readStream() {
reader.read().then(({ done, value }) => {
if (done) {
submitButton.disabled = false;
return;
}
const chunk = decoder.decode(value, { stream: true });
responseArea.innerHTML += chunk;
responseSection.scrollTop = responseSection.scrollHeight
readStream();
}).catch(error => {
console.error('Error reading stream:', error);
responseArea.innerText = 'Error reading stream: ' + error.message;
submitButton.disabled = false;
});
}
readStream();
})
.catch(error => {
console.error('Error fetching stream:', error);
responseArea.innerText = 'Error fetching stream: ' + error.message;
submitButton.disabled = false;
});
}
});
document.addEventListener("DOMContentLoaded", () => {
const responseArea = document.getElementById('response-area');
const responseSection = document.getElementById('response-section');
const submitButton = document.getElementById('submit');
const urlBox = document.getElementById('url_box');
// Before sending HTMX request, prepare UI and handle empty input
document.body.addEventListener('htmx:beforeRequest', function(evt) {
if (evt.detail.elt.id === 'url-form') {
const url = urlBox.value.trim();
if (!url) {
evt.detail.shouldCancel = true;
responseArea.innerText = 'Please enter a URL.';
return;
}
urlBox.value = '';
submitButton.disabled = true;
responseArea.innerText = 'Processing...';
}
});
document.body.addEventListener('htmx:afterRequest', function(evt) {
if (evt.detail.elt.id === 'url-form') {
const text = evt.detail.xhr.responseText.trim();
if (text === "Processing started. Check /stream_output for updates.") {
streamOutput(responseArea, responseSection, submitButton);
} else {
responseArea.innerText = text;
submitButton.disabled = false;
}
}
});
function streamOutput(responseArea, responseSection, submitButton) {
// Fetch the streaming output
fetch('/stream_output')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
responseArea.innerHTML = "";
function readStream() {
reader.read().then(({ done, value }) => {
if (done) {
submitButton.disabled = false;
return;
}
const chunk = decoder.decode(value, { stream: true });
responseArea.innerHTML += chunk;
responseSection.scrollTop = responseSection.scrollHeight;
readStream();
}).catch(error => {
console.error('Error reading stream:', error);
responseArea.innerText = 'Error reading stream: ' + error.message;
submitButton.disabled = false;
});
}
readStream();
})
.catch(error => {
console.error('Error fetching stream:', error);
responseArea.innerText = 'Error fetching stream: ' + error.message;
submitButton.disabled = false;
});
}
});