Edit page with no working endpoints

app/routes.py

@@ -1,5 +1,6 @@
 # app/routes.py
 from app import app
+from .utils.monitoring.logger import logger
 import os
 from app.views import index, metrics, trigger_error
 import requests
@@ -31,4 +32,11 @@ def get_domain_summary():
         "CF-Access-Client-Secret": os.environ.get('CF_ACCESS_CLIENT_SECRET'),
     }
     response = requests.get(url, headers=headers)
-    return jsonify(response.json())
+    return jsonify(response.json())
+
+
+@app.route('/edit', methods=['GET', 'POST'])
+def edit_domains():
+    if request.method == 'POST':
+        logger.info('event happened')
+    return render_template('edit.html')

app/static/js/main.js

@@ -38,3 +38,48 @@ $(document).ready(function() {
 });
 
 
+// Edit Page
+document.getElementById('search-form').addEventListener('submit', function(event) {
+  event.preventDefault();
+  const domain = document.getElementById('search-bar').value;
+  const url = `https://reports.openato.com/domain/list-update?format=json&domain=${domain}`;
+  fetch(url)
+    .then(response => response.json())
+    .then(data => renderDomainsTable(data))
+    .catch(error => console.error("Error fetching domain list:", error));
+});
+
+function renderDomainsTable(domains) {
+  const tableBody = document.getElementById('domains-table');
+  tableBody.innerHTML = ""; // Clear previous results
+
+  domains.forEach(domain => {
+    const row = `<tr>
+        <td>${domain.domain_id}</td>
+        <td>${domain.domain}</td>
+        <td><input type="checkbox" data-id="${domain.domain_id}" class="is-active" ${domain.is_domain_active ? 'checked' : ''}></td>
+        <td><input type="checkbox" data-id="${domain.domain_id}" class="is-objective" ${domain.is_domain_objective ? 'checked' : ''}></td>
+    </tr>`;
+    tableBody.innerHTML += row;
+  });
+}
+
+document.getElementById('edit-form').addEventListener('submit', function(event) {
+  event.preventDefault();
+  const updateData = Array.from(document.querySelectorAll('.is-active, .is-objective'))
+    .map(input => ({
+      domain_id: input.dataset.id,
+      is_active: document.querySelector(`.is-active[data-id="${input.dataset.id}"]`).checked,
+      is_objective: document.querySelector(`.is-objective[data-id="${input.dataset.id}"]`).checked
+    }));
+
+  // Now you can send updateData to the server as JSON
+  fetch('https://reports.openato.com/domain/update', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(updateData)
+  })
+  .then(response => response.json())
+  .then(data => alert('Update successful!'))
+  .catch(error => alert('An error occurred while updating the domains.'));
+});

app/templates/edit.html

@@ -0,0 +1,26 @@
+<!-- templates/edit.html -->
+{% extends "layout.html" %}
+{% block title %}Edit Domains{% endblock %}
+{% block content %}
+    <h2>Edit Domains</h2>
+    <form id="search-form">
+        <input type="text" id="search-bar" placeholder="Enter the domain name">
+        <button type="submit">Search</button>
+    </form>
+    <form id="edit-form">
+        <table>
+            <thead>
+                <tr>
+                    <th>Domain ID</th>
+                    <th>Domain</th>
+                    <th>Is Active</th>
+                    <th>Is Objective</th>
+                </tr>
+            </thead>
+            <tbody id="domains-table">
+                <!-- The results will be inserted here -->
+            </tbody>
+        </table>
+        <button type="submit">Save</button>
+    </form>
+{% endblock %}