From e86cb95f14157aef8b804c39a233ff9f33cbd058 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Thu, 14 Nov 2024 02:10:14 +0000
Subject: [PATCH] Fix moderation submission edit view: - Add coaster stats
 fields template - Fix ride category selection and stats display - Fix
 location widget and map initialization

---
 .../moderation/partials/coaster_fields.html   | 257 +++++++++---------
 .../moderation/partials/submission_list.html  |  47 +++-
 2 files changed, 166 insertions(+), 138 deletions(-)

diff --git a/templates/moderation/partials/coaster_fields.html b/templates/moderation/partials/coaster_fields.html
index df87dd7c..4bd6ac4c 100644
--- a/templates/moderation/partials/coaster_fields.html
+++ b/templates/moderation/partials/coaster_fields.html
@@ -1,150 +1,135 @@
-<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-    <!-- Left Column -->
-    <div class="space-y-6">
-        <div>
-            <label for="id_height_ft" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Height (ft)
-            </label>
-            <input type="number" 
-                   name="stats.height_ft" 
-                   id="id_height_ft"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Total height of the coaster in feet"
-                   min="0"
-                   value="{{ stats.height_ft }}">
-        </div>
-        <div>
-            <label for="id_length_ft" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Length (ft)
-            </label>
-            <input type="number" 
-                   name="stats.length_ft" 
-                   id="id_length_ft"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Total track length in feet"
-                   min="0"
-                   value="{{ stats.length_ft }}">
-        </div>
-        <div>
-            <label for="id_speed_mph" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Speed (mph)
-            </label>
-            <input type="number" 
-                   name="stats.speed_mph" 
-                   id="id_speed_mph"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Maximum speed in miles per hour"
-                   min="0"
-                   value="{{ stats.speed_mph }}">
-        </div>
-        <div>
-            <label for="id_inversions" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Inversions
-            </label>
-            <input type="number" 
-                   name="stats.inversions" 
-                   id="id_inversions"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Number of inversions"
-                   min="0"
-                   value="{{ stats.inversions }}">
-        </div>
-        <div>
-            <label for="id_trains_count" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Number of Trains
-            </label>
-            <input type="number" 
-                   name="stats.trains_count" 
-                   id="id_trains_count"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Number of trains"
-                   min="0"
-                   value="{{ stats.trains_count }}">
-        </div>
-        <div>
-            <label for="id_cars_per_train" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Cars per Train
-            </label>
-            <input type="number" 
-                   name="stats.cars_per_train" 
-                   id="id_cars_per_train"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Number of cars per train"
-                   min="0"
-                   value="{{ stats.cars_per_train }}">
-        </div>
-        <div>
-            <label for="id_seats_per_car" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Seats per Car
-            </label>
-            <input type="number" 
-                   name="stats.seats_per_car" 
-                   id="id_seats_per_car"
-                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                   placeholder="Number of seats per car"
-                   min="0"
-                   value="{{ stats.seats_per_car }}">
-        </div>
-    </div>
+{% load moderation_tags %}
 
-    <!-- Right Column -->
-    <div class="space-y-6">
+<div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
+    <h3 class="mb-4 text-lg font-semibold">Coaster Stats</h3>
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div>
-            <label for="id_track_material" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Track Material
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Height (ft):
             </label>
-            <select name="stats.track_material" 
-                    id="id_track_material"
-                    class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
-                <option value="">Select track material...</option>
-                <option value="STEEL" {% if stats.track_material == 'STEEL' %}selected{% endif %}>Steel</option>
-                <option value="WOOD" {% if stats.track_material == 'WOOD' %}selected{% endif %}>Wood</option>
-                <option value="HYBRID" {% if stats.track_material == 'HYBRID' %}selected{% endif %}>Hybrid</option>
-                <option value="OTHER" {% if stats.track_material == 'OTHER' %}selected{% endif %}>Other</option>
-            </select>
+            <input type="number"
+                   name="stats.height_ft"
+                   value="{{ stats.height_ft }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Height in feet">
         </div>
+
         <div>
-            <label for="id_roller_coaster_type" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Coaster Type
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Length (ft):
             </label>
-            <select name="stats.roller_coaster_type" 
-                    id="id_roller_coaster_type"
-                    class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
-                <option value="">Select coaster type...</option>
-                <option value="SITDOWN" {% if stats.roller_coaster_type == 'SITDOWN' %}selected{% endif %}>Sit-Down</option>
-                <option value="INVERTED" {% if stats.roller_coaster_type == 'INVERTED' %}selected{% endif %}>Inverted</option>
-                <option value="FLYING" {% if stats.roller_coaster_type == 'FLYING' %}selected{% endif %}>Flying</option>
-                <option value="STANDUP" {% if stats.roller_coaster_type == 'STANDUP' %}selected{% endif %}>Stand-Up</option>
-                <option value="WING" {% if stats.roller_coaster_type == 'WING' %}selected{% endif %}>Wing</option>
-                <option value="SUSPENDED" {% if stats.roller_coaster_type == 'SUSPENDED' %}selected{% endif %}>Suspended</option>
-                <option value="BOBSLED" {% if stats.roller_coaster_type == 'BOBSLED' %}selected{% endif %}>Bobsled</option>
-                <option value="PIPELINE" {% if stats.roller_coaster_type == 'PIPELINE' %}selected{% endif %}>Pipeline</option>
-                <option value="MOTORBIKE" {% if stats.roller_coaster_type == 'MOTORBIKE' %}selected{% endif %}>Motorbike</option>
-                <option value="FLOORLESS" {% if stats.roller_coaster_type == 'FLOORLESS' %}selected{% endif %}>Floorless</option>
-                <option value="DIVE" {% if stats.roller_coaster_type == 'DIVE' %}selected{% endif %}>Dive</option>
-                <option value="FAMILY" {% if stats.roller_coaster_type == 'FAMILY' %}selected{% endif %}>Family</option>
-                <option value="WILD_MOUSE" {% if stats.roller_coaster_type == 'WILD_MOUSE' %}selected{% endif %}>Wild Mouse</option>
-                <option value="SPINNING" {% if stats.roller_coaster_type == 'SPINNING' %}selected{% endif %}>Spinning</option>
-                <option value="FOURTH_DIMENSION" {% if stats.roller_coaster_type == 'FOURTH_DIMENSION' %}selected{% endif %}>4th Dimension</option>
-                <option value="OTHER" {% if stats.roller_coaster_type == 'OTHER' %}selected{% endif %}>Other</option>
-            </select>
+            <input type="number"
+                   name="stats.length_ft"
+                   value="{{ stats.length_ft }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Length in feet">
         </div>
+
         <div>
-            <label for="id_launch_type" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                Launch Type
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Speed (mph):
             </label>
-            <select name="stats.launch_type" 
-                    id="id_launch_type"
-                    class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
-                <option value="">Select launch type...</option>
-                <option value="CHAIN" {% if stats.launch_type == 'CHAIN' %}selected{% endif %}>Chain Lift</option>
-                <option value="CABLE" {% if stats.launch_type == 'CABLE' %}selected{% endif %}>Cable Launch</option>
-                <option value="HYDRAULIC" {% if stats.launch_type == 'HYDRAULIC' %}selected{% endif %}>Hydraulic Launch</option>
-                <option value="LSM" {% if stats.launch_type == 'LSM' %}selected{% endif %}>Linear Synchronous Motor</option>
-                <option value="LIM" {% if stats.launch_type == 'LIM' %}selected{% endif %}>Linear Induction Motor</option>
-                <option value="GRAVITY" {% if stats.launch_type == 'GRAVITY' %}selected{% endif %}>Gravity</option>
+            <input type="number"
+                   name="stats.speed_mph"
+                   value="{{ stats.speed_mph }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Speed in mph">
+        </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Inversions:
+            </label>
+            <input type="number"
+                   name="stats.inversions"
+                   value="{{ stats.inversions }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Number of inversions">
+        </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Launch Type:
+            </label>
+            <select name="stats.launch_type"
+                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                <option value="">Select launch type</option>
+                <option value="CHAIN_LIFT" {% if stats.launch_type == 'CHAIN_LIFT' %}selected{% endif %}>Chain Lift</option>
+                <option value="LSM" {% if stats.launch_type == 'LSM' %}selected{% endif %}>LSM</option>
+                <option value="HYDRAULIC" {% if stats.launch_type == 'HYDRAULIC' %}selected{% endif %}>Hydraulic</option>
+                <option value="TIRE_DRIVE" {% if stats.launch_type == 'TIRE_DRIVE' %}selected{% endif %}>Tire Drive</option>
+                <option value="CABLE_LIFT" {% if stats.launch_type == 'CABLE_LIFT' %}selected{% endif %}>Cable Lift</option>
                 <option value="OTHER" {% if stats.launch_type == 'OTHER' %}selected{% endif %}>Other</option>
             </select>
         </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Track Material:
+            </label>
+            <select name="stats.track_material"
+                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                <option value="">Select track material</option>
+                <option value="STEEL" {% if stats.track_material == 'STEEL' %}selected{% endif %}>Steel</option>
+                <option value="WOOD" {% if stats.track_material == 'WOOD' %}selected{% endif %}>Wood</option>
+                <option value="HYBRID" {% if stats.track_material == 'HYBRID' %}selected{% endif %}>Hybrid</option>
+            </select>
+        </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Coaster Type:
+            </label>
+            <select name="stats.roller_coaster_type"
+                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
+                <option value="">Select coaster type</option>
+                <option value="SIT_DOWN" {% if stats.roller_coaster_type == 'SIT_DOWN' %}selected{% endif %}>Sit Down</option>
+                <option value="INVERTED" {% if stats.roller_coaster_type == 'INVERTED' %}selected{% endif %}>Inverted</option>
+                <option value="FLYING" {% if stats.roller_coaster_type == 'FLYING' %}selected{% endif %}>Flying</option>
+                <option value="STAND_UP" {% if stats.roller_coaster_type == 'STAND_UP' %}selected{% endif %}>Stand Up</option>
+                <option value="WING" {% if stats.roller_coaster_type == 'WING' %}selected{% endif %}>Wing</option>
+                <option value="OTHER" {% if stats.roller_coaster_type == 'OTHER' %}selected{% endif %}>Other</option>
+            </select>
+        </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Number of Trains:
+            </label>
+            <input type="number"
+                   name="stats.trains_count"
+                   value="{{ stats.trains_count }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Number of trains">
+        </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Cars per Train:
+            </label>
+            <input type="number"
+                   name="stats.cars_per_train"
+                   value="{{ stats.cars_per_train }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Cars per train">
+        </div>
+
+        <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Seats per Car:
+            </label>
+            <input type="number"
+                   name="stats.seats_per_car"
+                   value="{{ stats.seats_per_car }}"
+                   min="0"
+                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
+                   placeholder="Seats per car">
+        </div>
     </div>
 </div>
diff --git a/templates/moderation/partials/submission_list.html b/templates/moderation/partials/submission_list.html
index 2191e604..e1fc3f96 100644
--- a/templates/moderation/partials/submission_list.html
+++ b/templates/moderation/partials/submission_list.html
@@ -439,9 +439,52 @@
                         <i class="mr-2 fas fa-check"></i>
                         Approve
                     </button>
-                    
+
                     <button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-red-600 rounded-lg hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 shadow-sm hover:shadow-md"
                             hx-post="{% url 'moderation:reject_submission' submission.id %}"
                             hx-target="#submissions-content"
                             hx-include="closest .review-notes"
-                            hx-confirm="Are you sure you want to reject
+                            hx-confirm="Are you sure you want to reject this submission?"
+                            hx-indicator="#loading-indicator">
+                        <i class="mr-2 fas fa-times"></i>
+                        Reject
+                    </button>
+                    {% endif %}
+                    
+                    {% if user.role == 'MODERATOR' and submission.status != 'ESCALATED' %}
+                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-yellow-600 rounded-lg hover:bg-yellow-500 dark:bg-yellow-700 dark:hover:bg-yellow-600 shadow-sm hover:shadow-md"
+                            hx-post="{% url 'moderation:escalate_submission' submission.id %}"
+                            hx-target="#submissions-content"
+                            hx-include="closest .review-notes"
+                            hx-confirm="Are you sure you want to escalate this submission?"
+                            hx-indicator="#loading-indicator">
+                        <i class="mr-2 fas fa-arrow-up"></i>
+                        Escalate
+                    </button>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% empty %}
+<div class="relative p-8 text-center bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
+    <div class="text-gray-600 dark:text-gray-400">
+        <i class="mb-4 text-5xl fas fa-inbox"></i>
+        <p class="text-lg">No submissions found matching your filters.</p>
+    </div>
+
+    <div id="loading-indicator" 
+         class="absolute inset-0 flex items-center justify-center rounded-lg htmx-indicator bg-white/80 dark:bg-gray-900/80">
+        <div class="flex items-center p-6 space-x-4">
+            <div class="w-8 h-8 border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
+            <span class="text-gray-900 dark:text-gray-300">Loading...</span>
+        </div>
+    </div>
+</div>
+{% endfor %}
+
+{% block extra_js %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+{% endblock %}