Update templates/index.html

templates/index.html

@@ -992,6 +992,12 @@
             animation: height-pulse 0.8s ease;
         }
 
+        input[type="text"]::-webkit-calendar-picker-indicator,
+        input[type="number"]::-webkit-calendar-picker-indicator {
+            filter: invert(1);
+            cursor: pointer;
+        }
+
         /* Responsive design */
         @media (max-width: 1024px) {
             .main-container {
@@ -1051,9 +1057,6 @@
     <div class="page-wrapper">
         <header class="hero-header" style="position: relative; padding-top: 40px; text-align: center;">
 
-            <!-- <div style="position: absolute; top: 7%; left: 1%; font-size: 3.2vw; line-height: 0.8;">
-                💦💧🌊
-            </div> -->
 
             <div style="display: inline-block; text-align: center; max-width: 90%; margin: 0 auto;">
                 <h1 style="margin: 0; font-size: 3rem; line-height: 1.2;">
@@ -1092,14 +1095,15 @@
                             <div class="input-card">
                                 <label for="latitude">Latitude</label>
                                 <input type="text" id="latitude" name="latitude" inputmode="text"
-                                    pattern="-?[0-9]*[.,]?[0-9]*" required placeholder="40.7128">
+                                    pattern="-?[0-9]*[.,]?[0-9]*" required placeholder="40.7128" list="lat-suggestions">
                                 <p class="helper-text">Range: -90 to 90</p>
                             </div>
 
                             <div class="input-card">
                                 <label for="longitude">Longitude</label>
                                 <input type="text" id="longitude" name="longitude" inputmode="text"
-                                    pattern="-?[0-9]*[.,]?[0-9]*" autocomplete="off" required placeholder="-74.0060">
+                                    pattern="-?[0-9]*[.,]?[0-9]*" autocomplete="off" required placeholder="-74.0060"
+                                    list="lon-suggestions">
                                 <p class="helper-text">Range: -180 to 180</p>
                             </div>
 
@@ -1158,13 +1162,13 @@
                             <div class="input-card">
                                 <label for="latitude2">Latitude</label>
                                 <input type="text" id="latitude2" name="latitude2" pattern="-?[0-9]*[.,]?[0-9]*"
-                                    autocomplete="off" required placeholder="40.7128">
+                                    autocomplete="off" required placeholder="40.7128" list="lat-suggestions">
                             </div>
 
                             <div class="input-card">
                                 <label for="longitude2">Longitude</label>
                                 <input type="text" id="longitude2" name="longitude2" pattern="-?[0-9]*[.,]?[0-9]*"
-                                    autocomplete="off" required placeholder="-74.0060">
+                                    autocomplete="off" required placeholder="-74.0060" list="lon-suggestions">
                             </div>
 
                             <div class="input-card">
@@ -1221,13 +1225,13 @@
                             <div class="input-card">
                                 <label for="latitude3">Latitude</label>
                                 <input type="text" id="latitude3" name="latitude3" pattern="-?[0-9]*[.,]?[0-9]*"
-                                    autocomplete="off" required placeholder="40.7128">
+                                    autocomplete="off" required placeholder="40.7128" list="lat-suggestions">
                             </div>
 
                             <div class="input-card">
                                 <label for="longitude3">Longitude</label>
                                 <input type="text" id="longitude3" name="longitude3" pattern="-?[0-9]*[.,]?[0-9]*"
-                                    autocomplete="off" required placeholder="-74.0060">
+                                    autocomplete="off" required placeholder="-74.0060" list="lon-suggestions">
                             </div>
 
                             <div class="input-card">
@@ -1329,23 +1333,162 @@
         </footer>
     </div>
 
+    <datalist id="lat-suggestions"></datalist>
+    <datalist id="lon-suggestions"></datalist>
+    <datalist id="height-suggestions"></datalist>
+    <datalist id="basement-suggestions"></datalist>
+
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const buttons = document.querySelectorAll('.predict-height-btn');
-            if (!buttons.length) {
-                return;
+        const CACHE_KEY = 'flood_assessment_cache';
+        const MAX_CACHE_SIZE = 5;
+
+        // Get cached entries 
+        function getCachedEntries() {
+            try {
+                const cached = localStorage.getItem(CACHE_KEY);
+                return cached ? JSON.parse(cached) : [];
+            } catch (e) {
+                console.error('Error reading cache:', e);
+                return [];
             }
+        }
+
+        function saveToCacheFunction(latitude, longitude, height, basement) {
+            try {
+                let entries = getCachedEntries();
+
+                const newEntry = {
+                    latitude: parseFloat(latitude).toFixed(6),
+                    longitude: parseFloat(longitude).toFixed(6),
+                    height: parseFloat(height).toFixed(2),
+                    basement: parseFloat(basement).toFixed(2),
+                    timestamp: Date.now()
+                };
+
+                // checknig if entry already exists
+                const exists = entries.some(entry =>
+                    entry.latitude === newEntry.latitude &&
+                    entry.longitude === newEntry.longitude &&
+                    entry.height === newEntry.height &&
+                    entry.basement === newEntry.basement
+                );
+
+                if (!exists) {
+                    entries.unshift(newEntry);
+
+                    if (entries.length > MAX_CACHE_SIZE) {
+                        entries = entries.slice(0, MAX_CACHE_SIZE);
+                    }
+
+                    localStorage.setItem(CACHE_KEY, JSON.stringify(entries));
+                    updateDatalistSuggestions();
+                }
+            } catch (e) {
+                console.error('Error saving to cache:', e);
+            }
+        }
+
+        function updateDatalistSuggestions() {
+            const entries = getCachedEntries();
 
-            buttons.forEach(button => {
-                const latId = button.dataset.latId;
-                const lonId = button.dataset.lonId;
-                const heightId = button.dataset.heightId;
-                const errorId = button.dataset.errorId;
+            updateDatalist('lat-suggestions', entries, 'latitude');
 
-                button.addEventListener('click', () => {
-                    predictHeight(latId, lonId, heightId, errorId, button);
+            updateDatalist('lon-suggestions', entries, 'longitude');
+
+            updateDatalist('height-suggestions', entries, 'height');
+
+            updateDatalist('basement-suggestions', entries, 'basement');
+        }
+
+        function updateDatalist(datalistId, entries, field) {
+            const datalist = document.getElementById(datalistId);
+            if (!datalist) return;
+
+            datalist.innerHTML = '';
+
+            entries.forEach((entry) => {
+                const option = document.createElement('option');
+                option.value = entry[field];
+
+                if (field === 'latitude') {
+                    option.label = `${entry.latitude} | Lon: ${entry.longitude}, H: ${entry.height}m, B: ${entry.basement}m`;
+                } else if (field === 'longitude') {
+                    option.label = `${entry.longitude} | Lat: ${entry.latitude}, H: ${entry.height}m, B: ${entry.basement}m`;
+                } else if (field === 'height') {
+                    option.label = `${entry.height}m | At: ${entry.latitude}, ${entry.longitude}`;
+                } else if (field === 'basement') {
+                    option.label = `${entry.basement}m | At: ${entry.latitude}, ${entry.longitude}`;
+                }
+
+                datalist.appendChild(option);
+            });
+        }
+
+        function setupAutoFill() {
+            const allInputs = [
+                { id: 'latitude', suffix: '' },
+                { id: 'longitude', suffix: '' },
+                { id: 'latitude2', suffix: '2' },
+                { id: 'longitude2', suffix: '2' },
+                { id: 'latitude3', suffix: '3' },
+                { id: 'longitude3', suffix: '3' }
+            ];
+
+            allInputs.forEach(({ id, suffix }) => {
+                const input = document.getElementById(id);
+                if (!input) return;
+
+                input.addEventListener('change', function () {
+                    const value = parseNumber(this.value);
+                    if (isNaN(value)) return;
+
+                    const entries = getCachedEntries();
+                    const field = id.includes('latitude') ? 'latitude' : 'longitude';
+                    const normalizedValue = value.toFixed(6);
+
+                    // find matching entry
+                    const match = entries.find(entry => entry[field] === normalizedValue);
+
+                    if (match) {
+                        // fill fields
+                        const latInput = document.getElementById('latitude' + suffix);
+                        const lonInput = document.getElementById('longitude' + suffix);
+                        const heightInput = document.getElementById('height' + suffix);
+                        const basementInput = document.getElementById('basement' + suffix);
+
+                        if (latInput && lonInput && heightInput && basementInput) {
+                            latInput.value = match.latitude;
+                            lonInput.value = match.longitude;
+                            heightInput.value = match.height;
+                            basementInput.value = match.basement;
+
+                            [latInput, lonInput, heightInput, basementInput].forEach(input => {
+                                input.classList.add('height-pulse');
+                                setTimeout(() => input.classList.remove('height-pulse'), 800);
+                            });
+                        }
+                    }
                 });
             });
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            updateDatalistSuggestions();
+            setupAutoFill();
+
+            const buttons = document.querySelectorAll('.predict-height-btn');
+            if (buttons.length > 0) {
+                buttons.forEach(button => {
+                    const latId = button.dataset.latId;
+                    const lonId = button.dataset.lonId;
+                    const heightId = button.dataset.heightId;
+                    const errorId = button.dataset.errorId;
+
+                    button.addEventListener('click', () => {
+                        predictHeight(latId, lonId, heightId, errorId, button);
+                    });
+                });
+            }
         });
 
         async function predictHeight(latId, lonId, heightId, errorId, button) {
@@ -1407,6 +1550,14 @@
             }
         }
 
+        // function to parse numbers with comma or dot as decimal separator
+        function parseNumber(value) {
+            if (typeof value === 'string') {
+                value = value.replace(',', '.');
+            }
+            return parseFloat(value);
+        }
+
         function switchTab(tabName) {
             document.querySelectorAll('.assessment-card').forEach(card => {
                 card.classList.remove('active');
@@ -1443,6 +1594,8 @@
                 const data = await response.json();
 
                 if (data.status === 'success') {
+                    // Save to cache on successful assessment
+                    saveToCacheFunction(latitude, longitude, height, basement);
                     displayResults(data, resultsId, endpoint);
                 } else {
                     throw new Error(data.detail || 'Assessment failed');
@@ -1631,8 +1784,8 @@
         }
 
         async function getHeightFromGBA(latId, lonId, heightId, errorId, button) {
-            const lat = parseFloat(document.getElementById(latId).value);
-            const lon = parseFloat(document.getElementById(lonId).value);
+            const lat = parseNumber(document.getElementById(latId).value);
+            const lon = parseNumber(document.getElementById(lonId).value);
 
             const errorBox = document.getElementById(errorId);
             if (errorBox) errorBox.textContent = '';