feat(ui): replace copy with share modal and download option
- Add new "Share Report" modal with readable textarea - Add instructions to send logs to contact@aircarto.fr - Add "Download (.txt)" button to save report as file - Add "Select All" button for easy manual copy - Remove complex clipboard API code that wasn't working - Filename format: logs_nebuleair_{deviceId}_{date}.txt Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
PaulVua
164
html/saraR4.html
164
html/saraR4.html
@@ -435,12 +435,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<div id="selftest_summary" class="me-auto"></div>
|
<div id="selftest_summary" class="me-auto"></div>
|
||||||
<button type="button" class="btn btn-outline-primary" id="selfTestCopyBtn" onclick="copySelfTestReport()" disabled>
|
<button type="button" class="btn btn-primary" id="selfTestCopyBtn" onclick="openShareReportModal()" disabled>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard me-1" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share me-1" viewBox="0 0 16 16">
|
||||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
|
||||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
Copy Report
|
Share Report
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="selfTestDoneBtn" disabled>Close</button>
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="selfTestDoneBtn" disabled>Close</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -448,6 +447,44 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Share Report Modal -->
|
||||||
|
<div class="modal fade" id="shareReportModal" tabindex="-1" aria-labelledby="shareReportModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header bg-primary text-white">
|
||||||
|
<h5 class="modal-title" id="shareReportModalLabel">Share Diagnostic Report</h5>
|
||||||
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<strong>Need help?</strong> You can send this diagnostic report to our support team at
|
||||||
|
<a href="mailto:contact@aircarto.fr?subject=NebuleAir%20Diagnostic%20Report" class="alert-link">contact@aircarto.fr</a>
|
||||||
|
<br><small>Select all the text below (Ctrl+A) and copy it (Ctrl+C), or use the Download button.</small>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<textarea id="shareReportText" class="form-control font-monospace" rows="15" readonly style="font-size: 0.75rem; background-color: #1e1e1e; color: #d4d4d4;"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-success" onclick="downloadReport()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download me-1" viewBox="0 0 16 16">
|
||||||
|
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
|
||||||
|
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
|
||||||
|
</svg>
|
||||||
|
Download (.txt)
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-outline-primary" onclick="selectAllReportText()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor-text me-1" viewBox="0 0 16 16">
|
||||||
|
<path d="M5 2a.5.5 0 0 1 .5-.5c.862 0 1.573.287 2.06.566.174.099.321.198.44.286.119-.088.266-.187.44-.286A4.165 4.165 0 0 1 10.5 1.5a.5.5 0 0 1 0 1c-.638 0-1.177.213-1.564.434a3.49 3.49 0 0 0-.436.294V7.5H9a.5.5 0 0 1 0 1h-.5v4.272c.1.08.248.187.436.294.387.221.926.434 1.564.434a.5.5 0 0 1 0 1 4.165 4.165 0 0 1-2.06-.566A4.561 4.561 0 0 1 8 13.65a4.561 4.561 0 0 1-.44.285 4.165 4.165 0 0 1-2.06.566.5.5 0 0 1 0-1c.638 0 1.177-.213 1.564-.434.188-.107.335-.214.436-.294V8.5H7a.5.5 0 0 1 0-1h.5V3.228a3.49 3.49 0 0 0-.436-.294A3.166 3.166 0 0 0 5.5 2.5.5.5 0 0 1 5 2z"/>
|
||||||
|
</svg>
|
||||||
|
Select All
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- toast -->
|
<!-- toast -->
|
||||||
|
|
||||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||||
@@ -2037,7 +2074,7 @@ async function selfTestSequence() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function copySelfTestReport() {
|
function generateReport() {
|
||||||
// Build formatted report
|
// Build formatted report
|
||||||
let report = `===============================================================
|
let report = `===============================================================
|
||||||
NEBULEAIR PRO 4G - SELF TEST REPORT
|
NEBULEAIR PRO 4G - SELF TEST REPORT
|
||||||
@@ -2120,95 +2157,50 @@ ${document.getElementById('selftest_logs').textContent}
|
|||||||
===============================================================
|
===============================================================
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Copy to clipboard with fallback
|
return report;
|
||||||
copyToClipboard(report);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyToClipboard(text) {
|
function openShareReportModal() {
|
||||||
const copyBtn = document.getElementById('selfTestCopyBtn');
|
// Generate the report
|
||||||
const originalHtml = copyBtn.innerHTML;
|
const report = generateReport();
|
||||||
|
|
||||||
// Try modern clipboard API first
|
// Put report in textarea
|
||||||
if (navigator.clipboard && window.isSecureContext) {
|
document.getElementById('shareReportText').value = report;
|
||||||
navigator.clipboard.writeText(text).then(function() {
|
|
||||||
showCopySuccess(copyBtn, originalHtml);
|
// Open the share modal
|
||||||
}).catch(function(err) {
|
const shareModal = new bootstrap.Modal(document.getElementById('shareReportModal'));
|
||||||
console.error('Clipboard API failed:', err);
|
shareModal.show();
|
||||||
fallbackCopyToClipboard(text, copyBtn, originalHtml);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Fallback for non-HTTPS or older browsers
|
|
||||||
fallbackCopyToClipboard(text, copyBtn, originalHtml);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function fallbackCopyToClipboard(text, copyBtn, originalHtml) {
|
function selectAllReportText() {
|
||||||
// Create a temporary textarea
|
const textarea = document.getElementById('shareReportText');
|
||||||
const textArea = document.createElement('textarea');
|
textarea.select();
|
||||||
textArea.value = text;
|
textarea.setSelectionRange(0, textarea.value.length); // For mobile devices
|
||||||
|
|
||||||
// Make it invisible but part of the document
|
|
||||||
textArea.style.position = 'fixed';
|
|
||||||
textArea.style.top = '0';
|
|
||||||
textArea.style.left = '0';
|
|
||||||
textArea.style.width = '2em';
|
|
||||||
textArea.style.height = '2em';
|
|
||||||
textArea.style.padding = '0';
|
|
||||||
textArea.style.border = 'none';
|
|
||||||
textArea.style.outline = 'none';
|
|
||||||
textArea.style.boxShadow = 'none';
|
|
||||||
textArea.style.background = 'transparent';
|
|
||||||
|
|
||||||
document.body.appendChild(textArea);
|
|
||||||
textArea.focus();
|
|
||||||
textArea.select();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const successful = document.execCommand('copy');
|
|
||||||
if (successful) {
|
|
||||||
showCopySuccess(copyBtn, originalHtml);
|
|
||||||
} else {
|
|
||||||
showCopyError(copyBtn, originalHtml);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Fallback copy failed:', err);
|
|
||||||
showCopyError(copyBtn, originalHtml);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.removeChild(textArea);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showCopySuccess(copyBtn, originalHtml) {
|
function downloadReport() {
|
||||||
copyBtn.innerHTML = '<span class="me-1">✓</span> Copied!';
|
const report = generateReport();
|
||||||
copyBtn.classList.remove('btn-outline-primary');
|
|
||||||
copyBtn.classList.add('btn-success');
|
|
||||||
|
|
||||||
|
// Create filename with device ID
|
||||||
|
const deviceId = selfTestReport.deviceId || 'unknown';
|
||||||
|
const date = new Date().toISOString().slice(0, 10);
|
||||||
|
const filename = `logs_nebuleair_${deviceId}_${date}.txt`;
|
||||||
|
|
||||||
|
// Create blob and download
|
||||||
|
const blob = new Blob([report], { type: 'text/plain;charset=utf-8' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = filename;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
copyBtn.innerHTML = originalHtml;
|
document.body.removeChild(a);
|
||||||
copyBtn.classList.remove('btn-success');
|
URL.revokeObjectURL(url);
|
||||||
copyBtn.classList.add('btn-outline-primary');
|
}, 100);
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showCopyError(copyBtn, originalHtml) {
|
|
||||||
copyBtn.innerHTML = '<span class="me-1">✗</span> Error';
|
|
||||||
copyBtn.classList.remove('btn-outline-primary');
|
|
||||||
copyBtn.classList.add('btn-danger');
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
copyBtn.innerHTML = originalHtml;
|
|
||||||
copyBtn.classList.remove('btn-danger');
|
|
||||||
copyBtn.classList.add('btn-outline-primary');
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
// Show modal with text for manual copy
|
|
||||||
alert('Could not copy automatically. The logs are displayed below - you can select and copy them manually.');
|
|
||||||
|
|
||||||
// Expand the logs section
|
|
||||||
const logsCollapse = document.getElementById('selftest_logs_collapse');
|
|
||||||
if (logsCollapse && !logsCollapse.classList.contains('show')) {
|
|
||||||
new bootstrap.Collapse(logsCollapse, { toggle: true });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user