shmup/clarc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add error handling and loading state to instructions modal

Browse source
This commit is contained in:
Jared Miller 2026-01-28 13:20:10 -05:00
parent dcc6a89b4d
commit 091979390a
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C
1 changed files with 49 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
public/index.html
View file

@ -370,6 +370,22 @@
border-color: #ff9800;
}
.modal-error {
display: none;
padding: 12px;
margin-top: 12px;
background: rgba(244, 67, 54, 0.1);
border: 1px solid #f44336;
border-radius: 6px;
color: #f44336;
font-size: 14px;
line-height: 1.5;
}
.modal-error.active {
display: block;
}
.modal-actions {
display: flex;
gap: 8px;
@ -481,6 +497,7 @@
class="modal-textarea"
id="instructionsTextarea"
placeholder="Enter your instructions..."></textarea>
<div class="modal-error" id="instructionsError"></div>
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="closeInstructionsModal()">Cancel</button>
@ -503,6 +520,7 @@
const $prompts = document.getElementById('prompts');
const $instructionsModal = document.getElementById('instructionsModal');
const $instructionsTextarea = document.getElementById('instructionsTextarea');
const $instructionsError = document.getElementById('instructionsError');
function setStatus(connected) {
if (connected) {
@ -923,6 +941,8 @@
window.openInstructionsModal = (promptId) => {
state.instructionsModalPromptId = Number(promptId);
$instructionsTextarea.value = '';
$instructionsError.classList.remove('active');
$instructionsError.textContent = '';
$instructionsModal.classList.add('active');
$instructionsTextarea.focus();
};
@ -942,26 +962,30 @@
window.submitInstructions = async () => {
const promptId = state.instructionsModalPromptId;
if (!promptId) {
console.error('No prompt ID for instructions');
$instructionsError.textContent = 'No prompt ID for instructions';
$instructionsError.classList.add('active');
return;
}
const instruction = $instructionsTextarea.value.trim();
if (!instruction) {
console.error('Please enter instructions');
$instructionsError.textContent = 'Please enter instructions';
$instructionsError.classList.add('active');
return;
}
const prompt = state.prompts.get(promptId);
if (!prompt || !prompt.json) {
console.error('Invalid prompt');
$instructionsError.textContent = 'Invalid prompt';
$instructionsError.classList.add('active');
return;
}
// Get selected option
const selected = document.querySelector(`input[name="prompt-${promptId}"]:checked`);
if (!selected) {
console.error('No option selected');
$instructionsError.textContent = 'No option selected';
$instructionsError.classList.add('active');
return;
}
@ -971,6 +995,16 @@
instruction: instruction,
};
// Clear any previous errors
$instructionsError.classList.remove('active');
$instructionsError.textContent = '';
// Get submit button and set loading state
const $submitBtn = document.querySelector('#instructionsModal .btn-submit');
const originalText = $submitBtn.textContent;
$submitBtn.disabled = true;
$submitBtn.textContent = 'Submitting...';
try {
const res = await fetch(`/api/prompts/${promptId}/answer`, {
method: 'POST',
@ -980,12 +1014,21 @@
body: JSON.stringify(response),
});
if (!res.ok) {
console.error('Failed to submit instructions:', await res.text());
const errorText = await res.text();
$instructionsError.textContent = `Failed to submit instructions: ${errorText}`;
$instructionsError.classList.add('active');
$submitBtn.disabled = false;
$submitBtn.textContent = originalText;
} else {
closeInstructionsModal();
$submitBtn.disabled = false;
$submitBtn.textContent = originalText;
}
} catch (error) {
console.error('Error submitting instructions:', error);
$instructionsError.textContent = `Error submitting instructions: ${error.message}`;
$instructionsError.classList.add('active');
$submitBtn.disabled = false;
$submitBtn.textContent = originalText;
}
};