diff --git a/package.json b/package.json index 44f14fa6..c56a2fd2 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@heroicons/react": "2.0.18", - "@material-tailwind/react": "2.1.4", + "@material-tailwind/react": "^2.1.4", "apexcharts": "3.44.0", "prop-types": "15.8.1", "react": "18.2.0", @@ -29,4 +29,4 @@ "tailwindcss": "3.3.4", "vite": "4.5.0" } -} \ No newline at end of file +} diff --git a/public/img/factory-svgrepo-com.svg b/public/img/factory-svgrepo-com.svg new file mode 100644 index 00000000..08e107d3 --- /dev/null +++ b/public/img/factory-svgrepo-com.svg @@ -0,0 +1,12 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/FetchData.jsx b/src/components/FetchData.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx new file mode 100644 index 00000000..ea54b315 --- /dev/null +++ b/src/components/Pagination.jsx @@ -0,0 +1,55 @@ +import React from "react"; +import { Button, IconButton } from "@material-tailwind/react"; +import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/24/outline"; + +export function Pagination() { + const [active, setActive] = React.useState(1); + + const getItemProps = (index) => + ({ + variant: active === index ? "filled" : "text", + color: "gray", + onClick: () => setActive(index), + }); + + const next = () => { + if (active === 5) return; + + setActive(active + 1); + }; + + const prev = () => { + if (active === 1) return; + + setActive(active - 1); + }; + + return ( +
+ +
+ 1 + 2 + 3 + 4 + 5 +
+ +
+ ); +} \ No newline at end of file diff --git a/src/data/index.js b/src/data/index.js index 7ca52a08..d740525b 100644 --- a/src/data/index.js +++ b/src/data/index.js @@ -6,3 +6,4 @@ export * from "@/data/platform-settings-data"; export * from "@/data/conversations-data"; export * from "@/data/projects-data"; export * from "@/data/authors-table-data"; +export * from "@/data/stations-table-data"; diff --git a/src/data/stations-table-data.js b/src/data/stations-table-data.js new file mode 100644 index 00000000..efa4df2f --- /dev/null +++ b/src/data/stations-table-data.js @@ -0,0 +1,49 @@ +export const stationsTableData = [ + { + capacity: 68.04, + gridConnectionDate: "2021-09-23T08:48:29+07:00", + latitude: "16.209858", + longitude: "103.280011", + plantAddress: "ปั๊มน้ำมัน ปตท.ตักสิลา", + plantCode: "NE=50453264", + plantName: "PTT E5" + }, + { + capacity: 651.7, + gridConnectionDate: "2024-02-28T01:00:00+07:00", + latitude: "7.525556", + longitude: "99.512500", + plantAddress: "ประเทศไทยอ.กันตังโคกยาง92110", + plantCode: "NE=51609908", + plantName: "KANTANG 2" + }, + { + capacity: 113.85, + gridConnectionDate: "2022-07-12T11:30:04+07:00", + latitude: "13.325294", + longitude: "100.965045", + plantAddress: "39/1 หมู่1 ต.ห้วยกะปิ อ.เมือง จ.ชลบุรี", + plantCode: "NE=50216036", + plantName: "อาคารชลประทีปสินทรัพย์(office CCP)" + }, + { + capacity: 623.7, + gridConnectionDate: "2024-05-27T16:33:59+07:00", + latitude: "16.423056", + longitude: "102.834444", + plantAddress: "ประเทศไทยอำเภอเมืองขอนแก่นในเมืองแฟรี่พลาซ่า", + plantCode: "NE=52060133", + plantName: "Fairy Plaza KK" + }, + { + capacity: 1596.0, + gridConnectionDate: "2024-02-27T01:00:00+07:00", + latitude: "13.428889", + longitude: "101.020278", + plantAddress: "ประเทศไทยอ.เมืองชลบุรีคลองตำหรุอมตะ ซิตี้ ชลบุรี", + plantCode: "NE=51602716", + plantName: "IJTT-HEAD OFFICE" + }, +]; + +export default stationsTableData; diff --git a/src/pages/dashboard/fetch.jsx b/src/pages/dashboard/fetch.jsx new file mode 100644 index 00000000..59074f55 --- /dev/null +++ b/src/pages/dashboard/fetch.jsx @@ -0,0 +1,191 @@ +import { + Button, + Card, + CardHeader, + CardBody, + Typography, + Avatar, + Chip, + Tooltip, + Progress, +} from "@material-tailwind/react"; +import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; +import { stationsTableData } from "@/data"; +import { useEffect, useState } from "react"; +import { Pagination } from "@/components/Pagination"; + +const URL = "https://sg5.fusionsolar.huawei.com/thirdData/stations"; +const TOKEN = "n-aps57x9fnv08tc6rld0b7wao9cel8btic9pg9clf3w1c2qrzdfo6tgs5g41i1cc7btiks6an461gnxtj5ctiilarvvpehcqm3tbsdj2p06fxc6g81gmrtcvude1ceojt"; + +export function Fetch() { + + const [pageNo,setPageNo] = useState(1); + const [startTime,setStartTime] = useState(); + const [endTime,setEndTime] = useState(); + + const postData = { + pageNo: pageNo//, + //startTime: startTime, + //endTime: endTime + }; + useEffect(async ()=> { + + function getStations(){} + debugger; + console.log(JSON.stringify(postData)); + const response = await fetch(URL,{ + method: 'POST', + headers: { + 'Content-Type':'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Credentials': 'true', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Max-Age':'86400', + 'xsrf-token':TOKEN + }, + body: JSON.stringify(postData) + }); + const data = await response.json(); + console.log(data); + } + ); + + return ( +
+ + + + + Stations Table + + + + + + + {["Plant Name", "Code", "Address", "longitude", "latitude", "Capacity","Grid Date",""].map( + (el) => ( + + ) + )} + + + + {stationsTableData.map( + ({ plantName, plantCode, plantAddress, longitude, latitude, capacity, gridConnectionDate }, key) => { + const className = `py-3 px-5 ${ + key === stationsTableData.length - 1 + ? "" + : "border-b border-blue-gray-50" + }`; + + return ( + + + + + + + + + + + ); + } + )} + +
+ + {el} + +
+
+ + + {plantName} + +
+ 		+ + {plantCode} + + + + {plantAddress} + + + + {longitude} + + + + {latitude} + + + + {capacity} + + + + {gridConnectionDate} + + + + + +
+ + + +
+ ); +} + +export default Fetch; diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index 7651895e..6bcf7c56 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -1,4 +1,5 @@ export * from "@/pages/dashboard/home"; export * from "@/pages/dashboard/profile"; export * from "@/pages/dashboard/tables"; +export * from "@/pages/dashboard/fetch"; export * from "@/pages/dashboard/notifications"; diff --git a/src/pages/dashboard/tables.jsx b/src/pages/dashboard/tables.jsx index 3d453ed7..ba650dfb 100644 --- a/src/pages/dashboard/tables.jsx +++ b/src/pages/dashboard/tables.jsx @@ -9,7 +9,8 @@ import { Progress, } from "@material-tailwind/react"; import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; -import { authorsTableData, projectsTableData } from "@/data"; +import { authorsTableData, projectsTableData, stationsTableData } from "@/data"; +import { format } from "prettier"; export function Tables() { return ( @@ -214,6 +215,121 @@ export function Tables() { + + + + Stations Table + + + + + + + {["Plant Name", "Code", "Address", "longitude", "latitude", "Capacity","Grid Date",""].map( + (el) => ( + + ) + )} + + + + {stationsTableData.map( + ({ plantName, plantCode, plantAddress, longitude, latitude, capacity, gridConnectionDate }, key) => { + const className = `py-3 px-5 ${ + key === stationsTableData.length - 1 + ? "" + : "border-b border-blue-gray-50" + }`; + + return ( + + + + + + + + + + + ); + } + )} + +
+ + {el} + +
+
+ + + {plantName} + +
+ 		+ + {plantCode} + + + + {plantAddress} + + + + {longitude} + + + + {latitude} + + + + {capacity} + + + + {gridConnectionDate} + + + + + +
+ + ); } diff --git a/src/routes.jsx b/src/routes.jsx index 3a5a8da0..e76b1a67 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -6,7 +6,7 @@ import { ServerStackIcon, RectangleStackIcon, } from "@heroicons/react/24/solid"; -import { Home, Profile, Tables, Notifications } from "@/pages/dashboard"; +import { Home, Profile, Tables, Fetch, Notifications } from "@/pages/dashboard"; import { SignIn, SignUp } from "@/pages/auth"; const icon = { @@ -35,6 +35,12 @@ export const routes = [ path: "/tables", element: , }, + { + icon: , + name: "fetch", + path: "/fetch", + element: , + }, { icon: , name: "notifications", diff --git a/src/widgets/layout/navbar.jsx b/src/widgets/layout/navbar.jsx index ba0bd4c7..e6a18b70 100644 --- a/src/widgets/layout/navbar.jsx +++ b/src/widgets/layout/navbar.jsx @@ -83,7 +83,7 @@ export function Navbar({ brandName, routes, action }) { } Navbar.defaultProps = { - brandName: "Material Tailwind React", + brandName: "KK Energy resources co,. ltd", action: (