From daa91e0c0a48d60483dc1022b27b16f77f644cf8 Mon Sep 17 00:00:00 2001 From: Li Yuan Date: Sun, 19 Mar 2023 23:10:27 +0800 Subject: [PATCH 1/2] Created Crowd Analyzer Page --- frontend/src/.vscode/settings.json | 2 + frontend/src/assets/searchIcon.svg | 1 + .../components/CrowdAnalyzer/SearchBar.tsx | 48 ++++++++ frontend/src/routes/CrowdAnalyzer/index.tsx | 110 ++++++++++++++++++ frontend/src/routes/Routes.tsx | 8 ++ 5 files changed, 169 insertions(+) create mode 100644 frontend/src/.vscode/settings.json create mode 100644 frontend/src/assets/searchIcon.svg create mode 100644 frontend/src/components/CrowdAnalyzer/SearchBar.tsx create mode 100644 frontend/src/routes/CrowdAnalyzer/index.tsx diff --git a/frontend/src/.vscode/settings.json b/frontend/src/.vscode/settings.json new file mode 100644 index 000000000..2c63c0851 --- /dev/null +++ b/frontend/src/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} diff --git a/frontend/src/assets/searchIcon.svg b/frontend/src/assets/searchIcon.svg new file mode 100644 index 000000000..cb883b395 --- /dev/null +++ b/frontend/src/assets/searchIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/CrowdAnalyzer/SearchBar.tsx b/frontend/src/components/CrowdAnalyzer/SearchBar.tsx new file mode 100644 index 000000000..61ecee023 --- /dev/null +++ b/frontend/src/components/CrowdAnalyzer/SearchBar.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import styled from 'styled-components' + +import SearchIcon from '../../assets/searchIcon.svg' + +const SearchContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0px; + gap: 8px; +` + +const StyledButton = styled.img` + width: 18.75px; + max-height: 18.75px; +` +const StyledBox = styled.div` + box-sizing: border-box; + background: #e4e0e091; + border-radius: 20px; + width: 300px; + height: 35px; + display: flex; + align-items: center; +` +const TextContainer = styled.div` + padding-left: 10px; + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + font-size: 15px; + color: #807d7d; + line-height: 20px; +` +const SearchBar = ({ text }: { text?: string }) => { + return ( + + + {text} + + + + ) +} + +export default SearchBar diff --git a/frontend/src/routes/CrowdAnalyzer/index.tsx b/frontend/src/routes/CrowdAnalyzer/index.tsx new file mode 100644 index 000000000..0e2b49660 --- /dev/null +++ b/frontend/src/routes/CrowdAnalyzer/index.tsx @@ -0,0 +1,110 @@ +import React from 'react' +import { useHistory } from 'react-router-dom' +import styled from 'styled-components' +import { Icon } from 'antd-mobile' +import PullToRefreshRH from '../../components/PullToRefreshRH' +import BottomNavBar from '../../components/Mobile/BottomNavBar' +import SearchBar from '../../components/CrowdAnalyzer/SearchBar' + +const NavBarIcons = styled(Icon)` + &.am-icon-md { + width: 35px; + height: 35px; + } + + margin-left: 0.5rem; + width: 35px; + height: 35px; + position: fixed; +` + +const CrowdAnalyzerBarContainer = styled.div` + position: fixed; + width: 100%; + display: flex; + background-color: #ffffff; + align-items: center; + top: 0; + padding-top: env(safe-area-inset-top); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); +` + +const MainContainer = styled.div` + margin-top: 45px; +` + +const TabContainer = styled.div` + display: flex; + width: 100%; + margin: 0 15%; +` + +const DescriptionContainer = styled.div` + margin-top: 300px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 50px; +` + +const LevelContainer = styled.div` + font-family: 'Lato'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 20px; +` + +const LevelValueContainer = styled.div` + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 20px; +` +const CrowdAnalyzerTabContainer = styled.div` + flex: 50%; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; + background-color: #ffffff; + color: '#000000'; + font-family: 'Lato'; + font-style: normal; + font-weight: 700; + font-size: 22px; + height: 20px; +` + +export default function CrowdAnalyzerPage({ onLeftClick }: { onLeftClick?: () => void }) { + const title = 'Crowd Analyzer' + const level = 'Current level:' + const value = 'High - 98%' + const history = useHistory() + + return ( + + + { + onLeftClick ? onLeftClick() : history.goBack() + }} + /> + + {title} + + + + + + {level} + {value} + + + + + ) +} diff --git a/frontend/src/routes/Routes.tsx b/frontend/src/routes/Routes.tsx index e71a9a44b..7ed4072b5 100644 --- a/frontend/src/routes/Routes.tsx +++ b/frontend/src/routes/Routes.tsx @@ -109,6 +109,9 @@ export enum PATHS { //GYM GYM_MAIN = '/gym', + + //CROWD_ANALYZER + CROWD_ANALYZER = '/crowd', } //DOCUMENTATION @@ -212,6 +215,9 @@ const Payment = React.lazy(() => import(/* webpackChuckName: "Payment" */ './Sup //GYM const Gym = React.lazy(() => import(/* webpackChunckName: "Gym" */ './GymPage')) + +//CROWD_ANALYZER +const CrowdAnalyzer = React.lazy(() => import(/* webpack: "CrowdAnalyzer" */ './CrowdAnalyzer')) export default class Routes extends React.Component { render() { return ( @@ -284,6 +290,8 @@ export default class Routes extends React.Component { + + From ba2bbc91557f5eb8793a0431b24917f95d66e6a8 Mon Sep 17 00:00:00 2001 From: Li Yuan Date: Thu, 23 Mar 2023 21:09:25 +0800 Subject: [PATCH 2/2] Updated the page --- .../components/CrowdAnalyzer/SearchBar.tsx | 5 ++ frontend/src/routes/CrowdAnalyzer/index.tsx | 52 ++++++++++++++----- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/CrowdAnalyzer/SearchBar.tsx b/frontend/src/components/CrowdAnalyzer/SearchBar.tsx index 61ecee023..0cb4ed009 100644 --- a/frontend/src/components/CrowdAnalyzer/SearchBar.tsx +++ b/frontend/src/components/CrowdAnalyzer/SearchBar.tsx @@ -34,6 +34,11 @@ const TextContainer = styled.div` color: #807d7d; line-height: 20px; ` +/** + * @returns A search box + * + * @example + */ const SearchBar = ({ text }: { text?: string }) => { return ( diff --git a/frontend/src/routes/CrowdAnalyzer/index.tsx b/frontend/src/routes/CrowdAnalyzer/index.tsx index 0e2b49660..3f82b2a1f 100644 --- a/frontend/src/routes/CrowdAnalyzer/index.tsx +++ b/frontend/src/routes/CrowdAnalyzer/index.tsx @@ -31,6 +31,12 @@ const CrowdAnalyzerBarContainer = styled.div` ` const MainContainer = styled.div` + background-color: #fff; + min-height: 100vh; + height: 100%; + width: 100vw; + display: flex; + flex-direction: column; margin-top: 45px; ` @@ -40,12 +46,14 @@ const TabContainer = styled.div` margin: 0 15%; ` -const DescriptionContainer = styled.div` - margin-top: 300px; - display: flex; - justify-content: space-between; - align-items: center; - padding: 50px; +const FacilityNameContainer = styled.div` + color: '#000000'; + font-family: 'Lato'; + font-style: normal; + font-weight: 700; + font-size: 22px; + position: absolute; + margin: 15% 10%; ` const LevelContainer = styled.div` @@ -54,6 +62,10 @@ const LevelContainer = styled.div` font-weight: 700; font-size: 18px; line-height: 20px; + margin-left: 30px; + top: 50%; + margin: 15% 10%; + position: absolute; ` const LevelValueContainer = styled.div` @@ -62,6 +74,11 @@ const LevelValueContainer = styled.div` font-weight: 400; font-size: 18px; line-height: 20px; + margin-right: 30px; + top: 50%; + right: 5%; + margin: 15% 10%; + position: absolute; ` const CrowdAnalyzerTabContainer = styled.div` flex: 50%; @@ -77,11 +94,19 @@ const CrowdAnalyzerTabContainer = styled.div` font-size: 22px; height: 20px; ` - -export default function CrowdAnalyzerPage({ onLeftClick }: { onLeftClick?: () => void }) { +/** + * # CreateCrowdAnalyzerPage + * Path: '/crowd' + * + * ## Page Description + * This page is accessed to check crowd analytics. + * + */ +const CrowdAnalyzerPage = ({ onLeftClick }: { onLeftClick?: () => void }) => { const title = 'Crowd Analyzer' const level = 'Current level:' const value = 'High - 98%' + const facility = 'Gym' const history = useHistory() return ( @@ -97,14 +122,17 @@ export default function CrowdAnalyzerPage({ onLeftClick }: { onLeftClick?: () => {title} + - - {level} - {value} - + + {facility} + {level} + {value} ) } + +export default CrowdAnalyzerPage