Skip to content

Commit

Permalink
[webUI] Added back selectall button
Browse files Browse the repository at this point in the history 
force-push 1: fixup formatted code and use max-height instead of height
for #selected-tweaks
  • Loading branch information
@NSPC911
NSPC911 committed Oct 9, 2024
1 parent c7af509 commit 39d95f5
Show file tree
Hide file tree
Showing 4 changed files with 276 additions and 67 deletions.
18 changes: 8 additions & 10 deletions pys/pre_commit.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,8 @@
check("lzstring")
from lzstring import LZString

### category_start = '<div class="category"><div class="category-label" onclick="toggleCategory(this)">topic_name</div><button class="category-label-selectall" onclick="selectAll(\u0027<all_packs>\u0027,this)"><img src="images/select-all-button/chiseled_bookshelf_empty.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Select All</div></button><div class="category-controlled"><div class="tweaks">'
category_start = '<div class="category"><div class="category-label" onclick="toggleCategory(this)">topic_name</div><div class="category-controlled"><div class="tweaks">'
### subcategory_start = '<div class="subcategory"><div class="category-label" onclick="toggleCategory(this)">topic_name</div><button class="category-label-selectall sub" onclick="selectAll(\u0027<all_packs>\u0027,this)"><img src="images/select-all-button/chiseled_bookshelf_empty.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Select All</div></button><div class="category-controlled"><div class="subcattweaks">'
subcategory_start = '<div class="subcategory"><div class="category-label" onclick="toggleCategory(this)">topic_name</div><div class="category-controlled"><div class="subcattweaks">'
category_start = '<div class="category"><div class="category-label" onclick="toggleCategory(this)">topic_name</div><button class="category-label-selectall" onclick="selectAll(\u0027<all_packs>\u0027,this)"><img src="images/select-all-button/chiseled_bookshelf_empty.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Select All</div></button><div class="category-controlled"><div class="tweaks">'
subcategory_start = '<div class="subcategory"><div class="category-label" onclick="toggleCategory(this)">topic_name</div><button class="category-label-selectall sub" onclick="selectAll(\u0027<all_packs>\u0027,this)"><img src="images/select-all-button/chiseled_bookshelf_empty.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Select All</div></button><div class="category-controlled"><div class="subcattweaks">'
pack_start = '<div class="tweak" onclick="toggleSelection(this)" data-category="topic_name" data-name="pack_id" data-index="pack_index">'
html_comp = '<div class="comp-hover-text">Incompatible with: <incompatible></div>'
pack_mid = '<div class="tweak-info"><input type="checkbox" id="tweaknumber" name="tweak" value="tweaknumber"><img src="https://raw.githubusercontent.com/BEComTweaks/resource-packs/main/relloctopackicon" style="width:82px; height:82px;" alt="pack_name" loading="lazy"><br><label id="tweak" class="tweak-title">pack_name</label><div class="tweak-description">pack_description</div></div>'
Expand Down Expand Up @@ -69,7 +67,7 @@
incomplete_pkics[file["topic"]] = []
incomplete_packs[file["topic"]] = []
html += category_start.replace("topic_name", file["topic"])
### current_category_packs = { "raw": [] }
current_category_packs = { "raw": [] }
# Runs through the packs
for i in range(len(file["packs"])):
# Updates Incomplete Packs
Expand Down Expand Up @@ -191,8 +189,8 @@
if args.use_relative_location:
to_add_pack = to_add_pack.replace("https://raw.githubusercontent.com/BEComTweaks/resource-packs/main/","../")
html += to_add_pack
### current_category_packs["raw"].append(file["packs"][i]["pack_id"])
### html = html.replace("<all_packs>", LZString.compressToEncodedURIComponent(dumps(current_category_packs)))
current_category_packs["raw"].append(file["packs"][i]["pack_id"])
html = html.replace("<all_packs>", LZString.compressToEncodedURIComponent(dumps(current_category_packs)))
try:
if pack_list[pack_list.index(origj) + 1].startswith("\t"):
html += cat_end_w_subcat_no_end
Expand Down Expand Up @@ -225,7 +223,7 @@
incomplete_pkics[file["topic"]] = []
incomplete_packs[file["topic"]] = []
pack_html += subcategory_start.replace("topic_name", f'{file["subcategory_of"]} > <b>{file["topic"]}</b>')
### current_category_packs = { "raw": [] }
current_category_packs = { "raw": [] }
for i in range(len(file["packs"])):
# Updates Incomplete Packs
try:
Expand Down Expand Up @@ -346,10 +344,10 @@
if args.use_relative_location:
to_add_pack = to_add_pack.replace("https://raw.githubusercontent.com/BEComTweaks/resource-packs/main/","../")
pack_html += to_add_pack
### current_category_packs["raw"].append(file["packs"][i]["pack_id"])
current_category_packs["raw"].append(file["packs"][i]["pack_id"])
pack_html += category_end
html = html.replace(f'<div class="subcat{j}"></div>',pack_html)
### html = html.replace("<all_packs>", LZString.compressToEncodedURIComponent(dumps(current_category_packs)))
html = html.replace("<all_packs>", LZString.compressToEncodedURIComponent(dumps(current_category_packs)))
clrprint("Finished Counting!", clr="green")

# HTML formatting
Expand Down
134 changes: 98 additions & 36 deletions webUI/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,22 @@ function toggleSelection(element) {
// logging
if (checkbox.checked) {
disableSelection(element, checkbox);
console.log(`Unselected ${element.dataset.name}`);
console.log(
`[%cselection%c] Unselected %c${element.dataset.name}`,
"color: green",
"color: initial",
);
} else {
enableSelection(element, checkbox);
console.log(`Selected ${element.dataset.name}`);
console.log(
`[%cselection%c] Selected %c${element.dataset.name}`,
"color: green",
"color: initial",
);
}
updateSelectedTweaks();
var selectedTweaks = getSelectedTweaks();
updateURL(getSelectedTweaks());
/*var dataCategory = element.dataset.category;
var dataCategory = element.dataset.category;
const selectAllElement =
element.parentElement.parentElement.parentElement.querySelector(
".category-label-selectall",
Expand All @@ -40,7 +47,8 @@ function toggleSelection(element) {
selectAll("", selectAllElement);
} else {
partialSelected(selectAllElement);
}*/
}
updateURL(selectedTweaks);
}

function updateSelectedTweaks() {
Expand Down Expand Up @@ -161,7 +169,11 @@ function toggleCategory(label) {
function downloadSelectedTweaks() {
// set min_engine_version
var mcVersion = document.getElementById("mev").value;
console.log(`Minimum Engine Version is set to ${mcVersion}`);
console.log(
`[%cdownload%c] Minimum Engine Version is set to ${mcVersion}`,
"color: cyan",
"color: initial",
);
// set pack name
var packName = document.getElementById("fileNameInput").value;
if (!packName) {
Expand All @@ -171,7 +183,11 @@ function downloadSelectedTweaks() {
)}`;
}
packName = packName.replaceAll("/", "-");
console.log(`Pack Name is set to ${packName}`);
console.log(
`[%cdownload%c] Pack Name is set to ${packName}`,
"color: cyan",
"color: initial",
);
// get selected tweaks
jsonData = getSelectedTweaks();
// fetch
Expand All @@ -198,7 +214,7 @@ function fetchPack(protocol, jsonData, packName, mcVersion) {
downloadbutton.innerText = "Fetching Pack...";
}

console.log("Fetching pack...");
console.log("[%cfetch%c] Fetching pack...", "color: blue", "color: initial");
// fetch
fetch(`${protocol}://${serverip}/exportResourcePack`, {
method: "POST",
Expand All @@ -212,13 +228,22 @@ function fetchPack(protocol, jsonData, packName, mcVersion) {
.then((response) => {
// when the response doesnt feel good
if (!response.ok) {
throw new Error("Network response was not ok");
console.log(
"[%cerror%c] %cNetwork response was not ok",
"color: blue",
"color: initial",
"color: red",
);
}
return response.blob();
})
.then(async (blob) => {
// pack received
console.log("Received pack!");
console.log(
"[%cfetch%c] Received pack!",
"color: blue",
"color: initial",
);
downloadbutton.innerText = "Obtained pack!";
downloadbutton.classList.remove("http");
// When using https, remove the s class
Expand Down Expand Up @@ -268,17 +293,35 @@ function processJsonData(jsonData, dowhat) {
if (div) {
if (dowhat == "select") {
enableSelection(div, div.querySelector('input[type="checkbox"]'));
console.log(`Selected ${pack}`);
console.log(
`[%cmass%c] Selected ${pack}`,
"color: green",
"color: initial",
);
} else if (dowhat == "unselect") {
disableSelection(div, div.querySelector('input[type="checkbox"]'));
console.log(`Unselected ${pack}`);
console.log(
`[%cmass%c] Unselected ${pack}`,
"color: green",
"color: initial",
);
}
} else {
console.error(`Div with data-name="${pack}" not found.`);
console.log(
`[%cerror%c] %cDiv with data-name="${pack}" not found.`,
"color: green",
"color: initial",
"color: red",
);
}
});
} else {
console.error("The 'raw' field in selected_packs.json is not an array.");
console.log(
"[%cerror%c] %cThe 'raw' field in selected_packs.json is not an array.",
"color: green",
"color: initial",
"color: red",
);
}
updateSelectedTweaks();
}
Expand Down Expand Up @@ -353,12 +396,16 @@ function getSelectedTweaks() {
Parity: [],
"Fixes and Consistency": [],
};
console.log("Obtaining selected tweaks...");
console.log(
"[%cget%c] Obtaining selected tweaks...",
"color: purple",
"color: initial",
);
selectedTweaks.forEach((tweak) => {
tweaksByCategory[tweak.category].push(tweak.name);
indicesByCategory[tweak.category].push(tweak.index);
});
console.log("Obtained!");
console.log("[%cget%c] Obtained!", "color: purple", "color: initial");
const jsonData = {
Aesthetic: {
packs: tweaksByCategory["Aesthetic"],
Expand Down Expand Up @@ -500,31 +547,49 @@ document
const jsonData = JSON.parse(content);
processJsonData(jsonData, "select");
} catch (error) {
console.error("Error parsing JSON:", error);
console.log(
`[%cerror%c] Error parsing JSON: %c${error}`,
"color: red",
"color: initial",
"color: red",
);
}
})
.catch(function (error) {
console.error(
"Error extracting selected_packs.json:",
error,
console.log(
`[%cerror%c] Error extracting selected_packs.json: %c${error}`,
"color: red",
"color: initial",
"color: red",
);
});
}
});

if (!fileFound) {
console.error(
"selected_packs.json not found in any folder within the ZIP file.",
console.log(
`[%cerror%c] selected_packs.json not found in any folder within the ZIP file.`,
"color: red",
"color: initial",
);
}
})
.catch(function (error) {
console.error("Error reading the ZIP file:", error);
console.log(
`[%cerror%c] Error reading ZIP file: %c${error}`,
"color: red",
"color: initial",
"color:red",
);
});
};
reader.readAsArrayBuffer(file);
} else {
console.error("No file selected.");
console.log(
`[%cerror%c] No file selected.`,
"color: red",
"color: initial",
);
}
});

Expand All @@ -535,10 +600,8 @@ function selectAll(compressedstring, element) {
LZString.decompressFromEncodedURIComponent(compressedstring),
);
processJsonData(st, "select");
updateURL(st);
element.onclick = function () {
unselectAll(compressedstring, element);
};
updateURL(getSelectedTweaks());
element.onclick = new Function(`unselectAll('${compressedstring}', this);`);
}
element.innerHTML =
'<img src="images/select-all-button/chiseled_bookshelf_occupied.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Unselect All</div>';
Expand All @@ -547,10 +610,11 @@ function selectAll(compressedstring, element) {
function partialSelected(element) {
element.innerHTML =
'<img src="images/select-all-button/chiseled_bookshelf_has_selected.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Select All</div>';
const compressedstring = element.onclick.toString().split("'")[1];
element.onclick = function () {
selectAll(compressedstring, element);
};
const onClickAttr = element.onclick.toString();
if (onClickAttr.includes("unselect")) {
const args = onclickString.match(/\(([^)]+)\)/)[1];
element.onclick = new Function(`selectAll(${args});`);
}
}

function unselectAll(compressedstring, element) {
Expand All @@ -559,10 +623,8 @@ function unselectAll(compressedstring, element) {
LZString.decompressFromEncodedURIComponent(compressedstring),
);
processJsonData(st, "unselect");
updateURL(st);
element.onclick = function () {
selectAll(compressedstring, element);
};
updateURL(getSelectedTweaks());
element.onclick = new Function(`selectAll('${compressedstring}', this);`);
}
element.innerHTML =
'<img src="images/select-all-button/chiseled_bookshelf_empty.png" class="category-label-selectall-img"><div class="category-label-selectall-hovertext">Select All</div>';
Expand Down
Loading

0 comments on commit 39d95f5

Please sign in to comment.