fixing observationPage form fields to pdf. got lost when m$ closed hotmail

This commit is contained in:
Wappler 2024-12-26 22:34:14 -06:00
parent 9cffd50a5f
commit 2b04df51c0
5 changed files with 55 additions and 18 deletions

Binary file not shown.

View File

@ -21,6 +21,9 @@ const dd = createDebugLogger(true, "dd"); // code function at bottom of the page
// Wrapper function to fetch, update, and download PDF
async function processAndDownloadPdf(filePath, ...dataSources) {
dd(`Loaded PDF Template: ${filePath.value}`)
try {
const pdfBytes = await fetchPdfBytes(filePath);
const updatedPdfBytes = await updatePdfFields(pdfBytes, dataSources);
@ -56,26 +59,30 @@ async function updatePdfFields(
dataSources,
skipMissingFields = true
) {
console.log("Datasource size:", dataSources.length)
try {
const pdfDoc = await PDFLib.PDFDocument.load(pdfBytes);
const form = pdfDoc.getForm();
dataSources.forEach((dataSource) => {
console.log("Current Datasource", dataSource)
dataSource.forEach((record) => {
Object.entries(record).forEach(([fieldName, fieldValue]) => {
console.log("Working in: ", record)
Object.entries(record).forEach(([fieldName, fieldValue]) => {
dd(`Field: ${fieldName} Value: ${fieldValue}`) //debugger
try {
const formField = form.getTextField(fieldName);
if (formField) {
console.info(`Field "${fieldName}" OK`);
dd(fieldName, "-->", fieldValue);
// console.info(`Field "${fieldName}" OK`);
dd(`${fieldName} --> ${fieldValue} OK`);
formField.setText(String(fieldValue));
} else if (!skipMissingFields) {
//dd(`Skipping Field: ${fieldName} NOT FOUND`)
console.warn(`Field "${fieldName}" not found.`);
}
} catch (err) {
console.error(`Error updating field "${fieldName}":`, err);
console.error(`Error updating field "${fieldName}":`); //console.error(`Error updating field "${fieldName}":`, err);
}
});
});

10
public/listFields.html Normal file
View File

@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- New Wappler Page -->
</head>
<body>
</body>
</html>

View File

@ -52,12 +52,12 @@
<link rel="stylesheet" href="/dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="/dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
<script src="/dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
<script src="/dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer></script>
<!--<script src="/dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer></script>-->
<!--<link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />-->
<!--<script src="/dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer></script>-->
<link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/bgthemes/bootstrap.css" />
<!--<link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/bgthemes/bootstrap.css" />-->
<script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.find.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.indexeddb.min.js" defer></script>
@ -67,7 +67,7 @@
<script src="/dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
<!--<link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />-->
</head>
<body is="dmx-app" id="main">

View File

@ -1,4 +1,4 @@
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{},dmxBootstrap5Modal:{},dmxBootstrap5Navigation:{},dmxBootstrap5Tooltips:{},dmxBootbox5:{},dmxNotifications:{},dmxPouchDB:{},dmxBootstrap5Alert:{},dmxBootstrap5Collapse:{},dmxDatePicker:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{},dmxBootstrap5Modal:{},dmxBootstrap5Navigation:{},dmxBootstrap5Tooltips:{},dmxBootbox5:{},dmxNotifications:{},dmxPouchDB:{},dmxBootstrap5Alert:{},dmxBootstrap5Collapse:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<script is="dmx-flow" id="minCalc" type="text/dmx-flow">{
runJS: {
name: "CalculateMinutes",
@ -16,7 +16,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.9.1/jquery.timepicker.min.js" integrity="sha512-+UV/u4sqwTpgK0d4vvTjan+ofWGwgTX9VkhLPKbRIQSolA4L8JmtJRk2zkh7Pv9ZtBQELMQury9Qf5RSA40N5g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<dmx-json-datasource id="dspListJson" is="dmx-serverconnect" url="/DSPlist.json"></dmx-json-datasource>
<dmx-value id="ertTemplatePath" dmx-bind:value="'/PDF/ertff_template_1.pdf'"></dmx-value>
<dmx-value id="ertTemplatePath" dmx-bind:value="'/PDF/Template-EDV-ERT_v4.1.pdf'"></dmx-value>
<div class="modal" id="saveObservationResults" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
@ -71,8 +71,8 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" dmx-on:click="processPDF.run()">Download PDF</button>
</div>
</div>
</div>
@ -140,7 +140,9 @@
args: [
"{{ertTemplatePath.value}}",
"{{datastore1.data}}",
"{{data_view1.data}}"
"{{data_view1.data}}",
"{{saveObservationResults.form2.getStartTime.value}}",
"{{saveObservationResults.form2.getEndTime.value}}"
]
}
}</script>
@ -294,7 +296,6 @@
</div>
</div>
<div class="row">
<input id="text3" name="text3" type="text" class="form-control" is="dmx-date-picker" showdropdowns="true" timepicker="" minutes-increment="5">
</div>
</div>
@ -362,9 +363,6 @@
</div>
</div>
<div class="row">
<textarea id="text2" class="form-control"></textarea>
</div>
<table class="table">
<thead>
<tr>
@ -392,6 +390,28 @@
</table>
</div>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>$id</th>
<th>Db full name</th>
<th>Db license number</th>
<th>Db state name</th>
<th>Db employee</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat5">
<tr>
<td dmx-text="$id"></td>
<td dmx-text="db_fullName"></td>
<td dmx-text="db_licenseNumber"></td>
<td dmx-text="db_stateName"></td>
<td dmx-text="db_employeeID"></td>
</tr>
</tbody>
</table>
</div>
<div class="container" id="DS">
<div class="row">
<header class="text-center">