Skip to content

Commit

Permalink
💄Dashboard nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@noeypatt
noeypatt committed Apr 26, 2020
1 parent f615bb0 commit 3ca054d
Show file tree
Hide file tree
Showing 9 changed files with 242 additions and 257 deletions.
29 changes: 1 addition & 28 deletions components/Empty.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,9 @@
import React, { useState, useEffect } from 'react'
import NavBar from './layout/nav'
import { useMediaQuery } from 'react-responsive';
import React from 'react'
import Link from 'next/link';


const Empty = () => {

const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })

const [home, setHome] = useState(
[
{ name: "เกี่ยวกับเรา", href: "/index/about" },
{ name: "สังคมผู้สูงอายุ", href: "/index/society" },
{ name: "เบี้ยยังชีพ", href: "/index/allowance" },
{ name: "ติดต่อ", href: "/index/contact" },
{ name: "เข้าสู่หน้าหลัก", href: "/main" }
]
)

const [homeMin, setHomeMin] = useState(
[
{ name: "เกี่ยวกับเรา", href: "/index/about" },
{ name: "สังคมผู้สูงอายุ", href: "/index/society" },
{ name: "เบี้ยยังชีพ", href: "/index/allowance" },
{ name: "ติดต่อ", href: "/index/contact" },
{ name: "เข้าสู่หน้าหลัก", href: "/main" }
]
)

return (
<div className="warp-empty">
<NavBar name="empty" tab={isSmallScreen ? homeMin : home} />
<div className="content-empty">
<img src="/static/empty.jpg" alt="empty" />
<div className="title-empty">
Expand Down
13 changes: 5 additions & 8 deletions components/layout/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import NavBar from './nav';

const { Header, Sider, Content } = Layout;

const Dashboard = () => {
const Dashboard = props => {

const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
const isTablet = useMediaQuery({ minWidth: 769 })
Expand All @@ -35,7 +35,8 @@ const Dashboard = () => {

const [sidebar, setSidebar] = useState(
[
{ name: "ข้อมูลทั่วไป", href: "/main" },
{ name: "หน้าหลัก", href: "/main" },
{ name: "ข้อมูลทั่วไป", href: "/main/people" },
{ name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
{ name: "ข้อมูลด้านสังคม", href: "/main/social" },
{ name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
Expand Down Expand Up @@ -126,7 +127,7 @@ const Dashboard = () => {
</div>
}

<Menu defaultSelectedKeys={['0']}>
<Menu >
{
sidebar.map((item, index) => (
<Menu.Item key={index}>
Expand Down Expand Up @@ -171,11 +172,7 @@ const Dashboard = () => {

<Content className="site-layout-background" >


<Hospital />



{props.children}
</Content>
</Layout>
</Layout>
Expand Down
4 changes: 3 additions & 1 deletion pages/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ const MainPage = () => {
{
typeof document === 'undefined' ?
null :
<Dashboard />
<Dashboard>

</Dashboard>
}
</React.Fragment>
)
Expand Down
78 changes: 40 additions & 38 deletions pages/main/economy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,56 +54,58 @@ const Economy = () => {
<title>Eldery Dashboard</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<div className="warp-main">
{
!tokenError ?
<React.Fragment>
<Dashboard />
<div className="page-content-main">
<div className="container-fluid-main">
<h1 className="text-center">ข้อมูลด้านเศรษฐกิจ</h1>
<h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>
{
isLaptop || isTablet ?
<div className="info-main">
<div className="warp-chart-main ">
<div className="chart-row">
<PieEconomy onToken={statusToken} />
<BarEconomy />
</div>
<div className="chart-row">
<PieEconomy2 />
<BarEconomy2 />
</div>

<div className="chart-row">
<BarEconomy3 />
</div>
</div>
</div>
:
isMobile ?
<Dashboard>
<div className="warp-main">
{
!tokenError ?
<React.Fragment>
<div className="page-content-main">
<div className="container-fluid-main">
<h1 className="text-center">ข้อมูลด้านเศรษฐกิจ</h1>
<h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>
{
isLaptop || isTablet ?
<div className="info-main">
<div className="warp-chart-main ">
<div className="chart-col">
<div className="chart-row">
<PieEconomy onToken={statusToken} />
<BarEconomy />
</div>
<div className="chart-row">
<PieEconomy2 />
<BarEconomy2 />
</div>

<div className="chart-row">
<BarEconomy3 />
</div>
</div>
</div>
:
null
}
isMobile ?
<div className="info-main">
<div className="warp-chart-main ">
<div className="chart-col">
<PieEconomy onToken={statusToken} />
<BarEconomy />
<PieEconomy2 />
<BarEconomy2 />
<BarEconomy3 />
</div>
</div>
</div>
:
null
}
</div>
</div>
</div>
</React.Fragment>
:
<Empty />
}
</div>
</React.Fragment>
:
<Empty />
}
</div>
</Dashboard>

</React.Fragment>
}

Expand Down
93 changes: 48 additions & 45 deletions pages/main/hospital.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,39 +63,18 @@ const Hospital = () => {
<title>Eldery Dashboard</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<div className="warp-main">
{
!tokenError ?
<React.Fragment>
{/* <Dashboard onStatusMain={statusMain} statusMain={status} /> */}
<div className="page-content-main">
<div className="container-fluid-main">
<h1 className="text-center">ข้อมูลด้านสุขภาพ</h1>
<h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>

{isLaptop ?
<div className="info-main">
<div className="warp-chart-main ">
<div className="chart-row">
<PieHospital onToken={statusToken} />
<BarHospital />
</div>

<div className="chart-row">
<PieHospital2 />
<BarHospital2 />
</div>

<div className="chart-row">
<PieHospital3 />
<BarHospital3 />
</div>

</div>

</div>
:
isTablet ?
<Dashboard>
<div className="warp-main">
{
!tokenError ?
<React.Fragment>
{/* <Dashboard onStatusMain={statusMain} statusMain={status} /> */}
<div className="page-content-main">
<div className="container-fluid-main">
<h1 className="text-center">ข้อมูลด้านสุขภาพ</h1>
<h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>

{isLaptop ?
<div className="info-main">
<div className="warp-chart-main ">
<div className="chart-row">
Expand All @@ -117,30 +96,54 @@ const Hospital = () => {

</div>
:
isMobile ?
isTablet ?
<div className="info-main">

<div className="warp-chart-main">
<div className="chart-col">
<div className="warp-chart-main ">
<div className="chart-row">
<PieHospital onToken={statusToken} />
<BarHospital />
</div>

<div className="chart-row">
<PieHospital2 />
<BarHospital2 />
</div>

<div className="chart-row">
<PieHospital3 />
<BarHospital3 />
</div>

</div>

</div>
:
null
}
isMobile ?
<div className="info-main">

<div className="warp-chart-main">
<div className="chart-col">
<PieHospital onToken={statusToken} />
<BarHospital />
<PieHospital2 />
<BarHospital2 />
<PieHospital3 />
<BarHospital3 />
</div>
</div>
</div>
:
null
}
</div>
</div>
</div>
</React.Fragment>
:
<Empty />
}
</div>
</React.Fragment>
:
<Empty />
}
</div>
</Dashboard>

</React.Fragment>
}
</React.Fragment>
Expand Down
Loading

1 comment on commit 3ca054d

@vercel
Copy link

@vercel vercel bot commented on 3ca054d Apr 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.