Add a plan to convert templates and update location card

Create a detailed plan for migrating the ThrillWiki template system to Django Cotton components. Update the `location_card.html` template to correctly pass location ID and type to the `showOnMap` function and to pass location details as arguments to the `addToTrip` function. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/jGCMVeA
2025-12-20 07:51:09 -05:00 · 2025-09-21 13:22:47 +00:00
parent a077bf236b
commit 26ff320806
3 changed files with 281 additions and 6 deletions
--- a/.replit
+++ b/.replit
@@ -39,10 +39,6 @@ externalPort = 80
 localPort = 34277
 externalPort = 3000

-[[ports]]
-localPort = 41067
-externalPort = 3001
-
 [deployment]
 deploymentTarget = "autoscale"
 run = ["gunicorn", "--bind=0.0.0.0:5000", "--reuse-port", "thrillwiki.wsgi:application"]
--- a/COTTON_CONVERSION_PLAN.md
+++ b/COTTON_CONVERSION_PLAN.md
@@ -0,0 +1,279 @@
+# ThrillWiki Django Cotton Conversion Plan
+
+## Overview
+This document outlines the comprehensive plan to convert ThrillWiki's entire template system from Django's `{% include %}` pattern to Django Cotton's modern component architecture. This conversion will improve maintainability, reusability, and developer experience while preserving all existing functionality.
+
+## Current State Analysis
+
+### Template Inventory
+- **Total Templates**: 147 HTML files
+- **Components with {% include %}**: 52+ templates
+- **Base UI Components**: 6 components
+- **Feature Components**: 40+ domain-specific partials
+- **Auth Components**: 4 authentication components
+- **Missing Referenced Templates**: 3 card content templates
+
+### Component Categories
+
+#### 1. Foundation UI Components (6)
+- `components/ui/button.html` - Reusable button with variants
+- `components/ui/card.html` - Standard card layout
+- `components/ui/input.html` - Form input component
+- `components/pagination.html` - List pagination
+- `components/search_form.html` - Search functionality
+- `components/status_badge.html` - Status indicators
+
+#### 2. Authentication Components (4)
+- `account/partials/login_form.html` - Login form
+- `account/partials/signup_modal.html` - Registration modal
+- `accounts/turnstile_widget.html` - CAPTCHA widget
+- `accounts/turnstile_widget_empty.html` - Empty CAPTCHA state
+
+#### 3. Layout Components (1)
+- `components/layout/enhanced_header.html` - Main navigation header
+
+#### 4. Feature Components (18 Rides + 5 Parks + 3 Media + 7 Maps)
+- **Rides**: Forms, modals, lists, search results, history panels
+- **Parks**: Location widgets, actions, lists, search results
+- **Media**: Photo display, upload, management
+- **Maps**: Location cards, filter panels, containers, popups
+
+#### 5. Advanced Systems (13 Moderation + 4 Search)
+- **Moderation**: Submission workflows, photo management, filtering
+- **Search**: Results, filters, location-based search
+
+## Conversion Strategy: 4-Phase Approach
+
+### Phase 1: Foundation UI & Auth Components
+**Priority**: CRITICAL | **Duration**: 2-3 days
+
+**Goal**: Convert the most frequently used base components that are referenced throughout the application.
+
+**Components**:
+1. UI Components (6): button, card, input, pagination, search_form, status_badge
+2. Auth Components (4): login_form, signup_modal, turnstile widgets
+
+**Benefits**:
+- Immediate impact across entire application
+- Establishes Cotton patterns for team
+- Reduces template complexity in header and forms
+
+### Phase 2: Layout & Navigation
+**Priority**: HIGH | **Duration**: 3-4 days
+
+**Goal**: Convert major structural components that define application layout.
+
+**Components**:
+1. Enhanced header with navigation, search, user menu
+2. Filter sidebar with advanced filtering capabilities
+
+**Benefits**:
+- Cleaner main layout structure
+- Easier header customization
+- Modular navigation system
+
+### Phase 3: Feature-Specific Components
+**Priority**: MEDIUM | **Duration**: 5-7 days
+
+**Goal**: Convert domain-specific components for core functionality.
+
+**Components**:
+1. **Rides Domain** (18 components): Forms, modals, search, management
+2. **Parks Domain** (5 components): Location widgets, actions, lists
+3. **Media Components** (3 components): Photo handling
+4. **Maps Components** (7 components): Location cards, filtering, display
+
+**Benefits**:
+- Improved component reusability
+- Better separation of concerns
+- Easier feature development
+
+### Phase 4: Advanced & Specialized Systems
+**Priority**: LOW-MEDIUM | **Duration**: 4-5 days
+
+**Goal**: Convert complex systems with heavy HTMX/Alpine.js integration.
+
+**Components**:
+1. **Moderation System** (13 components): Complex workflows
+2. **Search System** (4 components): Advanced search features
+
+**Benefits**:
+- Complete Cotton migration
+- Improved moderation workflows
+- Enhanced search capabilities
+
+## Cotton Directory Structure
+
+```
+backend/templates/cotton/
+├── ui/                     # Base UI components
+│   ├── button.html
+│   ├── card.html
+│   ├── input.html
+│   ├── pagination.html
+│   ├── search_form.html
+│   └── status_badge.html
+├── auth/                   # Authentication components
+│   ├── modal.html          # ✅ Already converted
+│   ├── login_form.html
+│   ├── signup_modal.html
+│   ├── turnstile_widget.html
+│   └── turnstile_empty.html
+├── layout/                 # Layout components
+│   └── header.html
+├── features/               # Cross-cutting features
+│   └── filter_sidebar.html
+├── rides/                  # Ride domain components
+│   ├── form.html
+│   ├── add_modal.html
+│   ├── list_results.html
+│   └── [15 more components]
+├── parks/                  # Park domain components
+│   ├── location_widget.html
+│   ├── actions.html
+│   └── [3 more components]
+├── maps/                   # Map system components
+│   ├── location_card.html
+│   ├── filter_panel.html
+│   └── [5 more components]
+├── media/                  # Media handling components
+│   ├── photo_display.html
+│   ├── photo_upload.html
+│   └── photo_manager.html
+├── moderation/             # Moderation system components
+│   └── [13 components]
+└── search/                 # Search system components
+    └── [4 components]
+```
+
+## Cotton Component Standards
+
+### 1. c-vars Configuration
+```django
+<c-vars
+  container_classes="{{ container_classes|default:'default-container-styles' }}"
+  button_variant="{{ button_variant|default:'primary' }}"
+  show_actions="{{ show_actions|default:True }}"
+/>
+```
+
+### 2. c-slot Usage
+```django
+<c-slot name="header-content">
+  <!-- Custom header content -->
+</c-slot>
+
+<c-slot name="actions">
+  <!-- Custom action buttons -->
+</c-slot>
+```
+
+### 3. Alpine.js Preservation
+- Maintain all `x-data`, `x-show`, `x-model` directives
+- Preserve event handlers (`@click`, `@submit`)
+- Keep transitions and animations
+- Test JavaScript functionality after conversion
+
+### 4. HTMX Integration
+- Preserve all `hx-*` attributes
+- Maintain target and swap configurations
+- Ensure form submissions work correctly
+- Test real-time updates and live search
+
+## Implementation Guidelines
+
+### Conversion Process
+1. **Analyze Original Component**: Understand functionality and dependencies
+2. **Create Cotton Version**: Convert to Cotton format with c-vars and c-slots
+3. **Test in Isolation**: Verify component renders correctly
+4. **Update Templates**: Replace include statements with Cotton tags
+5. **Integration Testing**: Test with Alpine.js and HTMX
+6. **Visual Verification**: Ensure styling and behavior match
+
+### Testing Strategy
+1. **Component Testing**: Test each component individually
+2. **Integration Testing**: Verify interactions between components
+3. **Functionality Testing**: Ensure HTMX/Alpine.js still work
+4. **Visual Testing**: Compare before/after screenshots
+5. **Performance Testing**: Monitor render times and optimization
+
+### Quality Standards
+- **No Breaking Changes**: All existing functionality preserved
+- **Improved Performance**: Cotton optimizations applied
+- **Better Maintainability**: Cleaner component structure
+- **Enhanced Customization**: Flexible styling via c-vars
+- **Documentation**: Clear component usage examples
+
+## Success Criteria
+
+### Technical Goals
+- [ ] All 62+ components converted to Cotton format
+- [ ] Zero template render errors
+- [ ] All Alpine.js functionality preserved
+- [ ] All HTMX interactions working
+- [ ] Responsive design maintained
+- [ ] Performance maintained or improved
+
+### Quality Goals
+- [ ] Components properly organized in logical directory structure
+- [ ] Meaningful c-vars for customization
+- [ ] Clear component documentation
+- [ ] Consistent naming conventions
+- [ ] Reusable component patterns established
+
+## Benefits of Conversion
+
+### Developer Experience
+- **Cleaner Templates**: `<c-rides.form />` vs `{% include 'rides/partials/ride_form.html' %}`
+- **Better Organization**: Logical component hierarchy
+- **Easier Maintenance**: Components in dedicated Cotton directory
+- **Type Safety**: Cotton's validation helps catch template errors
+
+### Performance
+- **Better Caching**: Cotton optimizes component rendering
+- **Reduced Complexity**: Simpler template inheritance chains
+- **Faster Development**: Reusable components speed up feature development
+
+### Customization
+- **Flexible Styling**: c-vars allow easy theme customization
+- **Component Variants**: Different button styles, card layouts, etc.
+- **Conditional Rendering**: Better control over component behavior
+
+## Risk Mitigation
+
+### Migration Safety
+- **Gradual Migration**: Convert components incrementally
+- **Parallel Existence**: Keep old includes until Cotton versions tested
+- **Rollback Plan**: Easy to revert individual components if issues arise
+- **Comprehensive Testing**: Each phase thoroughly tested before proceeding
+
+### Potential Issues
+- **Alpine.js Conflicts**: Careful testing of JavaScript interactions
+- **HTMX Target Changes**: Verify all HTMX endpoints still work
+- **Styling Regressions**: Visual comparison testing
+- **Performance Impact**: Monitor rendering performance
+
+## Timeline
+
+- **Week 1**: Phase 1 - Foundation UI & Auth Components
+- **Week 2**: Phase 2 - Layout & Navigation Components  
+- **Week 3-4**: Phase 3 - Feature Components (parallel development)
+- **Week 5**: Phase 4 - Advanced Components
+- **Week 6**: Testing, optimization, and cleanup
+
+## Completion Status
+
+### Already Completed ✅
+- Django Cotton package installation and configuration
+- `cotton/auth/modal.html` - Authentication modal
+- `cotton/ui/toast.html` - Toast notifications
+- Base template integration (`{% load cotton %}`)
+
+### Remaining Work
+- 60+ components to convert
+- Template updates across application
+- Comprehensive testing and validation
+
+---
+
+This plan provides a structured approach to completely modernize ThrillWiki's template architecture while maintaining all existing functionality and improving developer experience.
--- a/backend/templates/maps/partials/location_card.html
+++ b/backend/templates/maps/partials/location_card.html
@@ -69,7 +69,7 @@
        {% endif %}
        
        {% if show_map_action %}
-            <button onclick="showOnMap('{{ location.type }}', {{ location.id }})" 
+            <button onclick="showOnMap('{{ location.type }}', '{{ location.id }}')" 
                    class="px-3 py-2 text-sm text-green-600 border border-green-600 rounded-lg hover:bg-green-50 dark:hover:bg-green-900 transition-colors"
                    title="Show on map">
                <i class="fas fa-map-marker-alt"></i>
@@ -77,7 +77,7 @@
        {% endif %}
        
        {% if show_trip_action %}
-            <button onclick="addToTrip({{ location|safe }})" 
+            <button onclick="addToTrip('{{ location.id }}', '{{ location.type }}', '{{ location.name|escapejs }}')" 
                    class="px-3 py-2 text-sm text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 transition-colors"
                    title="Add to trip">
                <i class="fas fa-plus"></i>