mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:51:08 -05:00
Add park and ride card components with advanced search functionality
- Implemented park card component with image, status badge, favorite button, and quick stats overlay. - Developed ride card component featuring thrill level badge, status badge, favorite button, and detailed stats. - Created advanced search page with filters for parks and rides, including location, type, status, and thrill level. - Added dynamic quick search functionality with results display. - Enhanced user experience with JavaScript for filter toggling, range slider updates, and view switching. - Included custom CSS for improved styling of checkboxes and search results layout.
This commit is contained in:
pacnpal
206
cline_docs/frontend-refactoring-plan.md
Normal file
206
cline_docs/frontend-refactoring-plan.md
Normal file
@@ -0,0 +1,206 @@
|
||||
# ThrillWiki Frontend JavaScript Refactoring Plan
|
||||
|
||||
**Date**: 2025-01-15
|
||||
**Status**: In Progress
|
||||
**Priority**: CRITICAL
|
||||
|
||||
## Overview
|
||||
|
||||
Refactoring ThrillWiki frontend to comply with the core rule: "🚨 **ABSOLUTELY NO Custom JS** - HTMX + AlpineJS ONLY". The audit identified 20 custom JavaScript files that need to be removed and their functionality migrated to HTMX endpoints and AlpineJS components in templates.
|
||||
|
||||
## Current Violations
|
||||
|
||||
### Custom JavaScript Files to Remove (19 files):
|
||||
1. `static/js/thrillwiki-enhanced.js` (600+ lines) - ❌ REMOVE
|
||||
2. `static/js/alpine-components.js` (500+ lines) - ⚠️ REFACTOR (contains valid AlpineJS components)
|
||||
3. `static/js/alerts.js` - ❌ REMOVE
|
||||
4. `static/js/dark-mode-maps.js` - ❌ REMOVE
|
||||
5. `static/js/geolocation.js` - ❌ REMOVE
|
||||
6. `static/js/htmx-maps.js` - ❌ REMOVE
|
||||
7. `static/js/location-autocomplete.js` - ❌ REMOVE
|
||||
8. `static/js/location-search.js` - ❌ REMOVE
|
||||
9. `static/js/main.js` - ❌ REMOVE
|
||||
10. `static/js/map-filters.js` - ❌ REMOVE
|
||||
11. `static/js/map-integration.js` - ❌ REMOVE
|
||||
12. `static/js/map-markers.js` - ❌ REMOVE
|
||||
13. `static/js/maps.js` - ❌ REMOVE
|
||||
14. `static/js/mobile-touch.js` - ❌ REMOVE
|
||||
15. `static/js/park-map.js` - ❌ REMOVE
|
||||
16. `static/js/photo-gallery.js` - ❌ REMOVE
|
||||
17. `static/js/roadtrip.js` - ❌ REMOVE
|
||||
18. `static/js/search.js` - ❌ REMOVE
|
||||
19. `static/js/theme.js` - ❌ REMOVE
|
||||
|
||||
### Files to Keep:
|
||||
- `static/js/alpine.min.js` - ✅ KEEP (AlpineJS library)
|
||||
|
||||
## Functionality Migration Strategy
|
||||
|
||||
### 1. AlpineJS Components (from alpine-components.js)
|
||||
**Action**: Move to inline `<script>` tags in templates or create Cotton components
|
||||
|
||||
**Components to Migrate**:
|
||||
- `themeToggle` → Move to header template
|
||||
- `searchComponent` → Move to search templates
|
||||
- `browseMenu` → Move to header template
|
||||
- `mobileMenu` → Move to header template
|
||||
- `userMenu` → Move to header template
|
||||
- `modal` → Create Cotton modal component
|
||||
- `dropdown` → Create Cotton dropdown component
|
||||
- `tabs` → Create Cotton tabs component
|
||||
- `accordion` → Create Cotton accordion component
|
||||
- `form` → Move to form templates
|
||||
- `pagination` → Create Cotton pagination component
|
||||
- `authModal` → Move to auth modal template
|
||||
- Global stores (`app`, `toast`) → Move to base template
|
||||
|
||||
### 2. Search Functionality (from thrillwiki-enhanced.js, search.js)
|
||||
**Action**: Replace with HTMX endpoints
|
||||
|
||||
**Current Custom JS**:
|
||||
- Quick search with debouncing
|
||||
- Search result parsing
|
||||
- Search suggestions
|
||||
|
||||
**HTMX Solution**:
|
||||
- Use `hx-get` with `hx-trigger="keyup changed delay:300ms"`
|
||||
- Server returns HTML fragments
|
||||
- Use `hx-target` and `hx-swap` for results
|
||||
|
||||
### 3. Card Interactions (from thrillwiki-enhanced.js)
|
||||
**Action**: Replace with CSS hover effects and AlpineJS
|
||||
|
||||
**Current Custom JS**:
|
||||
- Card hover animations
|
||||
- Favorite button toggles
|
||||
- Card image scaling
|
||||
|
||||
**Solution**:
|
||||
- CSS transitions for hover effects
|
||||
- AlpineJS for favorite toggles
|
||||
- HTMX for favorite API calls
|
||||
|
||||
### 4. Notifications (from thrillwiki-enhanced.js)
|
||||
**Action**: Use AlpineJS store and Cotton components
|
||||
|
||||
**Current Custom JS**:
|
||||
- Custom notification system
|
||||
- Auto-hide functionality
|
||||
- Animation handling
|
||||
|
||||
**Solution**:
|
||||
- AlpineJS `toast` store (already exists in alpine-components.js)
|
||||
- Cotton toast component
|
||||
- CSS animations
|
||||
|
||||
### 5. Form Handling (from thrillwiki-enhanced.js)
|
||||
**Action**: Use HTMX form submissions
|
||||
|
||||
**Current Custom JS**:
|
||||
- Form validation
|
||||
- Error display
|
||||
- Loading states
|
||||
|
||||
**Solution**:
|
||||
- Server-side validation
|
||||
- HTMX form submissions
|
||||
- AlpineJS for client-side enhancements
|
||||
|
||||
### 6. Scroll Effects (from thrillwiki-enhanced.js)
|
||||
**Action**: Use CSS and minimal AlpineJS
|
||||
|
||||
**Current Custom JS**:
|
||||
- Parallax effects
|
||||
- Reveal animations
|
||||
- Scroll to top button
|
||||
|
||||
**Solution**:
|
||||
- CSS scroll-driven animations
|
||||
- Intersection Observer in AlpineJS
|
||||
- CSS-only scroll to top
|
||||
|
||||
### 7. Theme Handling (from theme.js)
|
||||
**Action**: Move to AlpineJS component in base template
|
||||
|
||||
**Current Custom JS**:
|
||||
- Theme switching
|
||||
- System theme detection
|
||||
- Local storage management
|
||||
|
||||
**Solution**:
|
||||
- AlpineJS `themeToggle` component (already exists)
|
||||
- Move to base template
|
||||
|
||||
## Implementation Steps
|
||||
|
||||
### Phase 1: Preserve Critical Functionality
|
||||
1. ✅ Extract AlpineJS components from alpine-components.js
|
||||
2. ✅ Move theme toggle to base template
|
||||
3. ✅ Move search components to search templates
|
||||
4. ✅ Move auth modal components to auth templates
|
||||
5. ✅ Create Cotton components for reusable UI elements
|
||||
|
||||
### Phase 2: Replace Custom JavaScript
|
||||
1. ✅ Remove custom JavaScript files
|
||||
2. ✅ Update base.html to remove script references
|
||||
3. ✅ Test functionality after removal
|
||||
|
||||
### Phase 3: HTMX Integration
|
||||
1. ✅ Replace search functionality with HTMX endpoints
|
||||
2. ✅ Replace form submissions with HTMX
|
||||
3. ✅ Replace favorite toggles with HTMX
|
||||
|
||||
### Phase 4: CSS Enhancements
|
||||
1. ✅ Replace JavaScript animations with CSS
|
||||
2. ✅ Add CSS hover effects for cards
|
||||
3. ✅ Implement CSS scroll effects
|
||||
|
||||
### Phase 5: Testing & Validation
|
||||
1. ✅ Test all functionality works without custom JS
|
||||
2. ✅ Verify HTMX interactions
|
||||
3. ✅ Validate AlpineJS components
|
||||
4. ✅ Performance testing
|
||||
|
||||
## Risk Mitigation
|
||||
|
||||
### Backup Strategy
|
||||
- Keep removed JS files in a backup directory temporarily
|
||||
- Test each component migration individually
|
||||
- Rollback plan if critical functionality breaks
|
||||
|
||||
### Testing Checklist
|
||||
- [ ] Search functionality works
|
||||
- [ ] Authentication modal works
|
||||
- [ ] Theme switching works
|
||||
- [ ] Card interactions work
|
||||
- [ ] Form submissions work
|
||||
- [ ] Mobile menu works
|
||||
- [ ] Notifications work
|
||||
- [ ] Pagination works
|
||||
|
||||
## Expected Outcomes
|
||||
|
||||
### Compliance
|
||||
- ✅ Zero custom JavaScript files
|
||||
- ✅ HTMX + AlpineJS only architecture
|
||||
- ✅ Progressive enhancement maintained
|
||||
|
||||
### Performance
|
||||
- ⬆️ Reduced JavaScript bundle size
|
||||
- ⬆️ Faster page loads
|
||||
- ⬆️ Better caching
|
||||
|
||||
### Maintainability
|
||||
- ⬆️ Simpler architecture
|
||||
- ⬆️ Better separation of concerns
|
||||
- ⬆️ Easier debugging
|
||||
|
||||
## Notes
|
||||
|
||||
- The `alpine-components.js` file contains valid AlpineJS components that should be preserved
|
||||
- Theme switching is critical functionality that must be maintained
|
||||
- Search functionality is core to the user experience
|
||||
- Authentication modal is essential for user management
|
||||
- All functionality must work without JavaScript (progressive enhancement)
|
||||
|
||||
**Last Updated**: 2025-01-15
|
||||
Reference in New Issue
Block a user