donate/static/js/supporters.js

// Supporter Wall Functionality
class SupporterWall {
  constructor() {
    this.supportersList = document.getElementById('supporters-list');
    this.supporterWall = document.getElementById('supporter-wall');
    this.supporters = [];
    
    if (this.supportersList) {
      this.init();
    }
  }

  init() {
    this.loadSupporters();
    // Refresh supporters every 30 seconds
    setInterval(() => this.loadSupporters(), 30000);
  }

  async loadSupporters() {
    try {
      const response = await fetch('/supporters');
      const data = await response.json();
      
      if (data.supporters && data.supporters.length > 0) {
        this.updateSupportersList(data.supporters);
      } else {
        this.showEmptyState();
      }
    } catch (error) {
      console.error('Error loading supporters:', error);
      this.showEmptyState();
    }
  }

  updateSupportersList(newSupporters) {
    // Clear loading message
    this.supportersList.innerHTML = '';
    
    // Check for new supporters since last update
    const newSupporterIds = newSupporters.map(s => s.timestamp);
    const currentSupporterIds = this.supporters.map(s => s.timestamp);
    const hasNewSupporters = newSupporterIds.some(id => !currentSupporterIds.includes(id));
    
    this.supporters = newSupporters;
    
    // Create supporter elements
    newSupporters.forEach((supporter, index) => {
      const supporterElement = this.createSupporterElement(supporter);
      
      // Add 'new' class to recent supporters
      if (hasNewSupporters && index === 0 && supporter.time_ago === 'just now') {
        supporterElement.classList.add('new');
        setTimeout(() => supporterElement.classList.remove('new'), 2000);
      }
      
      this.supportersList.appendChild(supporterElement);
    });
  }

  createSupporterElement(supporter) {
    const element = document.createElement('div');
    element.className = 'supporter-item';
    
    const currencySymbols = {
      'GBP': '£',
      'EUR': '€',
      'USD': '$'
    };
    
    const symbol = currencySymbols[supporter.currency] || supporter.currency;
    const amount = (supporter.amount / 100).toFixed(2);
    
    element.innerHTML = `
      <span class="name">${this.escapeHtml(supporter.name)}</span>
      <span class="time">${supporter.time_ago}</span>
      <div style="clear: both; margin-top: 2px; font-size: 11px; color: var(--text-secondary);">
        ${symbol}${amount}
      </div>
    `;
    
    return element;
  }

  showEmptyState() {
    this.supportersList.innerHTML = `
      <div class="supporter-item" style="text-align: center; color: var(--text-secondary);">
        Be the first to support! 💜
      </div>
    `;
  }

  async addSupporter(name, amount, currency) {
    if (!name || name.trim() === '') return;
    
    try {
      const response = await fetch('/add-supporter', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          name: name.trim(),
          amount: amount,
          currency: currency
        })
      });
      
      const result = await response.json();
      if (result.success) {
        // Reload supporters to show the new one
        setTimeout(() => this.loadSupporters(), 1000);
        return true;
      }
    } catch (error) {
      console.error('Error adding supporter:', error);
    }
    
    return false;
  }

  escapeHtml(unsafe) {
    return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  // Method to hide/show supporter wall
  toggle() {
    if (this.supporterWall) {
      this.supporterWall.style.display = 
        this.supporterWall.style.display === 'none' ? 'block' : 'none';
    }
  }
}

// Initialize supporter wall when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  window.supporterWall = new SupporterWall();
});