mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:31:09 -05:00
12deafaa09
- Updated photo upload handling in `photo_manager.html` and `photo_upload.html` to utilize HTMX for file uploads, improving user experience and reducing reliance on Promises. - Refactored caption update and primary photo toggle methods to leverage HTMX for state updates without full page reloads. - Enhanced error handling and success notifications using HTMX events. - Replaced fetch API calls with HTMX forms in various templates, including `homepage.html`, `park_form.html`, and `roadtrip_planner.html`, to streamline AJAX interactions. - Improved search suggestion functionality in `search_script.html` by implementing HTMX for fetching suggestions, enhancing performance and user experience. - Updated designer, manufacturer, and ride model forms to handle responses with HTMX, ensuring better integration and user feedback.
93 lines
3.9 KiB
HTML
93 lines
3.9 KiB
HTML
{% load static %}
|
|
|
|
<form method="post"
|
|
class="space-y-6"
|
|
x-data="{ submitting: false }"
|
|
@submit.prevent="
|
|
if (!submitting) {
|
|
submitting = true;
|
|
const formData = new FormData($event.target);
|
|
htmx.ajax('POST', '/rides/designers/create/', {
|
|
values: Object.fromEntries(formData),
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
});
|
|
|
|
// Handle HTMX response using event listeners
|
|
document.addEventListener('htmx:afterRequest', function handleResponse(event) {
|
|
if (event.detail.pathInfo.requestPath === '/rides/designers/create/') {
|
|
document.removeEventListener('htmx:afterRequest', handleResponse);
|
|
|
|
if (event.detail.xhr.status >= 200 && event.detail.xhr.status < 300) {
|
|
const data = JSON.parse(event.detail.xhr.response);
|
|
if (typeof selectDesigner === 'function') {
|
|
selectDesigner(data.id, data.name);
|
|
}
|
|
$dispatch('close-designer-modal');
|
|
}
|
|
submitting = false;
|
|
}
|
|
});
|
|
}">
|
|
{% csrf_token %}
|
|
|
|
<div id="designer-form-notification"></div>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Name -->
|
|
<div>
|
|
<label for="designer_name" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Name *
|
|
</label>
|
|
<input type="text"
|
|
name="name"
|
|
id="designer_name"
|
|
value="{{ search_term|default:'' }}"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
required>
|
|
</div>
|
|
|
|
{% if not user.is_privileged %}
|
|
<!-- Reason and Source for non-privileged users -->
|
|
<div>
|
|
<label for="reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Reason for Addition *
|
|
</label>
|
|
<textarea name="reason"
|
|
id="reason"
|
|
class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
rows="3"
|
|
required
|
|
placeholder="Please explain why you're adding this designer and provide any relevant details."></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Source (Optional)
|
|
</label>
|
|
<input type="text"
|
|
name="source"
|
|
id="source"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="URL or reference for this information">
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-6 space-x-3">
|
|
{% if modal %}
|
|
<button type="button"
|
|
@click="$dispatch('close-designer-modal')"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
|
|
Cancel
|
|
</button>
|
|
{% endif %}
|
|
<button type="submit"
|
|
:disabled="submitting"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 dark:hover:bg-blue-500 disabled:opacity-50">
|
|
<span x-show="!submitting">Create Designer</span>
|
|
<span x-show="submitting">Creating...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|