Integração com Telegram
This commit is contained in:
193
resources/views/admin/settings/index.php
Normal file
193
resources/views/admin/settings/index.php
Normal file
@@ -0,0 +1,193 @@
|
||||
<div x-data="settings">
|
||||
<!-- Tabs Header -->
|
||||
<div class="border-b border-gray-200 mb-6">
|
||||
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
|
||||
<button @click="activeTab = 'interactions'"
|
||||
:class="activeTab === 'interactions' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
||||
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
|
||||
Interações
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Interactions Tab -->
|
||||
<div x-show="activeTab === 'interactions'" x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
|
||||
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-6">Telegram</h3>
|
||||
<p class="text-sm text-gray-500 mb-6">Configure as notificações automáticas para o Telegram.</p>
|
||||
|
||||
<form action="/admin/settings/update" method="POST">
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- Bot Token -->
|
||||
<div>
|
||||
<label for="telegram_bot_token" class="block text-sm font-medium text-gray-700 mb-1">Bot
|
||||
Token</label>
|
||||
<input type="text" name="telegram_bot_token" id="telegram_bot_token"
|
||||
value="<?= htmlspecialchars($settings['telegram_bot_token'] ?? '') ?>"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
placeholder="123456789:ABCdefGHIjklMNOpqRSTuvwXYZ">
|
||||
<p class="mt-1 text-sm text-gray-500">O token fornecido pelo @BotFather.</p>
|
||||
</div>
|
||||
|
||||
<!-- Chat ID -->
|
||||
<div>
|
||||
<label for="telegram_chat_id" class="block text-sm font-medium text-gray-700 mb-1">Chat
|
||||
ID</label>
|
||||
<input type="text" name="telegram_chat_id" id="telegram_chat_id"
|
||||
value="<?= htmlspecialchars($settings['telegram_chat_id'] ?? '') ?>"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
placeholder="-1001234567890">
|
||||
<p class="mt-1 text-sm text-gray-500">ID do canal ou grupo para onde as mensagens serão
|
||||
enviadas.</p>
|
||||
</div>
|
||||
|
||||
<!-- Message Template -->
|
||||
<div>
|
||||
<label for="telegram_message_template"
|
||||
class="block text-sm font-medium text-gray-700 mb-1">Modelo de Mensagem</label>
|
||||
<textarea id="telegram_message_template" name="telegram_message_template" rows="5"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
placeholder="Nova ordem cadastrada!"><?= htmlspecialchars($settings['telegram_message_template'] ?? "<b>Nova Ordem Cadastrada!</b>\n\n<b>Título:</b> {title}\n<b>Tipo:</b> {type}\n<b>Domínios:</b> {total_domains}") ?></textarea>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Variáveis disponíveis: <code class="bg-gray-100 px-1 rounded">{title}</code>,
|
||||
<code class="bg-gray-100 px-1 rounded">{type}</code>,
|
||||
<code class="bg-gray-100 px-1 rounded">{total_domains}</code>,
|
||||
<code class="bg-gray-100 px-1 rounded">{order_id}</code>.
|
||||
Suporta HTML (negrito, itálico, etc).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end space-x-3">
|
||||
<button type="button" @click="testIntegration()" :disabled="testing"
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center">
|
||||
<svg x-show="testing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-700"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
|
||||
</circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
<span x-text="testing ? 'Enviando...' : 'Testar Integração'"></span>
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
|
||||
Salvar Configurações
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification Toast -->
|
||||
<div x-show="notification.show" x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 transform translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform translate-y-2"
|
||||
class="fixed bottom-4 right-4 z-50 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg x-show="notification.type === 'success'" class="h-6 w-6 text-green-400" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<svg x-show="notification.type === 'error'" class="h-6 w-6 text-red-400" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-gray-900" x-text="notification.title"></p>
|
||||
<p class="mt-1 text-sm text-gray-500" x-text="notification.message"></p>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0 flex">
|
||||
<button @click="notification.show = false"
|
||||
class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
||||
<span class="sr-only">Fechar</span>
|
||||
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('settings', () => ({
|
||||
activeTab: 'interactions',
|
||||
testing: false,
|
||||
notification: {
|
||||
show: false,
|
||||
type: 'success',
|
||||
title: '',
|
||||
message: ''
|
||||
},
|
||||
|
||||
testIntegration() {
|
||||
this.testing = true;
|
||||
|
||||
// Save settings first via AJAX if needed, but for now we assume saved settings
|
||||
// Or we could send form data. Let's send form data to ensure we test what's typed.
|
||||
const form = document.querySelector('form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
// We need to update settings first?
|
||||
// The requirement implies testing the configuration.
|
||||
// Usually "Test" uses the saved config or the current input.
|
||||
// Let's assume we test the SAVED config for simplicity as per plan,
|
||||
// but user might expect to test what they just typed.
|
||||
// To be safe and robust: Update settings then test, OR send values to test endpoint.
|
||||
// The plan said "instantiate TelegramService" which uses DB.
|
||||
// So the user must SAVE first.
|
||||
// Let's warn if inputs are dirty? Too complex for now.
|
||||
// Let's just call the endpoint.
|
||||
|
||||
fetch('/admin/settings/test-telegram', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.showNotification(
|
||||
data.success ? 'success' : 'error',
|
||||
data.success ? 'Sucesso' : 'Erro',
|
||||
data.message
|
||||
);
|
||||
})
|
||||
.catch(error => {
|
||||
this.showNotification('error', 'Erro', 'Falha na requisição.');
|
||||
})
|
||||
.finally(() => {
|
||||
this.testing = false;
|
||||
});
|
||||
},
|
||||
|
||||
showNotification(type, title, message) {
|
||||
this.notification.type = type;
|
||||
this.notification.title = title;
|
||||
this.notification.message = message;
|
||||
this.notification.show = true;
|
||||
setTimeout(() => {
|
||||
this.notification.show = false;
|
||||
}, 5000);
|
||||
}
|
||||
}))
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user