Marthee's picture
Update templates/gui.html
bce0410 verified
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF NBS Search - ADR MVP.1</title>
</head>
<body>
hi
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>
<script >
///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
// Function to send the Dropbox link and keyword to the server
function getURLParams() {
const urlParams = new URLSearchParams(window.location.search);
return {
pdfLink: urlParams.get('pdfLink'),
keyword: JSON.parse(decodeURIComponent(urlParams.get('keyword') || "[]")), // Decode and parse
pageNumber: parseInt(urlParams.get('page')) || 1,
zoomRect: urlParams.get('zoom') // Expecting format: "x,y,width,height"
};
}
function processPdf() {
// const pdfLink = 'https://www.dropbox.com/scl/fi/hnp4mqigb51a5kp89kgfa/00801-ARC-20-ZZ-S-A-0002.pdf?rlkey=45abeoebzqw4qwnslnei6dkd6&st=m4yrcjm2&dl=1'; // Dropbox link
// const keyword = ['115 INTEGRATED MRI ROOM LININGS','710 TRANSPORTATION'] ; // Example keyword
const { pdfLink, keyword, pageNumber, zoomRect } = getURLParams();
// Create a new FormData object to send the data as form data
const formData = new FormData();
formData.append('pdf_link', pdfLink);
formData.append('keyword', JSON.stringify(keyword));
console.log('ay haga pleaseee')
// Send the data to the Flask server
fetch('/apiNBSData', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
if (data.download_link) {
window.location.href = data.download_link; // This will use the rect info from Flask
} else {
alert('Error: ' + data.error);
}
})
.catch(error => {
console.error('Error:', error);
});
}
// Call the function to process the PDF
processPdf();
</script> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF Viewer</title>
<style>
body { margin: 0; overflow: hidden; }
iframe { width: 100vw; height: 100vh; border: none; }
</style>
</head>
<body>
<!-- PDF viewer -->
<iframe id="pdfViewer"
src="/get-pdf#page={{ start_page }}&zoom={{ start_zoom }}"
allowfullscreen></iframe>
<script>
/**
* Listen for external navigation updates.
* If the viewer is already open, update the page/zoom dynamically
* when the user clicks another external /view-pdf?pdfLink=...&page=X&zoom=Y link.
*/
// Detect changes to URL parameters dynamically
function getQueryParams() {
const params = new URLSearchParams(window.location.search);
return {
pdfLink: params.get('pdfLink'),
page: params.get('page') || '1',
zoom: params.get('zoom') || '100'
};
}
function updatePDFView(page, zoom) {
const iframe = document.getElementById('pdfViewer');
iframe.src = `/get-pdf#page=${page}&zoom=${zoom}`;
}
// Listen for URL changes (e.g. when user clicks another link externally)
window.addEventListener('popstate', () => {
const { page, zoom } = getQueryParams();
updatePDFView(page, zoom);
});
// Also handle initial load (page refresh or direct open)
window.addEventListener('load', () => {
const { page, zoom } = getQueryParams();
updatePDFView(page, zoom);
});
</script>
</body>
</html>