mirror/quickdrop
1
0
Fork 0
mirror of https://github.com/RoastSlav/quickdrop.git synced 2025-12-30 19:20:14 -06:00
Code Issues Packages Projects Releases Wiki Activity

added a qr code to the link in the file view

Browse Source
This commit is contained in:
Rostislav Raykov
2024-12-02 15:29:24 +02:00
parent 7c006b22b6
commit 245168ece3
2 changed files with 70 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/main/resources/static/js/fileView.js
View File

@@ -1,14 +1,60 @@
function copyToClipboard() {
function copyToClipboard(button) {
const copyText = document.getElementById("downloadLink");
const copyButton = document.querySelector(".copyButton");
navigator.clipboard.writeText(copyText.value).then(function () {
copyButton.innerText = "Copied!";
copyButton.classList.add("btn-success");
}).catch(function (err) {
console.error("Could not copy text: ", err);
});
navigator.clipboard.writeText(copyText.value)
.then(() => {
button.innerText = "Copied!";
button.classList.add("copied");
// Revert back after 2 seconds
setTimeout(() => {
button.innerText = "Copy Link";
button.classList.remove("copied");
}, 2000);
})
.catch((err) => {
console.error("Could not copy text: ", err);
button.innerText = "Failed!";
button.classList.add("btn-danger");
setTimeout(() => {
button.innerText = "Copy Link";
button.classList.remove("btn-danger");
}, 2000);
});
}
function showPreparingMessage() {
document.getElementById('preparingMessage').style.display = 'block';
}
document.addEventListener("DOMContentLoaded", function () {
const downloadLink = document.getElementById("downloadLink").value; // Get the file download link
const qrCodeContainer = document.getElementById("qrCodeContainer"); // Container for the QR code
console.log("Download link:", downloadLink); // Debugging log
if (downloadLink) {
QRCode.toCanvas(qrCodeContainer, encodeURI(downloadLink), {
width: 100, // Size of the QR Code
margin: 2 // Margin around the QR Code
}, function (error) {
if (error) {
console.error("QR Code generation failed:", error);
}
});
} else {
console.error("Download link is empty or undefined.");
}
});
function updateCheckboxState(event, checkbox) {
event.preventDefault();
const hiddenField = checkbox.form.querySelector('input[name="keepIndefinitely"][type="hidden"]');
if (hiddenField) {
hiddenField.value = checkbox.checked;
}
console.log('Submitting form...');
checkbox.form.submit();
}

35
src/main/resources/templates/fileView.html
View File

@@ -12,6 +12,14 @@
<link href="/images/favicon.png"
rel="icon"
type="image/png">
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
<style>
.copyButton.copied {
background-color: #28a745; /* Green background */
color: white; /* White text */
font-weight: bold; /* Make text bold */
}
</style>
</head>
<body>
<!-- Navbar -->
@@ -123,23 +131,24 @@
</div>
<h5 class="card-title border-top pt-3">
Link</h5>
<div class="input-group mb-3">
Link
</h5>
<div class="input-group mb-3 align-items-center">
<input
class="form-control"
id="downloadLink"
readonly
th:value="${downloadLink}"
type="text"
/>
style="height: 38px;"/>
<button
class="btn btn-outline-secondary copyButton"
onclick="copyToClipboard()"
onclick="copyToClipboard(this)"
type="button"
>
Copy
Link
style="height: 38px;">
Copy Link
</button>
<canvas id="qrCodeContainer" style="width: 100px; height: 100px;"></canvas>
</div>
<div class="alert alert-info"
@@ -201,18 +210,6 @@
</div>
</div>
<script>
function updateCheckboxState(event, checkbox) {
event.preventDefault();
const hiddenField = checkbox.form.querySelector('input[name="keepIndefinitely"][type="hidden"]');
if (hiddenField) {
hiddenField.value = checkbox.checked;
}
console.log('Submitting form...');
checkbox.form.submit();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/fileView.js"></script>
</body>