37 |
38 | {data.allTableNames.map((table:any, index: number) => (
39 |
40 |
64 | )
65 | }
66 | else {
67 | return (
68 |
41 |
44 | {data.allTablesFields[index].map((fields:any) => (
45 |
46 |
60 |
61 |
62 | ))}
63 | {table.table_name}
42 | 43 || {fields} | 47 | ))} 48 | {data.allTablesData[index].rows.map((row: any) => ( 49 |
|---|
| {submitQuery(table.table_name, allTablesFields[index][colIndex], event.target.value, allTablesFields[index][0], row.id)}}> | 52 |
69 |
78 | )
79 | }
80 | // let pg = require('pg')
81 | // // const URI = "postgres://jxbiwedv:tWMx8_U1YtUH3Noj4vFCNMVW1yHOfEWb@jelani.db.elephantsql.com/jxbiwedv";
82 | // let client = new pg.Client('postgres://jxbiwedv:tWMx8_U1YtUH3Noj4vFCNMVW1yHOfEWb@jelani.db.elephantsql.com/jxbiwedv')
83 | // //let updateQuery = `UPDATE ${request.body.tableName} SET ${colID} = ${newVal} WHERE ${keyName} = ${rowID} `
84 | // client.connect()
85 | // //const allTables = await executeQuery("SELECT table_name FROM information_schema.tables WHERE table_schema = 'public';")
86 | // const allTables = await client.query("SELECT table_name FROM information_schema.tables WHERE table_schema = 'public';")
87 | //allTables.rows.pop()
88 |
89 |
90 | // let allTablesData = []
91 | // let tableData;
92 |
93 | // for(let i = 0; i< allTables.rows.length; i++){
94 | // if (allTables.rows[i]["table_name"] === "pg_stat_statements"){
95 | // allTables.rows.splice(1,i)
96 | // }
97 |
98 | // }
99 | // const allTableNames = Object.values(allTables.rows)
100 | // console.log("NOW THE TABLES ARE ", allTableNames )
101 | // //Removing SQL default table
102 | // //allTableNames.pop()
103 | // allTableNames.forEach( async (table) => {
104 | // //tableData = await executeQuery(`SELECT * FROM ${table.table_name}`)
105 | // tableData = await client.query(`SELECT * FROM ${table.table_name}`)
106 | // allTablesData.push(tableData)
107 | // })
108 | // //tableData = await executeQuery(`SELECT * FROM ${allTableNames[0].table_name}`);
109 | // tableData = await client.query(`SELECT * FROM ${allTableNames[0].table_name}`);
110 |
111 | //allTables.rows.pop()
112 |
113 | // let allTablesFields = [];
114 | // //let newFieldsArr = []
115 | // allTablesData.forEach(table => {
116 | // let newFieldsArr = []
117 | // table.fields.forEach(field => {
118 | // newFieldsArr.push(field.name)
119 | // })
120 | // allTablesFields.push(newFieldsArr)
121 | // })
122 |
123 | //await client.end()
124 |
125 |
126 | // return (
127 |
128 | // Loading...
70 |
71 |
75 | Loading...
76 |
77 |
129 |
130 | //
131 | // {console.log('ALL DATA:', data)}
132 | // {data.allTableNames.map((table:any, index: number) => (
133 |
134 | //
158 | // )
159 | // );
160 | // };
161 | //
135 | //
138 | // {data.allTablesFields[index].map((fields:any) => (
139 |
140 | //
154 |
155 | //
156 | // ))}
157 | // {table.table_name}
136 | 137 | //| {fields} | 141 | // ))} 142 | // {data.allTablesData[index].map((row: any) => ( 143 | //
|---|
| {submitQuery(table.table_name, allTablesFields[index][colIndex], event.target.value, allTablesFields[index][0], row.id)}}> | 146 | //
162 | //
164 |
165 |
166 | // export default Display;
167 |
168 |
169 |
170 |
171 | //LOOP 1: TABLE NAME
172 | //LOOP 2: FIELDS
173 | //LOOP 2: TABLE DATA
174 |
175 |
176 | //TEST QUERIES
177 | // {console.log("All DATA", allTablesData)}
178 | // {console.log("FIELDS", allTablesData[0].fields)}
179 | // {console.log(allTables.rows)}
180 | // {console.log("ALL FIELDS", allTablesFields)}
181 | // 'use client'
182 | // import React, { useEffect, useState } from "react";
183 | // import Chart from "chart.js";
184 | // import { Pool } from "pg";
185 | // import TableCell from "./tableCell";
186 | // import Wrapper from "./wrapper";
187 | // import "./style.css";
188 |
189 | // const Display = (props) => {
190 | // const [allTablesData, setAllTablesData] = useState([]);
191 | // const [allTablesFields, setAllTablesFields] = useState([]);
192 | // const URI = props.URI;
193 |
194 | // useEffect(() => {
195 | // const fetchData = async () => {
196 | // let pg = require("pg");
197 | // let client = new pg.Client(URI);
198 | // client.connect();
199 |
200 | // const allTables = await client.query(
201 | // "SELECT table_name FROM information_schema.tables WHERE table_schema = 'public';"
202 | // );
203 |
204 | // let filteredTables = allTables.rows.filter(
205 | // (row) => row.table_name !== "pg_stat_statements"
206 | // );
207 |
208 | // const allTableNames = filteredTables.map((row) => row.table_name);
209 |
210 | // const tableDataPromises = allTableNames.map((tableName) =>
211 | // client.query(`SELECT * FROM ${tableName}`)
212 | // );
213 | // const resolvedTableData = await Promise.all(tableDataPromises);
214 |
215 | // setAllTablesData(resolvedTableData);
216 |
217 | // const tableFields = resolvedTableData.map((table) =>
218 | // table.fields.map((field) => field.name)
219 | // );
220 | // setAllTablesFields(tableFields);
221 |
222 | // client.end();
223 | // };
224 |
225 | // fetchData();
226 | // }, [URI]);
227 |
228 | // return (
229 | // hello
163 | //
230 | //
231 | // {allTablesData.map((table, index) => (
232 | //
263 | // );
264 | // };
265 |
266 | }
267 | export default Display;
268 |
--------------------------------------------------------------------------------
/src/app/components/home/input.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import React, { useState } from 'react'
3 | import Display from "./display"
4 |
5 | const Input = () => {
6 | const [value, setValue] = useState('')
7 | const [showComponent, setShowComponent] = useState(false);
8 | const handleURI = async(value, e) => {
9 | e.preventDefault();
10 | await fetch('/api/', {
11 | method: 'POST',
12 | body: JSON.stringify({
13 | URI: value
14 | })
15 | })
16 | .then(response => response.json())
17 | .then(data => {
18 | if(data){
19 | setShowComponent(true)
20 | }
21 | })
22 |
23 | }
24 | if (!showComponent){
25 | return (
26 |
233 | //
235 | //
236 | //
260 | //
261 | // ))}
262 | // {table.rows[index].table_name}
234 | //| {field} | 239 | // ))} 240 | //
|---|
27 |
36 | )
37 | } else{
38 | return(
39 |
40 | // router.push("/components/display")
41 |
28 |
34 |
35 | URI :
29 | setValue(event.target.value)}> 30 | 31 | 32 | 33 |
42 |
47 |
48 | )
49 | }
50 | }
51 |
52 | export default Input
--------------------------------------------------------------------------------
/src/app/components/home/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | //import ReactDOM from 'react-dom';
3 | //import Display from "./display"
4 | import Input from "./input"
5 |
6 | function App() {
7 |
8 | return (
9 |
10 |
43 |
44 |
45 |
11 |
12 |
13 |
16 | );
17 | };
18 |
19 | export default App;
--------------------------------------------------------------------------------
/src/app/components/home/style.css:
--------------------------------------------------------------------------------
1 |
2 | /* @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); */
3 | @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;1,800&display=swap');
4 |
5 |
6 | h2 {
7 | background-color: rgb(129, 205, 212) ;
8 | font-family: 'Rubik', sans-serif
9 | }
10 |
11 |
--------------------------------------------------------------------------------
/src/app/components/home/tableCell.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import React, { useState } from "react";
4 |
5 |
6 | import "../../globals.css"
7 | //import {executeQuery} from "./db2"
8 | // import {PATCH} from '../../api/route'
9 |
10 |
11 | function TableCell (props) {
12 |
13 | const [value, setValue] = useState(`${props.data}`);
14 | //const updateQuery = `UPDATE ${props.table_name} SET ${props.colID} = ${value} WHERE ${props.keyName} = ${props.rowID} `
15 |
16 | async function submitQuery(event, tableName, colID, newVal, keyName, rowID, uri){
17 | event.preventDefault()
18 | let updateQuery = `UPDATE ${tableName} SET ${colID} = '${newVal}' WHERE ${keyName} = ${rowID} `
19 | //executeQuery(updateQuery)
20 | await fetch('/api', {
21 | method: "PATCH",
22 | headers: {
23 | 'Content-Type': 'application/json',
24 | },
25 | body: JSON.stringify({uri: uri, query: updateQuery})
26 |
27 | })
28 | //const updateQuery = `UPDATE ${props.table_name} SET ${props.colID} = ${value} WHERE ${props.keyName} = ${props.rowID} `
29 | return setValue(newVal)
30 | }
31 |
32 | async function deleterQuery(event, value, tableName,rowID, colID, uri, keyName){
33 | event.preventDefault()
34 | if (value == -1 && colID === keyName){
35 | let deleteQuery = `DELETE FROM ${tableName} WHERE ${colID} = '${value}'`
36 | await fetch('/api/delete', {
37 | method: 'POST',
38 | headers: {
39 | 'Content-Type': 'application/json',
40 | },
41 | body: JSON.stringify({
42 | rowID: rowID,
43 | uri: uri,
44 | query: deleteQuery,
45 | value: value,
46 | })
47 | })
48 | }
49 | }
50 | //event.target.value ---> NEWVAL
51 | //console.log("KEYNAME", props.keyName, "ROWID", props.rowID, "COLID", props.colID, "TABLE", props.tableName)
52 | return (
53 |
54 | PGQL
14 | 15 |
12 | {/* */}
25 |
26 | )
27 | }
28 |
29 | export default Login
--------------------------------------------------------------------------------
/src/app/components/signOut/page.tsx:
--------------------------------------------------------------------------------
1 | //when there is layout.tsx, next.js goes to layout to render rather than just the page
2 |
3 | 'use client'
4 | import Link from 'next/link';
5 | import {signOut} from 'next-auth/react';
6 |
7 | export default function Something(){
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 | };
17 |
18 |
--------------------------------------------------------------------------------
/src/app/components/signUp/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { NextPage } from 'next';
3 |
4 |
5 |
6 | import {signIn} from 'next-auth/react';
7 |
8 |
9 | const Signup: NextPage = (): JSX.Element => {
10 | return (
11 |
12 |
28 |
29 | )
30 | }
31 |
32 | export default Signup
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | /* :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | } */
18 |
19 | /* html {
20 | height: 100%;
21 |
22 | } */
23 | body {
24 | color: rgb(var(--foreground-rgb));
25 | background: linear-gradient(
26 | to bottom,
27 | transparent,
28 | rgb(var(--background-end-rgb))
29 | )
30 | rgb(var(--background-start-rgb));
31 | background-color: rgb(225, 229, 230);
32 | height:100%;
33 | color: black;
34 | }
35 |
36 | .test {
37 | height: 500px;
38 | padding-top:200px;
39 | }
40 | #extension {
41 | height: 100vh;
42 | }
43 | #extension2 {
44 | height: 100%;
45 | }
46 | .sign-in-form{
47 | width: 100%;
48 | height: 100vh;
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | }
53 | .sign-in-form input{
54 | display: block;
55 | padding: 5px;
56 | border: 1px gray solid;
57 | border-radius: 3px;
58 | margin-top: 15px;
59 | }
60 | .sign-in-form h1{
61 | font-size: 18px;
62 | text-align: center;
63 | }
64 | .sign-in-form form{
65 | padding: 50px 15px;
66 | border: 2px gray solid;
67 | border-radius: 3px;
68 | }
69 | .extension {
70 | height: 100%;
71 | }
72 | .extension2 {
73 | height: 70%;
74 | }
75 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
76 | @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@600&display=swap');
77 | @import url('https://fonts.googleapis.com/css2?family=Rajdhani&display=swap');
78 |
79 | body {
80 | box-sizing: border-box;
81 | color: #1f2937;
82 | font-family: 'Poppins', sans-serif;
83 | }
84 |
85 | .container {
86 | width: 100%;
87 | max-width: 800px;
88 | padding: 0 10px;
89 | margin: 0 auto;
90 | margin-top: 70px;
91 | }
92 |
93 | .title {
94 | text-align: center;
95 | font-size: 26px;
96 | margin-bottom: 30px;
97 | }
98 |
99 | .row4 {
100 | display: table;
101 | width: 100%;
102 | }
103 |
104 | .column4 {
105 | float: left;
106 | width: 25%;
107 | align-items: center;
108 | }
109 |
110 | .row2 {
111 | display: table;
112 | width: 100%;
113 | background-color: white;
114 | }
115 |
116 | .column25 {
117 | float: left;
118 | width: 75%;
119 | padding-left:25px;
120 | align-items: center;
121 | padding-bottom:100px;
122 | }
123 |
124 | .column75 {
125 | float: right;
126 | width: 75%;
127 | padding-bottom:100px;
128 |
129 | align-items: center;
130 | }
131 | .test4{
132 | background-color:white;
133 | }
134 | .test3{
135 | padding-bottom:75px;
136 | }
137 |
138 | .our-gif {
139 | /* margin-left: 20%; */
140 | }
141 | .carosel {
142 | height: 200px;
143 |
144 | }
145 |
146 | #carosel-heading {
147 | font-family: 'Geologica', sans-serif;
148 | }
149 |
150 | .carousel-layout {
151 | padding: 10px;
152 | }
153 |
154 | h1 {
155 | font-family: 'Poppins', sans-serif;
156 | font-size: 40px;
157 |
158 | }
159 | h2 {
160 | font-family: 'Poppins', sans-serif;
161 | font-size: 30px;
162 | }
163 | table {
164 | border-collapse: collapse;
165 | width: 70%;
166 | }
167 |
168 | tr th {
169 | font-size: 18px;
170 | padding: 12px;
171 | border: 1px solid #eeeeee;
172 | text-align: left;
173 | background-color: rgba(14, 14, 9, 0.2);
174 | }
175 |
176 | th {
177 | background-color: lightcyan;
178 | font-size: 22px;
179 | }
180 |
181 | tr td {
182 | border: 1px solid #eeeeee;
183 | text-align: left;
184 | }
185 |
186 | input {
187 | font-size: 16px;
188 | background-color: transparent;
189 | border: none;
190 | width: 91%;
191 | padding: 12px 12px;
192 | font-family: 'Poppins', sans-serif;
193 | }
194 |
195 | input:hover {
196 | background-color: #fff4e4;
197 | }
198 |
199 | input:focus {
200 | outline: 1px solid #ccc;
201 | border: 1px solid #ccc;
202 | }
203 |
204 | #btnDiv {
205 | display: grid;
206 | justify-content: flex-end;
207 | }
208 |
209 | #img3 {
210 | height: 9.5rem;
211 | margin-top: 3%;
212 | margin-left: 15%
213 | }
214 |
215 | #img4 {
216 | height: 9.5rem;
217 | margin-left: 25%;
218 | margin-top: 3%
219 | }
220 |
221 | #divimg2 {
222 | width: 25%
223 | }
224 |
225 | #aboutDiv {
226 | padding: 10px;
227 | }
228 |
229 | #about {
230 | font-family: 'Rajdhani', sans-serif;
231 | }
232 |
233 | .returnURI{
234 | margin-left: 93%;
235 | }
236 | #return-home{
237 | background-color: #2949d7;
238 | border-radius: 8px;
239 | margin-right: 10%;
240 | width: 100%;
241 |
242 | }
243 | #return-home:hover{
244 | background-color: #0d32d6;
245 | }
246 |
247 | #creatorDiv{
248 | padding-top: 50px;
249 | display: inline-block;
250 |
251 | }
252 |
253 | .test5{
254 | padding-bottom: 50px;
255 | }
256 |
257 | .githubDiv {
258 | text-align: center;
259 | }
260 | .imageDiv {
261 | margin-top: 50%;
262 | margin-left: 50%;
263 | }
264 | .checkoutH1{
265 | margin-left:80%;
266 | }
267 |
268 | #container-team{
269 | display: flex;
270 | padding-left: 26%;;
271 | padding-right: 20%;;
272 | }
273 | /* .image-grid {
274 | display: flex;
275 | justify-content: space-between;
276 | }
277 |
278 | .image-item {
279 | flex-basis: 25%;
280 | padding: 10px;
281 | box-sizing: border-box;
282 | } */
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import './globals.css'
2 | import React from 'react';
3 | import Nav from './components/Nav'
4 | // import { Inter } from 'next/font/google'
5 | import Provider from './Providers';
6 |
7 | //const inter = Inter({ subsets: ['latin'] })
8 |
9 | export const metadata = {
10 | title: 'PGQL',
11 | description: 'SQL Visual Excel Database',
12 | }
13 |
14 |
15 | const Rootlayout = ({
16 | children,
17 | }: {
18 | children: React.ReactNode
19 | }) => {
20 |
21 | return (
22 |
23 |
28 |
29 |
14 |
15 | {/* {!session ? (null) : (
16 |
44 | 45 |
63 | 64 |
89 | );
90 | };
91 |
92 | export default Welcome;
93 |
--------------------------------------------------------------------------------
/src/app/utils/database.tsx:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 |
3 | let isConnected = false;
4 |
5 | export const connectToDB = async () => {
6 | //only data specified in Schema will be passed to database
7 | mongoose.set('strictQuery', true);
8 |
9 | if(isConnected){
10 | console.log('MongoDB is already connected');
11 | return
12 | }
13 | try{
14 | await mongoose.connect(process.env.MONGODB_URI!);
15 | isConnected = true;
16 | console.log('Mongoose is now connected');
17 |
18 | mongoose.connection.once('open', function() {
19 | console.log('Mongoose has opened a connection');
20 | });
21 | }
22 | catch(error){
23 | console.log(error);
24 | }
25 | }
26 |
27 | //connectToDB();
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | },
16 | },
17 | plugins: [require("daisyui")],
18 | daisyui:{
19 | themes: ['synthwave'],
20 | styled: true,
21 | themes: true,
22 | base: true,
23 | utils: true,
24 | logs: true,
25 | rtl: false,
26 | },
27 | }
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 |
4 | "target": "ES2022",
5 |
6 | "lib": ["dom", "dom.iterable", "esnext"],
7 | "allowJs": true,
8 | "skipLibCheck": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noEmit": true,
12 | "esModuleInterop": true,
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "jsx": "preserve",
18 | "incremental": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noImplicitReturns": true,
22 | "noImplicitAny": false,
23 | "noEmitOnError": true,
24 |
25 | "plugins": [
26 | {
27 | "name": "next"
28 | }
29 | ],
30 | "paths": {
31 | "@/*": ["./src/*"]
32 | }
33 | },
34 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
35 | "exclude": ["node_modules"]
36 | }
37 |
--------------------------------------------------------------------------------
17 |
18 |
26 |
27 |
28 | )} */}
29 |
30 | {!session ? (null) : (
31 |
43 |
32 |
33 |
36 |
37 |
38 | )}
39 | MKKY PRESENTS:
40 |PostGres-Query-Less
41 |Visually Interact with your Cloud PostgreSQL Database
42 |44 | 45 |
46 |
54 |
55 |
47 |
51 |
52 |
53 | About PGQL
48 | 49 |PostGres-Query-Less(PGQL) is an open-source web application that can be used to connect to any cloud PostgreSQL database to visualize and adjust it's content. We strive to provide our users with a simple interface to communicate with their cloud databases through onClick functionality. When users make changes in their visualized database, queries are automated to adjust their databases directly in real-time.
50 |51 |
56 |
57 |
62 |
58 |
60 |
61 | 63 | 64 |
65 |
82 | Compatible Cloud Providers:
66 | 67 |
68 |
81 |
69 | 
70 |
71 |
70 |
72 | 
73 |
74 |
73 |
75 | 
76 |
77 |
76 |
78 | 
79 |
80 |
79 |
83 |
88 |
84 |
86 |
87 |