From cf1af07e6bc1346ec2a8ca4e67e3cd28a06c5ddb Mon Sep 17 00:00:00 2001
From: 0ceanSlim <chriskerr@gmx.com>
Date: Wed, 21 Feb 2024 09:58:42 -0500
Subject: [PATCH] added family and location update js

---
 static/js/indexListener.js         |  2 ++
 static/js/updateMonsterFamily.js   | 16 ++++++++++++++++
 static/js/updateMonsterLocation.js | 23 +++++++++++++++++++++++
 templates/app.html                 | 12 ++++++------
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 static/js/updateMonsterFamily.js
 create mode 100644 static/js/updateMonsterLocation.js

diff --git a/static/js/indexListener.js b/static/js/indexListener.js
index 533609d..ea49a02 100644
--- a/static/js/indexListener.js
+++ b/static/js/indexListener.js
@@ -22,5 +22,7 @@ document.addEventListener("DOMContentLoaded", function () {
         updateIframes();
         updateMonsterStats();
         updateMonsterName();
+        updateMonsterFamily();
+        updateMonsterLocation();
     });
 });
diff --git a/static/js/updateMonsterFamily.js b/static/js/updateMonsterFamily.js
new file mode 100644
index 0000000..40fda5c
--- /dev/null
+++ b/static/js/updateMonsterFamily.js
@@ -0,0 +1,16 @@
+function updateMonsterFamily() {
+    // Get the selected monster from the dropdown
+    var selectedMonster = document.getElementById("monsterDropdown").value;
+
+    // Make an API request to get the stats for the selected monster
+    fetch(`/api/monster/stats?monster=${selectedMonster}`)
+      .then(response => response.json())
+      .then(data => {
+        // Update the HTML content with the monster family
+        var familyContainer = document.getElementById("monsterFamilyContainer");
+        familyContainer.innerHTML = `<h2>${data.Family}</h2>`;
+      })
+      .catch(error => {
+        console.error("Error fetching monster family:", error);
+      });
+  }
\ No newline at end of file
diff --git a/static/js/updateMonsterLocation.js b/static/js/updateMonsterLocation.js
new file mode 100644
index 0000000..3d06dd4
--- /dev/null
+++ b/static/js/updateMonsterLocation.js
@@ -0,0 +1,23 @@
+function updateMonsterLocation() {
+  // Get the selected monster from the dropdown
+  var selectedMonster = document.getElementById("monsterDropdown").value;
+
+  // Make an API request to get the stats for the selected monster
+  fetch(`/api/monster/stats?monster=${selectedMonster}`)
+    .then(response => response.json())
+    .then(data => {
+      // Check if location is not null before updating HTML content
+      if (data.Location !== null) {
+        // Update the HTML content with the monster location
+        var locationContainer = document.getElementById("monsterLocationContainer");
+        locationContainer.innerHTML = `<h2>${data.Location}</h2>`;
+      } else {
+        // Handle the case when location is null (optional)
+        var locationContainer = document.getElementById("monsterLocationContainer");
+        locationContainer.innerHTML = "";  // Clear the content or provide a default message
+      }
+    })
+    .catch(error => {
+      console.error("Error fetching monster location:", error);
+    });
+}
diff --git a/templates/app.html b/templates/app.html
index 3445c8f..bcc9ee8 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -33,19 +33,19 @@
     <!-- Monster name will be displayed here -->
   </div>
 
+  <div id="monsterFamilyContainer">
+    <!-- Monster Family will be displayed here-->
+  </div>
+  
   <div id="monsterStatsContainer">
     <!-- Monster stats will be displayed here -->
   </div>
   
   <div id="monsterLocationContainer">
-    <!-- Monster Location will be displayed here
-    TODO Add location to stats api -->
+    <!-- Monster Location will be displayed here-->
   </div>
 
-  <div id="monsterFamilyContainer">
-    <!-- Monster Family will be displayed here
-    TODO Add family to stats api -->
-  </div>
+
 
 
   <div class="grid items-center justify-center grid-cols-1 ml-4">