machinaos 0.0.1

package/server/whatsapp-rpc/web/templates/send.html

@@ -0,0 +1,259 @@
+{% extends "base.html" %}
+
+{% block title %}Send Message - WhatsApp Controller{% endblock %}
+
+{% block content %}
+<div class="max-w-2xl mx-auto">
+    <div class="bg-white rounded-lg shadow-md p-6">
+        <h1 class="text-2xl font-semibold mb-6 flex items-center">
+            <svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+            </svg>
+            Send WhatsApp Message
+        </h1>
+
+        <form method="POST" class="space-y-6">
+            <!-- Phone Number Input -->
+            <div>
+                <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
+                    Phone Number
+                </label>
+                <div class="relative">
+                    <input type="text" 
+                           id="phone" 
+                           name="phone" 
+                           placeholder="e.g., 1234567890" 
+                           required
+                           class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-green-500 focus:border-transparent">
+                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
+                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                        </svg>
+                    </div>
+                </div>
+                <p class="text-sm text-gray-600 mt-1">
+                    Enter phone number with country code (without + sign)
+                </p>
+            </div>
+
+            <!-- Message Input -->
+            <div>
+                <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
+                    Message
+                </label>
+                <textarea id="message" 
+                          name="message" 
+                          rows="6" 
+                          placeholder="Enter your message here..." 
+                          required
+                          class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-green-500 focus:border-transparent"></textarea>
+                <div class="flex justify-between items-center mt-1">
+                    <p class="text-sm text-gray-600">
+                        Type your WhatsApp message
+                    </p>
+                    <span id="char-count" class="text-sm text-gray-500">0 characters</span>
+                </div>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex space-x-4">
+                <button type="submit" 
+                        id="send-btn"
+                        class="flex-1 bg-green-600 text-white py-3 px-6 rounded-lg hover:bg-green-700 transition font-medium flex items-center justify-center">
+                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                    </svg>
+                    Send Message
+                </button>
+                
+                <button type="button" 
+                        onclick="clearForm()"
+                        class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium">
+                    Clear
+                </button>
+            </div>
+        </form>
+
+        <!-- Connection Status Warning -->
+        <div id="connection-warning" class="mt-6 hidden">
+            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                <div class="flex">
+                    <svg class="w-5 h-5 text-yellow-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+                    </svg>
+                    <div>
+                        <h3 class="text-sm font-medium text-yellow-800">WhatsApp Not Connected</h3>
+                        <p class="text-sm text-yellow-700 mt-1">
+                            Please start WhatsApp service from the <a href="{{ url_for('index') }}" class="underline">dashboard</a> before sending messages.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Messages -->
+    <div class="bg-white rounded-lg shadow-md p-6 mt-6">
+        <h2 class="text-lg font-semibold mb-4">Recent Messages</h2>
+        <div id="recent-messages" class="space-y-3">
+            <p class="text-gray-600">No recent messages</p>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    let recentMessages = JSON.parse(localStorage.getItem('recentMessages') || '[]');
+
+    // Character counter
+    document.getElementById('message').addEventListener('input', function(e) {
+        const count = e.target.value.length;
+        document.getElementById('char-count').textContent = `${count} characters`;
+    });
+
+    // Form submission
+    document.querySelector('form').addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const phone = document.getElementById('phone').value.trim();
+        const message = document.getElementById('message').value.trim();
+        const sendBtn = document.getElementById('send-btn');
+        
+        if (!phone || !message) {
+            alert('Please fill in both phone number and message');
+            return;
+        }
+        
+        // Disable button and show loading
+        sendBtn.disabled = true;
+        sendBtn.innerHTML = `
+            <svg class="w-5 h-5 mr-2 animate-spin" 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>
+            Sending...
+        `;
+        
+        fetch('/api/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ phone, message })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                // Add to recent messages
+                addRecentMessage(phone, message, 'sent');
+                
+                // Clear message field
+                document.getElementById('message').value = '';
+                document.getElementById('char-count').textContent = '0 characters';
+                
+                // Show success message
+                showNotification('Message sent successfully!', 'success');
+            } else {
+                showNotification(`Failed to send message: ${data.error}`, 'error');
+            }
+        })
+        .catch(error => {
+            showNotification(`Error: ${error.message}`, 'error');
+        })
+        .finally(() => {
+            // Re-enable button
+            sendBtn.disabled = false;
+            sendBtn.innerHTML = `
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                </svg>
+                Send Message
+            `;
+        });
+    });
+
+    function clearForm() {
+        document.getElementById('phone').value = '';
+        document.getElementById('message').value = '';
+        document.getElementById('char-count').textContent = '0 characters';
+    }
+
+    function addRecentMessage(phone, message, status) {
+        const messageObj = {
+            phone,
+            message: message.substring(0, 100) + (message.length > 100 ? '...' : ''),
+            status,
+            timestamp: new Date().toLocaleString()
+        };
+        
+        recentMessages.unshift(messageObj);
+        if (recentMessages.length > 5) {
+            recentMessages = recentMessages.slice(0, 5);
+        }
+        
+        localStorage.setItem('recentMessages', JSON.stringify(recentMessages));
+        renderRecentMessages();
+    }
+
+    function renderRecentMessages() {
+        const container = document.getElementById('recent-messages');
+        
+        if (recentMessages.length === 0) {
+            container.innerHTML = '<p class="text-gray-600">No recent messages</p>';
+            return;
+        }
+        
+        container.innerHTML = recentMessages.map(msg => `
+            <div class="border rounded-lg p-3 bg-gray-50">
+                <div class="flex justify-between items-start mb-2">
+                    <span class="font-medium text-gray-900">${msg.phone}</span>
+                    <span class="text-xs text-gray-500">${msg.timestamp}</span>
+                </div>
+                <p class="text-gray-700 text-sm">${msg.message}</p>
+                <span class="inline-block mt-2 px-2 py-1 text-xs rounded-full ${
+                    msg.status === 'sent' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                }">${msg.status}</span>
+            </div>
+        `).join('');
+    }
+
+    function showNotification(message, type) {
+        // Create notification element
+        const notification = document.createElement('div');
+        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
+            type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
+        }`;
+        notification.textContent = message;
+        
+        document.body.appendChild(notification);
+        
+        // Remove after 3 seconds
+        setTimeout(() => {
+            notification.remove();
+        }, 3000);
+    }
+
+    // Check connection status and show warning if needed
+    function checkConnectionStatus() {
+        fetch('/api/status')
+            .then(response => response.json())
+            .then(data => {
+                const warning = document.getElementById('connection-warning');
+                if (data.success && data.data && !data.data.connected) {
+                    warning.classList.remove('hidden');
+                } else {
+                    warning.classList.add('hidden');
+                }
+            })
+            .catch(() => {
+                document.getElementById('connection-warning').classList.remove('hidden');
+            });
+    }
+
+    // Initialize
+    renderRecentMessages();
+    checkConnectionStatus();
+    
+    // Check status periodically
+    setInterval(checkConnectionStatus, 30000);
+</script>
+{% endblock %}