From 1eff1c20095a2191c79c1a2d904af01a6440f4cd Mon Sep 17 00:00:00 2001 From: hemant10yadav Date: Thu, 21 Nov 2024 07:47:10 +0530 Subject: [PATCH 1/5] added street view and fixed opacity --- commcare_connect/static/js/project.js | 2 +- .../templates/opportunity/user_profile.html | 20 ++++++++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/commcare_connect/static/js/project.js b/commcare_connect/static/js/project.js index 83ba289b..b2665b39 100644 --- a/commcare_connect/static/js/project.js +++ b/commcare_connect/static/js/project.js @@ -67,7 +67,7 @@ window.addAccuracyCircles = addAccuracyCircles; function addCatchmentAreas(map, catchments) { const ACTIVE_COLOR = '#3366ff'; const INACTIVE_COLOR = '#ff4d4d'; - const CIRCLE_OPACITY = 0.3; + const CIRCLE_OPACITY = 0.15; map.on('load', () => { const catchmentCircles = catchments.map((catchment) => diff --git a/commcare_connect/templates/opportunity/user_profile.html b/commcare_connect/templates/opportunity/user_profile.html index fe4fd4e0..084532d0 100644 --- a/commcare_connect/templates/opportunity/user_profile.html +++ b/commcare_connect/templates/opportunity/user_profile.html @@ -45,6 +45,14 @@

{{access.display_name}}

{{access.last_visit_date}}
+
@@ -81,7 +89,7 @@
Catchment Areas
{{ user_catchments|json_script:"userCatchments" }} {% endblock %} From 76880ffb8cfaa985fbaa04b85f992d2f794ab727 Mon Sep 17 00:00:00 2001 From: hemant10yadav Date: Thu, 21 Nov 2024 10:07:22 +0530 Subject: [PATCH 2/5] fixed catchement areas were disappering after change in map style --- commcare_connect/static/js/project.js | 39 ++-- .../templates/opportunity/user_profile.html | 186 ++++++++++++------ 2 files changed, 145 insertions(+), 80 deletions(-) diff --git a/commcare_connect/static/js/project.js b/commcare_connect/static/js/project.js index b2665b39..d960110d 100644 --- a/commcare_connect/static/js/project.js +++ b/commcare_connect/static/js/project.js @@ -69,14 +69,19 @@ function addCatchmentAreas(map, catchments) { const INACTIVE_COLOR = '#ff4d4d'; const CIRCLE_OPACITY = 0.15; - map.on('load', () => { - const catchmentCircles = catchments.map((catchment) => - circle([catchment.lng, catchment.lat], catchment.radius, { - units: 'meters', - properties: { active: catchment.active }, - }), - ); + const catchmentCircles = catchments.map((catchment) => + circle([catchment.lng, catchment.lat], catchment.radius, { + units: 'meters', + properties: { active: catchment.active }, + }), + ); + if (map.getSource('catchment_circles')) { + map.getSource('catchment_circles').setData({ + type: 'FeatureCollection', + features: catchmentCircles, + }); + } else { map.addSource('catchment_circles', { type: 'geojson', data: { @@ -105,17 +110,17 @@ function addCatchmentAreas(map, catchments) { 'line-opacity': 0.5, }, }); + } - if (catchments?.length) { - window.Alpine.nextTick(() => { - const legendElement = document.getElementById('legend'); - if (legendElement) { - const legendData = window.Alpine.$data(legendElement); - legendData.show = true; - } - }); - } - }); + if (catchments?.length) { + window.Alpine.nextTick(() => { + const legendElement = document.getElementById('legend'); + if (legendElement) { + const legendData = window.Alpine.$data(legendElement); + legendData.show = true; + } + }); + } } window.addCatchmentAreas = addCatchmentAreas; diff --git a/commcare_connect/templates/opportunity/user_profile.html b/commcare_connect/templates/opportunity/user_profile.html index 084532d0..174c8cf4 100644 --- a/commcare_connect/templates/opportunity/user_profile.html +++ b/commcare_connect/templates/opportunity/user_profile.html @@ -22,63 +22,112 @@ -
-
-

{{access.display_name}}

-
{{access.user.username}}
-
-
-
-
{% translate "Phone" %}
-
{{access.user.phone_number}}
-
-
-
{% translate "Learn Progress" %}
-
{{access.learn_progress}}%
-
-
-
{% translate "Total Visits" %}
-
{{access.visit_count}}
+
+
+
+ +
+
+ {{access.display_name|slice:":1"}} +
+

{{access.display_name}}

+
{{access.user.username}}
-
-
{% translate "Last Visit Date" %}
-
{{access.last_visit_date}}
+ + +
+
+
+
+ +
{% translate "Phone" %}
+
{{access.user.phone_number}}
+
+
+
+
+
+
+ +
{% translate "Learn Progress" %}
+
+
+
+
+ {{access.learn_progress}}% +
+
+
+
+
+
+
+ +
{% translate "Total Visits" %}
+
{{access.visit_count}}
+
+
+
+
+
+
+ +
{% translate "Last Visit" %}
+
{{access.last_visit_date}}
+
+
+
-
- -
-
-
-
-
Catchment Areas
-
- - Active + + +
+
+
+
Visit Locations
+
+ + +
-
- - Inactive +
+
+
+
+
Catchment Areas
+
+ + Active +
+
+ + Inactive +
+
+
+ + +
+ {% if access.suspended %} + + {% translate "Revoke Suspension" %} + + {% else %} + + {% endif %} +
- {% if access.suspended %} - - {% translate "Revoke Suspension" %} - - {% else %} - - {% endif %}
{% endblock content %} @@ -89,33 +138,44 @@
Catchment Areas
{{ user_catchments|json_script:"userCatchments" }} {% endblock %} From eecad814876217662cbe26f5366a2fff6749cdc2 Mon Sep 17 00:00:00 2001 From: hemant10yadav Date: Thu, 21 Nov 2024 10:47:18 +0530 Subject: [PATCH 3/5] refactor code --- .../templates/opportunity/user_profile.html | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/commcare_connect/templates/opportunity/user_profile.html b/commcare_connect/templates/opportunity/user_profile.html index 174c8cf4..a031f3f5 100644 --- a/commcare_connect/templates/opportunity/user_profile.html +++ b/commcare_connect/templates/opportunity/user_profile.html @@ -102,11 +102,13 @@
Visit Locations
Catchment Areas
- + Active
- + Inactive
@@ -156,20 +158,21 @@
Catchment Areas
.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', () => { From 4ff0ae9065d0ff0b383baba0039c480be0cfc6c6 Mon Sep 17 00:00:00 2001 From: hemant10yadav Date: Thu, 21 Nov 2024 14:30:31 +0530 Subject: [PATCH 4/5] used alpine @click event --- .../templates/opportunity/user_profile.html | 57 +++++++++---------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/commcare_connect/templates/opportunity/user_profile.html b/commcare_connect/templates/opportunity/user_profile.html index a031f3f5..714a1c68 100644 --- a/commcare_connect/templates/opportunity/user_profile.html +++ b/commcare_connect/templates/opportunity/user_profile.html @@ -83,15 +83,14 @@
{% translate "Last Visit" %}
-
-
+
Visit Locations
- -
@@ -115,7 +114,6 @@
Catchment Areas
-
@@ -143,7 +141,7 @@
Catchment Areas
mapboxgl.accessToken = "{{ MAPBOX_TOKEN }}"; const map = new mapboxgl.Map({ container: 'user-visit-map', - style: 'mapbox://styles/mapbox/streets-v12', // Default to streets style + style: 'mapbox://styles/mapbox/streets-v12', center: [{{ lng_avg }}, {{ lat_avg }}], zoom: 14, }); @@ -151,33 +149,34 @@
Catchment Areas
const userVisits = JSON.parse(document.getElementById('userVisits').textContent); const userCatchments = JSON.parse(document.getElementById('userCatchments').textContent); - userVisits.forEach(loc => { - new mapboxgl.Marker() - .setLngLat([loc.lng, loc.lat]) - .setPopup(new mapboxgl.Popup().setHTML(`${loc.entity_name}
${loc.visit_date}`)) - .addTo(map) - }) - - const setMapStyle = (styleId, targetElementId, otherElementId) => { - map.setStyle(styleId); - const targetElement = document.getElementById(targetElementId); - targetElement.classList.add('active', 'pe-none'); + map.on('load', () => { + userVisits.forEach(loc => { + new mapboxgl.Marker() + .setLngLat([loc.lng, loc.lat]) + .setPopup(new mapboxgl.Popup().setHTML(`${loc.entity_name}
${loc.visit_date}`)) + .addTo(map) + }); - const otherElement = document.getElementById(otherElementId); - otherElement.classList.remove('active', 'pe-none'); - }; - - document.getElementById('streets-v12').addEventListener('click', (e) => { - setMapStyle('mapbox://styles/mapbox/streets-v12', 'streets-v12', 'satellite-streets-v12'); + addAccuracyCircles(map, userVisits); + addCatchmentAreas(map, userCatchments); }); - document.getElementById('satellite-streets-v12').addEventListener('click', (e) => { - setMapStyle('mapbox://styles/mapbox/satellite-streets-v12', 'satellite-streets-v12', 'streets-v12'); - }); + // Watch for Alpine.js style changes + Alpine.effect(() => { + const alpineData = Alpine.$data(document.querySelector('[x-data]')); + const currentStyle = alpineData.currentStyle; + const styles = { + 'streets-v12': 'mapbox://styles/mapbox/streets-v12', + 'satellite-streets-v12': 'mapbox://styles/mapbox/satellite-streets-v12' + }; + map.setStyle(styles[currentStyle]); - map.on('style.load', () => { - addAccuracyCircles(map, userVisits); - addCatchmentAreas(map, userCatchments); + // Re-add circles and catchments after style changes + map.once('style.load', () => { + alpineData.currentStyle = currentStyle; + addAccuracyCircles(map, userVisits); + addCatchmentAreas(map, userCatchments); + }); }); }); From 1b57aec98ba6f1861f9babe62f9a8a060ef75a69 Mon Sep 17 00:00:00 2001 From: hemant10yadav Date: Thu, 21 Nov 2024 21:43:03 +0530 Subject: [PATCH 5/5] fix for accuracy circles --- commcare_connect/static/js/project.js | 32 ++++++++++++++++++--------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/commcare_connect/static/js/project.js b/commcare_connect/static/js/project.js index d960110d..ef6e4946 100644 --- a/commcare_connect/static/js/project.js +++ b/commcare_connect/static/js/project.js @@ -24,13 +24,22 @@ window.circle = circle; * @param {Array.<{lng: float, lat: float, precision: float}> visit_data - Visit location data for User */ function addAccuracyCircles(map, visit_data) { - map.on('load', () => { - const visit_accuracy_circles = []; - visit_data.forEach((loc) => { - visit_accuracy_circles.push( - circle([loc.lng, loc.lat], loc.precision, { units: 'meters' }), - ); + const FILL_OPACITY = 0.1; + const OUTLINE_COLOR = '#fcbf49'; + const OUTLINE_WIDTH = 3; + const OUTLINE_OPACITY = 0.5; + + const visit_accuracy_circles = visit_data.map((loc) => + circle([loc.lng, loc.lat], loc.precision, { units: 'meters' }), + ); + + // Check if the source exists, then update or add the source + if (map.getSource('visit_accuracy_circles')) { + map.getSource('visit_accuracy_circles').setData({ + type: 'FeatureCollection', + features: visit_accuracy_circles, }); + } else { map.addSource('visit_accuracy_circles', { type: 'geojson', data: { @@ -45,21 +54,22 @@ function addAccuracyCircles(map, visit_data) { type: 'fill', paint: { 'fill-antialias': true, - 'fill-opacity': 0.3, + 'fill-opacity': FILL_OPACITY, }, }); + // Add the outline layer map.addLayer({ id: 'visit-accuracy-circle-outlines-layer', source: 'visit_accuracy_circles', type: 'line', paint: { - 'line-color': '#fcbf49', - 'line-width': 3, - 'line-opacity': 0.5, + 'line-color': OUTLINE_COLOR, + 'line-width': OUTLINE_WIDTH, + 'line-opacity': OUTLINE_OPACITY, }, }); - }); + } } window.addAccuracyCircles = addAccuracyCircles;