template: Add zip download

Author: denik

experimental/template/bundle_init.optimized.wasm.gz

@@ -60,10 +60,21 @@
 				border: none;
 				border-radius: 4px;
 				cursor: pointer;
+				margin-right: 10px;
 			}
 			button:hover {
 				background-color: #45a049;
 			}
+			.button-container {
+				display: flex;
+				margin-bottom: 20px;
+			}
+			#downloadButton {
+				background-color: #2196F3;
+			}
+			#downloadButton:hover {
+				background-color: #0b7dda;
+			}
 			.error-message {
 				color: #d32f2f;
 				background-color: #ffebee;
@@ -170,6 +181,7 @@
 				go.run(result.instance);
 				console.log("WASM loaded, RenderTemplate function available");
 				document.getElementById("renderButton").disabled = false;
+				document.getElementById("downloadButton").disabled = false;
 
 				// Check if we have parameters in the URL hash
 				const hashParamsLoaded = decodeHashToParams();
@@ -214,6 +226,53 @@
 				return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 			}
 
+			function downloadTemplateZip() {
+				// Update URL hash with current parameters
+				encodeParamsToHash();
+				
+				try {
+					// Get template name
+					const templateName = document.getElementById("templateName").value.trim();
+					if (!templateName) {
+						throw new Error("Template name cannot be empty");
+					}
+					
+					const paramsText = document.getElementById("paramsInput").value;
+					const params = JSON.parse(paramsText);
+					
+					const helpersText = document.getElementById("helpersInput").value;
+					const helpers = JSON.parse(helpersText);
+					
+					// Call the WASM function to get a ZIP file
+					const result = RenderTemplateZip(templateName, JSON.stringify(params), JSON.stringify(helpers));
+					
+					try {
+						const zipData = JSON.parse(result);
+						
+						if (zipData.error) {
+							throw new Error(zipData.error);
+						}
+						
+						// Create a download link for the ZIP file
+						const downloadLink = document.createElement("a");
+						downloadLink.href = "data:" + zipData.type + ";base64," + zipData.data;
+						downloadLink.download = templateName + ".zip";
+						
+						// Append to body, click, and remove
+						document.body.appendChild(downloadLink);
+						downloadLink.click();
+						document.body.removeChild(downloadLink);
+						
+					} catch (parseError) {
+						alert("Error creating ZIP file: " + parseError.message);
+						console.error(parseError);
+					}
+				} catch (error) {
+					alert("Error: " + error.message);
+					console.error(error);
+				}
+			}
+			
 			function renderTemplate() {
 				// Update URL hash with current parameters
 				encodeParamsToHash();
@@ -404,7 +463,10 @@ <h3>Common Parameters:</h3>
 			<textarea id="helpersInput"></textarea>
 		</div>
 
-		<button id="renderButton" onclick="renderTemplate()" disabled>Render Template</button>
+		<div class="button-container">
+			<button id="renderButton" onclick="renderTemplate()" disabled>Render Template</button>
+			<button id="downloadButton" onclick="downloadTemplateZip()" disabled>Download ZIP</button>
+		</div>
 		<div id="output"></div>
 		<!-- Add Prism.js scripts at the end of body -->
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>