DOSPLATS-WEB/admin.html at main · DiegoMartinezDeSanjuan/DOSPLATS-WEB · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Admin · DOS PLATS</title>
  <style>
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:#0b0f14;color:#e2e8f0;margin:0
    }
    .wrap{width:min(720px,100%);margin:40px auto;padding:20px}
    .card{background:#111827;border:1px solid #334155;border-radius:14px;padding:18px}
    h1{margin:0 0 10px}
    label{display:block;margin:.6rem 0 .2rem}
    input[type="email"],input[type="password"],input[type="file"]{
      width:100%;padding:.8rem 1rem;border-radius:12px;
      border:1px solid #334155;background:#0b1220;color:#e2e8f0
    }
    button{
      cursor:pointer;padding:.8rem 1.1rem;border-radius:12px;
      border:1px solid #334155;background:#12b886;color:#082f49;font-weight:700
    }
    .row{display:flex;gap:10px;align-items:center}
    .muted{color:#94a3b8}
    .ok{color:#22c55e}
    .err{color:#f87171}
    .space{height:10px}
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Admin · DOS PLATS</h1>
    <p class="muted">Inicia sesión para subir el <strong>menú del día (PDF)</strong>.</p>

    <div class="card" id="loginCard">
      <label>Email</label>
      <input id="email" type="email" placeholder="tu@email.com" />
      <label>Contraseña</label>
      <input id="password" type="password" placeholder="••••••••" />
      <div class="space"></div>
      <button onclick="login()">Entrar</button>
      <p id="loginMsg" class="muted"></p>
    </div>

    <div class="space"></div>

    <div class="card" id="uploadCard" style="display:none">
      <p>Usuario: <span id="who" class="muted"></span></p>
      <label>Selecciona el PDF del menú</label>
      <input id="file" type="file" accept="application/pdf" />
      <div class="space"></div>
      <div class="row">
        <button onclick="upload()">Subir y publicar</button>
        <button onclick="logout()" style="background:#0ea5e9;color:#0b1220">Salir</button>
      </div>
      <p class="muted">El archivo se subirá a: <code>menu/dosplats/menu-hoy.pdf</code></p>
      <p id="uploadMsg" class="muted"></p>
      <p>URL pública actual: <a id="publicUrl" href="#" target="_blank" rel="noopener"></a></p>
    </div>
  </div>

  <!-- Supabase -->
  <script src="https://unpkg.com/@supabase/supabase-js@2.45.4/dist/umd/supabase.js"></script>
  <script>
    // === CONFIGURACIÓN DE SUPABASE ===
    const SUPABASE_URL = "https://lfcsngxnvtpxfgloajsa.supabase.co";
    const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxmY3NuZ3hudnRweGZnbG9hanNhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjM0ODU5NTgsImV4cCI6MjA3OTA2MTk1OH0.RW2c99AxFqyd1Df85CHDqQF6NCB7_8JKSSi2jRb_aBg";
    const BUCKET = "menu";
    const OBJECT_PATH = "dosplats/menu-hoy.pdf";
    const PUBLIC_URL = `${SUPABASE_URL}/storage/v1/object/public/${BUCKET}/${OBJECT_PATH}`;
    const client = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    // === ELEMENTOS DEL DOM ===
    const loginCard = document.getElementById('loginCard');
    const uploadCard = document.getElementById('uploadCard');
    const loginMsg = document.getElementById('loginMsg');
    const uploadMsg = document.getElementById('uploadMsg');
    const who = document.getElementById('who');
    const publicUrlA = document.getElementById('publicUrl');
    publicUrlA.textContent = PUBLIC_URL;
    publicUrlA.href = PUBLIC_URL;

    // === LOGIN ===
    async function login(){
      loginMsg.textContent = "Accediendo...";
      const email = document.getElementById('email').value.trim();
      const password = document.getElementById('password').value.trim();
      const { data, error } = await client.auth.signInWithPassword({ email, password });
      if(error){ loginMsg.textContent = "❌ " + error.message; return; }
      loginMsg.textContent = "✅ Acceso concedido";
      who.textContent = data.user.email;
      loginCard.style.display = 'none';
      uploadCard.style.display = 'block';
    }

    // === LOGOUT ===
    async function logout(){
      await client.auth.signOut();
      uploadCard.style.display = 'none';
      loginCard.style.display = 'block';
      loginMsg.textContent = "";
      uploadMsg.textContent = "";
    }

    // === SUBIDA DEL PDF ===
    async function upload(){
      const input = document.getElementById('file');
      const f = input.files[0];
      if(!f){ uploadMsg.textContent = "❌ Selecciona un PDF"; return; }
      if(f.type !== "application/pdf"){ uploadMsg.textContent = "❌ Debe ser un archivo PDF"; return; }
      if(f.size > 10 * 1024 * 1024){ uploadMsg.textContent = "❌ El PDF supera 10 MB"; return; }

      uploadMsg.textContent = "Subiendo...";
      try {
        // 🔄 Renombrar siempre a menu-hoy.pdf antes de subir
        const renamed = new File([f], "menu-hoy.pdf", { type: "application/pdf" });

        const { error } = await client.storage
          .from(BUCKET)
          .upload(OBJECT_PATH, renamed, {
            upsert: true,
            contentType: "application/pdf",
            cacheControl: "no-cache"
          });

        if(error){ uploadMsg.textContent = "❌ " + error.message; return; }

        uploadMsg.textContent = "✅ Menú actualizado correctamente. Comprueba la web pública.";
        // Actualizar enlace para evitar caché
        publicUrlA.href = PUBLIC_URL + "?t=" + Date.now();
        publicUrlA.textContent = PUBLIC_URL;
      } catch (e) {
        uploadMsg.textContent = "❌ " + (e.message || e);
      } finally {
        input.value = ""; // Limpia el selector
      }
    }
  </script>
</body>
</html>