127 lines
5.0 KiB
Plaintext
127 lines
5.0 KiB
Plaintext
<div class="sentence-converter-widget" data-converter-id="sentence-converter">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label fw-bold">@ViewBag.Config.LocalizedTexts["InputPlaceholder"]</label>
|
|
<textarea class="form-control"
|
|
id="inputText"
|
|
rows="6"
|
|
placeholder="@ViewBag.Config.LocalizedTexts["InputPlaceholder"]"
|
|
maxlength="10000"></textarea>
|
|
<small class="text-muted">
|
|
<span id="charCount">0</span>/10000 caracteres
|
|
</small>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label fw-bold">@ViewBag.Config.LocalizedTexts["OutputLabel"]</label>
|
|
<textarea class="form-control"
|
|
id="outputText"
|
|
rows="6"
|
|
readonly
|
|
placeholder="Resultado aparecerá aqui..."></textarea>
|
|
<div class="mt-2">
|
|
<button type="button" class="btn btn-primary" id="convertBtn">
|
|
<i class="fas fa-exchange-alt me-2"></i>
|
|
@ViewBag.Config.LocalizedTexts["ConvertButton"]
|
|
</button>
|
|
<button type="button" class="btn btn-success" id="copyBtn" disabled>
|
|
<i class="fas fa-copy me-2"></i>
|
|
@ViewBag.Config.LocalizedTexts["CopyButton"]
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="clearBtn">
|
|
<i class="fas fa-trash me-2"></i>
|
|
@ViewBag.Config.LocalizedTexts["ClearButton"]
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="conversionStatus" class="mt-3"></div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const widget = document.querySelector('[data-converter-id="sentence-converter"]');
|
|
if (!widget) return;
|
|
|
|
const inputText = widget.querySelector('#inputText');
|
|
const outputText = widget.querySelector('#outputText');
|
|
const convertBtn = widget.querySelector('#convertBtn');
|
|
const copyBtn = widget.querySelector('#copyBtn');
|
|
const clearBtn = widget.querySelector('#clearBtn');
|
|
const charCount = widget.querySelector('#charCount');
|
|
const status = widget.querySelector('#conversionStatus');
|
|
|
|
// Contador de caracteres
|
|
inputText.addEventListener('input', function () {
|
|
charCount.textContent = this.value.length;
|
|
});
|
|
|
|
// Converter texto
|
|
convertBtn.addEventListener('click', async function () {
|
|
const text = inputText.value.trim();
|
|
if (!text) {
|
|
showStatus('Por favor, digite algum texto.', 'warning');
|
|
return;
|
|
}
|
|
|
|
convertBtn.disabled = true;
|
|
convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Convertendo...';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('TextInput', text);
|
|
formData.append('Language', '@ViewBag.Language');
|
|
|
|
const response = await fetch('/api/converter/convert', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
outputText.value = result.outputText;
|
|
copyBtn.disabled = false;
|
|
showStatus('Conversão realizada com sucesso!', 'success');
|
|
} else {
|
|
showStatus('Erro: ' + result.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
showStatus('Erro de conexão. Tente novamente.', 'danger');
|
|
} finally {
|
|
convertBtn.disabled = false;
|
|
convertBtn.innerHTML = '<i class="fas fa-exchange-alt me-2"></i>@ViewBag.Config.LocalizedTexts["ConvertButton"]';
|
|
}
|
|
});
|
|
|
|
// Copiar resultado
|
|
copyBtn.addEventListener('click', async function () {
|
|
try {
|
|
await navigator.clipboard.writeText(outputText.value);
|
|
showStatus('Texto copiado para a área de transferência!', 'success');
|
|
} catch (error) {
|
|
showStatus('Erro ao copiar texto.', 'danger');
|
|
}
|
|
});
|
|
|
|
// Limpar campos
|
|
clearBtn.addEventListener('click', function () {
|
|
inputText.value = '';
|
|
outputText.value = '';
|
|
copyBtn.disabled = true;
|
|
charCount.textContent = '0';
|
|
status.innerHTML = '';
|
|
});
|
|
|
|
function showStatus(message, type) {
|
|
status.innerHTML = `<div class="alert alert-${type} alert-dismissible fade show" role="alert">
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>`;
|
|
|
|
setTimeout(() => {
|
|
status.innerHTML = '';
|
|
}, 5000);
|
|
}
|
|
})();
|
|
</script> |