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; 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 { .modal-actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
@ -481,6 +497,7 @@
class="modal-textarea" class="modal-textarea"
id="instructionsTextarea" id="instructionsTextarea"
placeholder="Enter your instructions..."></textarea> placeholder="Enter your instructions..."></textarea>
<div class="modal-error" id="instructionsError"></div>
</div> </div>
<div class="modal-actions"> <div class="modal-actions">
<button class="btn btn-secondary" onclick="closeInstructionsModal()">Cancel</button> <button class="btn btn-secondary" onclick="closeInstructionsModal()">Cancel</button>
@ -503,6 +520,7 @@
const $prompts = document.getElementById('prompts'); const $prompts = document.getElementById('prompts');
const $instructionsModal = document.getElementById('instructionsModal'); const $instructionsModal = document.getElementById('instructionsModal');
const $instructionsTextarea = document.getElementById('instructionsTextarea'); const $instructionsTextarea = document.getElementById('instructionsTextarea');
const $instructionsError = document.getElementById('instructionsError');
function setStatus(connected) { function setStatus(connected) {
if (connected) { if (connected) {
@ -923,6 +941,8 @@
window.openInstructionsModal = (promptId) => { window.openInstructionsModal = (promptId) => {
state.instructionsModalPromptId = Number(promptId); state.instructionsModalPromptId = Number(promptId);
$instructionsTextarea.value = ''; $instructionsTextarea.value = '';
$instructionsError.classList.remove('active');
$instructionsError.textContent = '';
$instructionsModal.classList.add('active'); $instructionsModal.classList.add('active');
$instructionsTextarea.focus(); $instructionsTextarea.focus();
}; };
@ -942,26 +962,30 @@
window.submitInstructions = async () => { window.submitInstructions = async () => {
const promptId = state.instructionsModalPromptId; const promptId = state.instructionsModalPromptId;
if (!promptId) { if (!promptId) {
console.error('No prompt ID for instructions'); $instructionsError.textContent = 'No prompt ID for instructions';
$instructionsError.classList.add('active');
return; return;
} }
const instruction = $instructionsTextarea.value.trim(); const instruction = $instructionsTextarea.value.trim();
if (!instruction) { if (!instruction) {
console.error('Please enter instructions'); $instructionsError.textContent = 'Please enter instructions';
$instructionsError.classList.add('active');
return; return;
} }
const prompt = state.prompts.get(promptId); const prompt = state.prompts.get(promptId);
if (!prompt || !prompt.json) { if (!prompt || !prompt.json) {
console.error('Invalid prompt'); $instructionsError.textContent = 'Invalid prompt';
$instructionsError.classList.add('active');
return; return;
} }
// Get selected option // Get selected option
const selected = document.querySelector(`input[name="prompt-${promptId}"]:checked`); const selected = document.querySelector(`input[name="prompt-${promptId}"]:checked`);
if (!selected) { if (!selected) {
console.error('No option selected'); $instructionsError.textContent = 'No option selected';
$instructionsError.classList.add('active');
return; return;
} }
@ -971,6 +995,16 @@
instruction: instruction, 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 { try {
const res = await fetch(`/api/prompts/${promptId}/answer`, { const res = await fetch(`/api/prompts/${promptId}/answer`, {
method: 'POST', method: 'POST',
@ -980,12 +1014,21 @@
body: JSON.stringify(response), body: JSON.stringify(response),
}); });
if (!res.ok) { 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 { } else {
closeInstructionsModal(); closeInstructionsModal();
$submitBtn.disabled = false;
$submitBtn.textContent = originalText;
} }
} catch (error) { } 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;
} }
}; };