aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPriyansh <[email protected]>2021-12-17 04:44:28 -0500
committerPriyansh <[email protected]>2021-12-17 04:44:28 -0500
commit067e4aa78aea8916434ed57d5676efed8a2dfcf0 (patch)
treea17cd48ebac7d11a9582a658b1d7e15b04306760
parentf255d24707ef788ec9c725562d2a3b554f6019d6 (diff)
downloadtemp_pred_arima-067e4aa78aea8916434ed57d5676efed8a2dfcf0.tar.xz
temp_pred_arima-067e4aa78aea8916434ed57d5676efed8a2dfcf0.zip
Disable search button until processing is finished
Diffstat
-rw-r--r--static/js/prediction.js10
-rw-r--r--static/js/search.js2
-rw-r--r--templates/index.html51
3 files changed, 16 insertions, 47 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);
diff --git a/templates/index.html b/templates/index.html
index 440a237..92d020e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,42 +18,6 @@
<body>
<div class="relative min-h-screen md:flex" data-dev-hint="container">
-
- <!-- <aside id="sidebar"
- class="bg-gray-800 text-gray-100 w-1/6 space-y-6 pt-6 px-0 absolute inset-y-0 left-0 transform md:relative md:translate-x-0 transition duration-200 ease-in-out md:flex md:flex-col md:justify-between overflow-y-auto"
- data-dev-hint="sidebar; px-0 for frameless; px-2 for visually inset the navigation">
- <div class="flex flex-col space-y-6" data-dev-hint="optional div for having an extra footer navigation">
- <p class="text-white flex items-center space-x-2 px-4"
- title="Analyzing Climate Change using Earth Surface Temperature Visualization">
- <span class="text-2xl font-extrabold whitespace-nowrap truncate">Analyzing Climate Change using
- Earth Surface Temperature Visualization</span>
- </p>
-
- <nav data-dev-hint="main navigation">
- <div class="flex items-center space-x-2 py-2 px-4 relative w-full">
- <input type="text" class="bg-gray-600 rounded w-full p-3" placeholder="Search for a city..."
- id="citySearch" autocomplete="off" />
- <div id="result_container"
- class="absolute w-full p-3 bg-white top-14 -left-2 text-black max-h-64 overflow-y-auto hidden">
- <ul id="results" class="list-reset h-full block"></ul>
- </div>
- </div>
- <!-- <p class="flex items-center space-x-2 py-2 px-4"><span><strong>Date: </strong></span><input
- type="date" class="rounded bg-gray-600 w-full" id="startDate" /><span></p> -->
- <!-- <p class="flex items-center space-x-2 py-2 px-4"><strong>End Date: </strong></span><input -->
- <!-- type="date" class="rounded bg-gray-600 w-full" id="endDate" /></p> -->
- <!-- <p class="flex items-center space-x-2 py-2 px-4">
- <button id="displayData"
- class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-150 w-full text-center">
- Predict for Next 7 Days
- </button>
- </p>
- </nav>
- </div>
- </aside> -->
-
-
-
<main id="content" class="flex-1 p-6 lg:px-8 h-screen overflow-y-auto">
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
<div class="container flex flex-wrap items-center justify-between mx-auto">
@@ -76,7 +40,8 @@
class="block w-full p-2 pl-10 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search for a city..." id="citySearch" autocomplete="off" />
<div id="result_container"
- class="absolute w-full p-2 bg-white top-10 -left-0 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-sm max-h-64 overflow-y-auto hidden" style="z-index: 1000;">
+ class="absolute w-full p-2 bg-white top-10 -left-0 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-sm max-h-64 overflow-y-auto hidden"
+ style="z-index: 1000;">
<ul id="results" class="list-reset h-full block"></ul>
</div>
</div>
@@ -109,12 +74,12 @@
<ul class="range-labels">
<li class="active selected">Today</li>
- <li>2 days</li>
- <li>3 days</li>
- <li>4 days</li>
- <li>5 days</li>
- <li>6 days</li>
- <li>7 days</li>
+ <li>Tomorrow</li>
+ <li>Day 3</li>
+ <li>Day 4</li>
+ <li>Day 5</li>
+ <li>Day 6</li>
+ <li>Day 7</li>
</ul>
</div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-05 23:43:53 +0000