From 4f7f0f9cfc20a48b51bcb7f9aa4c1e63d753ffd4 Mon Sep 17 00:00:00 2001 From: hppeng Date: Sun, 12 Jun 2022 07:45:48 -0700 Subject: [PATCH] Clean up loading code, much cleaner invocation during init (and less prone to races) --- js/builder.js | 17 ++-- js/builder_graph.js | 194 ++++++++++++++++++++++++++++++++++++++++++++ js/load.js | 166 ++++++++++++++++--------------------- js/load_ing.js | 143 +++++++++++++++++--------------- js/load_tome.js | 128 ++++++++++++++--------------- 5 files changed, 411 insertions(+), 237 deletions(-) diff --git a/js/builder.js b/js/builder.js index 1b18b96..1e51e31 100644 --- a/js/builder.js +++ b/js/builder.js @@ -335,16 +335,11 @@ function init() { console.log("builder.js init"); init_autocomplete(); decodeBuild(url_tag); - for (const i of equipment_keys) { - update_field(i); - } } -function init2() { - load_ing_init(init); -} -function init3() { - load_tome_init(init2) -} - -load_init(init3); +//load_init(init3); +(async function() { + let load_promises = [ load_init(), load_ing_init(), load_tome_init() ]; + await Promise.all(load_promises); + init(); +})(); diff --git a/js/builder_graph.js b/js/builder_graph.js index 7b652ba..fd0de13 100644 --- a/js/builder_graph.js +++ b/js/builder_graph.js @@ -19,3 +19,197 @@ document.addEventListener('DOMContentLoaded', function() { console.log("Set up graph"); }); + +// autocomplete initialize +function init_autocomplete() { + console.log("autocomplete init"); + console.log(itemLists) + let dropdowns = new Map(); + for (const eq of equipment_keys) { + if (tome_keys.includes(eq)) { + continue; + } + // build dropdown + let item_arr = []; + if (eq == 'weapon') { + for (const weaponType of weapon_keys) { + for (const weapon of itemLists.get(weaponType)) { + let item_obj = itemMap.get(weapon); + if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") { + continue; + } + if (item_obj["name"] == 'No '+ eq.charAt(0).toUpperCase() + eq.slice(1)) { + continue; + } + item_arr.push(weapon); + } + } + } else { + for (const item of itemLists.get(eq.replace(/[0-9]/g, ''))) { + let item_obj = itemMap.get(item); + if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") { + continue; + } + if (item_obj["name"] == 'No '+ eq.charAt(0).toUpperCase() + eq.slice(1)) { + continue; + } + item_arr.push(item) + } + } + + // create dropdown + dropdowns.set(eq, new autoComplete({ + data: { + src: item_arr + }, + selector: "#"+ eq +"-choice", + wrapper: false, + resultsList: { + maxResults: 1000, + tabSelect: true, + noResults: true, + class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm", + element: (list, data) => { + // dynamic result loc + let position = document.getElementById(eq+'-dropdown').getBoundingClientRect(); + list.style.top = position.bottom + window.scrollY +"px"; + list.style.left = position.x+"px"; + list.style.width = position.width+"px"; + list.style.maxHeight = position.height * 2 +"px"; + + if (!data.results.length) { + message = document.createElement('li'); + message.classList.add('scaled-font'); + message.textContent = "No results found!"; + list.prepend(message); + } + }, + }, + resultItem: { + class: "scaled-font search-item", + selected: "dark-5", + element: (item, data) => { + item.classList.add(itemMap.get(data.value).tier); + }, + }, + events: { + input: { + selection: (event) => { + if (event.detail.selection.value) { + event.target.value = event.detail.selection.value; + } + }, + }, + } + })); + } + + for (const eq of tome_keys) { + // build dropdown + let tome_arr = []; + for (const tome of tomeLists.get(eq.replace(/[0-9]/g, ''))) { + let tome_obj = tomeMap.get(tome); + if (tome_obj["restrict"] && tome_obj["restrict"] === "DEPRECATED") { + continue; + } + //this should suffice for tomes - jank + if (tome_obj["name"].includes('No ' + eq.charAt(0).toUpperCase())) { + continue; + } + let tome_name = tome; + tome_arr.push(tome_name); + } + + // create dropdown + dropdowns.set(eq, new autoComplete({ + data: { + src: tome_arr + }, + selector: "#"+ eq +"-choice", + wrapper: false, + resultsList: { + maxResults: 1000, + tabSelect: true, + noResults: true, + class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm", + element: (list, data) => { + // dynamic result loc + let position = document.getElementById(eq+'-dropdown').getBoundingClientRect(); + list.style.top = position.bottom + window.scrollY +"px"; + list.style.left = position.x+"px"; + list.style.width = position.width+"px"; + list.style.maxHeight = position.height * 2 +"px"; + + if (!data.results.length) { + message = document.createElement('li'); + message.classList.add('scaled-font'); + message.textContent = "No results found!"; + list.prepend(message); + } + }, + }, + resultItem: { + class: "scaled-font search-item", + selected: "dark-5", + element: (tome, data) => { + tome.classList.add(tomeMap.get(data.value).tier); + }, + }, + events: { + input: { + selection: (event) => { + if (event.detail.selection.value) { + event.target.value = event.detail.selection.value; + } + }, + }, + } + })); + } + + let filter_loc = ["filter1", "filter2", "filter3", "filter4"]; + for (const i of filter_loc) { + dropdowns.set(i+"-choice", new autoComplete({ + data: { + src: sq2ItemFilters, + }, + selector: "#"+i+"-choice", + wrapper: false, + resultsList: { + tabSelect: true, + noResults: true, + class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm", + element: (list, data) => { + // dynamic result loc + console.log(i); + list.style.zIndex = "100"; + let position = document.getElementById(i+"-dropdown").getBoundingClientRect(); + window_pos = document.getElementById("search-container").getBoundingClientRect(); + list.style.top = position.bottom - window_pos.top + 5 +"px"; + list.style.left = position.x - window_pos.x +"px"; + list.style.width = position.width+"px"; + + if (!data.results.length) { + message = document.createElement('li'); + message.classList.add('scaled-font'); + message.textContent = "No filters found!"; + list.prepend(message); + } + }, + }, + resultItem: { + class: "scaled-font search-item", + selected: "dark-5", + }, + events: { + input: { + selection: (event) => { + if (event.detail.selection.value) { + event.target.value = event.detail.selection.value; + } + }, + }, + } + })); + } +} diff --git a/js/load.js b/js/load.js index 461e1d7..4f6e4b2 100644 --- a/js/load.js +++ b/js/load.js @@ -14,42 +14,35 @@ let itemLists = new Map(); /* * Load item set from local DB. Calls init() on success. */ -async function load_local(init_func) { - let get_tx = db.transaction(['item_db', 'set_db'], 'readonly'); - let sets_store = get_tx.objectStore('set_db'); - let get_store = get_tx.objectStore('item_db'); - let request = get_store.getAll(); - request.onerror = function(event) { - console.log("Could not read local item db..."); - } - request.onsuccess = function(event) { - console.log("Successfully read local item db."); - items = request.result; - //console.log(items); - let request2 = sets_store.openCursor(); +async function load_local() { + return new Promise(function(resolve, reject) { + let get_tx = db.transaction(['item_db', 'set_db'], 'readonly'); + let sets_store = get_tx.objectStore('set_db'); + let get_store = get_tx.objectStore('item_db'); + let request = get_store.getAll(); + let request2 = sets_store.getAll(); + request.onerror = function(event) { + reject("Could not read local item db..."); + } + request.onsuccess = function(event) { + console.log("Successfully read local item db."); + } - sets = {}; request2.onerror = function(event) { - console.log("Could not read local set db..."); + reject("Could not read local set db..."); } - request2.onsuccess = function(event) { - let cursor = event.target.result; - if (cursor) { - sets[cursor.primaryKey] = cursor.value; - cursor.continue(); - } - else { - console.log("Successfully read local set db."); - //console.log(sets); - init_maps(); - init_func(); - load_complete = true; - } + console.log("Successfully read local set db."); } - } - await get_tx.complete; - db.close(); + get_tx.oncomplete = function(event) { + items = request.result; + sets = request2.result; + init_maps(); + load_complete = true; + db.close(); + resolve(); + } + }); } /* @@ -91,7 +84,7 @@ function clean_item(item) { /* * Load item set from remote DB (aka a big json file). Calls init() on success. */ -async function load(init_func) { +async function load() { let getUrl = window.location; let baseUrl = getUrl.protocol + "//" + getUrl.host + "/";// + getUrl.pathname.split('/')[1]; @@ -101,16 +94,6 @@ async function load(init_func) { items = result.items; sets = result.sets; - - -// let clear_tx = db.transaction(['item_db', 'set_db'], 'readwrite'); -// let clear_items = clear_tx.objectStore('item_db'); -// let clear_sets = clear_tx.objectStore('item_db'); -// -// await clear_items.clear(); -// await clear_sets.clear(); -// await clear_tx.complete; - let add_tx = db.transaction(['item_db', 'set_db'], 'readwrite'); add_tx.onabort = function(e) { console.log(e); @@ -131,74 +114,67 @@ async function load(init_func) { add_promises.push(sets_store.add(sets[set], set)); } add_promises.push(add_tx.complete); - Promise.all(add_promises).then((values) => { - init_maps(); - init_func(); - load_complete = true; - }); - // DB not closed? idfk man + + await Promise.all(add_promises); + init_maps(); + load_complete = true; + db.close(); } -function load_init(init_func) { - if (load_complete) { - console.log("Item db already loaded, skipping load sequence"); - init_func(); - return; - } - let request = window.indexedDB.open('item_db', DB_VERSION); +async function load_init() { + return new Promise((resolve, reject) => { + let request = window.indexedDB.open('item_db', DB_VERSION); - request.onerror = function() { - console.log("DB failed to open..."); - }; + request.onerror = function() { + reject("DB failed to open..."); + }; - request.onsuccess = function() { - (async function() { + request.onsuccess = async function() { db = request.result; - if (!reload) { - console.log("Using stored data...") - load_local(init_func); + if (load_in_progress) { + while (!load_complete) { + await sleep(100); + } + console.log("Skipping load...") } else { - if (load_in_progress) { - while (!load_complete) { - await sleep(100); - } - console.log("Skipping load...") - init_func(); + load_in_progress = true + if (reload) { + console.log("Using new data...") + await load(); } else { - // Not 100% safe... whatever! - load_in_progress = true - console.log("Using new data...") - load(init_func); + console.log("Using stored data...") + await load_local(); } } - })() - } + resolve(); + }; - request.onupgradeneeded = function(e) { - reload = true; + request.onupgradeneeded = function(e) { + reload = true; - let db = e.target.result; - - try { - db.deleteObjectStore('item_db'); - } - catch (error) { - console.log("Could not delete item DB. This is probably fine"); - } - try { - db.deleteObjectStore('set_db'); - } - catch (error) { - console.log("Could not delete set DB. This is probably fine"); - } + let db = e.target.result; + + try { + db.deleteObjectStore('item_db'); + } + catch (error) { + console.log("Could not delete item DB. This is probably fine"); + } + try { + db.deleteObjectStore('set_db'); + } + catch (error) { + console.log("Could not delete set DB. This is probably fine"); + } - db.createObjectStore('item_db'); - db.createObjectStore('set_db'); + db.createObjectStore('item_db'); + db.createObjectStore('set_db'); - console.log("DB setup complete..."); - } + console.log("DB setup complete..."); + }; + }); } // List of 'raw' "none" items (No Helmet, etc), in order helmet, chestplate... ring1, ring2, brace, neck, weapon. diff --git a/js/load_ing.js b/js/load_ing.js index 1a6144e..ffc4c05 100644 --- a/js/load_ing.js +++ b/js/load_ing.js @@ -4,6 +4,7 @@ const ING_DB_VERSION = 13; let idb; let ireload = false; +let iload_in_progress = false; let iload_complete = false; let ings; let recipes; @@ -20,32 +21,34 @@ let recipeIDMap; /* * Load item set from local DB. Calls init() on success. */ -async function ing_load_local(init_func) { - console.log("IngMap is: \n " + ingMap); - let get_tx = idb.transaction(['ing_db', 'recipe_db'], 'readonly'); - let ings_store = get_tx.objectStore('ing_db'); - let recipes_store = get_tx.objectStore('recipe_db'); - let request3 = ings_store.getAll(); - request3.onerror = function(event) { - console.log("Could not read local ingredient db..."); - } - request3.onsuccess = function(event) { - console.log("Successfully read local ingredient db."); - ings = request3.result; +async function ing_load_local() { + return new Promise(function(resolve, reject) { + let get_tx = idb.transaction(['ing_db', 'recipe_db'], 'readonly'); + let ings_store = get_tx.objectStore('ing_db'); + let recipes_store = get_tx.objectStore('recipe_db'); + let request3 = ings_store.getAll(); + request3.onerror = function(event) { + reject("Could not read local ingredient db..."); + } + request3.onsuccess = function(event) { + console.log("Successfully read local ingredient db."); + } let request4 = recipes_store.getAll(); request4.onerror = function(event) { - console.log("Could not read local recipe db..."); + reject("Could not read local recipe db..."); } request4.onsuccess = function(event) { console.log("Successfully read local recipe db."); + } + get_tx.oncomplete = function(event) { + ings = request3.result; recipes = request4.result; init_ing_maps(); - init_func(); iload_complete = true; + idb.close(); + resolve() } - } - await get_tx.complete; - idb.close(); + }); } function clean_ing(ing) { @@ -59,11 +62,12 @@ function clean_ing(ing) { /* * Load item set from remote DB (aka a big json file). Calls init() on success. */ -async function load_ings(init_func) { +async function load_ings() { let getUrl = window.location; - let baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1]; - let url = baseUrl + "/ingreds_compress.json"; + let baseUrl = getUrl.protocol + "//" + getUrl.host + "/";// + getUrl.pathname.split('/')[1]; + // "Random" string to prevent caching! + let url = baseUrl + "/ingreds_compress.json?"+new Date(); url = url.replace(/\w+.html/, "") ; let result = await (await fetch(url)).json(); @@ -97,59 +101,65 @@ async function load_ings(init_func) { } add_promises.push(add_tx2.complete); add_promises.push(add_tx3.complete); - Promise.all(add_promises).then((values) => { - init_ing_maps(); - init_func(); - iload_complete = true; - }); - // DB not closed? idfk man + + await Promise.all(add_promises); + init_ing_maps(); + iload_complete = true; + idb.close(); } -function load_ing_init(init_func) { - if (iload_complete) { - console.log("Ingredient db already loaded, skipping load sequence"); - init_func(); - return; - } - let request = window.indexedDB.open("ing_db", ING_DB_VERSION) - request.onerror = function() { - console.log("DB failed to open..."); - } +async function load_ing_init() { + return new Promise((resolve, reject) => { + let request = window.indexedDB.open("ing_db", ING_DB_VERSION) + request.onerror = function() { + reject("DB failed to open..."); + } - request.onsuccess = function() { - idb = request.result; - if (!ireload) { - console.log("Using stored data...") - ing_load_local(init_func); + request.onsuccess = async function() { + idb = request.result; + if (iload_in_progress) { + while (!iload_complete) { + await sleep(100); + } + console.log("Skipping load...") + } + else { + iload_in_progress = true + if (ireload) { + console.log("Using new data...") + await load_ings(); + } + else { + console.log("Using stored data...") + await ing_load_local(); + } + } + resolve(); } - else { - console.log("Using new data...") - load_ings(init_func); - } - } - request.onupgradeneeded = function(e) { - ireload = true; + request.onupgradeneeded = function(e) { + ireload = true; - let idb = e.target.result; - - try { - idb.deleteObjectStore('ing_db'); - } - catch (error) { - console.log("Could not delete ingredient DB. This is probably fine"); - } - try { - idb.deleteObjectStore('recipe_db'); - } - catch (error) { - console.log("Could not delete recipe DB. This is probably fine"); - } - idb.createObjectStore('ing_db'); - idb.createObjectStore('recipe_db'); + let idb = e.target.result; + + try { + idb.deleteObjectStore('ing_db'); + } + catch (error) { + console.log("Could not delete ingredient DB. This is probably fine"); + } + try { + idb.deleteObjectStore('recipe_db'); + } + catch (error) { + console.log("Could not delete recipe DB. This is probably fine"); + } + idb.createObjectStore('ing_db'); + idb.createObjectStore('recipe_db'); - console.log("DB setup complete..."); - } + console.log("DB setup complete..."); + } + }); } function init_ing_maps() { @@ -222,4 +232,5 @@ function init_ing_maps() { recipeList.push(recipe["name"]); recipeIDMap.set(recipe["id"],recipe["name"]); } + console.log(ingMap); } diff --git a/js/load_tome.js b/js/load_tome.js index afd9315..2186a60 100644 --- a/js/load_tome.js +++ b/js/load_tome.js @@ -13,29 +13,33 @@ let tomeLists = new Map(); /* * Load tome set from local DB. Calls init() on success. */ -async function load_tome_local(init_func) { - let get_tx = tdb.transaction(['tome_db'], 'readonly'); - let get_store = get_tx.objectStore('tome_db'); - let request = get_store.getAll(); - request.onerror = function(event) { - console.log("Could not read local tome db..."); - } - request.onsuccess = function(event) { - console.log("Successfully read local tome db."); - tomes = request.result; - - init_tome_maps(); - init_func(); - tload_complete = true; - } - await get_tx.complete; - tdb.close(); +async function load_tome_local() { + return new Promise(function(resolve, reject) { + let get_tx = tdb.transaction(['tome_db'], 'readonly'); + let get_store = get_tx.objectStore('tome_db'); + let request = get_store.getAll(); + request.onerror = function(event) { + reject("Could not read local tome db..."); + } + request.onsuccess = function(event) { + console.log("Successfully read local tome db."); + } + get_tx.oncomplete = function(event) { + console.log('b'); + console.log(request.readyState); + tomes = request.result; + init_tome_maps(); + tload_complete = true; + tdb.close(); + resolve(); + } + }); } /* * Load tome set from remote DB (json). Calls init() on success. */ -async function load_tome(init_func) { +async function load_tome() { let getUrl = window.location; let baseUrl = getUrl.protocol + "//" + getUrl.host + "/";// + getUrl.pathname.split('/')[1]; @@ -60,67 +64,61 @@ async function load_tome(init_func) { }; add_promises.push(req); } - Promise.all(add_promises).then((values) => { - init_tome_maps(); - init_func(); - tload_complete = true; - }); - // DB not closed? idfk man + add_promises.push(add_tx.complete); + + await Promise.all(add_promises); + init_tome_maps(); + tload_complete = true; + tdb.close(); } -function load_tome_init(init_func) { - if (tload_complete) { - console.log("Tome db already loaded, skipping load sequence"); - init_func(); - return; - } - let request = window.indexedDB.open('tome_db', TOME_DB_VERSION); +async function load_tome_init() { + return new Promise((resolve, reject) => { + let request = window.indexedDB.open('tome_db', TOME_DB_VERSION); - request.onerror = function() { - console.log("DB failed to open..."); - }; + request.onerror = function() { + reject("DB failed to open..."); + }; - request.onsuccess = function() { - (async function() { + request.onsuccess = async function() { tdb = request.result; - if (!treload) { - console.log("Using stored data...") - load_tome_local(init_func); + if (tload_in_progress) { + while (!tload_complete) { + await sleep(100); + } + console.log("Skipping load...") } else { - if (tload_in_progress) { - while (!tload_complete) { - await sleep(100); - } - console.log("Skipping load...") - init_func(); + tload_in_progress = true + if (treload) { + console.log("Using new data...") + await load_tome(); } else { - // Not 100% safe... whatever! - tload_in_progress = true - console.log("Using new data...") - load_tome(init_func); + console.log("Using stored data...") + await load_tome_local(); } } - })() - } - - request.onupgradeneeded = function(e) { - treload = true; - - let tdb = e.target.result; - - try { - tdb.deleteObjectStore('tome_db'); - } - catch (error) { - console.log("Could not delete tome DB. This is probably fine"); + resolve(); } - tdb.createObjectStore('tome_db'); + request.onupgradeneeded = function(e) { + treload = true; - console.log("DB setup complete..."); - } + let tdb = e.target.result; + + try { + tdb.deleteObjectStore('tome_db'); + } + catch (error) { + console.log("Could not delete tome DB. This is probably fine"); + } + + tdb.createObjectStore('tome_db'); + + console.log("DB setup complete..."); + } + }); } function init_tome_maps() {