מדריך ממשק משתמש

סקירה מקיפה של עמודי הממשק, קומפוננטות, JavaScript Manager והטכנולוגיות בשימוש.

Bootstrap 5 RTL ES6+ JavaScript Chart.js SweetAlert2

עמודי הממשק

Dashboard

לוח בקרה ראשי עם KPIs, גרפים וסטטיסטיקות בזמן אמת

4 KPI Cards
גרף מגמות
התפלגות ערוצים
הודעות אחרונות

פתח

הודעות

ניהול תור הודעות, סינון, חיפוש ופעולות הודעה

טבלת הודעות
סינון מתקדם
פעולות מרובות
צפייה בפרטים

פתח

תבניות

עורך תבניות עם תצוגה מקדימה חיה ומשתנים

עורך WYSIWYG
תצוגה מקדימה
משתנים דינמיים
קטגוריות

פתח

ערוצים

הגדרת ערוצי תקשורת וספקים חיצוניים

הגדרת ערוץ
בדיקת חיבור
סטטיסטיקות
לוגים

פתח

קמפיינים

יצירה וניהול קמפיינים עם אשף 5 שלבים

אשף קמפיין
בחירת קהל
תזמון
מעקב התקדמות

פתח

אנליטיקס

דוחות וסטטיסטיקות מתקדמות עם גרפים

KPIs
מפת חום
ניתוח שגיאות
עלויות

פתח

JavaScript Manager

כל הלוגיקה של הממשק מרוכזת ב-CommunicationHubManager - קלאס JavaScript יחיד שמנהל את כל העמודים.

מבנה הקלאס

class CommunicationHubManager {
    constructor() {
        this.pageType = this.detectPageType();
        this.socket = null;
        this.charts = {};
        this.data = {
            messages: [],
            templates: [],
            channels: [],
            campaigns: []
        };
        this.filters = {
            channel: 'all',
            status: 'all',
            search: '',
            dateRange: null
        };
        this.pagination = {
            page: 1,
            perPage: 20,
            total: 0
        };

        this.init();
    }

    detectPageType() {
        const path = window.location.pathname;
        if (path.includes('dashboard')) return 'dashboard';
        if (path.includes('messages')) return 'messages';
        if (path.includes('templates')) return 'templates';
        if (path.includes('channels')) return 'channels';
        if (path.includes('campaigns')) return 'campaigns';
        if (path.includes('analytics')) return 'analytics';
        return 'dashboard';
    }

    async init() {
        console.log(`🚀 Initializing Communication Hub - ${this.pageType}`);
        await this.initPage();
        this.setupWebSocket();
        this.setupEventListeners();
        console.log('✅ Communication Hub ready');
    }

    // ... המשך הקלאס
}
                    

מתודות עיקריות

initPage()

אתחול העמוד הספציפי - טעינת נתונים, גרפים ואירועים

setupWebSocket()

הגדרת חיבור WebSocket לעדכונים בזמן אמת (עם fallback ל-polling)

loadMessages(filters)

טעינת הודעות מה-API עם סינון ועימוד

sendMessage(data)

שליחת הודעה חדשה דרך API

renderDashboardCharts()

יצירת גרפי Chart.js בעמוד Dashboard

openTemplateEditor(templateId)

פתיחת עורך תבניות עם תצוגה מקדימה חיה

startCampaignWizard()

הפעלת אשף יצירת קמפיין עם 5 שלבים

דוגמת שימוש

// הגישה ל-Manager מכל מקום
const hub = window.communicationHub;

// שליחת הודעה
await hub.sendMessage({
    channel: 'email',
    recipient: 'customer@example.com',
    subject: 'Test',
    content: 'Hello World'
});

// עדכון סינון
hub.setFilter('channel', 'whatsapp');
await hub.loadMessages();

// הפעלת אשף קמפיין
hub.startCampaignWizard();
                    

קומפוננטות UI

KPI Cards

כרטיסי מדדים עם אייקון, מספר ואחוז שינוי

<div class="kpi-card">
    <div class="kpi-icon bg-primary">
        <i class="bi bi-envelope"></i>
    </div>
    <div class="kpi-content">
        <div class="kpi-value">1,234</div>
        <div class="kpi-label">הודעות היום</div>
        <div class="kpi-change text-success">
            <i class="bi bi-arrow-up"></i> +15%
        </div>
    </div>
</div>
                        

Message Card

כרטיס הודעה עם סטטוס, תאריך ופעולות

<div class="message-card" data-id="123">
    <div class="message-channel">
        <i class="bi bi-envelope channel-icon-email"></i>
    </div>
    <div class="message-content">
        <div class="message-recipient">customer@example.com</div>
        <div class="message-subject">אישור הזמנה #12345</div>
        <div class="message-preview">שלום, הזמנתך אושרה...</div>
    </div>
    <div class="message-status">
        <span class="status-badge status-delivered">נמסר</span>
    </div>
    <div class="message-time">10:30</div>
    <div class="message-actions">
        <button class="btn btn-sm btn-outline-primary" onclick="viewMessage(123)">
            <i class="bi bi-eye"></i>
        </button>
    </div>
</div>
                        

Channel Status Card

כרטיס סטטוס ערוץ עם בדיקת חיבור

<div class="channel-status-card">
    <div class="channel-header">
        <i class="bi bi-envelope channel-icon-email"></i>
        <h5>Email (SMTP)</h5>
        <span class="status-indicator online"></span>
    </div>
    <div class="channel-stats">
        <div class="stat">
            <span class="stat-value">1,234</span>
            <span class="stat-label">נשלחו היום</span>
        </div>
        <div class="stat">
            <span class="stat-value">98.5%</span>
            <span class="stat-label">הצלחה</span>
        </div>
    </div>
    <button class="btn btn-outline-primary btn-sm" onclick="testChannel(1)">
        <i class="bi bi-plug"></i> בדוק חיבור
    </button>
</div>
                        

Campaign Wizard Steps

אשף קמפיין עם 5 שלבים

שלב	שם	תיאור
1	פרטים בסיסיים	שם קמפיין, תיאור, ערוץ
2	בחירת קהל	סגמנט, תגיות, רשימת נמענים
3	תוכן ותבנית	בחירת/יצירת תבנית, משתנים
4	תזמון	שליחה מיידית או מתוזמנת
5	אישור	סיכום ואישור סופי

גרפים ותרשימים

המערכת משתמשת ב-Chart.js לתצוגת גרפים עם תמיכה מלאה ב-RTL ותרגום לעברית.

סוגי גרפים

Line Chart

מגמות לאורך זמן

Bar Chart

השוואה בין ערוצים

Doughnut

התפלגות סטטוסים

הגדרת גרף

// יצירת גרף מגמות
const trendsChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי'],
        datasets: [{
            label: 'Email',
            data: [120, 150, 180, 200, 220],
            borderColor: '#ef4444',
            backgroundColor: 'rgba(239, 68, 68, 0.1)',
            tension: 0.4,
            fill: true
        }, {
            label: 'WhatsApp',
            data: [80, 95, 110, 130, 150],
            borderColor: '#10b981',
            backgroundColor: 'rgba(16, 185, 129, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                rtl: true,
                labels: {
                    font: { family: 'Heebo' }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    font: { family: 'Heebo' }
                }
            },
            x: {
                ticks: {
                    font: { family: 'Heebo' }
                }
            }
        }
    }
});
                    

עדכונים בזמן אמת

המערכת תומכת בעדכונים בזמן אמת באמצעות WebSocket עם fallback אוטומטי ל-Polling.

הגדרת WebSocket

setupWebSocket() {
    // Try WebSocket first
    if (typeof io !== 'undefined') {
        try {
            this.socket = io(window.location.origin, {
                transports: ['websocket', 'polling'],
                reconnection: true,
                reconnectionAttempts: 5
            });

            this.socket.on('connect', () => {
                console.log('✅ WebSocket connected');
            });

            this.socket.on('message_status_changed', (data) => {
                this.handleStatusUpdate(data);
            });

            this.socket.on('new_message', (data) => {
                this.handleNewMessage(data);
            });

            this.socket.on('campaign_progress', (data) => {
                this.handleCampaignProgress(data);
            });

            return;
        } catch (e) {
            console.warn('WebSocket failed, using polling');
        }
    }

    // Fallback to polling
    this.startPolling();
}

startPolling() {
    this.pollingInterval = setInterval(async () => {
        await this.checkForUpdates();
    }, 10000); // Every 10 seconds
}
                    

טיפול בעדכונים

handleStatusUpdate(data) {
    const { message_id, status, delivered_at } = data;

    // Update UI
    const messageEl = document.querySelector(`[data-message-id="${message_id}"]`);
    if (messageEl) {
        const statusBadge = messageEl.querySelector('.status-badge');
        statusBadge.className = `status-badge status-${status}`;
        statusBadge.textContent = this.getStatusText(status);
    }

    // Update local data
    const message = this.data.messages.find(m => m.id === message_id);
    if (message) {
        message.status = status;
        message.delivered_at = delivered_at;
    }

    // Show notification
    if (status === 'delivered') {
        this.showToast('success', 'הודעה נמסרה בהצלחה');
    } else if (status === 'failed') {
        this.showToast('error', 'שליחת הודעה נכשלה');
    }
}
                    

התראות והודעות

המערכת משתמשת ב-SweetAlert2 להצגת התראות, אישורים ודיאלוגים.

סוגי התראות

// הצלחה
showSuccess(message) {
    Swal.fire({
        icon: 'success',
        title: 'הצלחה!',
        text: message,
        timer: 3000,
        showConfirmButton: false,
        toast: true,
        position: 'top-end'
    });
}

// שגיאה
showError(message) {
    Swal.fire({
        icon: 'error',
        title: 'שגיאה',
        text: message
    });
}

// אישור מחיקה
async confirmDelete(itemName) {
    const result = await Swal.fire({
        icon: 'warning',
        title: 'האם אתה בטוח?',
        text: `למחוק את "${itemName}"? לא ניתן לשחזר.`,
        showCancelButton: true,
        confirmButtonText: 'כן, מחק',
        cancelButtonText: 'ביטול',
        confirmButtonColor: '#ef4444'
    });
    return result.isConfirmed;
}

// טופס בתוך Modal
async showSendMessageForm() {
    const { value: formValues } = await Swal.fire({
        title: 'שליחת הודעה',
        html: `
            
            
            
        `,
        focusConfirm: false,
        showCancelButton: true,
        confirmButtonText: 'שלח',
        cancelButtonText: 'ביטול',
        preConfirm: () => {
            return {
                channel: document.getElementById('swal-channel').value,
                recipient: document.getElementById('swal-recipient').value,
                content: document.getElementById('swal-content').value
            }
        }
    });

    if (formValues) {
        await this.sendMessage(formValues);
    }
}

מבנה קבצים

app/
├── templates/
│   ├── communication-hub-dashboard.html    # Dashboard page
│   ├── communication-hub-messages.html     # Messages management
│   ├── communication-hub-templates.html    # Template editor
│   ├── communication-hub-channels.html     # Channels config
│   ├── communication-hub-campaigns.html    # Campaign wizard
│   └── communication-hub-analytics.html    # Analytics & reports
│
├── static/
│   ├── js/
│   │   └── modules/
│   │       └── communication-hub-manager.js  # Main JS Manager (2000+ lines)
│   │
│   ├── css/
│   │   └── communication-hub.css            # Custom styles (optional)
│   │
│   └── docs/
│       └── communication-hub/               # This documentation
│           ├── index.html
│           ├── architecture.html
│           ├── api-reference.html
│           ├── channels.html
│           ├── templates.html
│           └── ui-guide.html
│
└── routes/
    └── main_routes.py                       # Route definitions
                    

Routes

URL	Function	Template
`/communication-hub/dashboard`	communication_hub_dashboard	communication-hub-dashboard.html
`/communication-hub/messages`	communication_hub_messages	communication-hub-messages.html
`/communication-hub/templates`	communication_hub_templates	communication-hub-templates.html
`/communication-hub/channels`	communication_hub_channels	communication-hub-channels.html
`/communication-hub/campaigns`	communication_hub_campaigns	communication-hub-campaigns.html
`/communication-hub/analytics`	communication_hub_analytics	communication-hub-analytics.html