updated to correct frature
This commit is contained in:
@@ -145,6 +145,7 @@
|
||||
}
|
||||
|
||||
.wifi-fields,
|
||||
.link-page-fields,
|
||||
.email-fields,
|
||||
.sms-fields,
|
||||
.vcard-fields {
|
||||
@@ -152,6 +153,7 @@
|
||||
}
|
||||
|
||||
.wifi-fields.active,
|
||||
.link-page-fields.active,
|
||||
.email-fields.active,
|
||||
.sms-fields.active,
|
||||
.vcard-fields.active {
|
||||
@@ -314,6 +316,7 @@
|
||||
<select id="qr-type" onchange="toggleFields()">
|
||||
<option value="text">Text</option>
|
||||
<option value="url">URL/Website</option>
|
||||
<option value="link_page">Dynamic Link Page</option>
|
||||
<option value="wifi">WiFi</option>
|
||||
<option value="email">Email</option>
|
||||
<option value="phone">Phone</option>
|
||||
@@ -348,6 +351,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link Page fields -->
|
||||
<div class="link-page-fields" id="link-page-fields">
|
||||
<div class="form-group">
|
||||
<label for="page-title">Page Title</label>
|
||||
<input type="text" id="page-title" placeholder="My Link Collection" value="My Links">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="page-description">Description</label>
|
||||
<textarea id="page-description" placeholder="A collection of useful links">Collection of useful links</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p style="background: #e3f2fd; padding: 15px; border-radius: 8px; color: #1565c0; font-size: 0.9em;">
|
||||
<strong>💡 Dynamic Link Page:</strong> This creates a QR code that points to a web page where you can add, edit, and manage links. The QR code stays the same, but you can update the links anytime!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email fields -->
|
||||
<div class="email-fields" id="email-fields">
|
||||
<div class="form-group">
|
||||
@@ -476,7 +496,7 @@
|
||||
|
||||
// Hide all specific fields
|
||||
document.getElementById('text-field').style.display = 'none';
|
||||
document.querySelectorAll('.wifi-fields, .email-fields, .sms-fields, .vcard-fields').forEach(el => {
|
||||
document.querySelectorAll('.wifi-fields, .link-page-fields, .email-fields, .sms-fields, .vcard-fields').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
@@ -492,7 +512,7 @@
|
||||
contentField.placeholder = 'Enter your text...';
|
||||
}
|
||||
} else {
|
||||
document.getElementById(`${type}-fields`).classList.add('active');
|
||||
document.getElementById(`${type.replace('_', '-')}-fields`).classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -517,6 +537,9 @@
|
||||
// Get content based on type
|
||||
if (type === 'text' || type === 'url' || type === 'phone') {
|
||||
content = document.getElementById('content').value;
|
||||
} else if (type === 'link_page') {
|
||||
additionalData.title = document.getElementById('page-title').value;
|
||||
additionalData.description = document.getElementById('page-description').value;
|
||||
} else if (type === 'wifi') {
|
||||
additionalData.wifi = {
|
||||
ssid: document.getElementById('wifi-ssid').value,
|
||||
@@ -555,7 +578,8 @@
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/generate', {
|
||||
const endpoint = type === 'link_page' ? '/api/create_link_page' : '/api/generate';
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -571,7 +595,21 @@
|
||||
|
||||
// Show QR code
|
||||
const preview = document.getElementById('qr-preview');
|
||||
preview.innerHTML = `<img src="${result.image_data}" alt="Generated QR Code">`;
|
||||
let previewHTML = `<img src="${result.image_data}" alt="Generated QR Code">`;
|
||||
|
||||
// Add special info for link pages
|
||||
if (type === 'link_page') {
|
||||
previewHTML += `
|
||||
<div style="margin-top: 15px; padding: 15px; background: #e3f2fd; border-radius: 8px; text-align: left;">
|
||||
<h4 style="margin-bottom: 10px; color: #1565c0;">🎉 Dynamic Link Page Created!</h4>
|
||||
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>Public URL:</strong> <a href="${result.page_url}" target="_blank">${result.page_url}</a></p>
|
||||
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>Edit URL:</strong> <a href="${result.edit_url}" target="_blank">${result.edit_url}</a></p>
|
||||
<p style="font-size: 0.9em; color: #666;">Share the QR code - visitors will see your link collection. Use the edit URL to manage your links!</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
preview.innerHTML = previewHTML;
|
||||
|
||||
// Show download buttons
|
||||
document.getElementById('download-section').classList.add('active');
|
||||
@@ -623,11 +661,12 @@
|
||||
<div class="qr-item">
|
||||
<img src="${qr.preview}" alt="QR Code">
|
||||
<div class="qr-item-info">
|
||||
<h4>${qr.type.toUpperCase()}</h4>
|
||||
<h4>${qr.type.toUpperCase()}${qr.type === 'link_page' ? ' 🔗' : ''}</h4>
|
||||
<p>Created: ${new Date(qr.created_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div class="qr-item-actions">
|
||||
<button class="btn btn-small btn-primary" onclick="downloadQRById('${qr.id}')">Download</button>
|
||||
${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;">Manage</button>` : ''}
|
||||
<button class="btn btn-small btn-secondary" onclick="deleteQR('${qr.id}')">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -659,6 +698,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function openLinkPage(qrId) {
|
||||
try {
|
||||
const response = await fetch(`/api/qr_codes/${qrId}`);
|
||||
const qrData = await response.json();
|
||||
|
||||
if (qrData.page_id) {
|
||||
window.open(`/edit/${qrData.page_id}`, '_blank');
|
||||
} else {
|
||||
alert('Link page not found');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error opening link page: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Load history on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadQRHistory();
|
||||
|
||||
Reference in New Issue
Block a user