repeater/static/app.js

// État global de l'application
let appState = {
  selectedWifi: null,
  hotspotEnabled: true,
  connectedDevices: [],
  wifiNetworks: [],
  uptime: 0,
  dataUsage: 0
};

// Simulation de données
const mockDevices = [
  { name: "iPhone 13", type: "mobile", mac: "AA:BB:CC:DD:EE:FF", ip: "192.168.1.101" },
  { name: "MacBook Pro", type: "laptop", mac: "11:22:33:44:55:66", ip: "192.168.1.102" },
  { name: "iPad", type: "tablet", mac: "77:88:99:AA:BB:CC", ip: "192.168.1.103" }
];

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
  initializeApp();
  startPeriodicUpdates();
});

function initializeApp() {
  updateWifiList();
  updateDevicesList();
  updateStats();
  addLog("Système", "Interface web initialisée");
}

async function updateWifiList() {
  const wifiList = document.getElementById('wifiList');
  wifiList.innerHTML = '';

  (await (await fetch('/api/wifi/scan')).json()).forEach((network, index) => {
    const wifiItem = document.createElement('div');
    wifiItem.className = 'wifi-item';
    wifiItem.onclick = () => selectWifi(network, wifiItem);

    wifiItem.innerHTML = `
                    <div>
                        <strong>${network.ssid}</strong>
                        <div style="font-size: 0.8em; color: #666;">${network.security} • Canal ${network.channel}</div>
                    </div>
                    <div class="wifi-signal">
                        ${generateSignalBars(network.signal)}
                    </div>
                `;

    wifiList.appendChild(wifiItem);
  });
}

function generateSignalBars(strength) {
  const bars = [];
  for (let i = 1; i <= 5; i++) {
    const height = i * 3;
    const active = i <= strength ? 'active' : '';
    bars.push(`<div class="signal-bar ${active}" style="height: ${height}px;"></div>`);
  }
  return `<div class="signal-bars">${bars.join('')}</div>`;
}

function selectWifi(network, element) {
  // Retirer la sélection précédente
  document.querySelectorAll('.wifi-item').forEach(item => {
    item.classList.remove('selected');
  });

  // Ajouter la sélection
  element.classList.add('selected');
  appState.selectedWifi = network;

  addLog("WiFi", `Réseau sélectionné: ${network.ssid}`);
}

function updateDevicesList() {
  const devicesList = document.getElementById('devicesList');
  devicesList.innerHTML = '';

  mockDevices.forEach(device => {
    const deviceCard = document.createElement('div');
    deviceCard.className = 'device-card';

    const deviceIcon = getDeviceIcon(device.type);

    deviceCard.innerHTML = `
                    ${deviceIcon}
                    <div style="font-weight: 500;">${device.name}</div>
                    <div style="font-size: 0.8em; color: #666;">${device.ip}</div>
                `;

    devicesList.appendChild(deviceCard);
  });

  document.getElementById('connectedDevices').textContent = mockDevices.length;
}

function getDeviceIcon(type) {
  const icons = {
    mobile: '<svg class="device-icon" viewBox="0 0 24 24"><path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14z"/></svg>',
    laptop: '<svg class="device-icon" viewBox="0 0 24 24"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/></svg>',
    tablet: '<svg class="device-icon" viewBox="0 0 24 24"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H3V6h18v12z"/></svg>'
  };
  return icons[type] || icons.mobile;
}

function updateStats() {
  appState.uptime += 1;
  appState.dataUsage += Math.random() * 0.5;

  const hours = Math.floor(appState.uptime / 3600);
  const minutes = Math.floor((appState.uptime % 3600) / 60);
  const seconds = appState.uptime % 60;

  document.getElementById('uptime').textContent =
    `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

  document.getElementById('dataUsage').textContent = `${appState.dataUsage.toFixed(1)} MB`;
}

function addLog(source, message) {
  const logContainer = document.getElementById('logContainer');
  const timestamp = new Date().toLocaleTimeString();
  const logEntry = document.createElement('div');
  logEntry.className = 'log-entry';
  logEntry.innerHTML = `<span class="log-timestamp">[${timestamp}]</span> ${source}: ${message}`;

  logContainer.appendChild(logEntry);
  logContainer.scrollTop = logContainer.scrollHeight;
}

function showNotification(message, type = 'success') {
  const notification = document.getElementById('notification');
  notification.textContent = message;
  notification.className = `notification ${type}`;
  notification.classList.add('show');

  setTimeout(() => {
    notification.classList.remove('show');
  }, 3000);
}

// Fonctions d'action
function scanWifi() {
  const scanBtn = document.getElementById('scanBtn');
  const originalText = scanBtn.textContent;

  scanBtn.innerHTML = '<div class="loading"></div> Scan en cours...';

  setTimeout(() => {
    updateWifiList();
    scanBtn.textContent = originalText;
    showNotification('Scan terminé - Réseaux mis à jour');
    addLog("WiFi", "Scan des réseaux terminé");
  }, 2000);
}

function connectToWifi() {
  if (!appState.selectedWifi) {
    showNotification('Veuillez sélectionner un réseau WiFi', 'error');
    return;
  }

  const password = document.getElementById('wifiPassword').value;
  if (!password && appState.selectedWifi.security !== 'Open') {
    showNotification('Mot de passe requis', 'error');
    return;
  }

  const connectBtn = document.getElementById('connectBtn');
  const originalText = connectBtn.textContent;

  connectBtn.innerHTML = '<div class="loading"></div> Connexion...';

  setTimeout(() => {
    connectBtn.textContent = originalText;
    showNotification(`Connecté à ${appState.selectedWifi.ssid}`);
    addLog("WiFi", `Connexion établie avec ${appState.selectedWifi.ssid}`);

    // Mettre à jour le statut
    document.getElementById('connectionStatus').innerHTML = `
                    <div class="status-dot"></div>
                    <span>Connecté à ${appState.selectedWifi.ssid}</span>
                `;
  }, 3000);
}

function updateHotspot() {
  const name = document.getElementById('hotspotName').value;
  const password = document.getElementById('hotspotPassword').value;
  const channel = document.getElementById('hotspotChannel').value;

  if (!name || !password) {
    showNotification('Nom et mot de passe requis', 'error');
    return;
  }

  showNotification('Configuration du hotspot mise à jour');
  addLog("Hotspot", `Configuration mise à jour: ${name} (Canal ${channel})`);
}

function toggleHotspot() {
  appState.hotspotEnabled = !appState.hotspotEnabled;
  const btn = document.getElementById('hotspotBtn');

  if (appState.hotspotEnabled) {
    btn.textContent = 'Arrêter le hotspot';
    showNotification('Hotspot activé');
    addLog("Hotspot", "Hotspot activé");
  } else {
    btn.textContent = 'Démarrer le hotspot';
    showNotification('Hotspot désactivé');
    addLog("Hotspot", "Hotspot désactivé");
  }
}

function clearLogs() {
  document.getElementById('logContainer').innerHTML = '';
  addLog("Système", "Logs effacés");
}

// Mises à jour périodiques
function startPeriodicUpdates() {
  setInterval(updateStats, 1000);
  setInterval(() => {
    // Simulation de nouveaux logs
    if (Math.random() > 0.95) {
      const events = [
        "Nouveau client connecté",
        "Paquet routé vers l'extérieur",
        "Vérification de la connexion",
        "Mise à jour des tables de routage"
      ];
      const randomEvent = events[Math.floor(Math.random() * events.length)];
      addLog("Système", randomEvent);
    }
  }, 5000);
}