Disable search button until processing is finished

2 files changed, 8 insertions, 4 deletions

diff --git a/static/js/prediction.js b/static/js/prediction.js
index 4470364..a6063a2 100644
--- a/static/js/prediction.js
+++ b/static/js/prediction.js
@@ -40,7 +40,11 @@ displayDataButton.addEventListener('click', e => {
     var cityName = document.getElementById('citySearch').value;
     var latitude = document.getElementById('citySearch').getAttribute('latitude');
     var longitude = document.getElementById('citySearch').getAttribute('longitude');
-    predictData(startDate, endDate, cityId, cityName, latitude, longitude);
+    if (!cityName) {
+        alert('Please enter a city name');
+    } else {
+        predictData(startDate, endDate, cityId, cityName, latitude, longitude);
+    }
 })
 
 function predictData(startDate, endDate, cityId, cityName, latitude, longitude) {
@@ -53,7 +57,7 @@ function predictData(startDate, endDate, cityId, cityName, latitude, longitude)
     } else if (endDateValue < startDateValue) {
         alert('Please enter a valid date range');
     } else {
-        displayDataButton.classList.add('hidden');
+        displayDataButton.setAttribute('disabled', 'disabled');
         document.getElementById('citySearch').setAttribute('disabled', 'disabled');
         document.getElementById("processingButton").classList.remove('hidden');
         document.getElementById('predictionImage').innerHTML = "";
@@ -124,8 +128,8 @@ function predictData(startDate, endDate, cityId, cityName, latitude, longitude)
             Plotly.newPlot('predictionImage', data, layout);
 
             document.getElementById("processingButton").classList.add('hidden');
-            displayDataButton.classList.remove('hidden');
             document.getElementById('citySearch').removeAttribute('disabled');
+            displayDataButton.removeAttribute('disabled');
             document.getElementById('rangeContainer').classList.remove('hidden');
             changeColor({
                 city: cityName,
diff --git a/static/js/search.js b/static/js/search.js
index f36a2c6..f6d2ece 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -19,7 +19,7 @@ citySearch.addEventListener('keyup', (e) => {
         }
         for (var result of results) {
             const listElement = document.createElement('li');
-            listElement.classList.add('flex', 'text-gray-900', 'items-center', 'py-2', 'px-4', 'relative', 'w-full', 'hover:bg-indigo-600', 'hover:text-white', 'cursor-pointer');
+            listElement.classList.add('flex', 'text-gray-900', 'items-center', 'py-2', 'px-4', 'relative', 'w-full', 'hover:bg-indigo-600', 'hover:text-white', 'cursor-pointer', 'rounded-lg');
             listElement.setAttribute('latitude', result.item.latitude);
             listElement.setAttribute('longitude', result.item.longitude);
             listElement.setAttribute('cityId', result.item.cityId);