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

This commit is contained in:
Ada Werefox 2024-03-05 18:28:26 -06:00
parent 87771622cb
commit 3e34ac33e0
4 changed files with 86 additions and 43 deletions

View File

@ -1,31 +1,18 @@
window.onload = () => {
//
let overview = document.getElementById("overview");
let summary_list = overview.querySelector(".summary-list");
let breakdown_list = overview.querySelector(".breakdown-list");
let breakdown_current = document.getElementById("breakdown-current");
const refresh_interval = setInterval(
refresh_elements,
500,
overview,
summary_list,
breakdown_list,
breakdown_current
);
// let overview = document.getElementById("overview");
// let breakdown_current = document.getElementById("breakdown-current");
const refresh_interval = setInterval(refresh_elements, 500);
};
async function refresh_elements(
overview,
summary_list,
breakdown_list,
breakdown_current
) {
async function refresh_elements() {
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_entrances_title = overview.querySelector(
".overview-entrances"
);
let summary_block =
summary_list.firstElementChild.firstElementChild.cloneNode(true);
let breakdown_block = breakdown_list.firstElementChild.cloneNode(true);
let overview_checks_title = document
.getElementById("overview")
.querySelector(".overview-checks");
let overview_entrances_title = document
.getElementById("overview")
.querySelector(".overview-entrances");
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_list.firstElementChild.firstElementChild.cloneNode(true);
summary_block = document
.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(
breakdown_block.cloneNode(true)
);
document
.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));
breakdown_list.replaceWith(new_breakdown_list.cloneNode(true));
// console.log(new_summary_list);
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;
}
);

View File

@ -15,6 +15,7 @@
&nbsp;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>

View File

@ -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>

View File

@ -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,