refactor code

dimagi · Nov 21, 2024 · eecad81 · eecad81
1 parent 76880ff
commit eecad81
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/commcare_connect/templates/opportunity/user_profile.html b/commcare_connect/templates/opportunity/user_profile.html
@@ -102,11 +102,13 @@ <h5 class="mb-0">Visit Locations</h5>
                 <div class="card-body p-3">
                   <h6 class="card-title mb-3">Catchment Areas</h6>
                   <div class="mb-2 d-flex align-items-center">
-                    <span class="d-inline-block me-2 rounded bg-primary" style="width: 20px; height: 20px; opacity: 0.3;"></span>
+                    <span class="d-inline-block me-2 rounded"
+                          style="width: 20px; height: 20px; opacity: 0.3; background-color: #3366ff;"></span>
                     <span>Active</span>
                   </div>
                   <div class="d-flex align-items-center">
-                    <span class="d-inline-block me-2 rounded bg-danger" style="width: 20px; height: 20px; opacity: 0.3;"></span>
+                    <span class="d-inline-block me-2 rounded"
+                          style="width: 20px; height: 20px; opacity: 0.3; background-color: #ff4d4d;"></span>
                     <span>Inactive</span>
                   </div>
                 </div>
@@ -156,20 +158,21 @@ <h6 class="card-title mb-3">Catchment Areas</h6>
           .addTo(map)
       })
 
+      const setMapStyle = (styleId, targetElementId, otherElementId) => {
+        map.setStyle(styleId);
+        const targetElement = document.getElementById(targetElementId);
+        targetElement.classList.add('active', 'pe-none');
+
+        const otherElement = document.getElementById(otherElementId);
+        otherElement.classList.remove('active', 'pe-none');
+      };
+
       document.getElementById('streets-v12').addEventListener('click', (e) => {
-        map.setStyle('mapbox://styles/mapbox/streets-v12');
-        e.target.classList.add('active');
-        e.target.classList.add('pe-none');
-        document.getElementById('satellite-streets-v12').classList.remove('active');
-        document.getElementById('satellite-streets-v12').classList.remove('pe-none');
+        setMapStyle('mapbox://styles/mapbox/streets-v12', 'streets-v12', 'satellite-streets-v12');
       });
 
       document.getElementById('satellite-streets-v12').addEventListener('click', (e) => {
-        map.setStyle('mapbox://styles/mapbox/satellite-streets-v12');
-        e.target.classList.add('active');
-        e.target.classList.add('pe-none');
-        document.getElementById('streets-v12').classList.remove('active');
-        document.getElementById('streets-v12').classList.remove('pe-none');
+        setMapStyle('mapbox://styles/mapbox/satellite-streets-v12', 'satellite-streets-v12', 'streets-v12');
       });
 
       map.on('style.load', () => {