recommended price bug fix

lib/proptracker_web/controllers/advertisement_html/edit.html.heex

@@ -141,3 +141,57 @@
 
   <.button type="submit">Update Advertisement</.button>
 </.form>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const getPriceButton = document.getElementById("get-recommended-price");
+    const priceInput = document.getElementById("price-input");
+    const squareMetersInput = document.getElementById("square-meters-input");
+    const locationInput = document.getElementById("location-input");
+    const roomsInput = document.getElementById("rooms-input");
+    const recommendedPriceDisplay = document.getElementById("recommended-price");
+
+    // Retrieve CSRF token from meta tag
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+    getPriceButton.addEventListener("click", async () => {
+      const squareMeters = squareMetersInput.value;
+      const location = locationInput.value;
+      const rooms = roomsInput.value;
+
+      const advertisementId = <%= @advertisement.id %>;
+
+      if (!squareMeters || !location || !rooms) {
+        recommendedPriceDisplay.textContent = "Please fill in Square Meters, Location, and Rooms.";
+        recommendedPriceDisplay.style.color = "red";
+        return;
+      }
+
+      const response = await fetch("/advertisements/recommend_price", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-csrf-token": csrfToken, // Add CSRF token here
+        },
+        body: JSON.stringify({
+          advertisement_id: advertisementId,
+          square_meters: squareMeters,
+          location: location,
+          rooms: rooms,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.recommended_price == 0) {
+          recommendedPriceDisplay.textContent = "No properties with similar characteristics to calculate the price!";
+          } else {
+            recommendedPriceDisplay.textContent = `Recommended Price: €${data.recommended_price}`;
+            recommendedPriceDisplay.style.color = "#555";
+          }
+      } else {
+        recommendedPriceDisplay.textContent = "Failed to fetch recommended price.";
+        recommendedPriceDisplay.style.color = "red";
+      }
+    });
+  });
+</script>

lib/proptracker_web/controllers/advertisement_html/new.html.heex

@@ -46,3 +46,60 @@
 
   <.button type="submit">Create Advertisement</.button>
 </.simple_form>
+<!-- JavaScript for AJAX -->
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const calculateButton = document.getElementById("calculate-price");
+    const priceMessage = document.getElementById("price-message");
+
+    calculateButton.addEventListener("click", () => {
+      // Clear previous message
+      priceMessage.innerHTML = "";
+
+      // Fetch input values
+      const squareMeters = document.querySelector("input[name='advertisement[square_meters]']").value;
+      const location = document.querySelector("input[name='advertisement[location]']").value;
+      const rooms = document.querySelector("input[name='advertisement[rooms]']").value;
+
+      // Validate inputs
+      if (!squareMeters || !location || !rooms) {
+        priceMessage.classList.remove("text-info");
+        priceMessage.classList.add("text-danger");
+        priceMessage.innerHTML = "Please fill in Square Meters, Location, and Rooms.";
+        return;
+      }
+
+      // Make AJAX request
+      fetch("/advertisements/recommend_price", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector("meta[name='csrf-token']").content
+        },
+        body: JSON.stringify({
+          advertisement_id: null,
+          square_meters: parseInt(squareMeters, 10),
+          location: location,
+          rooms: parseInt(rooms, 10)
+        })
+      })
+        .then(response => response.json())
+        .then(data => {
+          priceMessage.classList.remove("text-danger");
+          priceMessage.classList.add("text-info");
+
+          if (data.recommended_price !== 0) {
+            priceMessage.innerHTML = `Recommended Price: €${data.recommended_price}`;
+          } else {
+            priceMessage.innerHTML = `No similar properties found.`;
+          }
+        })
+        .catch(error => {
+          console.error("Error:", error);
+          priceMessage.classList.remove("text-info");
+          priceMessage.classList.add("text-danger");
+          priceMessage.innerHTML = "An error occurred while calculating the recommended price.";
+        });
+    });
+  });
+</script>