mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 09:51:09 -05:00
87 lines
3.5 KiB
HTML
87 lines
3.5 KiB
HTML
{% comment %}
|
|
Status Badge Component
|
|
======================
|
|
|
|
A unified, reusable status badge component for parks, rides, and other entities.
|
|
|
|
Purpose:
|
|
Displays a status badge with consistent styling across the application.
|
|
Supports both static display and interactive HTMX-powered refresh.
|
|
|
|
Usage Examples:
|
|
Basic badge (uses park_tags for config):
|
|
{% include 'components/status_badge.html' with status='OPERATING' %}
|
|
|
|
Clickable badge:
|
|
{% include 'components/status_badge.html' with status='OPERATING' clickable=True %}
|
|
|
|
Interactive badge with HTMX (for moderators):
|
|
{% include 'components/status_badge.html' with status=park.status badge_id='park-header-badge' refresh_url=park_badge_url refresh_trigger='park-status-changed' scroll_target='park-status-section' can_edit=perms.parks.change_park %}
|
|
|
|
Manual status display (without park_tags config lookup):
|
|
{% include 'components/status_badge.html' with status=obj.status status_display=obj.get_status_display manual_mode=True %}
|
|
|
|
Manual mode with custom classes:
|
|
{% include 'components/status_badge.html' with status=obj.status status_display=obj.get_status_display status_classes='bg-blue-100 text-blue-800' manual_mode=True %}
|
|
|
|
Parameters:
|
|
Required:
|
|
- status: The status value (e.g., 'OPERATING', 'CLOSED_TEMP')
|
|
|
|
Optional (auto mode - uses park_tags):
|
|
- clickable: Enable click interactions (default: False)
|
|
|
|
Optional (HTMX mode):
|
|
- badge_id: ID for HTMX targeting
|
|
- refresh_url: URL for HTMX refresh on trigger
|
|
- refresh_trigger: HTMX trigger event name (e.g., 'park-status-changed')
|
|
- scroll_target: Element ID to scroll to on click
|
|
- can_edit: Whether user can edit/click the badge (default: False)
|
|
|
|
Optional (manual mode):
|
|
- manual_mode: Use status_display instead of park_tags config lookup (default: False)
|
|
- status_display: Human-readable status text (used when manual_mode=True)
|
|
- status_classes: CSS classes for badge styling (default: 'bg-gray-100 text-gray-800')
|
|
|
|
Optional (styling):
|
|
- size: Size variant 'sm', 'md', 'lg' (default: 'md')
|
|
|
|
Status Classes (auto mode - defined in park_tags):
|
|
- OPERATING: Green (bg-green-100 text-green-800)
|
|
- CLOSED_TEMP: Yellow (bg-yellow-100 text-yellow-800)
|
|
- CLOSED_PERM: Red (bg-red-100 text-red-800)
|
|
- CONSTRUCTION: Orange (bg-orange-100 text-orange-800)
|
|
- DEMOLISHED: Gray (bg-gray-100 text-gray-800)
|
|
- RELOCATED: Purple (bg-purple-100 text-purple-800)
|
|
- SBNO: Amber (bg-amber-100 text-amber-800)
|
|
|
|
Dependencies:
|
|
- park_tags template tags (for get_status_config filter, only needed in auto mode)
|
|
- HTMX (optional, for interactive features)
|
|
- Font Awesome icons (for dropdown indicator)
|
|
|
|
Accessibility:
|
|
- Uses semantic button or span based on interactivity
|
|
- Provides appropriate focus states
|
|
- Uses color + text for status indication
|
|
{% endcomment %}
|
|
|
|
{% load park_tags %}
|
|
|
|
{# Determine sizing classes #}
|
|
{% with size=size|default:'md' %}
|
|
{% if size == 'sm' %}
|
|
{% with size_classes='px-2 py-0.5 text-xs' icon_size='h-1.5 w-1.5' %}
|
|
{% include 'components/status_badge_inner.html' %}
|
|
{% endwith %}
|
|
{% elif size == 'lg' %}
|
|
{% with size_classes='px-4 py-1.5 text-sm' icon_size='h-2.5 w-2.5' %}
|
|
{% include 'components/status_badge_inner.html' %}
|
|
{% endwith %}
|
|
{% else %}
|
|
{% with size_classes='px-2.5 py-0.5 text-xs' icon_size='h-2 w-2' %}
|
|
{% include 'components/status_badge_inner.html' %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
{% endwith %}
|