pglens 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -7
- package/README.md +38 -145
- package/bin/pglens +143 -7
- package/client/app.js +1141 -79
- package/client/index.html +133 -35
- package/client/styles.css +980 -49
- package/package.json +1 -1
- package/src/db/connection.js +163 -27
- package/src/routes/api.js +288 -9
- package/src/server.js +72 -30
- package/pglens-1.0.0.tgz +0 -0
package/client/index.html
CHANGED
|
@@ -1,31 +1,124 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>pglens - PostgreSQL Database Viewer</title>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Asimovian&display=swap" rel="stylesheet">
|
|
11
|
+
<link rel="stylesheet" href="styles.css" />
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<div class="app">
|
|
16
|
+
<!-- Connection Dialog -->
|
|
17
|
+
<div class="connection-dialog-overlay" id="connectionDialog" style="display: none;">
|
|
18
|
+
<div class="connection-dialog">
|
|
19
|
+
<div class="connection-dialog-header">
|
|
20
|
+
<h2>Connect to Database</h2>
|
|
21
|
+
<button class="close-dialog-button" id="closeConnectionDialog" style="display: none;">×</button>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="connection-dialog-body">
|
|
24
|
+
<div class="connection-type-tabs">
|
|
25
|
+
<button class="connection-type-tab active" data-target="params">Parameters</button>
|
|
26
|
+
<button class="connection-type-tab" data-target="url">Connection URL</button>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="form-group">
|
|
30
|
+
<label for="connectionName">Connection Name (Optional)</label>
|
|
31
|
+
<input type="text" id="connectionName" placeholder="e.g., Production DB, Local Dev" autocomplete="off" />
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<!-- URL Mode -->
|
|
35
|
+
<div id="modeUrl" class="connection-mode-content">
|
|
36
|
+
<div class="form-group">
|
|
37
|
+
<label for="connectionUrl">Connection URL</label>
|
|
38
|
+
<input type="text" id="connectionUrl" placeholder="postgresql://user:password@localhost:5432/dbname"
|
|
39
|
+
autocomplete="off" />
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- Parameters Mode -->
|
|
44
|
+
<div id="modeParams" class="connection-mode-content" style="display: none;">
|
|
45
|
+
<div class="form-row">
|
|
46
|
+
<div class="form-group flex-2">
|
|
47
|
+
<label for="connHost">Host</label>
|
|
48
|
+
<input type="text" id="connHost" placeholder="localhost" value="localhost" />
|
|
49
|
+
</div>
|
|
50
|
+
<div class="form-group flex-1">
|
|
51
|
+
<label for="connPort">Port</label>
|
|
52
|
+
<input type="number" id="connPort" placeholder="5432" value="5432" />
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="form-group">
|
|
56
|
+
<label for="connDatabase">Database</label>
|
|
57
|
+
<input type="text" id="connDatabase" placeholder="postgres" value="postgres" />
|
|
17
58
|
</div>
|
|
59
|
+
<div class="form-row">
|
|
60
|
+
<div class="form-group flex-1">
|
|
61
|
+
<label for="connUser">Username</label>
|
|
62
|
+
<input type="text" id="connUser" placeholder="postgres" />
|
|
63
|
+
</div>
|
|
64
|
+
<div class="form-group flex-1">
|
|
65
|
+
<label for="connPassword">Password</label>
|
|
66
|
+
<input type="password" id="connPassword" placeholder="password" />
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="form-group">
|
|
72
|
+
<label for="sslMode">SSL Mode</label>
|
|
73
|
+
<select id="sslMode">
|
|
74
|
+
<option value="prefer" selected>Prefer (Default)</option>
|
|
75
|
+
<option value="require">Require</option>
|
|
76
|
+
<option value="disable">Disable</option>
|
|
77
|
+
<option value="verify-ca">Verify CA</option>
|
|
78
|
+
<option value="verify-full">Verify Full</option>
|
|
79
|
+
</select>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="error-message" id="connectionError" style="display: none;"></div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="connection-dialog-footer">
|
|
84
|
+
<button class="button-primary" id="connectButton">Connect</button>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="sidebar" id="sidebar">
|
|
90
|
+
<div class="sidebar-header">
|
|
91
|
+
<div class="sidebar-header-top">
|
|
92
|
+
<div class="sidebar-header-title">
|
|
93
|
+
<h2>pglens</h2>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="sidebar-actions">
|
|
18
96
|
<button class="sidebar-toggle" id="sidebarToggle" title="Minimize sidebar">
|
|
19
97
|
<span class="toggle-icon">◀</span>
|
|
20
98
|
</button>
|
|
21
99
|
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Connections Section -->
|
|
103
|
+
<div class="connections-section">
|
|
104
|
+
<div class="section-header">
|
|
105
|
+
<h3>Connections</h3>
|
|
106
|
+
<button class="icon-button add-connection-button" id="addConnectionButton" title="Add Connection">
|
|
107
|
+
<span class="icon">+</span>
|
|
108
|
+
</button>
|
|
109
|
+
</div>
|
|
110
|
+
<ul class="connections-list" id="connectionsList">
|
|
111
|
+
<!-- Connections will be added here -->
|
|
112
|
+
</ul>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<!-- Tables Section -->
|
|
116
|
+
<div class="tables-section">
|
|
117
|
+
<div class="section-header">
|
|
118
|
+
<h3>Tables <span class="table-count" id="tableCount">0</span></h3>
|
|
119
|
+
</div>
|
|
22
120
|
<div class="sidebar-search-container">
|
|
23
|
-
<input
|
|
24
|
-
type="text"
|
|
25
|
-
class="sidebar-search"
|
|
26
|
-
id="sidebarSearch"
|
|
27
|
-
placeholder="Search tables..."
|
|
28
|
-
/>
|
|
121
|
+
<input type="text" class="sidebar-search" id="sidebarSearch" placeholder="Search tables..." />
|
|
29
122
|
<div class="theme-selector">
|
|
30
123
|
<button class="theme-button" id="themeButton" title="Theme">
|
|
31
124
|
<span class="theme-icon">🌓</span>
|
|
@@ -37,23 +130,28 @@
|
|
|
37
130
|
</div>
|
|
38
131
|
</div>
|
|
39
132
|
</div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
133
|
+
<div class="sidebar-content" id="sidebarContent">
|
|
134
|
+
<div class="loading">Loading tables...</div>
|
|
135
|
+
</div>
|
|
43
136
|
</div>
|
|
44
137
|
</div>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
</
|
|
138
|
+
</div>
|
|
139
|
+
<div class="main-content">
|
|
140
|
+
<div class="tabs-container" id="tabsContainer" style="display: none;">
|
|
141
|
+
<div class="tabs-bar" id="tabsBar"></div>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="table-view" id="tableView">
|
|
144
|
+
<div class="empty-state">
|
|
145
|
+
<p>Select a table from the sidebar to view its data</p>
|
|
53
146
|
</div>
|
|
54
|
-
<div class="pagination" id="pagination" style="display: none;"></div>
|
|
55
147
|
</div>
|
|
148
|
+
<div class="pagination" id="pagination" style="display: none;"></div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
|
|
151
|
+
<div class="loading-spinner"></div>
|
|
56
152
|
</div>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</
|
|
153
|
+
</div>
|
|
154
|
+
<script src="app.js"></script>
|
|
155
|
+
</body>
|
|
156
|
+
|
|
157
|
+
</html>
|