Visual
+ {{ form.iconbase64.as_hidden }}
+ {{ form.logobase64.as_hidden }}
{{ form.iconfile }}
@@ -260,6 +290,142 @@
reader.readAsDataURL(input.files[0]);
}
}
+ const saveLoadTitle = document.getElementById("saveLoadTitle");
+ const saveLoadSection = document.querySelector(".save-load-section");
+
+ saveLoadTitle.addEventListener("click", () => {
+ if (!saveLoadSection.style.display || saveLoadSection.style.display === "none") {
+ saveLoadSection.style.display = "block";
+ } else {
+ saveLoadSection.style.display = "none";
+ }
+
+ const icon = saveLoadTitle.querySelector("i");
+ icon.classList.toggle("fa-chevron-down");
+ icon.classList.toggle("fa-chevron-up");
+ });
+
+ async function saveFormData() {
+ const filename = document.getElementById("{{ form.exename.id_for_label }}").value;
+ if (!filename) {
+ document.getElementById("filenameError").textContent = "Filename is required.";
+ return;
+ } else {
+ document.getElementById("filenameError").textContent = "";
+ }
+
+ const formData = {};
+ const form = document.getElementById("myForm"); // Get the form element
+
+ // 1. Use FormData for robust data collection (handles most input types):
+ const formDataObj = new FormData(form); // Create a FormData object
+
+ formDataObj.forEach((value, key) => {
+ formData[key] = value; // Add each key/value pair to the formData object.
+ });
+
+ // 2. Handle select elements separately (more reliable):
+ const selectElements = form.querySelectorAll('select');
+ selectElements.forEach(select => {
+ formData[select.name] = select.value;
+ });
+
+ // 3. Handle checkboxes and radio buttons (important!):
+ const checkboxRadioElements = form.querySelectorAll('input[type="checkbox"], input[type="radio"]');
+ checkboxRadioElements.forEach(input => {
+ if (input.name) { //only add to form data if it has a name
+ if (input.checked) {
+ formData[input.name] = input.value;
+ } else if (!formData.hasOwnProperty(input.name) && input.type === 'checkbox') { //if it's a checkbox and it's not checked, add it as false
+ formData[input.name] = false;
+ }
+ }
+ });
+
+ // 4. Handle icon and logo
+ const iconPreview = document.getElementById('icon-preview');
+ if (iconPreview.firstChild && iconPreview.firstChild.src.startsWith('data:image/png;base64')) {
+ formData.iconfile = iconPreview.firstChild.src; // Use existing base64
+ } else { //if it's a file upload
+ const iconFile = document.getElementById("{{ form.iconfile.id_for_label }}").files[0];
+ if (iconFile) {
+ formData.iconfile = await readFileAsBase64(iconFile);
+ }
+ }
+
+ const logoPreview = document.getElementById('logo-preview');
+ if (logoPreview.firstChild && logoPreview.firstChild.src.startsWith('data:image/png;base64')) {
+ formData.logofile = logoPreview.firstChild.src; // Use existing base64
+ } else { //if it's a file upload
+ const logoFile = document.getElementById("{{ form.logofile.id_for_label }}").files[0];
+ if (logoFile) {
+ formData.logofile = await readFileAsBase64(logoFile);
+ }
+ }
+
+ const jsonData = JSON.stringify(formData, null, 2);
+ const blob = new Blob([jsonData], { type: "application/json" });
+ const url = URL.createObjectURL(blob);
+
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = filename + ".json";
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+
+ async function readFileAsBase64(file) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = (event) => resolve(event.target.result);
+ reader.onerror = (error) => reject(error);
+ reader.readAsDataURL(file);
+ });
+ }
+
+
+ function loadFormData() {
+ const fileInput = document.getElementById("fileInput");
+ fileInput.click();
+
+ fileInput.addEventListener("change", (event) => {
+ const file = event.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const formData = JSON.parse(e.target.result);
+ for (const key in formData) {
+ const element = document.querySelector(`[name="${key}"]`);
+
+ if (element) { // Check if the element exists
+ if (element.type === 'checkbox' || element.type === 'radio') {
+ element.checked = formData[key]; // Set checked property
+ } else if (element.type !== 'file') { //for other elements
+ element.value = formData[key];
+ }
+
+ // Handle image previews (as before)
+ if (key === 'iconfile' && formData[key]) {
+ document.getElementById('id_iconbase64').value = formData[key]
+ document.getElementById('icon-preview').innerHTML = `
`;
+ }
+ if (key === 'logofile' && formData[key]) {
+ document.getElementById('id_logobase64').value = formData[key]
+ document.getElementById('logo-preview').innerHTML = `
`;
+ }
+ }
+ }
+ } catch (error) {
+ alert("Error loading data. Invalid JSON file.");
+ }
+ };
+ reader.readAsText(file);
+ }
+ });
+ }