mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-22 17:31:10 -05:00
9ee380c3ea
- Add HTMX-powered filtering with instant updates - Add smooth transitions and loading states - Improve visual hierarchy and styling - Add review notes functionality - Add confirmation dialogs for actions - Make navigation sticky - Add hover effects and visual feedback - Improve dark mode support
85 lines
3.5 KiB
HTML
85 lines
3.5 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
|
|
}
|
|
}).then(response => {
|
|
if (response.detail) {
|
|
const data = JSON.parse(response.detail.xhr.response);
|
|
selectDesigner(data.id, data.name);
|
|
}
|
|
$dispatch('close-designer-modal');
|
|
}).finally(() => {
|
|
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>
|