add progress counter

Author: everloste

index.html

@@ -136,6 +136,9 @@ <h3 class="widget-text">A heading widget...</h3>
 			<script type="module" src="/src/main.ts"></script>
 		</div>
 		<footer>
+			<p hidden id="progress-indicator" style="text-align: left;">
+				Working... (<span id="progress-indicator-percentage">0</span>%) &nbsp;∗&nbsp;&nbsp;
+			</p>
 			<p>
 				Developed and maintained with
 				<svg

src/datapack_changes.ts

@@ -67,10 +67,13 @@ export class DatapackModifier {
 
 	public async applyChanges(datapacks: ReadonlyArray<Datapack>, export_settings: ExportSettings) {
 		console.time("[DatapackModifier] Applied changes to packs");
+		let progress = 0; let progress_max = Object.keys(this.changeQueue).length;
 
 		// Apply changes to files
 		for (const change of this.changeQueue) {
-			await this.applyChange(change);
+			await this.applyChange(change).then(
+				() => {progress++; document.getElementById("progress-indicator-percentage")!.innerText = Math.round(progress / progress_max * 100).toString();}
+			);
 		}
 
 		// Cache with changes created -> write to zip
@@ -85,10 +88,13 @@ export class DatapackModifier {
 
 					if (export_settings.modifiedOnly == false) {
 						const dpZip = datapacks.find((dp) => dp.id === pack_id)?.zip!;
+						progress_max += Object.keys(dpZip.files).length;
 
 						for (const file_name in dpZip.files) {
 							if (file_name in dpZip.files) {
-								const file_content = await dpZip.files[file_name].async("base64");
+								const file_content = await dpZip.files[file_name].async("base64").then(
+									() => {progress++; document.getElementById("progress-indicator-percentage")!.innerText = Math.round(progress / progress_max * 100).toString();}
+								);
 								packs[pack_id].file(file_name, file_content, {base64: true});
 							}
 						}

src/main.ts

@@ -115,12 +115,15 @@ exportButtonElement.addEventListener("click", exportButtonClicked, { passive: tr
 
 function exportButtonClicked() {
 	console.info("Datapack export beginning...");
+	document.getElementById("progress-indicator")!.hidden = false;
 
 	const export_settings = getExportSettings();
 
 	datapackStore.getAll().forEach((datapack) => {
 		datapack.instancedConfig?.apply();
 	});
 
-	DatapackModifierInstance.applyChanges(datapackStore.getAll(), export_settings);
+	DatapackModifierInstance.applyChanges(datapackStore.getAll(), export_settings).then(
+		() => {document.getElementById("progress-indicator")!.hidden = true;}
+	);
 }

style.css

@@ -297,10 +297,18 @@ input[type="range"]::-moz-range-thumb {
 }
 
 footer {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	justify-content: space-between;
+	align-content: center;
+	align-items: center;
+	justify-content: center;
+
 	p {
 		margin: 0;
+		text-align: center;
 	}
-
 	svg {
 		display: inline-block;
 		vertical-align: middle;