Spaces:

MaxLeft
/

psyconnect-database-explorer

Running

App Files Files Community

MaxLeft commited on Nov 16, 2025

Commit

083e043

verified ·

1 Parent(s): 39dfd02

Its nto giving me the tables

Browse files

Files changed (6) hide show

README.md +7 -4
api/tables.js +31 -0
components/navbar.js +43 -0
index.html +98 -19
script.js +85 -0
style.css +33 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Psyconnect Database Explorer
-emoji: 📚
-colorFrom: red
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PsyConnect Database Explorer
+colorFrom: yellow
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

api/tables.js ADDED Viewed

	@@ -0,0 +1,31 @@

+const { Pool } = require('pg');
+module.exports = async (req, res) => {
+    try {
+        const { host, port, user, password, dbname, sslmode } = req.body;
+        const pool = new Pool({
+            host,
+            port,
+            user,
+            password,
+            database: dbname,
+            ssl: sslmode === 'require' ? { rejectUnauthorized: false } : false
+        });
+        const client = await pool.connect();
+        const result = await client.query(`
+            SELECT table_name, table_schema
+            FROM information_schema.tables
+            WHERE table_schema NOT IN ('pg_catalog', 'information_schema')
+        `);
+        client.release();
+        await pool.end();
+        res.status(200).json(result.rows);
+    } catch (error) {
+        console.error('Database error:', error);
+        res.status(500).json({ error: 'Failed to fetch tables' });
+    }
+};

components/navbar.js ADDED Viewed

	@@ -0,0 +1,43 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                }
+                .nav-link {
+                    transition: all 0.3s ease;
+                }
+                .nav-link:hover {
+                    transform: translateY(-2px);
+                }
+            </style>
+            <nav class="navbar text-white shadow-lg">
+                <div class="container mx-auto px-4 py-4">
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center space-x-2">
+                            <i data-feather="database" class="w-6 h-6"></i>
+                            <a href="/" class="text-xl font-bold">PsyConnect</a>
+                        </div>
+                        <div class="hidden md:flex items-center space-x-6">
+                            <a href="#" class="nav-link flex items-center space-x-1">
+                                <i data-feather="home" class="w-4 h-4"></i>
+                                <span>Dashboard</span>
+                            </a>
+                            <a href="#" class="nav-link flex items-center space-x-1">
+                                <i data-feather="database" class="w-4 h-4"></i>
+                                <span>Tables</span>
+                            </a>
+                            <a href="#" class="nav-link flex items-center space-x-1">
+                                <i data-feather="terminal" class="w-4 h-4"></i>
+                                <span>Query</span>
+                            </a>
+                            <a href="#" class="nav-link flex items-center space-x-1">
+                                <i data-feather="settings" class="w-4 h-4"></i>
+                                <span>Settings</span>
+                            </a>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition">
+                                <i data-feather="bell" class

index.html CHANGED Viewed

@@ -1,19 +1,98 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PsyConnect - Database Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                <h1 class="text-3xl font-bold text-gray-800 mb-6">Database Explorer</h1>
+                <div class="mb-8">
+                    <div class="relative">
+                        <input type="text" id="searchInput" placeholder="Search tables or records..."
+                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                        <i data-feather="search" class="absolute right-3 top-3 text-gray-400"></i>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                    <div class="bg-indigo-50 rounded-lg p-6">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-indigo-100 p-3 rounded-full mr-4">
+                                <i data-feather="database" class="text-indigo-600"></i>
+                            </div>
+                            <h2 class="text-xl font-semibold text-gray-800">Database Info</h2>
+                        </div>
+                        <div class="space-y-2 text-gray-600">
+                            <p><span class="font-medium">Host:</span> pg-90c016a-mozmail-fead.i.aivencloud.com</p>
+                            <p><span class="font-medium">Port:</span> 15173</p>
+                            <p><span class="font-medium">User:</span> avnadmin</p>
+                        </div>
+                    </div>
+                    <div class="bg-green-50 rounded-lg p-6">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-green-100 p-3 rounded-full mr-4">
+                                <i data-feather="activity" class="text-green-600"></i>
+                            </div>
+                            <h2 class="text-xl font-semibold text-gray-800">Quick Actions</h2>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg border border-indigo-100 hover:bg-indigo-50 transition">
+                                View Tables
+                            </button>
+                            <button class="bg-white text-green-600 px-4 py-2 rounded-lg border border-green-100 hover:bg-green-50 transition">
+                                Run Query
+                            </button>
+                            <button class="bg-white text-purple-600 px-4 py-2 rounded-lg border border-purple-100 hover:bg-purple-50 transition">
+                                Export Data
+                            </button>
+                            <button class="bg-white text-blue-600 px-4 py-2 rounded-lg border border-blue-100 hover:bg-blue-50 transition">
+                                Schema Diagram
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
+                        <h2 class="text-lg font-semibold text-gray-800">Tables Preview</h2>
+                    </div>
+                    <div class="divide-y divide-gray-200">
+                        <!-- Tables will be dynamically inserted here -->
+                    </div>
+                    <div id="loading" class="p-6 text-center text-gray-500">
+                        <i data-feather="loader" class="animate-spin inline-block"></i>
+                        <span class="ml-2">Loading tables...</span>
+                    </div>
+</div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+        document.getElementById('searchInput').addEventListener('input', function(e) {
+            console.log('Searching for:', e.target.value);
+            // Implement search functionality here
+        });
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,85 @@

+// Database connection configuration
+const dbConfig = {
+    host: 'pg-90c016a-mozmail-fead.i.aivencloud.com',
+    port: 15173,
+    user: 'avnadmin',
+    password: 'AVNS_4wOfQguMcSX18XkXZYL',
+    dbname: 'defaultdb',
+    sslmode: 'require'
+};
+// Function to fetch tables from database
+async function fetchTables() {
+    try {
+        const response = await fetch('/api/tables', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(dbConfig)
+        });
+        if (!response.ok) {
+            throw new Error('Failed to fetch tables');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Error fetching tables:', error);
+        showError('Failed to fetch tables. Please check your connection.');
+        return [];
+    }
+}
+// Function to display tables in UI
+function displayTables(tables) {
+    const tablesContainer = document.querySelector('.divide-y');
+    if (!tablesContainer) return;
+    tablesContainer.innerHTML = '';
+    tables.forEach(table => {
+        const tableElement = document.createElement('div');
+        tableElement.className = 'p-6 hover:bg-gray-50 transition cursor-pointer';
+        tableElement.innerHTML = `
+            <div class="flex justify-between items-center">
+                <div>
+                    <h3 class="font-medium text-gray-800">${table.table_name}</h3>
+                    <p class="text-sm text-gray-500">${table.table_schema || 'No description available'}</p>
+                </div>
+                <i data-feather="chevron-right" class="text-gray-400"></i>
+            </div>
+        `;
+        tablesContainer.appendChild(tableElement);
+    });
+    feather.replace();
+}
+// Function to show error message
+function showError(message) {
+    const errorElement = document.createElement('div');
+    errorElement.className = 'bg-red-50 text-red-600 p-4 rounded-lg mb-6';
+    errorElement.textContent = message;
+    document.querySelector('.max-w-4xl').prepend(errorElement);
+}
+// Initialize the application
+document.addEventListener('DOMContentLoaded', async () => {
+    console.log('Application initialized');
+    try {
+        const tables = await fetchTables();
+        displayTables(tables);
+    } catch (error) {
+        console.error('Initialization error:', error);
+        showError('Failed to initialize application');
+    }
+});
+// Search functionality
+document.getElementById('searchInput')?.addEventListener('input', function(e) {
+    const searchTerm = e.target.value.toLowerCase();
+    console.log('Searching for:', searchTerm);
+    // In a real implementation, you would filter the tables or records
+    // based on the search term and update the UI accordingly
+});

style.css CHANGED Viewed

@@ -1,28 +1,43 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+/* Animation for buttons */
+.button-scale {
+    transition: transform 0.2s ease;
 }
+.button-scale:hover {
+    transform: scale(1.02);
 }
+/* Fade in animation */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
+.fade-in {
+    animation: fadeIn 0.3s ease-in;
+}