blackcoffee2 2.1.0

package/public/admin/css/styles.css

@@ -0,0 +1,310 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: #faf6f2;
+  color: #2c1810;
+}
+
+.dashboard {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 260px;
+  background: linear-gradient(135deg, #310000 0%, #000 100%);
+  color: #b28868;
+  padding: 2rem;
+  position: fixed;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.logo h1 {
+  font-size: 1.8rem;
+  margin-bottom: 0.5rem;
+}
+
+.logo p {
+  opacity: 0.8;
+  font-size: 0.9rem;
+}
+
+.nav {
+  margin-top: 2rem;
+}
+
+.nav-item {
+  display: block;
+  padding: 0.8rem 1rem;
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
+  transition: all 0.3s;
+}
+
+.nav-item:hover,
+.nav-item.active {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.server-status {
+  position: absolute;
+  bottom: 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.status-indicator {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #4caf50;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Main Content */
+.main-content {
+  margin-left: 260px;
+  padding: 2rem;
+  flex: 1;
+}
+
+.section {
+  display: none;
+}
+
+.section.active {
+  display: block;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  color: #310000;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.stat-icon {
+  font-size: 2.5rem;
+}
+
+.stat-info h3 {
+  font-size: 2rem;
+  color: #b28868;
+}
+
+.stat-info p {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+/* Apps List */
+.apps-list,
+.apps-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.app-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.app-info h4 {
+  color: #310000;
+  margin-bottom: 0.5rem;
+}
+
+.app-info p {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.app-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #310000 0%, #000 100%);
+  color: #b28868;
+}
+
+.btn-secondary {
+  background: #f5f0eb;
+  color: #310000;
+}
+
+.btn-danger {
+  background: #f44336;
+  color: white;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Deploy Box */
+.deploy-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.drop-zone {
+  border: 2px dashed #b28868;
+  border-radius: 12px;
+  padding: 3rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.drop-zone:hover,
+.drop-zone.dragover {
+  background: rgba(178, 136, 104, 0.1);
+  border-color: #310000;
+}
+
+.drop-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.deploy-status {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 8px;
+  display: none;
+}
+
+.deploy-status.success {
+  background: #e8f5e9;
+  color: #2e7d32;
+  display: block;
+}
+
+.deploy-status.error {
+  background: #ffebee;
+  color: #c62828;
+  display: block;
+}
+
+/* Config Box */
+.config-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.config-item {
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #eee;
+}
+
+.config-item:last-child {
+  border-bottom: none;
+}
+
+.config-item label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #310000;
+}
+
+.config-item input,
+.config-item select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 1rem;
+}
+
+/* User Info */
+.user-info {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-avatar {
+  font-size: 24px;
+}
+
+.user-name {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.btn-logout {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  font-size: 18px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.btn-logout:hover {
+  background: rgba(255, 255, 255, 0.3);
+}

package/public/admin/database.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Database Pools - BlackCoffee Admin</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: 'Segoe UI', sans-serif; background: #f5f7fa; }
+    .dashboard { display: flex; min-height: 100vh; }
+    .sidebar { width: 260px; background: linear-gradient(135deg, #310000 0%, #000 100%); color: #b28868; padding: 2rem; position: fixed; height: 100vh; }
+    .sidebar h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
+    .sidebar p { opacity: 0.8; font-size: 0.9rem; }
+    .nav { margin-top: 2rem; }
+    .nav a { display: block; padding: 0.8rem 1rem; color: rgba(255,255,255,0.8); text-decoration: none; border-radius: 8px; margin-bottom: 0.5rem; }
+    .nav a:hover, .nav a.active { background: rgba(255,255,255,0.2); color: white; }
+    .main-content { margin-left: 260px; padding: 2rem; flex: 1; }
+    header { margin-bottom: 2rem; }
+    header h1 { font-size: 2.5rem; color: #667eea; margin-bottom: 0.5rem; }
+    header p { color: #666; font-size: 1.1rem; }
+    .actions { display: flex; gap: 1rem; margin-bottom: 2rem; }
+    .btn { padding: 0.8rem 2rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
+    .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
+    .btn-success { background: #4caf50; color: white; }
+    .btn-danger { background: #f44336; color: white; }
+    .btn-secondary { background: #9e9e9e; color: white; }
+    .form-section { background: white; padding: 2rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+    .form-section h2 { color: #667eea; margin-bottom: 1.5rem; }
+    .form-group { margin-bottom: 1.5rem; }
+    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
+    .form-group input, .form-group select { width: 100%; padding: 0.8rem; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem; }
+    .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
+    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+    .db-fields { background: #f9f9f9; padding: 1.5rem; border-radius: 8px; margin-top: 1rem; }
+    .form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; }
+    .pools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; }
+    .pool-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+    .pool-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #f0f0f0; }
+    .pool-header h3 { color: #333; font-size: 1.3rem; }
+    .pool-type { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
+    .pool-type-sqlite { background: #e3f2fd; color: #1976d2; }
+    .pool-type-mariadb, .pool-type-mysql { background: #fce4ec; color: #c2185b; }
+    .pool-type-memory { background: #fff3e0; color: #f57c00; }
+    .pool-status { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
+    .status-indicator { width: 10px; height: 10px; border-radius: 50%; }
+    .status-connected { background: #4caf50; }
+    .status-disconnected { background: #f44336; }
+    .pool-details { margin-bottom: 1rem; }
+    .pool-detail { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; }
+    .pool-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
+    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
+    .stat-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; }
+    .stat-value { font-size: 2.5rem; font-weight: bold; color: #667eea; margin-bottom: 0.5rem; }
+    .stat-label { color: #666; font-size: 0.9rem; }
+    .no-pools { text-align: center; padding: 3rem; color: #999; font-size: 1.1rem; }
+  </style>
+</head>
+<body>
+  <div class="dashboard">
+    <aside class="sidebar">
+      <div class="logo">
+        <h1>☕ BlackCoffee</h1>
+        <p>Database Manager</p>
+      </div>
+      <nav class="nav">
+        <a href="/admin">📊 Dashboard</a>
+        <a href="/admin/database" class="active">🗄️ Database Pools</a>
+        <a href="/admin#apps">📦 Aplicaciones</a>
+        <a href="/admin#deploy">🚀 Deploy</a>
+        <a href="/admin#settings">⚙️ Configuración</a>
+      </nav>
+    </aside>
+
+    <main class="main-content">
+      <header>
+        <h1>🗄️ Database Pools</h1>
+        <p>Gestiona los pools de conexiones a bases de datos</p>
+      </header>
+
+      <section class="actions">
+        <button onclick="showCreatePoolForm()" class="btn btn-primary">➕ Crear Pool</button>
+        <button onclick="loadPools()" class="btn btn-secondary">🔄 Recargar</button>
+      </section>
+
+      <section id="createPoolForm" class="form-section" style="display: none;">
+        <h2>Crear Nuevo Pool</h2>
+        <form onsubmit="createPool(event)">
+          <div class="form-group">
+            <label for="poolName">Nombre del Pool:</label>
+            <input type="text" id="poolName" name="name" required placeholder="ej: production, analytics">
+          </div>
+          <div class="form-group">
+            <label for="poolType">Tipo de Base de Datos:</label>
+            <select id="poolType" name="type" required onchange="toggleDbTypeFields()">
+              <option value="">Seleccionar...</option>
+              <option value="sqlite">SQLite</option>
+              <option value="mariadb">MariaDB / MySQL</option>
+              <option value="memory">Memoria (RAM)</option>
+            </select>
+          </div>
+          <div id="sqliteFields" class="db-fields" style="display: none;">
+            <div class="form-group">
+              <label for="sqliteFilename">Archivo SQLite:</label>
+              <input type="text" id="sqliteFilename" name="filename" placeholder="data/mydb.sqlite">
+            </div>
+          </div>
+          <div id="mariadbFields" class="db-fields" style="display: none;">
+            <div class="form-row">
+              <div class="form-group">
+                <label for="dbHost">Host:</label>
+                <input type="text" id="dbHost" name="host" value="localhost">
+              </div>
+              <div class="form-group">
+                <label for="dbPort">Port:</label>
+                <input type="number" id="dbPort" name="port" value="3306">
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label for="dbUser">Usuario:</label>
+                <input type="text" id="dbUser" name="user" value="root">
+              </div>
+              <div class="form-group">
+                <label for="dbPassword">Contraseña:</label>
+                <input type="password" id="dbPassword" name="password" value="">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="dbName">Base de Datos:</label>
+              <input type="text" id="dbName" name="database" placeholder="nombre_de_la_base_de_datos">
+            </div>
+            <div class="form-group">
+              <label for="dbConnectionLimit">Límite de Conexiones:</label>
+              <input type="number" id="dbConnectionLimit" name="connectionLimit" value="10">
+            </div>
+          </div>
+          <div class="form-actions">
+            <button type="submit" class="btn btn-success">Crear Pool</button>
+            <button type="button" onclick="hideCreatePoolForm()" class="btn btn-secondary">Cancelar</button>
+          </div>
+        </form>
+      </section>
+
+      <section id="poolsList">
+        <h2>Pools Configurados</h2>
+        <div id="poolsGrid" class="pools-grid"></div>
+      </section>
+
+      <section id="statsSection">
+        <h2>Estadísticas</h2>
+        <div id="statsGrid" class="stats-grid"></div>
+      </section>
+    </main>
+  </div>
+
+  <script>
+    const API_BASE = '/api/admin/database';
+
+    function toggleDbTypeFields() {
+      const type = document.getElementById('poolType').value;
+      document.getElementById('sqliteFields').style.display = type === 'sqlite' ? 'block' : 'none';
+      document.getElementById('mariadbFields').style.display = ['mariadb', 'mysql'].includes(type) ? 'block' : 'none';
+    }
+
+    function showCreatePoolForm() {
+      document.getElementById('createPoolForm').style.display = 'block';
+    }
+
+    function hideCreatePoolForm() {
+      document.getElementById('createPoolForm').style.display = 'none';
+    }
+
+    async function loadPools() {
+      try {
+        const response = await fetch(API_BASE + '/pools');
+        const result = await response.json();
+        if (result.success) {
+          renderPools(result.data);
+          renderStats(result.stats);
+        } else {
+          alert('Error: ' + result.error);
+        }
+      } catch (error) {
+        alert('Error cargando pools: ' + error.message);
+      }
+    }
+
+    function renderPools(pools) {
+      const grid = document.getElementById('poolsGrid');
+      if (pools.length === 0) {
+        grid.innerHTML = '<p class="no-pools">No hay pools configurados. ¡Crea el primero!</p>';
+        return;
+      }
+      grid.innerHTML = pools.map(pool => `
+        <div class="pool-card">
+          <div class="pool-header">
+            <h3>${escapeHtml(pool.name)}</h3>
+            <span class="pool-type pool-type-${pool.type}">${pool.type.toUpperCase()}</span>
+          </div>
+          <div class="pool-status">
+            <span class="status-indicator ${pool.connected ? 'status-connected' : 'status-disconnected'}"></span>
+            <span>${pool.connected ? 'Conectado' : 'Desconectado'}</span>
+          </div>
+          <div class="pool-details">${renderPoolDetails(pool)}</div>
+          <div class="pool-actions">
+            ${pool.connected 
+              ? `<button onclick="disconnectPool('${pool.name}')" class="btn btn-danger btn-sm">Desconectar</button>`
+              : `<button onclick="connectPool('${pool.name}')" class="btn btn-success btn-sm">Conectar</button>`
+            }
+            <button onclick="removePool('${pool.name}')" class="btn btn-danger btn-sm">🗑️ Eliminar</button>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function renderPoolDetails(pool) {
+      let details = '';
+      if (pool.type === 'sqlite') {
+        details = `<div class="pool-detail"><label>Archivo:</label><span>${escapeHtml(pool.config.filename || 'N/A')}</span></div>`;
+      } else if (['mariadb', 'mysql'].includes(pool.type)) {
+        details = `
+          <div class="pool-detail"><label>Host:</label><span>${escapeHtml(pool.config.host || 'N/A')}:${pool.config.port || 3306}</span></div>
+          <div class="pool-detail"><label>Database:</label><span>${escapeHtml(pool.config.database || 'N/A')}</span></div>
+          <div class="pool-detail"><label>Usuario:</label><span>${escapeHtml(pool.config.user || 'N/A')}</span></div>
+          <div class="pool-detail"><label>Conexiones:</label><span>${pool.config.connectionLimit || 10}</span></div>
+        `;
+      } else if (pool.type === 'memory') {
+        details = `<div class="pool-detail"><label>Tipo:</label><span>Memoria RAM</span></div>`;
+      }
+      return details;
+    }
+
+    function renderStats(stats) {
+      const grid = document.getElementById('statsGrid');
+      if (!stats) { grid.innerHTML = ''; return; }
+      grid.innerHTML = `
+        <div class="stat-card"><div class="stat-value">${stats.totalPools || 0}</div><div class="stat-label">Total Pools</div></div>
+        <div class="stat-card"><div class="stat-value">${stats.connectedPools || 0}</div><div class="stat-label">Conectados</div></div>
+        <div class="stat-card"><div class="stat-value">${(stats.totalPools || 0) - (stats.connectedPools || 0)}</div><div class="stat-label">Desconectados</div></div>
+      `;
+    }
+
+    async function createPool(event) {
+      event.preventDefault();
+      const formData = new FormData(event.target);
+      const data = Object.fromEntries(formData.entries());
+      try {
+        const response = await fetch(API_BASE + '/pools', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+        const result = await response.json();
+        if (result.success) {
+          alert('Pool creado exitosamente. Reinicia el servidor para aplicar los cambios.');
+          hideCreatePoolForm();
+          loadPools();
+          event.target.reset();
+        } else {
+          alert('Error: ' + result.error);
+        }
+      } catch (error) {
+        alert('Error creando pool: ' + error.message);
+      }
+    }
+
+    async function connectPool(name) {
+      if (!confirm(`¿Conectar pool '${name}'?`)) return;
+      try {
+        const response = await fetch(API_BASE + '/pools/' + name + '/connect', { method: 'POST' });
+        const result = await response.json();
+        if (result.success) { alert(`Pool '${name}' conectado`); loadPools(); }
+        else { alert('Error: ' + result.error); }
+      } catch (error) {
+        alert('Error conectando pool: ' + error.message);
+      }
+    }
+
+    async function disconnectPool(name) {
+      if (!confirm(`¿Desconectar pool '${name}'?`)) return;
+      try {
+        const response = await fetch(API_BASE + '/pools/' + name + '/disconnect', { method: 'POST' });
+        const result = await response.json();
+        if (result.success) { alert(`Pool '${name}' desconectado`); loadPools(); }
+        else { alert('Error: ' + result.error); }
+      } catch (error) {
+        alert('Error desconectando pool: ' + error.message);
+      }
+    }
+
+    async function removePool(name) {
+      if (!confirm(`¿Estás seguro de eliminar el pool '${name}'?`)) return;
+      try {
+        const response = await fetch(API_BASE + '/pools/' + name, { method: 'DELETE' });
+        const result = await response.json();
+        if (result.success) { alert(`Pool '${name}' eliminado`); loadPools(); }
+        else { alert('Error: ' + result.error); }
+      } catch (error) {
+        alert('Error eliminando pool: ' + error.message);
+      }
+    }
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    document.addEventListener('DOMContentLoaded', loadPools);
+  </script>
+</body>
+</html>