pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 09:11:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Implement RideUpdateView and refactor search suggestion handling for improved modularity and error management

Browse Source
This commit is contained in:
pacnpal
2025-02-10 23:35:58 -05:00
parent fb6c6ec37b
commit 6034227796
2 changed files with 91 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
templates/rides/partials/search_script.html
View File

@@ -116,53 +116,10 @@ document.addEventListener('alpine:init', () => {
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
try {
const parkSlug = document.querySelector('input[name="park_slug"]')?.value;
const url = `/rides/search-suggestions/?q=${encodeURIComponent(this.searchQuery)}${parkSlug ? '&park_slug=' + parkSlug : ''}`;
const response = await fetch(url, {
signal: controller.signal,
headers: {
'X-Request-ID': requestId.toString()
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const html = await response.text();
// Only update if this is still the most recent request
if (requestId === this.lastRequestId && this.searchQuery === document.getElementById('search').value) {
const suggestionsEl = document.getElementById('search-suggestions');
suggestionsEl.innerHTML = html;
this.showSuggestions = html.trim() ? true : false;
// Set proper ARIA attributes
const searchInput = document.getElementById('search');
searchInput.setAttribute('aria-expanded', this.showSuggestions.toString());
searchInput.setAttribute('aria-controls', 'search-suggestions');
if (this.showSuggestions) {
suggestionsEl.setAttribute('role', 'listbox');
suggestionsEl.querySelectorAll('button').forEach(btn => {
btn.setAttribute('role', 'option');
});
}
}
const response = await this.fetchSuggestions(controller, requestId);
await this.handleSuggestionResponse(response, requestId);
} catch (error) {
if (error.name === 'AbortError') {
console.warn('Search suggestion request timed out or cancelled');
} else {
console.error('Error fetching suggestions:', error);
if (requestId === this.lastRequestId) {
const suggestionsEl = document.getElementById('search-suggestions');
suggestionsEl.innerHTML = `
<div class="p-2 text-sm text-red-600 dark:text-red-400" role="alert">
Failed to load suggestions. Please try again.
</div>`;
this.showSuggestions = true;
}
}
this.handleSuggestionError(error, requestId);
} finally {
clearTimeout(timeoutId);
if (this.currentRequest === controller) {
@@ -171,6 +128,64 @@ document.addEventListener('alpine:init', () => {
}
},
async fetchSuggestions(controller, requestId) {
const parkSlug = document.querySelector('input[name="park_slug"]')?.value;
const url = `/rides/search-suggestions/?q=${encodeURIComponent(this.searchQuery)}${parkSlug ? '&park_slug=' + parkSlug : ''}`;
const response = await fetch(url, {
signal: controller.signal,
headers: {
'X-Request-ID': requestId.toString()
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response;
},
async handleSuggestionResponse(response, requestId) {
const html = await response.text();
if (requestId === this.lastRequestId && this.searchQuery === document.getElementById('search').value) {
const suggestionsEl = document.getElementById('search-suggestions');
suggestionsEl.innerHTML = html;
this.showSuggestions = Boolean(html.trim());
this.updateAriaAttributes(suggestionsEl);
}
},
updateAriaAttributes(suggestionsEl) {
const searchInput = document.getElementById('search');
searchInput.setAttribute('aria-expanded', this.showSuggestions.toString());
searchInput.setAttribute('aria-controls', 'search-suggestions');
if (this.showSuggestions) {
suggestionsEl.setAttribute('role', 'listbox');
suggestionsEl.querySelectorAll('button').forEach(btn => {
btn.setAttribute('role', 'option');
});
}
},
handleSuggestionError(error, requestId) {
if (error.name === 'AbortError') {
console.warn('Search suggestion request timed out or cancelled');
return;
}
console.error('Error fetching suggestions:', error);
if (requestId === this.lastRequestId) {
const suggestionsEl = document.getElementById('search-suggestions');
suggestionsEl.innerHTML = `
<div class="p-2 text-sm text-red-600 dark:text-red-400" role="alert">
Failed to load suggestions. Please try again.
</div>`;
this.showSuggestions = true;
}
},
// Handle input changes with debounce
async handleInput() {
clearTimeout(this.suggestionTimeout);
@@ -277,24 +292,6 @@ document.addEventListener('alpine:init', () => {
}
}));
});
</script>
<!-- HTMX Loading Indicator Styles -->
<style>
.htmx-indicator {
opacity: 0;
transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
opacity: 1
}
/* Enhanced Loading Indicator */
.loading-indicator {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 50;
},
performCleanup() {
@@ -324,6 +321,23 @@ document.addEventListener('alpine:init', () => {
}));
});
</script>
<!-- HTMX Loading Indicator Styles -->
<style>
.htmx-indicator {
opacity: 0;
transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
opacity: 1
}
/* Enhanced Loading Indicator */
.loading-indicator {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.5rem;