Updates after testing that the tracker will update. Added a panel for when the backend cannot be accessed.
This commit is contained in:
parent
87771622cb
commit
3e34ac33e0
@ -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;
|
||||
}
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
5
tunictracker/tracker/templates/tracker/status/index.html
Normal file
5
tunictracker/tracker/templates/tracker/status/index.html
Normal 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>
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user