355 lines
18 KiB
Plaintext
355 lines
18 KiB
Plaintext
@{
|
|
ViewData["Title"] = ViewBag.PageTitle;
|
|
Layout = "_Layout";
|
|
}
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="text-center mb-4">
|
|
<h1 class="display-5">@ViewBag.PageTitle</h1>
|
|
<p class="lead text-muted">@ViewBag.PageDescription</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10 col-xl-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">
|
|
<i class="bi bi-upc-scan me-2"></i>@ViewBag.DocumentMenuTitle
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
@if (ViewBag.ConversionError != null)
|
|
{
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
@ViewBag.ConversionError
|
|
</div>
|
|
}
|
|
|
|
<ul class="nav nav-tabs mb-4" id="barcodeTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="detect-tab" data-bs-toggle="tab" data-bs-target="#detect" type="button" role="tab" aria-controls="detect" aria-selected="true">
|
|
<i class="bi bi-eyeglasses me-2"></i>@ViewBag.PdfBarcodeDetectTabTitle
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="download-tab" data-bs-toggle="tab" data-bs-target="#download" type="button" role="tab" aria-controls="download" aria-selected="false">
|
|
<i class="bi bi-download me-2"></i>@ViewBag.PdfBarcodeDownloadTabTitle
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="barcodeTabContent">
|
|
<div class="tab-pane fade show active" id="detect" role="tabpanel" aria-labelledby="detect-tab">
|
|
<form id="detectForm" action="/pt-BR/DocumentConverters/PdfBarcodeLine/DetectLine" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
|
|
<div asp-validation-summary="ModelOnly" class="alert alert-danger" role="alert"></div>
|
|
|
|
<div class="mb-4">
|
|
<label for="detectPdfFile" class="form-label fw-semibold">@ViewBag.PdfBarcodeFileInputLabel</label>
|
|
<input class="form-control" type="file" id="detectPdfFile" name="pdfFile" accept=".pdf" required>
|
|
<div class="invalid-feedback">
|
|
@ViewBag.SelectFileError
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="detectPassword" class="form-label fw-semibold">@ViewBag.PdfPasswordLabel</label>
|
|
<input class="form-control" type="password" id="detectPassword" name="password" placeholder="@ViewBag.PdfPasswordPlaceholder">
|
|
<div class="form-text">
|
|
<i class="bi bi-shield-lock me-1"></i>@ViewBag.PdfBarcodePasswordHint
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="button" id="previewDetectBtn" class="btn btn-primary">
|
|
<i class="bi bi-upc-scan me-2"></i>@ViewBag.DetectBarcodeButton
|
|
</button>
|
|
<button type="submit" class="btn btn-outline-secondary">
|
|
<i class="bi bi-download me-2"></i>@ViewBag.DownloadBarcodeButton
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="download" role="tabpanel" aria-labelledby="download-tab">
|
|
<form id="downloadForm" action="/pt-BR/DocumentConverters/PdfBarcodeLine/DownloadLine" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
|
|
<div asp-validation-summary="ModelOnly" class="alert alert-danger" role="alert"></div>
|
|
|
|
<div class="mb-4">
|
|
<label for="downloadPdfFile" class="form-label fw-semibold">@ViewBag.PdfBarcodeFileInputLabel</label>
|
|
<input class="form-control" type="file" id="downloadPdfFile" name="pdfFile" accept=".pdf" required>
|
|
<div class="invalid-feedback">
|
|
@ViewBag.SelectFileError
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="downloadPassword" class="form-label fw-semibold">@ViewBag.PdfPasswordLabel</label>
|
|
<input class="form-control" type="password" id="downloadPassword" name="password" placeholder="@ViewBag.PdfPasswordPlaceholder">
|
|
<div class="form-text">
|
|
<i class="bi bi-shield-lock me-1"></i>@ViewBag.PdfBarcodePasswordHint
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="button" id="previewDownloadBtn" class="btn btn-primary">
|
|
<i class="bi bi-eye me-2"></i>@ViewBag.DetectBarcodeButton
|
|
</button>
|
|
<button type="submit" class="btn btn-outline-secondary">
|
|
<i class="bi bi-download me-2"></i>@ViewBag.DownloadBarcodeButton
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="barcodeLoading" class="text-center my-4" style="display: none;">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Carregando...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="barcodePreview" class="mt-4" style="display: none;">
|
|
<h5 class="mb-3">@ViewBag.PdfBarcodePreviewTitle</h5>
|
|
<div class="input-group">
|
|
<input type="text" id="barcodeResult" class="form-control" readonly>
|
|
<button id="copyBarcodeBtn" class="btn btn-outline-success" type="button">
|
|
<i class="bi bi-clipboard-check me-1"></i>@ViewBag.CopyButtonLabel
|
|
</button>
|
|
</div>
|
|
<div class="text-end mt-3">
|
|
<button id="downloadBarcodeBtn" class="btn btn-success btn-sm">
|
|
<i class="bi bi-box-arrow-down me-2"></i>@ViewBag.DownloadBarcodeButton
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="barcodeError" class="mt-4" style="display: none;">
|
|
<div class="alert alert-warning" role="alert">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
<span id="barcodeErrorMessage"></span>
|
|
<button id="fallbackBarcodeBtn" class="btn btn-outline-primary btn-sm ms-2">
|
|
@ViewBag.DownloadBarcodeButton
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-lg-10 mx-auto">
|
|
<div class="converter-faq">
|
|
<h3 class="h4 mb-3 text-center">Perguntas Frequentes</h3>
|
|
<div class="accordion" id="barcodeFaqAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="barcodeFaqWhat">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#barcodeCollapseWhat" aria-expanded="false" aria-controls="barcodeCollapseWhat">
|
|
<i class="bi bi-question-circle me-2"></i>@ViewBag.FaqWhatTitle
|
|
</button>
|
|
</h2>
|
|
<div id="barcodeCollapseWhat" class="accordion-collapse collapse" aria-labelledby="barcodeFaqWhat" data-bs-parent="#barcodeFaqAccordion">
|
|
<div class="accordion-body">
|
|
@ViewBag.FaqWhatContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="barcodeFaqHow">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#barcodeCollapseHow" aria-expanded="false" aria-controls="barcodeCollapseHow">
|
|
<i class="bi bi-gear me-2"></i>@ViewBag.FaqHowTitle
|
|
</button>
|
|
</h2>
|
|
<div id="barcodeCollapseHow" class="accordion-collapse collapse" aria-labelledby="barcodeFaqHow" data-bs-parent="#barcodeFaqAccordion">
|
|
<div class="accordion-body">
|
|
@ViewBag.FaqHowContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="barcodeFaqWhy">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#barcodeCollapseWhy" aria-expanded="false" aria-controls="barcodeCollapseWhy">
|
|
<i class="bi bi-lightbulb me-2"></i>@ViewBag.FaqWhyTitle
|
|
</button>
|
|
</h2>
|
|
<div id="barcodeCollapseWhy" class="accordion-collapse collapse" aria-labelledby="barcodeFaqWhy" data-bs-parent="#barcodeFaqAccordion">
|
|
<div class="accordion-body">
|
|
@ViewBag.FaqWhyContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="barcodeFaqSecurity">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#barcodeCollapseSecurity" aria-expanded="false" aria-controls="barcodeCollapseSecurity">
|
|
<i class="bi bi-shield-check me-2"></i>@ViewBag.FaqSecurityTitle
|
|
</button>
|
|
</h2>
|
|
<div id="barcodeCollapseSecurity" class="accordion-collapse collapse" aria-labelledby="barcodeFaqSecurity" data-bs-parent="#barcodeFaqAccordion">
|
|
<div class="accordion-body">
|
|
@ViewBag.FaqSecurityContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="barcodeFaqLimits">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#barcodeCollapseLimits" aria-expanded="false" aria-controls="barcodeCollapseLimits">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>@ViewBag.FaqLimitsTitle
|
|
</button>
|
|
</h2>
|
|
<div id="barcodeCollapseLimits" class="accordion-collapse collapse" aria-labelledby="barcodeFaqLimits" data-bs-parent="#barcodeFaqAccordion">
|
|
<div class="accordion-body">
|
|
@ViewBag.FaqLimitsContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#barcodeResult {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.spinner-border {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
</style>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
(function () {
|
|
const detectForm = document.getElementById('detectForm');
|
|
const downloadForm = document.getElementById('downloadForm');
|
|
const previewDetectBtn = document.getElementById('previewDetectBtn');
|
|
const previewDownloadBtn = document.getElementById('previewDownloadBtn');
|
|
const downloadBarcodeBtn = document.getElementById('downloadBarcodeBtn');
|
|
const fallbackBarcodeBtn = document.getElementById('fallbackBarcodeBtn');
|
|
const copyBarcodeBtn = document.getElementById('copyBarcodeBtn');
|
|
const barcodeLoading = document.getElementById('barcodeLoading');
|
|
const barcodePreview = document.getElementById('barcodePreview');
|
|
const barcodeError = document.getElementById('barcodeError');
|
|
const barcodeResult = document.getElementById('barcodeResult');
|
|
const barcodeErrorMessage = document.getElementById('barcodeErrorMessage');
|
|
|
|
let currentLine = '';
|
|
let currentFileName = 'linha-digitavel.txt';
|
|
|
|
const forms = document.querySelectorAll('.needs-validation');
|
|
Array.from(forms).forEach(function (form) {
|
|
form.addEventListener('submit', function (event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
});
|
|
});
|
|
|
|
previewDetectBtn.addEventListener('click', function () {
|
|
handlePreview(detectForm);
|
|
});
|
|
|
|
previewDownloadBtn.addEventListener('click', function () {
|
|
handlePreview(downloadForm);
|
|
});
|
|
|
|
downloadBarcodeBtn.addEventListener('click', function () {
|
|
if (!currentLine) {
|
|
return;
|
|
}
|
|
const blob = new Blob([currentLine + '\n'], { type: 'text/plain;charset=utf-8' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const anchor = document.createElement('a');
|
|
anchor.href = url;
|
|
anchor.download = currentFileName;
|
|
document.body.appendChild(anchor);
|
|
anchor.click();
|
|
document.body.removeChild(anchor);
|
|
window.URL.revokeObjectURL(url);
|
|
});
|
|
|
|
fallbackBarcodeBtn.addEventListener('click', function () {
|
|
const activeTab = document.querySelector('.nav-link.active');
|
|
const currentForm = activeTab.id === 'detect-tab' ? detectForm : downloadForm;
|
|
currentForm.submit();
|
|
});
|
|
|
|
copyBarcodeBtn.addEventListener('click', function () {
|
|
if (!currentLine) {
|
|
return;
|
|
}
|
|
navigator.clipboard.writeText(currentLine).then(function () {
|
|
copyBarcodeBtn.innerHTML = '<i class="bi bi-clipboard-check-fill me-1"></i>@ViewBag.CopyButtonSuccess';
|
|
setTimeout(function () {
|
|
copyBarcodeBtn.innerHTML = '<i class="bi bi-clipboard-check me-1"></i>@ViewBag.CopyButtonLabel';
|
|
}, 1500);
|
|
});
|
|
});
|
|
|
|
function handlePreview(form) {
|
|
if (!form.checkValidity()) {
|
|
form.classList.add('was-validated');
|
|
return;
|
|
}
|
|
|
|
showLoading();
|
|
const formData = new FormData(form);
|
|
|
|
fetch(form.action + '?preview=true', {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then(async response => {
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
throw new Error(text || response.statusText);
|
|
}
|
|
|
|
const result = await response.json();
|
|
if (!result.success) {
|
|
throw new Error(result.message || 'Erro na conversão');
|
|
}
|
|
|
|
currentLine = result.content;
|
|
currentFileName = (form === downloadForm ? 'linha-digitavel-download.txt' : 'linha-digitavel.txt');
|
|
barcodeResult.value = currentLine;
|
|
showPreview();
|
|
}).catch(error => {
|
|
showError(error.message || 'Erro inesperado.');
|
|
});
|
|
}
|
|
|
|
function showLoading() {
|
|
barcodeLoading.style.display = 'block';
|
|
barcodePreview.style.display = 'none';
|
|
barcodeError.style.display = 'none';
|
|
}
|
|
|
|
function showPreview() {
|
|
barcodeLoading.style.display = 'none';
|
|
barcodeError.style.display = 'none';
|
|
barcodePreview.style.display = 'block';
|
|
}
|
|
|
|
function showError(message) {
|
|
barcodeLoading.style.display = 'none';
|
|
barcodePreview.style.display = 'none';
|
|
barcodeErrorMessage.textContent = message;
|
|
barcodeError.style.display = 'block';
|
|
}
|
|
})();
|
|
</script>
|
|
}
|