I’m having trouble uploading images as pdf.
I haven’t been able to connect the first image of the property gallery to the PDF. Therefore, when I download the PDF it displays all current info of the property perfectly except the image. I am new with code so maybe I am just making the relevant line wrong… Please note I am running this code in a dynamic page so the pdf generates with the current info of the chosen property.
What am I doing wrong?
import wixData from “wix-data”;
$w.onReady(function () {
const passColor = “rgb(129, 181, 50)”;
const failColor = “rgb(198, 0, 34)”;
const buttonGroups = [
{
passButtons: ["#button3", "#button138", "#button140", "#button142"],
failButtons: ["#button4", "#button137", "#button139", "#button141"],
textId: "#text4",
totalCount: 4,
weight: 100,
containers: ["#box112", "#box141", "#box142", "#box143"],
textBoxIds: ["#textBox1", "#textBox2", "#textBox3", "#textBox4"], // TextBox IDs for each box
uploadButtonIds: ["#uploadButton1", "#uploadButton2", "#uploadButton3", "#uploadButton4"] // UploadButton IDs for each box
},
{
passButtons: ["#button150", "#button148", "#button146"],
failButtons: ["#button149", "#button147", "#button145"],
textId: "#text185",
totalCount: 3,
weight: 100,
containers: ["#box148", "#box149", "#box150"],
textBoxIds: ["#textBox7", "#textBox6", "#textBox5"],
uploadButtonIds: ["#uploadButton7", "#uploadButton6", "#uploadButton5"]
},
{
passButtons: ["#button153", "#button155", "#button157", "#button159", "#button161"],
failButtons: ["#button152", "#button154", "#button156", "#button158", "#button160"],
textId: "#text191",
totalCount: 5,
weight: 100,
containers: ["#box152", "#box153", "#box154", "#box155", "#box156"],
textBoxIds: ["#textBox8", "#textBox9", "#textBox10", "#textBox11", "#textBox12"],
uploadButtonIds: ["#uploadButton8", "#uploadButton9", "#uploadButton10", "#uploadButton11", "#uploadButton12"]
},
{
passButtons: ["#button164", "#button166", "#button168", "#button170", "#button172", "#button174"],
failButtons: ["#button163", "#button165", "#button167", "#button169", "#button171", "#button173"],
textId: "#text192",
totalCount: 6,
weight: 100,
containers: ["#box158", "#box159", "#box160", "#box161", "#box162", "#box164"],
textBoxIds: ["#textBox17", "#textBox16", "#textBox15", "#textBox14", "#textBox13", "#textBox18"],
uploadButtonIds: ["#uploadButton17", "#uploadButton16", "#uploadButton15", "#uploadButton14", "#uploadButton13", "#uploadButton18"]
},
{
passButtons: ["#button185", "#button183", "#button181", "#button179", "#button177", "#button187", "#button189"],
failButtons: ["#button184", "#button182", "#button180", "#button178", "#button176", "#button186", "#button188"],
textId: "#text199",
totalCount: 7,
weight: 100,
containers: ["#box170", "#box169", "#box168", "#box167", "#box166", "#box171", "#box173"],
textBoxIds: ["#textBox23", "#textBox22", "#textBox21", "#textBox20", "#textBox19", "#textBox24", "#textBox25"],
uploadButtonIds: ["#uploadButton23", "#uploadButton22", "#uploadButton21", "#uploadButton20", "#uploadButton19", "#uploadButton24", "#uploadButton25"]
}
];
function calculateGroupPercentage(group) {
const passCount = group.passButtons.filter(btnId => $w(btnId).style.backgroundColor === passColor).length;
const totalPercentage = (passCount / group.totalCount) * group.weight;
$w(group.textId).text = `${passCount} / ${group.totalCount} (${totalPercentage.toFixed(2)}%)`;
return {
passCount: passCount,
totalCount: group.totalCount,
percentage: totalPercentage.toFixed(2)
};
}
async function handleButtonClick(button, group, containerId, index) {
const containerChildren = $w(containerId).children;
const passButtons = group.passButtons;
const failButtons = group.failButtons;
let isChanged = false; // Track if button color changed
let result = {
buttonId: button.id,
pass: false,
fail: false
};
if (passButtons.includes(`#${button.id}`)) {
if (button.style.backgroundColor !== passColor) { // Check if color is not already pass
button.style.backgroundColor = passColor;
failButtons.forEach(failBtn => {
if (containerChildren.includes($w(failBtn))) {
$w(failBtn).style.backgroundColor = "black";
}
});
result.pass = true;
isChanged = true; // Mark as changed
}
} else if (failButtons.includes(`#${button.id}`)) {
if (button.style.backgroundColor !== failColor) { // Check if color is not already fail
button.style.backgroundColor = failColor;
passButtons.forEach(passBtn => {
if (containerChildren.includes($w(passBtn))) {
$w(passBtn).style.backgroundColor = "black";
}
});
result.fail = true;
isChanged = true; // Mark as changed
}
}
// Get the text from the corresponding textbox
result.textBoxValue = $w(group.textBoxIds[index]).value;
// Handle file upload from the upload button
if ($w(group.uploadButtonIds[index]).value.length > 0) {
const uploadedFiles = await $w(group.uploadButtonIds[index]).uploadFiles();
if (uploadedFiles.length > 0) {
result.fileUrl = uploadedFiles[0].fileUrl; // Save the uploaded file's URL
}
}
// Save the button click result to the dataset only if color changed
if (isChanged) {
saveResultToDataset(result);
}
calculateGroupPercentage(group);
}
// Function to save the result to the dataset
function saveResultToDataset(result) {
let toInsert = {
buttonId: result.buttonId,
pass: result.pass,
fail: result.fail,
textBoxValue: result.textBoxValue, // Save textbox value
fileUrl: result.fileUrl || "", // Save file URL if uploaded
timestamp: new Date()
};
// Insert the result into the dataset
wixData.insert("myDataset", toInsert)
.then((result) => {
console.log("Item saved to dataset:", result);
})
.catch((err) => {
console.error("Error saving to dataset:", err);
});
}
buttonGroups.forEach(group => {
group.containers.forEach((containerId, index) => {
const containerChildren = $w(containerId).children;
containerChildren.forEach(button => {
const buttonId = `#${button.id}`;
if (group.passButtons.concat(group.failButtons).includes(buttonId)) {
button.onClick(() => handleButtonClick(button, group, containerId, index));
}
});
});
});
// Collapsing function for toggling boxes
function toggleBox(boxElement) {
const isCollapsed = boxElement.collapsed;
if (isCollapsed) {
boxElement.expand();
} else {
boxElement.collapse();
}
}
$w('#button2').onClick(() => toggleBox($w('#box147')));
$w('#button144').onClick(() => toggleBox($w('#box151')));
$w('#button143').onClick(() => toggleBox($w('#box146')));
$w('#button151').onClick(() => toggleBox($w('#box157')));
$w('#button162').onClick(() => toggleBox($w('#box165')));
$w('#button175').onClick(() => toggleBox($w('#box174')));
});
``
//**----------------------------pdf export------------------------------------------ */
// import {generatePdfFromData} from ‘backend/pdfhelper’;
// $w.onReady(function(){
// let url;
// $w(‘#submitButton’).onClick(async ()=>{
// const name = $w(“#button170”).label;
// const data = {name};
// url = await generatePdfFromData(data);
// $w(‘#exportButton’).link = url;
// $w(‘#exportButton’).target = “_blank”;
// console.log(url)
// })
// })
import { generatePdfFromData } from ‘backend/pdfhelper’;
$w.onReady(function () {
const pdfResults = {};
function handleButtonClick(buttonId, isPass, groupKey) {
const buttonLabel = $w(buttonId).label;
// เก็บผลลัพธ์ล่าสุดของปุ่มในกลุ่ม
pdfResults[groupKey] = {
result: isPass ? 'Pass' : 'Fail', // เก็บเฉพาะคำว่า Pass หรือ Fail
status: isPass
};
// เปลี่ยนสีของปุ่ม
$w(buttonId).style.backgroundColor = isPass ? "rgb(129, 181, 50)" : "rgb(198, 0, 34)";
// คืนสีของปุ่มอื่น ๆ ในกลุ่มให้เป็นสีดำ
const group = buttonGroups[groupKey];
group.passButton.concat(group.failButton).forEach(buttonIdInGroup => {
if (buttonIdInGroup !== buttonId) {
$w(buttonIdInGroup).style.backgroundColor = "black"; // สีดำสำหรับปุ่มอื่น
}
});
}
const buttonGroups = {
group1: {
passButton: ["#button3"],
failButton: ["#button4"],
textBoxIds: ["#textBox1"],
uploadButtonIds: ["#uploadButton1"]
},
group2: {
passButton: ["#button138"],
failButton: ["#button137"],
textBoxIds: ["#textBox2"],
uploadButtonIds: ["#uploadButton2"]
},
group3: {
passButton: ["#button140"],
failButton: ["#button139"],
textBoxIds: ["#textBox3"],
uploadButtonIds: ["#uploadButton3"]
},
group4: {
passButton: ["#button142"],
failButton: ["#button141"],
textBoxIds: ["#textBox4"],
uploadButtonIds: ["#uploadButton4"]
},
group5: {
passButton: ["#button150"],
failButton: ["#button149"],
textBoxIds: ["#textBox7"],
uploadButtonIds: ["#uploadButton7"]
},
group6: {
passButton: ["#button148"],
failButton: ["#button147"],
textBoxIds: ["#textBox6"],
uploadButtonIds: ["#uploadButton6"]
},
group7: {
passButton: ["#button146"],
failButton: ["#button145"],
textBoxIds: ["#textBox5"],
uploadButtonIds: ["#uploadButton5"]
},
group8: {
passButton: ["#button153"],
failButton: ["#button152"],
textBoxIds: ["#textBox8"],
uploadButtonIds: ["#uploadButton8"]
},
group9: {
passButton: ["#button155"],
failButton: ["#button154"],
textBoxIds: ["#textBox9"],
uploadButtonIds: ["#uploadButton9"]
},
group10: {
passButton: ["#button157"],
failButton: ["#button156"],
textBoxIds: ["#textBox10"],
uploadButtonIds: ["#uploadButton10"]
},
group11: {
passButton: ["#button159"],
failButton: ["#button158"],
textBoxIds: ["#textBox11"],
uploadButtonIds: ["#uploadButton11"]
},
group12: {
passButton: ["#button161"],
failButton: ["#button160"],
textBoxIds: ["#textBox12"],
uploadButtonIds: ["#uploadButton12"]
},
group13: {
passButton: ["#button172"],
failButton: ["#button171"],
textBoxIds: ["#textBox17"],
uploadButtonIds: ["#uploadButton17"]
},
group14: {
passButton: ["#button170"],
failButton: ["#button169"],
textBoxIds: ["#textBox16"],
uploadButtonIds: ["#uploadButton16"]
},
group15: {
passButton: ["#button168"],
failButton: ["#button167"],
textBoxIds: ["#textBox15"],
uploadButtonIds: ["#uploadButton15"]
},
group16: {
passButton: ["#button166"],
failButton: ["#button165"],
textBoxIds: ["#textBox14"],
uploadButtonIds: ["#uploadButton14"]
},
group17: {
passButton: ["#button164"],
failButton: ["#button163"],
textBoxIds: ["#textBox13"],
uploadButtonIds: ["#uploadButton13"]
},
group18: {
passButton: ["#button174"],
failButton: ["#button173"],
textBoxIds: ["#textBox18"],
uploadButtonIds: ["#uploadButton18"]
},
group19: {
passButton: ["#button185"],
failButton: ["#button184"],
textBoxIds: ["#textBox23"],
uploadButtonIds: ["#uploadButton23"]
},
group20: {
passButton: ["#button183"],
failButton: ["#button182"],
textBoxIds: ["#textBox22"],
uploadButtonIds: ["#uploadButton22"]
},
group21: {
passButton: ["#button181"],
failButton: ["#button180"],
textBoxIds: ["#textBox21"],
uploadButtonIds: ["#uploadButton21"]
},
group22: {
passButton: ["#button179"],
failButton: ["#button178"],
textBoxIds: ["#textBox20"],
uploadButtonIds: ["#uploadButton20"]
},
group23: {
passButton: ["#button177"],
failButton: ["#button176"],
textBoxIds: ["#textBox19"],
uploadButtonIds: ["#uploadButton19"]
},
group24: {
passButton: ["#button187"],
failButton: ["#button186"],
textBoxIds: ["#textBox24"],
uploadButtonIds: ["#uploadButton24"]
},
group25: {
passButton: ["#button189"],
failButton: ["#button188"],
textBoxIds: ["#textBox25"],
uploadButtonIds: ["#uploadButton25"]
}
};
Object.keys(buttonGroups).forEach(groupKey => {
const group = buttonGroups[groupKey];
group.passButton.forEach(passButtonId => {
$w(passButtonId).onClick(() => handleButtonClick(passButtonId, true, groupKey));
});
group.failButton.forEach(failButtonId => {
$w(failButtonId).onClick(() => handleButtonClick(failButtonId, false, groupKey));
});
});
$w(‘#submitButton’).onClick(async () => {
// Sort results by group
const sortedKeys = Object.keys(buttonGroups);
const results = sortedKeys.map((groupKey, index) => {
if (pdfResults[groupKey]) {
const { status } = pdfResults[groupKey];
const backgroundColor = status ? “rgb(129, 181, 50)” : “rgb(198, 0, 34)”;
// Get values from the text boxes and upload buttons
const group = buttonGroups[groupKey];
const textBoxValue = $w(group.textBoxIds[0]).value;
// Collect image URLs from upload buttons
const uploadButtonStates = group.uploadButtonIds.map(uploadButtonId => {
const imageUrl = $w(uploadButtonId).src; // Get the value (URL) from the upload button
console.log("Image URL:", imageUrl); // ตรวจสอบว่า URL ถูกต้อง
return imageUrl ? `<img src="${imageUrl}" style="max-width:100%; height:auto; margin-top: 10px;" />` : '';
}).join('');
// Create a div for the results with spacing
return {
result: `
<div id="result${index + 1}" style="padding: 90px; margin-bottom: 50px;background-color: ${backgroundColor};">
<span style="color: white;font-size: 20px;">
${status ? 'Pass' : 'Fail'}
</span>
</div>
`,
textBox: `
<div id="textBoxValue${index + 1}" style="color: black; font-size: 16px;">
${textBoxValue}
<div>${uploadButtonStates}</div> <!-- Add images below the textbox value -->
</div>
`,
uploadButton: `
<div id="uploadButtonStates${index + 1}">
${uploadButtonStates}
</div>
`
};
}
return null; // Return null if no result in the group
}).filter(res => res !== null); // Remove null results
// Prepare the data object with results indexed as results1, results2, etc.
const data = {};
results.forEach((res, index) => {
data[`results${index + 1}`] = res.result;
data[`textBoxValue${index + 1}`] = res.textBox;
data[`uploadButtonStates${index + 1}`] = res.uploadButton;
});
try {
const url = await generatePdfFromData(data);
$w('#exportButton').link = url;
$w('#exportButton').target = "_blank";
console.log(url);
} catch (error) {
console.error("Error generating PDF:", error);
}
});
});