Add comprehensive audit reports, design assessment, and non-authenticated features testing for ThrillWiki application

- Created critical functionality audit report identifying 7 critical issues affecting production readiness.
- Added design assessment report highlighting exceptional design quality and minor cosmetic fixes needed.
- Documented non-authenticated features testing results confirming successful functionality and public access.
- Implemented ride search form with autocomplete functionality and corresponding templates for search results.
- Developed tests for ride autocomplete functionality, ensuring proper filtering and authentication checks.
This commit is contained in:
pacnpal
2025-06-25 20:30:02 -04:00
parent 401449201c
commit de05a5abda
35 changed files with 3598 additions and 380 deletions

View File

@@ -0,0 +1,78 @@
{% load static %}
<div id="ride-search-results" class="mt-4">
{% if rides %}
<div class="space-y-4">
<div class="text-sm text-gray-600 dark:text-gray-400">
Found {{ rides|length }} ride{{ rides|length|pluralize }}
</div>
{% for ride in rides %}
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
<a href="{% url 'parks:rides:ride_detail' park_slug=ride.park.slug ride_slug=ride.slug %}"
class="hover:text-blue-600 dark:hover:text-blue-400">
{{ ride.name }}
</a>
</h3>
<div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
at <a href="{% url 'parks:park_detail' slug=ride.park.slug %}"
class="text-blue-600 dark:text-blue-400 hover:underline">
{{ ride.park.name }}
</a>
</div>
{% if ride.description %}
<p class="mt-2 text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
{{ ride.description|truncatewords:20 }}
</p>
{% endif %}
<div class="mt-2 flex flex-wrap gap-2">
{% if ride.get_category_display %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
{{ ride.get_category_display }}
</span>
{% endif %}
{% if ride.status %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if ride.status == 'OPERATING' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
{% elif ride.status == 'CLOSED_TEMP' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
{% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %}">
{{ ride.get_status_display }}
</span>
{% endif %}
</div>
</div>
{% if ride.photos.exists %}
<div class="ml-4 flex-shrink-0">
{% with ride.photos.first as photo %}
<img src="{{ photo.image.url }}"
alt="{{ ride.name }}"
class="w-16 h-16 rounded-lg object-cover">
{% endwith %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-8">
<div class="text-gray-500 dark:text-gray-400">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No rides found</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
Try adjusting your search criteria.
</p>
</div>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,87 @@
{% extends "base/base.html" %}
{% load static %}
{% block title %}Search Rides - ThrillWiki{% endblock %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Search Rides</h1>
<p class="text-gray-600 dark:text-gray-400">Find rides across all theme parks</p>
</div>
<!-- Search Form -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
<form method="get"
hx-get="{% url 'search:ride_search' %}"
hx-target="#ride-search-results"
hx-trigger="input changed delay:300ms from:input[name='ride'], submit"
hx-indicator="#search-loading">
<div class="space-y-4">
<div>
<label for="{{ search_form.ride.id_for_label }}"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Search Rides
</label>
{{ search_form.ride }}
{% if search_form.ride.help_text %}
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ search_form.ride.help_text }}</p>
{% endif %}
{% if search_form.ride.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ search_form.ride.errors }}
</div>
{% endif %}
</div>
<div class="flex items-center justify-between">
<button type="submit"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
Search
</button>
<div id="search-loading" class="htmx-indicator">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Searching...
</div>
</div>
</div>
</div>
</form>
</div>
<!-- Search Results -->
<div id="ride-search-results">
{% include "search/partials/ride_search_results.html" %}
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
// Clear search results when input is empty
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.querySelector('input[name="ride"]');
if (searchInput) {
searchInput.addEventListener('input', function() {
if (this.value.trim() === '') {
const resultsContainer = document.getElementById('ride-search-results');
if (resultsContainer) {
resultsContainer.innerHTML = '<div class="text-center text-gray-500 dark:text-gray-400 py-8">Start typing to search for rides...</div>';
}
}
});
}
});
</script>
{% endblock %}