Updates after testing that the tracker will update. Added a panel for when the backend cannot be accessed.

tunictracker/tracker/static/tracker/assets/refresh.js

@@ -1,31 +1,18 @@
 window.onload = () => {
 	//
-	let overview = document.getElementById("overview");
+	// let overview = document.getElementById("overview");
-	let summary_list = overview.querySelector(".summary-list");
+	// let breakdown_current = document.getElementById("breakdown-current");
-	let breakdown_list = overview.querySelector(".breakdown-list");
+	const refresh_interval = setInterval(refresh_elements, 500);
-	let breakdown_current = document.getElementById("breakdown-current");
-	const refresh_interval = setInterval(
-		refresh_elements,
-		500,
-		overview,
-		summary_list,
-		breakdown_list,
-		breakdown_current
-	);
 };
 
-async function refresh_elements(
+async function refresh_elements() {
-	overview,
-	summary_list,
-	breakdown_list,
-	breakdown_current
-) {
 	fetch("http://localhost:8000/spoiler")
 		.then((response) => response.json())
 		.then(
 			(data) => {
 				// Attempt to receive response JSON.
 				const response_object = JSON.parse(JSON.stringify(data));
+				document.getElementById("status-block").classList.add("hidden")
 
 				// Parse out data from the back-end into variables.
 				const overview_checks_undiscovered =
@@ -36,26 +23,37 @@ async function refresh_elements(
 				const overview_entrances_total = response_object.Totals.Entrances.Total;
 				const current_scene_name = response_object.Current.Scene;
 				const all_scenes = response_object.Scenes;
-				let new_breakdown_list = overview
-					.querySelector(".breakdown-list")
-					.cloneNode(true);
-				let new_summary_list = overview
-					.querySelector(".summary-list")
-					.cloneNode(true);
-				new_breakdown_list.innerHTML = "";
-				new_summary_list.firstElementChild.innerHTML = "";
 
 				// Refresh elements with new data from the back end.
 
 				//  Clone all the needed elements for updating.
-				let overview_checks_title = overview.querySelector(".overview-checks");
+				let overview_checks_title = document
-				let overview_entrances_title = overview.querySelector(
+					.getElementById("overview")
-					".overview-entrances"
+					.querySelector(".overview-checks");
-				);
+				let overview_entrances_title = document
-				let summary_block =
+					.getElementById("overview")
-					summary_list.firstElementChild.firstElementChild.cloneNode(true);
+					.querySelector(".overview-entrances");
-				let breakdown_block = breakdown_list.firstElementChild.cloneNode(true);
+				let summary_block = document
+					.getElementById("overview")
+					.querySelector(".summary-list")
+					.firstElementChild.firstElementChild.cloneNode(true);
+				let breakdown_block = document
+					.getElementById("overview")
+					.querySelector(".breakdown-list")
+					.firstElementChild.cloneNode(true);
 				breakdown_block.classList.remove("hidden");
+				let new_breakdown_list = document
+					.getElementById("overview")
+					.querySelector(".breakdown-list")
+					.cloneNode(true);
+				let new_summary_list = document
+					.getElementById("overview")
+					.querySelector(".summary-list")
+					.cloneNode(true);
+
+				// Clear out the current lists.
+				new_breakdown_list.innerHTML = "";
+				new_summary_list.firstElementChild.innerHTML = "";
 
 				// Set content to updated data.
 				overview_checks_title.textContent = `Checks: ${overview_checks_undiscovered}/${overview_checks_total}`;
@@ -64,15 +62,20 @@ async function refresh_elements(
 				// Create new lists with updated data.
 				Object.keys(all_scenes).forEach((scene) => {
 					// Create variables for element pointers.
-					summary_block =
+					summary_block = document
-						summary_list.firstElementChild.firstElementChild.cloneNode(true);
+						.getElementById("overview")
+						.querySelector(".summary-list")
+						.firstElementChild.firstElementChild.cloneNode(true);
 					summary_block.classList.remove("hidden");
 					let summary_title = summary_block.querySelector(".summary-title");
 					let summary_checks = summary_block.querySelector(".summary-checks");
 					let summary_entrances =
 						summary_block.querySelector(".summary-entrances");
 
-					breakdown_block = breakdown_list.firstElementChild.cloneNode(true);
+					breakdown_block = document
+						.getElementById("overview")
+						.querySelector(".breakdown-list")
+						.firstElementChild.cloneNode(true);
 					breakdown_block.classList.remove("hidden");
 					let breakdown_block_title = breakdown_block.querySelector(
 						".breakdown-block-title"
@@ -105,6 +108,20 @@ async function refresh_elements(
 						.firstElementChild.cloneNode(true);
 					breakdown_block_mapped_list_item.classList.remove("hidden");
 
+					// Clear out current list content.
+					new_breakdown_block_checks_list.innerHTML = "";
+					new_breakdown_block_entrances_list.innerHTML = "";
+					new_breakdown_block_mapped_list.innerHTML = "";
+					new_breakdown_block_checks_list.appendChild(
+						breakdown_block_checks_list_item.cloneNode()
+					);
+					new_breakdown_block_entrances_list.appendChild(
+						breakdown_block_entrances_list_item.cloneNode()
+					);
+					new_breakdown_block_mapped_list.appendChild(
+						breakdown_block_mapped_list_item.cloneNode()
+					);
+
 					// Create variables for commonly used values.
 					let scene_checks_undiscovered =
 						all_scenes[scene].Totals.Checks.Undiscovered;
@@ -180,9 +197,9 @@ async function refresh_elements(
 					// Append relevant elements to lists.
 					if (scene == current_scene_name) {
 						summary_block.classList.add("hidden");
-						breakdown_current.firstElementChild.replaceWith(
+						document
-							breakdown_block.cloneNode(true)
+							.getElementById("breakdown-current")
-						);
+							.firstElementChild.replaceWith(breakdown_block.cloneNode(true));
 						breakdown_block.classList.add("hidden");
 					} else if (
 						scene_checks_undiscovered <= 0 &&
@@ -198,13 +215,26 @@ async function refresh_elements(
 				});
 
 				// Replace with new data.
-				summary_list.replaceWith(new_summary_list.cloneNode(true));
+				// console.log(new_summary_list);
-				breakdown_list.replaceWith(new_breakdown_list.cloneNode(true));
+				document
+					.getElementById("overview")
+					.querySelector(".summary-list")
+					.replaceWith(new_summary_list.cloneNode(true));
+				document
+					.getElementById("overview")
+					.querySelector(".breakdown-list")
+					.replaceWith(new_breakdown_list.cloneNode(true));
 				document
 					.getElementById("breakdown-current")
-					.replaceWith(breakdown_current.cloneNode(true));
+					.replaceWith(
+						document.getElementById("breakdown-current").cloneNode(true)
+					);
+
+				// Debug
+				// console.log("We have data.");
 			},
 			(error) => {
+				document.getElementById("status-block").classList.remove("hidden")
 				return error;
 			}
 		);

tunictracker/tracker/templates/tracker/index.html

@@ -15,6 +15,7 @@
                          Tunic Transition Tracker
                     </div>
                     <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
+                    {% include "tracker/status/index.html" %}
                     <div class="p-4 flex flex-col max-w-full space-y-4 md:space-y-4 text-md rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark"
                          id="overview">
                         <div class="text-lg">Overview</div>

tunictracker/tracker/templates/tracker/status/index.html

@@ -0,0 +1,5 @@
+<div class="p-2 flex flex-col rounded-md ring-4 ring-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
+    <div class="text-xl">Oh no!</div>
+    <div class="text-lg">It looks like the backend can't be accessed...</div>
+    <div class="text-lg">Are you sure there is one running at {{ server_address }}?</div>
+</div>

tunictracker/tracker/views.py

@@ -10,12 +10,16 @@ import requests
 
 def index(request):
     request_data = None
+    server_address = 'http://localhost:8000/spoiler'
+    is_hidden = True
     try:
-        request_data = requests.get('http://localhost:8000/spoiler').text
+        request_data = requests.get(server_address).text
     except:
         with open('empty_spoiler.json', 'r') as t:
             try:
                 tracker_output = loads(t.read())
+                is_hidden = False
+
             except:
                 return
     try:
@@ -24,6 +28,7 @@ def index(request):
         with open('empty_spoiler.json', 'r') as t:
             try:
                 tracker_output = loads(t.read())
+                is_hidden = False
             except:
                 return
     tracker_debug = tracker_output["Debug"]
@@ -33,6 +38,8 @@ def index(request):
     tracker_scenes = tracker_output["Scenes"]
     template = loader.get_template("tracker/index.html")
     context = {
+        "server_address": server_address,
+        "is_hidden": is_hidden,
         "debug": tracker_debug,
         "totals": tracker_totals,
         "scenes": tracker_scenes,