improved home page ui and added some new pages and renamed history to…

… records
muhammad-fiaz · Nov 15, 2024 · 283d019 · 283d019
1 parent 4243fd2
commit 283d019
Show file tree

Hide file tree

Showing 10 changed files with 747 additions and 236 deletions.
diff --git a/app.py b/app.py
@@ -110,27 +110,94 @@ def loading():
     # Respond with a JSON object indicating that processing is complete
     return jsonify({'status': 'completed'})
 
+@app.route('/analysis-data', methods=['GET'])
+def fetch_analysis_data():
+    """
+    Fetches distinct values for locations, tags, priorities, and keywords from the database,
+    along with future prediction durations and additional timeframes for past data.
+
+    Returns:
+        json: A dictionary with lists of locations, tags, priorities, keywords, prediction durations, and past date ranges.
+    """
+    # Connect to the database
+    conn = sqlite3.connect('disaster_alerts.db')
+    c = conn.cursor()
+
+    # Fetch distinct locations
+    c.execute("SELECT DISTINCT country FROM alerts")
+    locations = [row[0] for row in c.fetchall()]
+
+    # Fetch and process distinct tags
+    c.execute("SELECT DISTINCT tags FROM alerts")
+    raw_tags = [row[0] for row in c.fetchall()]
+    distinct_tags = set()
+    for tag_list in raw_tags:
+        if tag_list:
+            distinct_tags.update([tag.strip() for tag in tag_list.split(',') if not tag.strip().isdigit()])
+
+    # Fetch and process distinct keywords
+    c.execute("SELECT DISTINCT keywords FROM alerts")
+    raw_keywords = [row[0] for row in c.fetchall()]
+    distinct_keywords = set()
+    for keyword_list in raw_keywords:
+        if keyword_list:
+            distinct_keywords.update(
+                [keyword.strip() for keyword in keyword_list.split(',') if not keyword.strip().isdigit()])
+    # Fetch distinct priorities
+    c.execute("SELECT DISTINCT priority FROM alerts")
+    priorities = [row[0] for row in c.fetchall()]
+
+    conn.close()
 
-@app.route('/history', methods=['GET'])
+    # Define prediction durations (future intervals)
+    prediction_durations = {
+        "durations": [
+            {"label": "1 Week", "value": 7},  # 7 days
+            {"label": "2 Weeks", "value": 14},  # 14 days
+            {"label": "1 Month", "value": 30},  # 30 days
+            {"label": "3 Months", "value": 90}  # 90 days
+        ]
+    }
+
+    # Define past date ranges
+    past_date_ranges = [
+        {"label": "Last Year to This Month", "value": "last_year_to_this_month"},
+        {"label": "Last Week", "value": "last_week"},
+        {"label": "Last 7 Days", "value": "last_7_days"}
+    ]
+
+    # Return data as JSON
+    return jsonify({
+        'locations': locations,
+        'tags': sorted(distinct_tags),
+        'priorities': priorities,
+        'keywords': sorted(distinct_keywords),
+        'prediction_durations': prediction_durations,
+        'past_date_ranges': past_date_ranges
+    })
+
+
+
+@app.route('/records', methods=['GET'])
 def history():
     """
-      Retrieves all historical alert data from the database and renders the history page.
+      Retrieves all historical alert data from the database and renders the records page.
 
       Returns:
-          str: Rendered HTML template for the history page with fetched data.
+          str: Rendered HTML template for the records page with fetched data.
       """
     # Connect to the database
     conn = sqlite3.connect('disaster_alerts.db')
     c = conn.cursor()
 
-    # Retrieve all history data in descending order (most recent first)
+    # Retrieve all records data in descending order (most recent first)
     c.execute("SELECT * FROM alerts ORDER BY id DESC")
-    history_data = c.fetchall()
+    records_data = c.fetchall()
 
     conn.close()
-    logly.info(f"Retrieved history data")
-    # Render the history template with the fetched data
-    return render_template('history.html', history=history_data)
+    logly.info(f"Retrieved records data")
+    # Render the records template with the fetched data
+    return render_template('records.html', records=records_data)
 
 
 @app.route('/report', methods=['GET'])
@@ -275,3 +342,22 @@ def analysis():
 
 
 
+@app.route('/license', methods=['GET'])
+def license():
+    """
+    Renders the License page.
+
+    Returns:
+        str: Rendered HTML template for the License page.
+    """
+    return render_template('license.html')
+
+@app.route('/notice', methods=['GET'])
+def notice():
+    """
+    Renders the Notice page.
+
+    Returns:
+        str: Rendered HTML template for the Notice page.
+    """
+    return render_template('notice.html')
diff --git a/database.py b/database.py
@@ -27,7 +27,7 @@ def init_db():
     conn = sqlite3.connect('disaster_alerts.db')
     c = conn.cursor()
 
-    # Create the alerts history table if it does not exist
+    # Create the alerts records table if it does not exist
     c.execute('''
         CREATE TABLE IF NOT EXISTS alerts (
             id INTEGER PRIMARY KEY AUTOINCREMENT,

diff --git a/fetch_alerts.py b/fetch_alerts.py
@@ -100,7 +100,7 @@ def store_results_in_current_db(alerts):
 
 def store_results_in_db(alerts):
     """
-    Stores the fetched alerts in the alerts history table in the database.
+    Stores the fetched alerts in the alerts records table in the database.
 
     Args:
         alerts (list): A list of tuples containing the alert details.

diff --git a/templates/analysis.html b/templates/analysis.html
@@ -1,4 +1,4 @@
-<!-- This Page is Still in Development for now I filled with placeholders   -->
+<!-- This Page is Still in Development for now I filled with placeholders -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -20,51 +20,46 @@ <h2 class="text-4xl font-bold text-white mb-6">Future Prediction Analysis</h2>
 
         <!-- Form with options on a single row -->
         <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
+            <h2 class="text-2xl mb-6 text-gray-900">Filter Options</h2>
             <form class="flex flex-wrap justify-between gap-4">
 
                 <!-- Location Selection -->
                 <div class="flex-1 min-w-[200px] mb-4">
                     <label for="location" class="block mb-2 text-sm font-medium text-gray-900">Location:</label>
                     <select id="location" name="location" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                        <option value="">Select a Location</option>
-                        <option value="New York">New York</option>
-                        <option value="Los Angeles">Los Angeles</option>
-                        <option value="Chicago">Chicago</option>
-                        <option value="Houston">Houston</option>
-                        <!-- Additional options can be added dynamically -->
+                        <option value="default">Select a Location</option>
                     </select>
                 </div>
 
-                <!-- Keywords Selection (Single Choice, Like Location) -->
+                <!-- Keywords Selection -->
                 <div class="flex-1 min-w-[200px] mb-4">
                     <label for="keywords" class="block mb-2 text-sm font-medium text-gray-900">Keywords:</label>
                     <select id="keywords" name="keywords" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                        <option value="">Select a Keyword</option>
-                        <option value="Prediction">Prediction</option>
-                        <option value="Analytics">Analytics</option>
-                        <option value="Data">Data</option>
-                        <option value="Trends">Trends</option>
-                        <!-- Additional options can be added dynamically -->
+                        <option value="default">Select a Keyword</option>
                     </select>
                 </div>
 
-                <!-- Tags Selection (Single Choice, Like Location) -->
+                <!-- Tags Selection -->
                 <div class="flex-1 min-w-[200px] mb-4">
                     <label for="tags" class="block mb-2 text-sm font-medium text-gray-900">Tags:</label>
                     <select id="tags" name="tags" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                        <option value="">Select a Tag</option>
-                        <option value="Urgent">Urgent</option>
-                        <option value="Important">Important</option>
-                        <option value="High Priority">High Priority</option>
-                        <!-- Additional options can be added dynamically -->
+                        <option value="default">Select a Tag</option>
+                    </select>
+                </div>
+
+                <!-- Priority Selection -->
+                <div class="flex-1 min-w-[200px] mb-4">
+                    <label for="priority" class="block mb-2 text-sm font-medium text-gray-900">Priority:</label>
+                    <select id="priority" name="priority" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <option value="default">Select a Priority</option>
                     </select>
                 </div>
 
                 <!-- Duration Selection -->
                 <div class="flex-1 min-w-[200px] mb-4">
                     <label for="duration" class="block mb-2 text-sm font-medium text-gray-900">Duration:</label>
                     <select id="duration" name="duration" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                        <option value="">Select Duration</option>
+                        <option value="default">Select Duration</option>
                         <option value="1">1 Week</option>
                         <option value="2">2 Weeks</option>
                         <option value="3">1 Month</option>
@@ -73,17 +68,18 @@ <h2 class="text-4xl font-bold text-white mb-6">Future Prediction Analysis</h2>
                         <option value="6">1 Year</option>
                     </select>
                 </div>
-
-            </form>
+<div class="w-full left-3">
+    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg w-full sm:w-auto">Apply</button>
+</div>            </form>
         </div>
 
-        <!-- Timeline Series (Single Row) -->
+        <!-- Timeline Series -->
         <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
             <h3 class="text-xl font-semibold mb-2">Prediction Timeline</h3>
             <canvas id="timeline-chart"></canvas>
         </div>
 
-        <!-- Chart Grid (2x2) -->
+        <!-- Chart Grid -->
         <div class="grid grid-cols-2 gap-6 mt-8">
             <!-- Histogram -->
             <div class="bg-white p-6 rounded-lg shadow-lg">
@@ -112,6 +108,34 @@ <h3 class="text-xl font-semibold mb-2">Line Chart</h3>
 
     </div>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                // Fetch data from the backend
+                const response = await fetch('/analysis-data');
+                const data = await response.json();
+
+                // Populate dropdowns
+                populateDropdown('location', data.locations);
+                populateDropdown('tags', data.tags);
+                populateDropdown('priority', data.priorities);
+                populateDropdown('keywords', data.keywords);
+            } catch (error) {
+                console.error('Error fetching analysis data:', error);
+            }
+        });
+
+        function populateDropdown(id, options) {
+            const dropdown = document.getElementById(id);
+            options.forEach(option => {
+                const opt = document.createElement('option');
+                opt.value = option;
+                opt.textContent = option;
+                dropdown.appendChild(opt);
+            });
+        }
+    </script>
+
     <script>
         // Sample Data for Prediction (replace this with real data from backend)
         const dates = ['2024-11-01', '2024-12-01', '2025-01-01', '2025-02-01'];
@@ -224,5 +248,6 @@ <h3 class="text-xl font-semibold mb-2">Line Chart</h3>
         });
     </script>
 
+
 </body>
 </html>