Merge pull request #109 from cmu-delphi/OKRS24-198

Okrs24 198

Author: dmytrotsko

src/signals/serializers.py

@@ -31,14 +31,3 @@ class Meta:
         model = Signal
         fields = '__all__'
 
-
-class GeographyUnitSerialializer(ModelSerializer):
-    """
-    Serializer for the GeographyUnit model.
-    """
-
-    category = SlugRelatedField(read_only=True, slug_field='name')
-
-    class Meta:
-        model = GeographyUnit
-        fields = '__all__'

src/signals/urls.py

@@ -5,7 +5,6 @@
     SignalsDetailView,
     SignalsListApiView,
     SignalsListView,
-    GeographyUnitListApiView
 )
 
 urlpatterns: list[URLPattern] = [
@@ -15,5 +14,4 @@
 
     # REST API
     path('api/v1/signals/', SignalsListApiView.as_view(), name='signals_api'),
-    path('api/v1/geography_units/', GeographyUnitListApiView.as_view(), name='geography_units_api')
 ]

src/signals/views.py

@@ -2,15 +2,14 @@
 
 from django.conf import settings
 from django.views.generic import DetailView, ListView
-from django.db.models import Q
 from django_filters.rest_framework import DjangoFilterBackend
 from rest_framework.filters import SearchFilter
 from rest_framework.generics import ListAPIView
 
 from signals.filters import SignalFilter
 from signals.forms import SignalFilterForm
-from signals.models import Signal, GeographyUnit
-from signals.serializers import SignalSerializer, GeographyUnitSerialializer
+from signals.models import Signal
+from signals.serializers import SignalSerializer
 
 
 class SignalsListView(ListView):
@@ -127,32 +126,3 @@ class SignalsListApiView(ListAPIView):
         "source__name",
         "time_label",
     )
-
-
-class GeographyUnitListApiView(ListAPIView):
-    """
-    ListAPIView for retrieving a list of Signal objects via API.
-    """
-
-    queryset = GeographyUnit.objects.all()
-    serializer_class = GeographyUnitSerialializer
-    search_fields = ("name")
-    filter_backends = [DjangoFilterBackend]
-    filterset_fields = (
-        "name",
-        "display_name",
-        "geography__name"
-    )
-
-    def get_queryset(self):
-        search_term = self.request.GET.get('term')
-        if search_term:
-            queries: list[Q] = []
-            for field in ['name', 'display_name']:
-                queries.append(Q(**{f'{field}__icontains': search_term}))
-            query = queries.pop()
-
-            for item in queries:
-                query |= item
-            return GeographyUnit.objects.filter(query)
-        return super().get_queryset()

src/templates/signals/epivis_export_data_block.html

@@ -4,6 +4,11 @@ <h5>Plot / Export data</h5>
         <div class="card">
             <div class="card-body">
                 <form class="margin-top-1rem" onsubmit="submitMode(event)" id="epivis-form">
+
+                    <div class="alert alert-warning alert-dismissible fade show" role="alert" id="warning-alert">
+                        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+                    </div>
+
                     <div class="row">
                         <div class="col-2">
                             <label class="form-label"
@@ -99,71 +104,46 @@ <h5>Plot / Export data</h5>
     </div>
 </section>
 <script>
-    function initGeographicValueSelect(mode) {
-        var maxSelectionLength = 1;
+    var geoValues = [];
+    var currentMode = 'epivis';
+    
+    function getFilteredGeographicValues(geographicType) {
+        var data = geoValues.reduce((data, geoValue) => {
+            if (geoValue.geoType === geographicType) {
+                data.push(geoValue);
+            }
+            return data;
+        }, []);
+        return data;
+    }
+
+    function initGeographicValueSelect(mode, geographicType = null) {
+        var maximumSelectionLength = 1;
         if (mode === 'epivis') {
-            maxSelectionLength = 1;
+            maximumSelectionLength = 1;
+        } else {
+            maximumSelectionLength = 10;
+        }
+
+        if (geographicType) {
+            var data = getFilteredGeographicValues(geographicType);
         } else {
-            maxSelectionLength = 10;
+            data = [];
         }
+        
+
         $('#geographic_value').select2({
-            ajax: {
-                url: '{% url 'geography_units_api' %}',
-                dataType: 'json',
-                data: function (params) {
-                    var geographic_type = document.getElementById('geographic_type');
-                    return {
-                        geography__name: geographic_type.value,
-                        term: params.term,
-                        limit: 50
-                    };
-                },
-                processResults: function (data) {
-                    return {
-                        results: $.map(data.results, function (item) {
-                            if (typeof item.geo_id === 'string') {
-                                return {
-                                    text: item.display_name,
-                                    id: item.geo_id.toLowerCase()
-                                }
-                            } else {
-                                return {
-                                    text: item.display_name,
-                                    id: item.geo_id
-                                }
-                            }
-                        })
-                    };
-                }
-            },
+            data: data,
             minimumInputLength: 0,
-            maximumSelectionLength: maxSelectionLength,
+            maximumSelectionLength: maximumSelectionLength,
         });
     }
 
-    $(document).ready(function () {
-        initGeographicValueSelect('epivis');
-    });
-
     document.getElementById('geographic_type').addEventListener("change", (event) => {
-        $('#geographic_value').val(null).trigger('change');
+        $('#geographic_value').empty();
+        initGeographicValueSelect(currentMode, event.target.value);
     })
 
-    document.getElementsByName('modes').forEach((el) => {
-        el.addEventListener('change', (event) => {
-            $('#geographic_value').val(null).trigger('change');
-            //$('#geographic_value').select2('destroy');
-            if (event.target.value === 'epivis') {
-                initGeographicValueSelect(event.target.value);
-            } else {
-                initGeographicValueSelect('export');
-            }
-            handleModeChange(event.target.value);
-        });
-    });
-
-    var currentMode = 'epivis';
-    
     function handleModeChange(mode) {
         document.getElementById("epivis-form").reset();
 
@@ -186,17 +166,49 @@ <h5>Plot / Export data</h5>
         });
     }
 
+    document.getElementsByName('modes').forEach((el) => {
+        el.addEventListener('change', (event) => {
+            $('#geographic_value').empty();
+            currentMode = event.target.value;
+            initGeographicValueSelect(event.target.value)
+            handleModeChange(event.target.value);
+        });
+    });
+
+
+    $(document).ready(function () {
+        {% for geography in signal.available_geography.all %}
+            {% for unit in geography.geography_units.all %}
+                geoValues.push({'id': '{{ unit.geo_id }}', 'geoType': '{{ unit.geography }}', 'text': '{{ unit.display_name }}'});   
+            {% endfor %}
+        {% endfor %}
+
+        $('#geographic_value').select2({
+            data: [],
+            minimumInputLength: 0,
+            maximumSelectionLength: 1,
+        });
+    });
+
+    $("#warning-alert").hide();
+
+    function showWarningAlert(warningMessage) {
+        $("#warning-alert").html(warningMessage);
+        $("#warning-alert").fadeTo(2000, 500).slideUp(1000, function() {
+            $("#warning-alert").slideUp(1000);
+        });
+    }
 
     function submitMode(event) {
         event.preventDefault();
-
+        
         var dataSource = document.getElementById('source').value;
         var dataSignal = document.getElementById('signal').value;
         var geographicType = document.getElementById('geographic_type').value;
         var geographicValue = $('#geographic_value').select2('data').map((el) => el.id).join(',');
 
         if (geographicType === 'Choose...' || geographicValue === '') {
-            alert('Please select Geographic Type and Geographic Value!');
+            showWarningAlert("Geographic Type or Geographic Value is not selected.");
             return;
         }
 
@@ -206,20 +218,20 @@ <h5>Plot / Export data</h5>
 
             epiVisUrl += `#${urlParamsEncoded}`;
             window.open(epiVisUrl, '_blank').focus();
-            
         } else {
             var startDate = document.getElementById('start_date').value;
             var endDate = document.getElementById('end_date').value;
 
             var dataExportUrl = "{{ data_export_url }}";
 
             if (startDate === '' || endDate === '') {
-                alert('Please select start and end date');
+                showWarningAlert("Start Date or End Date is not selected.")
                 return;
             }
 
             dataExportUrl += `?signal=${dataSource}:${dataSignal}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValue}`;
             window.open(dataExportUrl, '_blank').focus();
         }
     }
+
 </script>