mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 12:11:08 -05:00
Add secret management guide, client-side performance monitoring, and search accessibility enhancements
- Introduced a comprehensive Secret Management Guide detailing best practices, secret classification, development setup, production management, rotation procedures, and emergency protocols. - Implemented a client-side performance monitoring script to track various metrics including page load performance, paint metrics, layout shifts, and memory usage. - Enhanced search accessibility with keyboard navigation support for search results, ensuring compliance with WCAG standards and improving user experience.
This commit is contained in:
pacnpal
@@ -15,7 +15,7 @@
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
<form method="post" enctype="multipart/form-data" class="space-y-6" x-data="{
|
||||
<form method="post" enctype="multipart/form-data" class="space-y-6" role="form" aria-label="{% if is_edit %}Edit ride{% else %}Add new ride{% endif %}" x-data="{
|
||||
status: '{{ form.instance.status|default:'OPERATING' }}',
|
||||
clearResults(containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
@@ -39,199 +39,146 @@
|
||||
|
||||
{% if not park %}
|
||||
{# Park Selection - Only shown when creating from global view #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Park Information</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Park Information</legend>
|
||||
<div class="space-y-4">
|
||||
<div id="park-search-container" class="relative" @click.outside="clearResults('park-search-container')">
|
||||
<label for="{{ form.park_search.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Park *
|
||||
</label>
|
||||
{{ form.park_search }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.park_search label="Park" %}
|
||||
{{ form.park }}
|
||||
<div id="park-search-results" class="relative"></div>
|
||||
<div id="park-search-results" class="relative" role="listbox" aria-label="Park search results"></div>
|
||||
{% if form.park.errors %}
|
||||
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
<div class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">
|
||||
{{ form.park.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% endif %}
|
||||
|
||||
{# Basic Information #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Basic Information</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Basic Information</legend>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="col-span-2">
|
||||
<label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Name *
|
||||
</label>
|
||||
{{ form.name }}
|
||||
{% if form.name.errors %}
|
||||
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
{{ form.name.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include 'forms/partials/form_field.html' with field=form.name label="Name" %}
|
||||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
<label for="{{ form.category.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Category *
|
||||
</label>
|
||||
{{ form.category }}
|
||||
{% if form.category.errors %}
|
||||
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
{{ form.category.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include 'forms/partials/form_field.html' with field=form.category label="Category" %}
|
||||
</div>
|
||||
|
||||
<div id="coaster-fields" class="col-span-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{# Manufacturer and Model #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Manufacturer and Model</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Manufacturer and Model</legend>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div id="manufacturer-search-container" class="relative" @click.outside="clearResults('manufacturer-search-container')">
|
||||
<label for="{{ form.manufacturer_search.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Manufacturer
|
||||
</label>
|
||||
{{ form.manufacturer_search }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.manufacturer_search label="Manufacturer" %}
|
||||
{{ form.manufacturer }}
|
||||
<div id="manufacturer-search-results" class="relative"></div>
|
||||
<div id="manufacturer-search-results" class="relative" role="listbox" aria-label="Manufacturer search results"></div>
|
||||
</div>
|
||||
|
||||
<div id="designer-search-container" class="relative" @click.outside="clearResults('designer-search-container')">
|
||||
<label for="{{ form.designer_search.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Designer
|
||||
</label>
|
||||
{{ form.designer_search }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.designer_search label="Designer" %}
|
||||
{{ form.designer }}
|
||||
<div id="designer-search-results" class="relative"></div>
|
||||
<div id="designer-search-results" class="relative" role="listbox" aria-label="Designer search results"></div>
|
||||
</div>
|
||||
|
||||
<div id="ride-model-search-container" class="relative col-span-2" @click.outside="clearResults('ride-model-search-container')">
|
||||
<label for="{{ form.ride_model_search.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Ride Model
|
||||
</label>
|
||||
{{ form.ride_model_search }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.ride_model_search label="Ride Model" %}
|
||||
{{ form.ride_model }}
|
||||
<div id="ride-model-search-results" class="relative"></div>
|
||||
<div id="ride-model-search-results" class="relative" role="listbox" aria-label="Ride model search results"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{# Status and Dates #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Status and Dates</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Status and Dates</legend>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label for="{{ form.status.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Status
|
||||
</label>
|
||||
{{ form.status }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.status label="Status" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="{{ form.status_since.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Status Since
|
||||
</label>
|
||||
{{ form.status_since }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.status_since label="Status Since" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="{{ form.opening_date.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Opening Date
|
||||
</label>
|
||||
{{ form.opening_date }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.opening_date label="Opening Date" %}
|
||||
</div>
|
||||
|
||||
<div x-show="showClosingDate()">
|
||||
<label for="{{ form.closing_date.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Closing Date <span x-show="status === 'CLOSING'" class="text-red-600">*</span>
|
||||
</label>
|
||||
{{ form.closing_date }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.closing_date label="Closing Date" %}
|
||||
<p x-show="status === 'CLOSING'" class="mt-1 text-xs text-red-600" role="alert">Required when status is "Closing"</p>
|
||||
</div>
|
||||
|
||||
<div x-show="status === 'CLOSING'" class="col-span-2">
|
||||
<label for="{{ form.post_closing_status.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Status After Closing *
|
||||
</label>
|
||||
{{ form.post_closing_status }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.post_closing_status label="Status After Closing" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{# Specifications #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Specifications</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Specifications</legend>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label for="{{ form.min_height_in.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Minimum Height (inches)
|
||||
</label>
|
||||
{{ form.min_height_in }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.min_height_in label="Minimum Height (inches)" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="{{ form.max_height_in.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Maximum Height (inches)
|
||||
</label>
|
||||
{{ form.max_height_in }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.max_height_in label="Maximum Height (inches)" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="{{ form.capacity_per_hour.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Hourly Capacity
|
||||
</label>
|
||||
{{ form.capacity_per_hour }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.capacity_per_hour label="Hourly Capacity" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="{{ form.ride_duration_seconds.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Ride Duration (seconds)
|
||||
</label>
|
||||
{{ form.ride_duration_seconds }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.ride_duration_seconds label="Ride Duration (seconds)" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{# Description #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Description</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Description</legend>
|
||||
<div>
|
||||
<label for="{{ form.description.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Description
|
||||
</label>
|
||||
{{ form.description }}
|
||||
{% include 'forms/partials/form_field.html' with field=form.description label="Description" %}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{# Submission Details #}
|
||||
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Submission Details</h2>
|
||||
<fieldset class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<legend class="mb-4 text-xl font-semibold">Submission Details</legend>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<label for="id_reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Reason for Changes
|
||||
</label>
|
||||
<textarea name="reason" rows="2"
|
||||
<textarea name="reason" id="id_reason" rows="2"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Explain why you're making these changes"></textarea>
|
||||
placeholder="Explain why you're making these changes"
|
||||
aria-describedby="reason-help"></textarea>
|
||||
<p id="reason-help" class="mt-1 text-xs text-gray-500 dark:text-gray-400">Optional: Provide context for reviewers</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<label for="id_source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Source
|
||||
</label>
|
||||
<input type="text" name="source"
|
||||
<input type="text" name="source" id="id_source"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Where did you get this information?">
|
||||
placeholder="Where did you get this information?"
|
||||
aria-describedby="source-help">
|
||||
<p id="source-help" class="mt-1 text-xs text-gray-500 dark:text-gray-400">Optional: Link or reference to your source</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{# Submit Button #}
|
||||
<div class="flex justify-end">
|
||||
|
||||
Reference in New Issue
Block a user