From b15918954de0586bb818ef4462c99d3feaeed76f Mon Sep 17 00:00:00 2001 From: "[Abdelruhman Sami]" <[abdelruhamn.mohamad04@eng-stu.cu.edu.eg]> Date: Sat, 23 Dec 2023 23:11:26 +0200 Subject: [PATCH 1/5] Statistic Table is incomplete --- client/src/assets/styles/_vars.scss | 1 + .../styles/components/StatisitcTable.scss | 11 ++++++++ client/src/assets/styles/global/_layout.scss | 10 +++++++ .../src/components/common/StatisticTable.jsx | 28 +++++++++++++++++++ 4 files changed, 50 insertions(+) create mode 100644 client/src/assets/styles/components/StatisitcTable.scss create mode 100644 client/src/components/common/StatisticTable.jsx diff --git a/client/src/assets/styles/_vars.scss b/client/src/assets/styles/_vars.scss index 7186fd13..d5cc3a95 100644 --- a/client/src/assets/styles/_vars.scss +++ b/client/src/assets/styles/_vars.scss @@ -8,4 +8,5 @@ $--Red-700: #C81E1E; $--green-700: #046C4E; $--Yellow-500: #C27803; $--Primary-900: #0e0218; +$--Primary-600: #650DA6; $--text-color: #e2efee; \ No newline at end of file diff --git a/client/src/assets/styles/components/StatisitcTable.scss b/client/src/assets/styles/components/StatisitcTable.scss new file mode 100644 index 00000000..64666e90 --- /dev/null +++ b/client/src/assets/styles/components/StatisitcTable.scss @@ -0,0 +1,11 @@ +.table-box { + display: flex; + padding: 30px 4px; + flex-direction: column; + align-items: center; + gap: 11px; + + + border: 1px solid var(--Primary-600); + +} diff --git a/client/src/assets/styles/global/_layout.scss b/client/src/assets/styles/global/_layout.scss index 8a7e7a7e..cf3588ff 100644 --- a/client/src/assets/styles/global/_layout.scss +++ b/client/src/assets/styles/global/_layout.scss @@ -34,3 +34,13 @@ section, flex: 0 1 calc(100% - var(--side-spacing) * 2); } } + +.PopUp { + width: 80%; + height: fit-content; + border-radius: 14px; + background: linear-gradient(115deg, #201429 2.95%, #360C55 95.69%); + + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/client/src/components/common/StatisticTable.jsx b/client/src/components/common/StatisticTable.jsx new file mode 100644 index 00000000..8c7dc0ba --- /dev/null +++ b/client/src/components/common/StatisticTable.jsx @@ -0,0 +1,28 @@ +import React from "react"; +import "../../assets/styles/components/StatisticTable"; + +export const StatisticTable = ({ title, columnNames, dataRows }) => { + return ( +
+ {title} +
+
+ # + {columnNames.map((col, index) => { + + {col} + ; + })} +
+ +
+ {dataRows.map((item, index) => { + + {item} + ; + })} +
+
+
+ ); +}; From ae656844a3277ff1a6a1c4c289335b093dd9ed8b Mon Sep 17 00:00:00 2001 From: "[Abdelruhman Sami]" <[abdelruhamn.mohamad04@eng-stu.cu.edu.eg]> Date: Sun, 24 Dec 2023 09:33:02 +0200 Subject: [PATCH 2/5] Table Statistics in progress 2 --- client/package.json | 2 +- .../styles/components/StatisitcTable.scss | 10 ++++++++++ client/src/components/common/PageTitle.jsx | 12 +++++------- .../src/components/common/StatisticTable.jsx | 19 +++++++++++++++++-- .../components/landingpage/LandingPage.jsx | 9 ++++++++- 5 files changed, 41 insertions(+), 11 deletions(-) diff --git a/client/package.json b/client/package.json index 78f1aeeb..acc4fe11 100644 --- a/client/package.json +++ b/client/package.json @@ -22,7 +22,7 @@ "sass": "^1.69.5" }, "devDependencies": { - "@types/react": "^18.2.37", + "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.53.0", diff --git a/client/src/assets/styles/components/StatisitcTable.scss b/client/src/assets/styles/components/StatisitcTable.scss index 64666e90..9c0ef299 100644 --- a/client/src/assets/styles/components/StatisitcTable.scss +++ b/client/src/assets/styles/components/StatisitcTable.scss @@ -9,3 +9,13 @@ border: 1px solid var(--Primary-600); } + +.line { + width: 318.718px; + height: 0px; + transform: rotate(-0.04deg); + flex-shrink: 0; + + stroke-width: 1px; + stroke: var(--grey-600); +} \ No newline at end of file diff --git a/client/src/components/common/PageTitle.jsx b/client/src/components/common/PageTitle.jsx index 3bc8069e..402e90cd 100644 --- a/client/src/components/common/PageTitle.jsx +++ b/client/src/components/common/PageTitle.jsx @@ -1,9 +1,7 @@ -import React from 'react' +import React from "react"; -const PageTitle = ({title}) => { - return ( -

{title}

- ) -} +const PageTitle = ({ title }) => { + return

{title}

; +}; -export default PageTitle \ No newline at end of file +export default PageTitle; diff --git a/client/src/components/common/StatisticTable.jsx b/client/src/components/common/StatisticTable.jsx index 8c7dc0ba..5f53f5fe 100644 --- a/client/src/components/common/StatisticTable.jsx +++ b/client/src/components/common/StatisticTable.jsx @@ -1,7 +1,6 @@ import React from "react"; -import "../../assets/styles/components/StatisticTable"; -export const StatisticTable = ({ title, columnNames, dataRows }) => { +const StatisticTable = ({ title, columnNames, dataRows }) => { return (
{title} @@ -15,6 +14,20 @@ export const StatisticTable = ({ title, columnNames, dataRows }) => { })}
+ + + +
{dataRows.map((item, index) => { @@ -26,3 +39,5 @@ export const StatisticTable = ({ title, columnNames, dataRows }) => {
); }; + +export default StatisticTable; diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx index 0203440c..7d88acb5 100644 --- a/client/src/components/landingpage/LandingPage.jsx +++ b/client/src/components/landingpage/LandingPage.jsx @@ -2,10 +2,11 @@ import Button from "../common/Button"; import FancyBlobs from "./FancyBlobs"; -import "./LandingPage.scss"; import PageTitle from "../common/PageTitle"; +import StatisticTable from "../common/StatisticTable"; + import { FolderIcon, AcademicCapIcon, @@ -79,6 +80,12 @@ export default function LandingPage() { + + ); } From 61aa70aba949d534a0854b4073ad78760f49bc4d Mon Sep 17 00:00:00 2001 From: "[Abdelruhman Sami]" <[abdelruhamn.mohamad04@eng-stu.cu.edu.eg]> Date: Sun, 24 Dec 2023 09:41:30 +0200 Subject: [PATCH 3/5] No edits to say --- server/database/db.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/server/database/db.js b/server/database/db.js index 7bb1e1dc..453c1e6c 100644 --- a/server/database/db.js +++ b/server/database/db.js @@ -1,7 +1,6 @@ -import pg from "pg"; -import dotenv from "dotenv"; +import pg from 'pg' +import dotenv from 'dotenv' -dotenv.config(); dotenv.config(); const db = new pg.Pool({ host: process.env.DB_HOST, @@ -12,4 +11,4 @@ const db = new pg.Pool({ }); -export default db; +export default db From b254c38af66c19227d59d75d0bf93260a13aeef0 Mon Sep 17 00:00:00 2001 From: "[Abdelruhman Sami]" <[abdelruhamn.mohamad04@eng-stu.cu.edu.eg]> Date: Sun, 24 Dec 2023 16:47:57 +0200 Subject: [PATCH 4/5] Statistic Table added --- .../styles/components/StatisitcTable.scss | 62 ++++++++++++-- client/src/assets/styles/global/_layout.scss | 2 +- .../src/components/common/StatisticTable.jsx | 84 ++++++++++++------- .../components/landingpage/LandingPage.jsx | 12 ++- .../components/landingpage/LandingPage.scss | 12 ++- client/src/components/testing/TestTable.jsx | 37 ++++++++ server/database/db.js | 15 ++-- 7 files changed, 167 insertions(+), 57 deletions(-) create mode 100644 client/src/components/testing/TestTable.jsx diff --git a/client/src/assets/styles/components/StatisitcTable.scss b/client/src/assets/styles/components/StatisitcTable.scss index 9c0ef299..d02bfea9 100644 --- a/client/src/assets/styles/components/StatisitcTable.scss +++ b/client/src/assets/styles/components/StatisitcTable.scss @@ -2,20 +2,66 @@ display: flex; padding: 30px 4px; flex-direction: column; + justify-content: center; align-items: center; gap: 11px; + border: 1px solid var(--Primary-600, #650DA6); + width: 90%; - border: 1px solid var(--Primary-600); + justify-self: center; } -.line { - width: 318.718px; - height: 0px; - transform: rotate(-0.04deg); - flex-shrink: 0; +table { + width: inherit; - stroke-width: 1px; - stroke: var(--grey-600); +} + +.columns-name-box { + display: flex; + flex-direction: row; + justify-content: end; + +} + +.columns-title-box { + + width: 100%; + display: flex; + flex-direction: row; + direction: rtl; + +} + +.columns-value-box { + display: flex; + flex-direction: column; +} + + +.single-row { + width: 100%; + + direction: rtl; + display: flex; + flex-direction: row; + + padding-bottom: 10px; + + height: fit-content; + +} + +th, +td { + text-align: center; + width: 100px; +} + +.table-outlier { + direction: rtl; + width: 80%; + display: block; + overflow-x: scroll; } \ No newline at end of file diff --git a/client/src/assets/styles/global/_layout.scss b/client/src/assets/styles/global/_layout.scss index cf3588ff..ca52215c 100644 --- a/client/src/assets/styles/global/_layout.scss +++ b/client/src/assets/styles/global/_layout.scss @@ -21,7 +21,7 @@ section, .col-1 { flex: 0 1 calc(25% - var(--side-spacing) * 2); } - + .col-2 { flex: 0 1 calc(50% - var(--side-spacing) * 2); } diff --git a/client/src/components/common/StatisticTable.jsx b/client/src/components/common/StatisticTable.jsx index 5f53f5fe..22827bde 100644 --- a/client/src/components/common/StatisticTable.jsx +++ b/client/src/components/common/StatisticTable.jsx @@ -1,40 +1,62 @@ import React from "react"; +import "../../assets/styles/components/StatisitcTable.scss"; + const StatisticTable = ({ title, columnNames, dataRows }) => { + const columnsNo = Object.keys(dataRows[0]).length; + return (
- {title} -
-
- # - {columnNames.map((col, index) => { - - {col} - ; - })} -
- - - - +
{title}
-
- {dataRows.map((item, index) => { - - {item} - ; - })} -
+
+ + { + + + {columnNames.map((col, index) => { + return ( + + ); + })} + + + } + + + + + + { + +
+ {dataRows.map((row, rowIndex) => ( + // Map over rows +
+ {Object.values(row).map((cell, cellIndex) => ( + // Map over cells within each row + + ))} + + ))} + + + } +
+ {col.name} +
+ {cell} +
); diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx index 7d88acb5..d74b51b5 100644 --- a/client/src/components/landingpage/LandingPage.jsx +++ b/client/src/components/landingpage/LandingPage.jsx @@ -2,10 +2,11 @@ import Button from "../common/Button"; import FancyBlobs from "./FancyBlobs"; - import PageTitle from "../common/PageTitle"; -import StatisticTable from "../common/StatisticTable"; +import "./LandingPage.scss"; + +import TestTable from "../testing/TestTable"; import { FolderIcon, @@ -81,11 +82,8 @@ export default function LandingPage() { - + {/* uncomment to test statistics Table */ + /* */}
); } diff --git a/client/src/components/landingpage/LandingPage.scss b/client/src/components/landingpage/LandingPage.scss index f7d2be7d..c2c041fc 100644 --- a/client/src/components/landingpage/LandingPage.scss +++ b/client/src/components/landingpage/LandingPage.scss @@ -16,6 +16,7 @@ padding-inline: 5px; line-height: 1.5; } + .btn__container { display: flex; flex-direction: column; @@ -23,7 +24,7 @@ justify-content: center; gap: 20px; - > * { + >* { min-width: 70%; } } @@ -57,7 +58,8 @@ .icon { color: var(--primary-100); - > * { + + >* { width: var(--icon-size); height: var(--icon-size); } @@ -70,3 +72,9 @@ } } } + +.test-box { + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/client/src/components/testing/TestTable.jsx b/client/src/components/testing/TestTable.jsx new file mode 100644 index 00000000..52b05303 --- /dev/null +++ b/client/src/components/testing/TestTable.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import StatisticTable from "../common/StatisticTable"; + +const TestTable = () => { + const columnNames = [ + { name: "الاسم" }, + { name: "النوع" }, + { name: "الحالة" }, + { name: "الوضع" }, + { name: "أهي ماشية" }, + ]; + const dataRows = [ + { + name: "إسماعيل أحمد قنباوي", + type: "ذكر", + status: "مقيد", + }, + + { + name: "يعقوب غيتة", + type: "ذكر", + status: "غير مقيد", + }, + ]; + + return ( +
+ +
+ ); +}; + +export default TestTable; diff --git a/server/database/db.js b/server/database/db.js index 453c1e6c..59ff1c3b 100644 --- a/server/database/db.js +++ b/server/database/db.js @@ -1,14 +1,13 @@ import pg from 'pg' import dotenv from 'dotenv' -dotenv.config(); +dotenv.config() const db = new pg.Pool({ - host: process.env.DB_HOST, - port: process.env.DB_PORT, - user: process.env.DB_USER, - password: process.env.DB_PASS, - database: process.env.DB_DATABASE, -}); - + host: process.env.DB_HOST, + port: process.env.DB_PORT, + user: process.env.DB_USER, + password: process.env.DB_PASS, + database: process.env.DB_DATABASE, +}) export default db From 825ae031114889a375eeb9905cbb815bd31bb4bf Mon Sep 17 00:00:00 2001 From: "[Abdelruhman Sami]" <[abdelruhamn.mohamad04@eng-stu.cu.edu.eg]> Date: Sun, 24 Dec 2023 16:57:49 +0200 Subject: [PATCH 5/5] indentation commit --- client/src/components/landingpage/LandingPage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx index d74b51b5..873a96e7 100644 --- a/client/src/components/landingpage/LandingPage.jsx +++ b/client/src/components/landingpage/LandingPage.jsx @@ -82,8 +82,8 @@ export default function LandingPage() { - {/* uncomment to test statistics Table */ - /* */} + {/* uncomment to test statistics Table */} + {/* */} ); }