Plotly Integration in JS and Predict using building models

2 files changed, 137 insertions, 1 deletions

diff --git a/static/js/prediction.js b/static/js/prediction.js
new file mode 100644
index 0000000..499cba9
--- /dev/null
+++ b/static/js/prediction.js
@@ -0,0 +1,125 @@
+var displayDataButton = document.getElementById('displayData');
+
+var today = new Date();
+var dd = today.getDate();
+var mm = today.getMonth() + 1; //January is 0!
+var yyyy = today.getFullYear();
+
+if (dd < 10) {
+    dd = '0' + dd;
+}
+
+if (mm < 10) {
+    mm = '0' + mm;
+}
+
+var startDate = yyyy + '-' + mm + '-' + dd;
+
+// get date 7 days from today
+var date = new Date();
+date.setDate(date.getDate() + 7);
+var dd = date.getDate();
+var mm = date.getMonth() + 1; //January is 0!
+var yyyy = date.getFullYear();
+
+if (dd < 10) {
+    dd = '0' + dd;
+}
+
+if (mm < 10) {
+    mm = '0' + mm;
+}
+
+var endDate = yyyy + '-' + mm + '-' + dd;
+
+predictData(startDate, endDate, 1018, 'Buffalo');
+
+displayDataButton.addEventListener('click', e => {
+    e.preventDefault();
+    var cityId = document.getElementById('citySearch').getAttribute('data-city-id');
+    var cityName = document.getElementById('citySearch').value;
+    predictData(startDate, endDate, cityId, cityName);
+})
+
+function predictData(startDate, endDate, cityId, cityName) {
+    var startDateValue = startDate;
+    var endDateValue = endDate;
+    if (startDateValue == '' || endDateValue == '') {
+        alert('Please enter a start and end date');
+    } else if (endDateValue < startDateValue) {
+        alert('Please enter a valid date range');
+    } else {
+        displayDataButton.classList.add('hidden');
+        document.getElementById("processingButton").classList.remove('hidden');
+        document.getElementById('predictionImage').innerHTML = "";
+        $.post("/receiveDates", {
+            start_date: startDateValue,
+            end_date: endDateValue,
+            city_id: cityId
+        }, data => {
+            console.log(data);
+            var x = data.x_data;
+
+            var y = data.y_data.map(function (item) {
+                return Math.round(item * 100) / 100;
+            });
+
+
+            var upperBound = data.upper_bound.map(function (item) {
+                return Math.round(item * 100) / 100;
+            });
+            var lowerBound = data.lower_bound.map(function (item) {
+                return Math.round(item * 100) / 100;
+            });
+
+            var trace1 = {
+                x: x,
+                y: lowerBound,
+                line: { width: 1 },
+                mode: "lines",
+                name: "Lower Bound",
+                type: "scatter",
+                line: { color: "rgb(0,100,80)" }
+            };
+
+            var trace2 = {
+                x: x,
+                y: y,
+                type: "scatter",
+                fillcolor: "rgba(231,107,243,0.0)",
+                mode: "lines",
+                fill: "tozerox",
+                line: { color: "rgb(31, 119, 180)" },
+                name: "Prediction"
+            };
+
+            var trace3 = {
+                x: x,
+                y: upperBound,
+                line: { width: 1 },
+                mode: "lines",
+                name: "Upper Bound",
+                type: "scatter",
+                line: { color: "rgb(0,176,246)" }
+            };
+
+            var data = [trace1, trace2, trace3];
+            var layout = {
+                showlegend: true,
+                xaxis: {
+                    type: 'date',
+                    title: 'Date'
+                },
+                yaxis: {
+                    title: 'Daily Mean Temperature (˚C)'
+                },
+                title: '7 Day Weather Forecast for ' + cityName
+            };
+
+            Plotly.newPlot('predictionImage', data, layout);
+
+            document.getElementById("processingButton").classList.add('hidden');
+            displayDataButton.classList.remove('hidden');
+        });
+    }
+}
\ No newline at end of file
diff --git a/static/js/search.js b/static/js/search.js
index 05ddb8c..c96e003 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -8,7 +8,15 @@ citySearch.addEventListener('keyup', (e) => {
     if (results.length > 0) {
         const resultContainer = document.getElementById('result_container');
         resultContainer.classList.remove('hidden');
-        document.getElementById('results').innerHTML = "";
+        try {
+            document.getElementById('results').innerHTML = "";
+        } catch (e) {
+            // Create the results container
+            const results = document.createElement('ul');
+            results.id = 'results';
+            results.classList.add('list-reset', 'h-full', 'block');
+            resultContainer.appendChild(results);
+        }
         for (var result of results) {
             const listElement = document.createElement('li');
             listElement.classList.add('flex', 'items-center', 'space-x-2', 'py-2', 'px-4', 'relative', 'w-full', 'hover:bg-blue-600', 'hover:text-white', 'cursor-pointer');
@@ -17,8 +25,11 @@ citySearch.addEventListener('keyup', (e) => {
             listElement.setAttribute('cityId', result.item.cityId);
             listElement.innerHTML = `<span class="text-sm font-semibold">${result.item.city}</span>`;
             listElement.addEventListener('click', (e) => {
+                citySearch.removeAttribute('data-city-id');
                 citySearch.value = e.target.innerText;
+                citySearch.setAttribute('data-city-id', e.target.getAttribute('cityId'));
                 resultContainer.classList.add('hidden');
+                resultContainer.innerHTML = "";
                 city = {
                     city: e.target.innerText,
                     latitude: e.target.getAttribute('latitude'),